با استفاده از ویژگی top می توان فاصله لبه بالایی عناصری که position گرفته اند را از مبداشان تعیین کرد. برای درک این ویژگی باید با ویژگی position کاملا آشنا باشید. به ویژگی هایی نظیر top ویژگی های آفست می گویند. دیگر ویژگی های مربوط به آفست عناصر left, right, bottom می باشند. ویژگی های […]
با استفاده از ویژگی position می توان مکان یک عنصر را در صفحه مشخص کرد. از طریق این ویژگی می توانید تصمیم بگیرید که آیا مکان عنصر نسبت به flow صفحه مشخص شود (حالت پیشفرض) یا اینکه در عین حالی که جایگاهش در flow حفظ می شود مکانش تغییر کند و یا اینکه مکان آن […]
در این مطلب قصد ساخت افکتی برای زمانی که متنی را hover می کنیم, داریم. این ترفند توسط wesbos@ در این پست معرفی شده است. دموی نهایی See the Pen Fun hover effect by Mojtaba Seyedi (@seyedi) on CodePen. نحوه ساخت اول از همه با استفاده از گرادینت خطی به حالت […]
برای پیاده سازی سه بعدی در دنیای وب چندین راه حل وجود دارد که معروف ترین آنها استفاده از WebGL می باشد, اما کار با آن آسان نیست. مثلا ساخت یک مکعب ساده با استفاده از WebGL بصورت خام شاید صدها خط جاوااسکریپت نیاز داشته باشد. علاوه بر بحث دشواری استفاده از آن برای ساخت […]
ویژگی transform-style تعیین می کند که فرزندان یک عنصر در فضای سه بعدی عنصر نگهدارنده یا همان پدرشان بمانند یا حالت دو بعدی داشته باشند. فرض کنید می خواهید فرزندان عنصری که در فضای سه بعدی می باشد را نیز در فضای سه بعدی به حرکت در بیاورید. این ویژگی حالت سه بعدی عنصر پدر […]
ویژگی backface-visibility تعیین می کند زمانی که عنصر در فضای سه بعدی توسط ویژگی transform حرکت داده می شود پشت آن قابل مشاهده توسط بیننده باشد یا نه. در حالت پیشفرض اگر عنصری در فضای سه بعدی بچرخد پشت آن عنصر نیز قابل مشاهده است اما اگر مقدار hidden را برای این ویژگی تنظیم کنیم, […]
با استفاده از ویژگی perspective-origin می توان موقعیتی که بیننده در آن فضای سه بعدی را مشاهده می کند را تعیین کرد. نقطه ای که این ویژگی بر اساس محورهای X و Y تعیین می کند, توسط ویژگی perspective به عنوان نقطه گریز عنصر در فضای سه بعدی مورد استفاده قرار می گیرد. نقطه گریز […]
از ویژگی perspective برای فعال کردن فضای سه بعدی بر روی یک عنصر استفاده می شود, که در این صورت فرزندان آن عنصر می توانند در فضا و موقعیت سه بعدی قرار بگیرند. بواسطه تغییر مکان یا وضعیت عنصر بر روی محور Z می توانید حس عمق را برای یک عنصر بوجود آورید. مثلا اگر […]
با استفاده از تابع translateZ که برای ویژگی transform تعیین می شود می توان یک عنصر را در فضای سه بعدی در جهت محور Z جابجا کرد. مقداری که این تابع می پذیرد می تواند واحد طولی یا درصدی داشته باشد. و این مقدار باعث حرکت عنصر در راستای محور Z می شود. در زیر […]
با استفاده از تابع translate3d که برای ویژگی transform تعیین می شود می توان یک عنصر را در فضای سه بعدی حرکت داد. این تابع نسخه سه بعدی تابع ()translate می باشد که با استفاده از بردار [tx, ty, tz] باعث تغییر مکان عنصر می شود که در اینجا tx انتقال در راستای محور X […]
