تا به اینجا با بسیاری از واحد های اندازه گیری در css آشنا شده اید که میتوانید در این دو لینک مطالعه فرمایید . ( لینک 1 ) و ( لینک 2 ) .

در این پست با 4 واحد اندازه گیری بسیار جدید آشنا خواهیم شد که میتواند بسیاری از مشکلاتی که تاکنون در طراحی وب سایت به صورت ریسپانسیو داشته ایم برطرف شود .

با واحد های vh  و vw می توانیم عناصر صفحه را متناسب با محدوده نمایش کاربر , بدون استفاده از جاوا اسکریپت نمایش بدهیم. هنگام ایجاد صفحات رسپاسیو بیشتر از واحد درصد (%) استفاده میکنیم , اما واحد درصد (%) اندازه ها را بر حسب نزدیک ترین والد مشخص میکند. شاید ما بخواهیم سایز یک قسمت رو بر حسب سایز پنجره ی مرورگر (قسمت قابل رویت مرورگر) مشخص کنیم . اینجا دو واحد اندازه گیری vw و vh به کمک ما می آیند .

در ادامه بجر این دو واحد , با دو واحد دیگر به نام های vmin و vmax آشنا میشوید .

در این پست از سایت اسکریپت دات کام , قصد آموزش ساخت یک پنل اریب تمام صفحه با پراپرتی بسیار جدید Flex را دارم .

این بنل بدون استفاده از جی کوئری و جاوا اسکریپت و تمام آن به صورت Html5 و Css3 میباشد .

ضمنا این پنل به صورت کاملا ریسپانسیو میباشد .

در ادامه میتوانید علاوه بر آموزش , دموی آنلاین آن را مشاهده فرمایید .

در این پست قصد ساخت یک منوی کشویی یا همان آکاردئونی به صورت فلت دیزاین را برای شما عزیزان آماده ساخته ام که امیدوارم مورد استفاده قرار گیرد .

این منو به صورت پیش فرض دارای ۵ قسمت می باشد که به راحتی میتوانید آن را بیشتر و کمتر نمایید .

در ادامه به آموزش خواهیم پرداخت …

فرم ورود به همراه پس زمینه Live و متحرک

این فرم به صورت html5 و css3 طراحی شده است و محیط زیبا و جذابی را برای فرم های ورود به وب سایت را برای کاربران فراهم میکنید .

هم اکنون میتوانید این قالب تک Page را از اسکریپت دات کام دانلود نمایید …

ترفند درج Underline Gradient در حالت Hover به وسیله css3

شما با استفاده از این ترفند میتوانید , یک خط زیبا به صورت Gradient در زمانیکه کاربران بر روی لینک ها Hover میکنند را داشته باشید .

همان طور که میدانید به صورت پیش فرض یک خط آبی رنگ معمولی و ساده زیر لینک ها نمایان میشود که با ترفند زیر میتوانید این خط را از بین برده و خطی به دلخواه خود را درج نمایید .

در این پست یک صفحه Intro آماده را برای شما کاربران گرامی آماده ساخته ام که انشالله مورد پسند شما دوستان قرار گیرد .

این صفحه به صورت تک پیچ بوده و به صورت html5 و css3 می باشد که دارای افکت زیبایی هست .

در این صفحه , فقط یک عکس به کار رفته است که به صورت css sprites تکه هایی از آن جدا شده و در 4 قالب قرار گرفته است که شما میتوانید به راحتی عکس را تغییر داده و از آن استفاده نمایید .

در این پست به تفاوت نحوه ی صدا زدن Element , Id , Class و Attribute در سی اس اس و جاوا اسکریپت میپردازیم .

زمانی که ما میخواهیم در زبان Css و یا جاوا اسکریپت , یک عنصر خاصی را صدا زده و به آن خاصیت هایی بدهیم , باید از روش های مختلفی ( در جاوا اسکریپت ) استفاده کنیم که در زیر بهترین روش آن برای شما طراحان وب سایت عزیز آورده شده است …

در زیر ۴ روش معمول در دو زبان بررسی و مقایسه شده است …

طبق ایمیل های فراوانی که برای معرفی افکت های پارالاکس در وب سایت داشتم , تصمیم گرفتم از این به بعد بیشتر به این نوع افکت های زیبا بپردازم و مطالب بیشتری در این زمینه به صورت آموزشی منتشر کنم .

پارالاکس (Parallax)  در لغت به معنای اختلاف منظر است ولی در طراحی وب به معنی تکنیک‌های پیمایش در صفحه برای عمق بخشی به وب سایت است.

در اولین پستی که در رابطه با این نوع طراحی منتشر میکنم , یک افکت زیبا که فقط با html5 و css3 طراحی شده است را برای شما کاربران گرامی آماده ساخته ام .

این افکت میتواند پس زمینه شما را به صورت دایره های چند بعدی تبدیل کرده که با تغییر مکان نمای ماوس , دایره ها به صورت زیبایی جابجا میشوند .