کسانی که به نوعی با طراحی سایت و قالب سروکار دارند به خوبی میدانند CSS در ساختار یک قالب ارزش بسیاری دارد به خصوص از زمانی که پدیده ای به نام Web۲ پا به عرصه طراحی گذاشت.
CSS هم مانند سایر زبان های برنامه نویسی، ورژن های مختلفی دارد. جدیدترین ورژن این زبان، ورژن سوم آن است که اخیرا ذهن طراحان را مشغول کرده است.
در نسخه ی جدید CSS یعنی CSS۳ قابلیت هایی گنجانده شده است که شاید حیرت همگان را برانگیزد.
در اینجا به معرفی برخی از این ویژگی ها میپردازیم که بسیار جالب و پرکاربرد هستند:۱. استفاده از Gradient در حاشیه ها:
شما میتوانید از خاصیت Gradient در حاشیه‌‌ی کادر خود استفاده کنید. برای مثال تصویر زیر را ببینید:

برای اینکه بتوانید کادری مثل کادر تصویر بالا را ایجاد نمایید باید از کدهای زیر استفاده کنید:
border: ۸px solid #۰۰۰;
-moz-border-bottom-colors: #۵۵۵ #۶۶۶ #۷۷۷ #۸۸۸ #۹۹۹ #aaa #bbb #ccc;
-moz-border-top-colors:    #۵۵۵ #۶۶۶ #۷۷۷ #۸۸۸ #۹۹۹ #aaa #bbb #ccc;
-moz-border-left-colors:   #۵۵۵ #۶۶۶ #۷۷۷ #۸۸۸ #۹۹۹ #aaa #bbb #ccc;
-moz-border-right-colors:  #۵۵۵ #۶۶۶ #۷۷۷ #۸۸۸ #۹۹۹ #aaa #bbb #ccc;
padding: ۵px ۵px ۵px ۱۵px;

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

برای اینکه بتوان کادری با استفاده از تصاویر ایجاد کرد، از کدهای زیر استفاده میشود :
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) ۲۷ ۲۷ ۲۷ ۲۷ round round;

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

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

-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: ۵px;
-webkit-border-radius: ۵px;
border: ۱px solid #۰۰۰;


۴.  تصاویر در CSS۳ :
یکی از نقص های نسخه قبلی CSS محدودیت کاربر در انتخاب تصاویر پس‌زمینه بود به طوری که شما نمیتوانستید بیش از یک تصویر را به یک div اختصاص دهید ولی در CSS۳ شما میتوانید به تعداد دلخواه تصویر به یک div اضافه کنید. به کدهای زیر دقت کنید:
background: url(body-top.gif) top left no-repeat,
url(banner_fresco.jpg)  top ۱۱px no-repeat,
url(body-bottom.gif) bottom left no-repeat,
url(body-middle.gif) left repeat-y;

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

۵.  اضافه کردن سایه به متن ها:
۱. شما میتوانید با استفاده از خصوصیت های CSS۳ به متن های خود، سایه نیز اضافه کنید. شاید این یکی از بهترین امکاناتی باشد به در CSS۳ گنجانده شده است.
برای اعمال خاصیت بالا، میتوانید از کد زیر استفاده کنید:
text-shadow: ۲px ۲px ۲px #۰۰۰;

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