شناخت CSS3 و قابلیت های آن - بخش دوم

در بخش قبلی ( شناخت CSS3 و قابلیت‌های آن - بخش اول) کمی درباره CSS3 و قابلیتهای آن نوشتم. در این مقاله قصد دارم امکانات بیشتری از CSS3 و قابلیت‌های آن را برای شما بازگو کنم.

کسانی که به نوعی با طراحی سایت و قالب سروکار دارند به خوبی میدانند CSS در ساختار یک قالب ارزش بسیاری دارد به خصوص از زمانی که پدیده ای به نام Web2 پا به عرصه طراحی گذاشت.

CSS هم مانند سایر زبان های برنامه نویسی، ورژن های مختلفی دارد. جدیدترین ورژن این زبان، ورژن سوم آن است که اخیرا ذهن طراحان را مشغول کرده است.

در نسخه ی جدید CSS یعنی CSS3 قابلیت هایی گنجانده شده است که شاید حیرت همگان را برانگیزد.

قلم ( Font ) های زیبا را بدون محدودیت استفاده کنید:

یکی از مشکلات وبلاگنویسان این است که مجبورند از نوع خاصی قلم (Font) در نوشته‌های خود استفاده کنند. به عنوان مثال در سایت‌های ایرانی استفاده از قلم (Font) های Tahoma و Arial رایج است (البته نه به صورت دلبخواهی، بلکه مجبورند از این قلم ها استفاده کنند تا در مشکلی در نمایش صفحه در کامپیوترهای مختلف پیش نیاید). همانطور که میدانید، قلم (Font) انتخاب شده برای مطالب یک سایت یا یک وبلاگ باید همگانی باشد یعنی همه کسانی که سایت یا وبلاگ شما را مشاهده میکنند، باید آن قلم (Font) را در کامپیوتر خود داشته باشند و برای سایت‌های فارسی چه قلمی بهتر از Tahoma ؟ اما اکثر وبلاگنویسان ترجیح میدهند از یک فونت زیبای فارسی به جای این فونت استفاده کنند ولی افسوس که نمیتوانند چون سایت یا وبلاگ آنها از حالت استاندارد خارج خواهد شد.
در CSS3 این مشکل نیز برطرف شده است. یعنی شما با یک دستور ساده میتوانید از هر قلمی که خواستید در سایت یا وبلاگ خود استفاده کنید. چگونه؟ با استفاده از کد زیر:

@font-face {

  font-family: "B Nazanin";

  src: url("http://www.faroxa.com/fonts/bnazanin.ttf") format("truetype");

  }

کد بالا کاملا مشخص است و نیازی به توضیح ندارد. در خط اول به مرورگر میگوید هرجا که از فونت B_Nazanin استفاده کردم، فونت را از آدرسی که در خط دوم داده‌ام بارگذاری کن. برای استفاده از این فونت هم کافی است فونت B_Nazanin را به عنوان فونت در برگه سبک‌دهی خود (Style.css) انتخاب نمایید. مانند مثال زیر:

.content p {

  font-family: "B Nazanin"; 

  ...

  }

پشتیبانی از فرمت‌های RGB و HSL و خاصیت Opacity برای داشتن سایتی زیباتر:

RGB و HSL دو فرمت برای شناسایی رنگها هستند که تا قبل از این نمی‌شد از آنها در اسناد CSS استفاده کرد ولی هم اکنون به لطف CSS3 میتوانید به راحتی کدهای رنگ بیشتری را در سایت خود بکار ببرید. مانند مثال زیر:

div { background-color: rgb(255, 0, 0); }

div { background-color: hsl(240, 100%, 50%); }

اما اگر میخواهید به رنگ خودتان، خاصیت Opacity یا شفافیت بدهید، میتوانید از دو فرمت RGBA و HSLA استفاده کنید. همانطور که تا کنون متوجه شده اید، در آخر RGB یک کلمه A اضافه شده است که میزان شفافیت رنگ شما را مشخص میکند و مقدار آن بین صفر و یک است.

div { background-color: hsla(240, 100%, 50%, 0.5); }

div { background-color: rgba(255, 0, 0, 0.5); }

اگر صفر را انتخاب نمایید رنگ انتخاب شده را محو خواهید کرد به اصطلاح پس زمینه شما Transparent خواهد شد. اگر شما از مقدار 0.5 استفاده کنید، هم رنگ انتخاب شده را در صفحه خواهید دید و هم تصویر یا زمینه زیرین را. برای درک بیشتر این موضوع به تصویر و کد زیر نگاه کنید.

div { background-color: rgba(190, 7, 7, 0.5); }

در اینجا، ما در رنگ قرمز، مقدار Opacity یا قسمت A را 0.5 انتخاب کرده ایم. همانطور که مشاهده میکنید، تصویر زیرین نیز به صورت مات، همچنان نمایان است.
اگر هم مقداری برای Opacity انتخاب نکنیم، چیزی از تصویر زیرین نمایان نخواهد شد. برای درک بیشتر این موضوع به کد و تصویر زیر نگاه کنید:

div { background-color: rgb(190, 7, 7); }