قابلیت های کاربردی CSS3 در طراحی وب

چهارشنبه 12 تیر 1392

قابلیت های کاربردی CSS3 در طراحی وب <br/> از زمان معرفی CSS3 (در تاریخ چهاردهم آوریل سال 2000) تا کنون مباحث زیادی در مورد کاربرد قابلیت های این نسخه در طراحی وب بین توسعه دهنده گان وب و علاقمندان به این مسئله رد و بدل شده است،

از زمان معرفی CSS3 (در تاریخ چهاردهم آوریل سال 2000) تا کنون مباحث زیادی در مورد کاربرد قابلیت های این نسخه در طراحی وب بین توسعه دهنده گان وب و علاقمندان به این مسئله رد و بدل شده است، برخی بر این عقیده اند که به کل باید با شیوه سنتی و جلوه های مبتنی بر ابزارهای گرافیکی (مانند فتوشاپ و..)، عناصر تصویری (تصاویر با فرمت png، jpeg و...) و کد نویسی مبتنی بر جاوا اسکریپت (JavaScript) خداحافظی کرد و تمام موارد این چنین را با قابلیت های CSS3 خلق نمود و در مقابل عده ای به دلایل مختلف همچنان روش های سنتی را بهترین و پایدارترین شیوه برای طراحی وب قلمداد می کنند، به هر صورت به نظر می رسد اصرار بر هر دو روش ما را به بیراهه خواهد برد، چرا که نه تکیه صرف بر روش های سنتی کار درستی است و نه استفاده کورکورانه از قابلیت های جدید، از این رو در این آموزش قصد داریم ضمن آشنایی با پاره ای از قابلیت های کاربردی CSS3 در طراحی جلوه های وب، از معایب و محدودیت های آنها نیز آگاه شویم.

نکته: هدف این مطلب آشنایی کلی با برخی کاربردهای CSS3 در طراحی صفحات وب است و لذا بعضا به جهت مفصل بودن مباحث به حداقل ها اکتفا شده، برای آشنایی تخصصی تر با خاصیت ها باید به صورت اختصاصی در مورد آنها جستجو کنید.

قابلیت transition یا انتقال


اولین قابلیتی که در این آموزش به آن می پردازیم transition یا انتقال نام دارد، CSS3 با استفاده از خاصیت transition می تواند در دو رویداد (selector) متفاوت، ویژگی های یک عنصر را تغییر دهد، به طور مثال رنگ، عرض، ارتفاع و...، به مثال زیر توجه کنید.
 
برای دیدن پیش نمایش مثال ها به صورت آنلاین، به انتهای مطلب مراجعه کنید.
توضیح:
- همان طور که ملاحظه می کنید، در CSS3 برای ایجاد قابلیت transition بین حالت عادی و hover، ابتدا خاصیت هایی که دستخوش تغییر می شوند و مدت زمان این تغییر را (به صورت ثانیه یا Second) مشخص می کنیم، سپس در قسمت hover، ویژگی مورد انتظار در این حالت را تنظیم می نمائیم، به این صورت زمانی که کاربر ماوس را بر روی بلاک مورد نظر می برد، در طی 2 ثانیه ویژگی های بلاک (رنگ پس زمینه، ارتفاع، عرض) آرام آرام از حالت عادی به حالت hover تغییر می کند.
- خاصیت transition به صورت پیش فرض در مرورگر سافاری (و برخی نسخه های پائین تر گوگل کروم) پشتیبانی نمی شود و برای این مرورگر باید از پیشوند webkit استفاده نمود، همچنین برای سازگاری بیشتر این خاصیت با نسخه های قدیمی تر مرورگر های فایرفاکس و اپرا، بهتر است از پیشوند moz و o نیز استفاده کنیم.
محدودیت ها:
با وجود اینکه این قابلیت در اکثر مرورگرهای جدید به خوبی عمل می کند، اما مرورگر اینترنت اکسپلورر تنها از نسخه 10 به بعد از آن پشتیبانی می کند.

ایجاد animation یا تصویر متحرک


ایجاد animation یک قابلیت دیگر در CSS3 است که شباهت زیادی به transition دارد اما در مجموع از آن کامل تر و کمی پیچیده تر است، از خاصیت animation معمولا برای تغییر مکان یک عنصر، رنگ و... به صورتی دلخواه و به همراه افکت هایی استفاده می شود، برای خلق یک تصویر متحرک در CSS3 در کنار خاصیت animation، باید از خاصیت دیگری تحت عنوان keyframes@ نیز استفاده نمود، بد نیست ابتدا یک نمونه از کاربرد این قابلیت را بررسی کنیم.
 
توضیح:
- همان طور که از مثال مشخص است، ابتدا به یک کلاس نیازمندیم تا تنظیمات اولیه انیمیشن (نامن انیمیشن، مدت زمان، نوع تکرار و...) را در آن مشخص کنیم.
- سپس در قسمت keyframes، فرم های کلیدی انیمیشن را به صورت درصدی معیین می کنیم، به طور مثال اگر از چهار مقدار درصدی در طول 2 ثانیه استفاده کنیم، در واقع چهار فرم کلیدی ایجاد کرده ایم، خصوصیات انیمیشن، فرم به فرم با توجه به تنظیمات ما تغییر خواهد کرد.
- برای سازگاری خاصیت animation با مرورگرهای خانواده Apple مانند سافاری، کروم و... باید از پیشوند webkit مطابق نمونه بالا استفاده کنیم، همچنین برای سازگاری بیشتر با مرورگرهای خانواده موزیلا (فایرفاکس) و اپرا از پیشوندهای moz و o استفاده می کنیم.
محدودیت ها:
متاسفانه این قابلیت نیز در مرورگر اینترنت اکسپلورر تنها از نسخه 10 و مابعد پشتیبانی می شود.

قابلیت border-radius یا گوشه نرم


در CSS3 این امکان وجود دارد که با استفاده از خاصیت border-radius، عناصری با شعاع گرد شده یا به اصطلاح نرم داشته باشیم، به طور مثال می توان فیلدهای گوشه گرد یا بلاک هایی با شعاع نرم، بدون استفاده از المان های تصویری ساخت، به مثال زیر توجه کنید.
 
این خاصیت از لحاظ پشتیبانی مرورگرها وضعیت بهتری نسبت به سایر خواصی که تا اینجا بررسی کردیم دارد و در نسخه های به روز تمام مرورگرها و همچنین از نسخه 9 و ما بعد اینترنت اکسپلورر پشتیبانی می شود.
نکته: برای سازگاری خاصیت border-radius با نسخه های قدیمی مرورگر فایرفاکس باید از پیشوند moz نیز طبق نمونه بالا استفاده کنیم، همچنین برای اطمینان بیشتر از پشتیبانی شدن آن در نسخه های متفاوت سایر مرورگرها، بهتر است از پیشوندهای webkit و o نیز استفاده کنیم.

قابلیت box-shadow یا جعبه سایه دار


یکی دیگر از خاصیت های کاربردی CSS3، قابلیت ایجاد عناصر سایه دار با استفاده از box-shadow است، بدین معنی که با تنظیم این خاصیت برای یک عنصر، می توان جلوه ای سایه مانند به صورت سفارشی به آن نسبت داد که ناگفته پیدا است تا چه میزان در طراحی صفحات وب مفید خواهد بود، به مثال زیر توجه کنید.
 
این خاصیت در نسخه های به روز تمام مرورگرها و همچنین از نسخه 9 و ما بعد اینترنت اکسپلورر پشتیبانی می شود.
نکته 1: برای سازگاری خاصیت box-shadow با نسخه های قدیمی تر مرورگرها باید از پیشوند moz، webkit و ترجیحا o نیز طبق نمونه بالا استفاده کنیم.
نکته 2: قابلیت دیگری در CSS3 با نام text-shadow وجود دارد که شباهت زیادی به box-shadow دارد، با این تفاوت که text-shadow معمولا در ایجاد سایه برای متن کاربرد دارد.

قابلیت ایجاد عناصر دو بعدی و سه بعدی در CSS3


با معرفی CSS3 امکان ایجاد جلوه های دو بعدی (2D) و سه بعدی (3D) در وب فراهم شده است که هر کدام از آنها شامل خصوصیات زیرمجموعه ای خود هستند، خاصیت های مربوط به ویژگی های 2D عمدتا در دو محور X و Y (افقی و عمودی) و خاصیت های 3D ضمن استفاده از محور X و Y از محور Z (محور عمق در اشیاء سه بعدی) نیز بهره می برد.
نکته: محور Z در اشیاء و محیط های سه بعدی در واقع همان محوری است که از نقطه تلاقی دو محور X و Y می گذرد (جایی که X و Y هر دو صفر هستند) و القا کننده عمق است.
در CSS3 برای خلق جلوه های دو بعدی (2D) از خاصیت های transform و transform-origin با تنظیم متدهای ویژه زیر استفاده می شود:
- متد translate: انتقال یک عنصر از نقطه ای به نقطه دیگر (بر اساس محور X ها و Y ها).
- متد rotate: چرخش یک عنصر از 0 تا 360 درجه.
متد scale: بزرگ نمایی یا کوچک نمایی عنصر در راستای محور X ها و Y ها.
متد skew: کج کردن یک عنصر.
متد matrix: ترکیب تمام متدهای دو بعدی بالا در یک متد.
به مثال زیر توجه کنید.
 
برای دیدن پیش نمایش مثال ها به صورت آنلاین، به انتهای مطلب مراجعه کنید.
همان طور که ملاحظه می کنید، متدهای خاصیت transform از استاندارد مقداردهی خاص خود پیروی می کنند (deg یا درجه) که پیش از این در نسخه های قبلی CSS وجود نداشت.
علاوه بر جلوه های دو بعدی، امکان خلق عناصر سه بعدی (همراه با عمق) نیز در CSS3 فراهم شده است، بدین منظور از خاصیت هایی مانند transform، transform-origin، transform-style، perspective، perspective-origin و backface-visibility در کنار متدهای زیر استفاده می شود:
- متد perspective: تعریف نمای سه بعدی برای عنصر.
- متد rotateX: گردش حول محور X ها.
- متد rotateY: گردش حول محور Y ها.
- متد rotateZ: گردش حول محور Z ها.
- متد rotate3d: گردش حول سه محور X، Y، Z (سه بعدی).
- متد scaleX: بزرگ نمایی یا کوچک نمایی حول محور X ها.
- متد scaleY: بزرگ نمایی یا کوچک نمایی حول محور Y ها.
- متد scaleZ: بزرگ نمایی یا کوچک نمایی حول محور Z ها.
- متد scale3d: بزرگ نمایی یا کوچک نمایی حول سه محور X، Y، Z (سه بعدی).
- متد translateX: انتقال حول محور X ها.
- متد translateY: انتقال حول محور Y ها.
- متد translateZ: انتقال حول محور Z ها.
- متد translate3d: انتقال حول سه محور X، Y، Z (سه بعدی).
- متد matrix3d: ترکیب تمام متدهای سه بعدی بالا در یک متد.
به مثال زیر توجه کنید.
 
همان طور که از کدهای بالا پیدا است، قابلیت perspective خود متکی بر به کارگیری سایر خاصیت های CSS3 مانند transform است و به خودی خود ممکن است تاثیری بر عناصر صفحه نداشته باشد.
متاسفانه پشتیبانی مرورگرها در این زمینه چندان رضایت بخش نیست و تقریبا تمام آنها در قسمتی دچار مشکلاتی هستند.

مثال و پیش نمایش آنلاین


در زیر خاصیت هایی را که در این آموزش بررسی کردیم در قالب یک صفحه وب و به صورت آنلاین قرار داده ایم، ضمن اینکه حتی المقدور مثال های بیشتری نیز به آن اضافه شده.
 
پیش نمایش آنلاین
نکته: خاصیت های CSS3 محدود به موارد گفته شده نیست، اما از آنجایی که در آغاز مطلب نیز اشاره به هدف این آموزش (آشنایی کلی با برخی قابلیت هایی که CSS3 می تواند در اختیارمان قرار دهد) شد، لذا به جهت پرهیز از اطاله کلام، بحث را در همین جا به پایان می بریم.

ایمان مدائنی

نویسنده 1299 مقاله در برنامه نویسان
  • HTML
  • 2k بازدید
  • 1 تشکر

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید