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

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

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

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

در اینجا به معرفی برخی از این ویژگی ها میپردازیم که بسیار جالب و پرکاربرد هستند: 1. استفاده از Gradient در حاشیه ها:
شما میتوانید از خاصیت Gradient در حاشیه‌‌ی کادر خود استفاده کنید. برای مثال تصویر زیر را ببینید:

برای اینکه بتوانید کادری مثل کادر تصویر بالا را ایجاد نمایید باید از کدهای زیر استفاده کنید:


border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;


2. استفاده از تصاویر به جای کد در کادر حاشیه :

در نسخه های قبلی CSS شما فقط میتوانستید از کدهای مخصوص رنگ در حاشیه ( Border ) استفاده کنید ولی در CSS3 میتوانید از تصاویر نیز استفاده نمایید.

برای اینکه بتوان کادری با استفاده از تصاویر ایجاد کرد، از کدهای زیر استفاده میشود :


border-image:
border-top-image
border-right-image
border-bottom-image
border-left-image
border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image یا
border-image: url(border.png) 27 27 27 27 round round;

یا
border-image: url(border.png) 27 27 27 27 round round;


3. ایجاد گوشه های گرد در CSS3 :

در نسخه‌ی جدید CSS یعنی CSS3 شما میتوانید بدون استفاده از هیچگونه تصویری، حاشیه های سایت خود را به صورت منحنی درآورید. البته این قابلیت قبلا هم وجود داشت اما در CSS3 کاملتر شده و تمام نیازهای شما را برطرف میکند.

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

-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius



اگر دوست دارید تمام گوشه ها گرد شوند میتوانید از کد زیر استفاده کنید:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;



4. تصاویر در CSS3 :

یکی از نقص های نسخه قبلی CSS محدودیت کاربر در انتخاب تصاویر پس‌زمینه بود به طوری که شما نمیتوانستید بیش از یک تصویر را به یک div اختصاص دهید ولی در CSS3 شما میتوانید به تعداد دلخواه تصویر به یک div اضافه کنید. به کدهای زیر دقت کنید:


background: url(body-top.gif) top left no-repeat,
url(banner_fresco.jpg) top 11px no-repeat,
url(body-bottom.gif) bottom left no-repeat,
url(body-middle.gif) left repeat-y;


همانطور که می‌بینید، ما چهار تصویر به یک div نسبت داده ایم.



5. اضافه کردن سایه به متن ها:

1. شما میتوانید با استفاده از خصوصیت های CSS3 به متن های خود، سایه نیز اضافه کنید. شاید این یکی از بهترین امکاناتی باشد به در CSS3 گنجانده شده است.

برای اعمال خاصیت بالا، میتوانید از کد زیر استفاده کنید:
text-shadow: 2px 2px 2px #000;