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

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

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

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

.transition-block{
    width:100px;
    height:100px;
    background:#999;
    transition:width 0.5s, height 0.5s, background 0.5s;
    -moz-transition:width 0.5s, height 0.5s, background 0.5s;    
    -webkit-transition:width 0.5s, height 0.5s, background 0.5s;
    -o-transition:width 0.5s, height 0.5s, background 0.5s;            
}
.transition-block:hover{
    width:104px;
    height:104px;
    background:#333;    
}

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

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

ایجاد animation یک قابلیت دیگر در CSS3 است که شباهت زیادی به transition دارد اما در مجموع از آن کامل تر و کمی پیچیده تر است، از خاصیت animation معمولا برای تغییر مکان یک عنصر، رنگ و... به صورتی دلخواه و به همراه افکت هایی استفاده می شود، برای خلق یک تصویر متحرک در CSS3 در کنار خاصیت animation، باید از خاصیت دیگری تحت عنوان keyframes@ نیز استفاده نمود، بد نیست ابتدا یک نمونه از کاربرد این قابلیت را بررسی کنیم.

.animation-block{
    width:50px;
    height:50px;
    background:#F90;
    position:relative;    
    right:0px;
    animation:test 2s infinite;
    -webkit-animation:test 2s infinite;
    -moz-animation:test 2s infinite;
    -o-animation:test 2s infinite;    
}
@keyframes test{
    0% {width:50px; background:#F90; right:0px;}
    25% {width:100px; background:#F93; right:300px;}
    50% {width:150px; background:#F96; right:500px;}
    100% {width:200px; background:#F99; right:700px;}    
}
@-webkit-keyframes test{
    0% {width:50px; background:#F90; right:0px;}
    25% {width:100px; background:#F93; right:300px;}
    50% {width:150px; background:#F96; right:500px;}
    100% {width:200px; background:#F99; right:700px;}    
}
@-moz-keyframes test{
    0% {width:50px; background:#F90; right:0px;}
    25% {width:100px; background:#F93; right:300px;}
    50% {width:150px; background:#F96; right:500px;}
    100% {width:200px; background:#F99; right:700px;}    
}
@-o-keyframes test{
    0% {width:50px; background:#F90; right:0px;}
    25% {width:100px; background:#F93; right:300px;}
    50% {width:150px; background:#F96; right:500px;}
    100% {width:200px; background:#F99; right:700px;}    
}

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

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

در CSS3 این امکان وجود دارد که با استفاده از خاصیت border-radius، عناصری با شعاع گرد شده یا به اصطلاح نرم داشته باشیم، به طور مثال می توان فیلدهای گوشه گرد یا بلاک هایی با شعاع نرم، بدون استفاده از المان های تصویری ساخت، به مثال زیر توجه کنید.

.radius-block{
    height:100px;
    width:100px;
    border:1px solid #999;
    border-radius:8px 8px 8px 8px;
    -webkit-border-radius:8px 8px 8px 8px;    
    -moz-border-radius:8px 8px 8px 8px;
    -o-border-radius:8px 8px 8px 8px;        
}

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

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

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

.shadow-block{
    height:100px;
    width:150px;
    background:#FC0;    
    box-shadow:5px 5px 5px #999;    
    -moz-box-shadow:5px 5px 5px #999;
    -webkit-box-shadow:5px 5px 5px #999;
    -o-box-shadow:5px 5px 5px #999;
}

این خاصیت در نسخه های به روز تمام مرورگرها و همچنین از نسخه 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: ترکیب تمام متدهای دو بعدی بالا در یک متد.
به مثال زیر توجه کنید.

.rotate-block{
    width:200px;
    height:100px;
    background:#39C;
    transform:rotate(-10deg);
    -moz-transform:rotate(-10deg);
    -webkit-transform:rotate(-10deg);
    -o-transform:rotate(-10deg);    
}

برای دیدن پیش نمایش مثال ها به صورت آنلاین، به انتهای مطلب مراجعه کنید.
همان طور که ملاحظه می کنید، متدهای خاصیت 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-container{
    width:200px;
    height:100px;
    perspective:300px;
    -webkit-perspective:300px;                
}
#perspective-container .perspective-block{
    width:200px;
    height:100px;
    background-color:#9C0;
    transform:rotateY(45deg);
    -moz-transform:rotateY(45deg);    
    -webkit-transform:rotateY(45deg);    
    -o-transform:rotateY(45deg);            
}

همان طور که از کدهای بالا پیدا است، قابلیت perspective خود متکی بر به کارگیری سایر خاصیت های CSS3 مانند transform است و به خودی خود ممکن است تاثیری بر عناصر صفحه نداشته باشد.
متاسفانه پشتیبانی مرورگرها در این زمینه چندان رضایت بخش نیست و تقریبا تمام آنها در قسمتی دچار مشکلاتی هستند.

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

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

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>وبگو | نمونه قابلیت های CSS3 در طراحی وب</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    direction:rtl;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
}
.transition-block{
    width:100px;
    height:100px;
    background:#999;
    transition:width 0.5s, height 0.5s, background 0.5s;
    -moz-transition:width 0.5s, height 0.5s, background 0.5s;    
    -webkit-transition:width 0.5s, height 0.5s, background 0.5s;
    -o-transition:width 0.5s, height 0.5s, background 0.5s;            
}
.transition-block:hover{
    width:104px;
    height:104px;
    background:#333;    
}
.transition-button{
    position:relative;
    width:200px;
    color:#FFF;
    display:block;
    text-decoration:none;
    border-radius:5px;
    border:solid 1px #999;
    background:#999;
    text-align:center;
    padding:20px 30px;
    transition:all 0.1s;    
    -webkit-transition:all 0.1s;
    -moz-transition:all 0.1s;
    -o-transition:all 0.1s;    
    box-shadow:0px 9px 0px #333;    
    -webkit-box-shadow:0px 9px 0px #333;
    -moz-box-shadow:0px 9px 0px #333;
    -o-box-shadow:0px 9px 0px #333;    
}
.transition-button:active{
    box-shadow:0px 2px 0px #333;    
    -webkit-box-shadow:0px 2px 0px #333;
    -moz-box-shadow:0px 2px 0px #333;
    -o-box-shadow:0px 2px 0px #333;    
    position:relative;
    top:7px;
}
.animation-block{
    width:50px;
    height:50px;
    background:#F90;
    position:relative;    
    right:0px;
    animation:test 2s infinite;
    -webkit-animation:test 2s infinite;
    -moz-animation:test 2s infinite;
    -o-animation:test 2s infinite;    
}
@keyframes test{
    0% {width:50px; background:#F90; right:0px;}
    25% {width:100px; background:#F93; right:300px;}
    50% {width:150px; background:#F96; right:500px;}
    100% {width:200px; background:#F99; right:700px;}    
}
@-webkit-keyframes test{
    0% {width:50px; background:#F90; right:0px;}
    25% {width:100px; background:#F93; right:300px;}
    50% {width:150px; background:#F96; right:500px;}
    100% {width:200px; background:#F99; right:700px;}    
}
@-moz-keyframes test{
    0% {width:50px; background:#F90; right:0px;}
    25% {width:100px; background:#F93; right:300px;}
    50% {width:150px; background:#F96; right:500px;}
    100% {width:200px; background:#F99; right:700px;}    
}
@-o-keyframes test{
    0% {width:50px; background:#F90; right:0px;}
    25% {width:100px; background:#F93; right:300px;}
    50% {width:150px; background:#F96; right:500px;}
    100% {width:200px; background:#F99; right:700px;}    
}
.animation-block-2{
    width:50px;
    height:50px;
    background:#09F;
    animation:test-2 1s infinite;
    -webkit-animation:test-2 1s infinite;
    -moz-animation:test-2 1s infinite;
    -o-animation:test-2 1s infinite;    
}
@keyframes test-2{
    0% {background:#09F;}
    100% {background:#F30;}    
}
@-webkit-keyframes test-2{
    0% {background:#09F;}
    100% {background:#F30;}    
}
@-moz-keyframes test-2{
    0% {background:#09F;}
    100% {background:#F30;}    
}
@-o-keyframes test-2{
    0% {background:#09F;}
    100% {background:#F30;}    
}
.radius-block{
    height:100px;
    width:100px;
    border:1px solid #999;
    border-radius:8px 8px 8px 8px;
    -webkit-border-radius:8px 8px 8px 8px;    
    -moz-border-radius:8px 8px 8px 8px;
    -o-border-radius:8px 8px 8px 8px;        
}
.shadow-block{
    height:100px;
    width:150px;
    background:#FC0;    
    box-shadow:5px 5px 5px #999;    
    -moz-box-shadow:5px 5px 5px #999;
    -webkit-box-shadow:5px 5px 5px #999;
    -o-box-shadow:5px 5px 5px #999;
}
.shadow-block-2{
    margin-top:16px;
    height:50px;
    width:100px;
    background:#CC0;        
    box-shadow:0px 0px 2px #999;    
    -moz-box-shadow:0px 0px 2px #999;
    -webkit-box-shadow:0px 0px 2px #999;
    -o-box-shadow:0px 0px 2px #999;    
    animation:clear 1s;
    -moz-animation:clear 1s;            
    -webkit-animation:clear 1s;            
    -o-animation:clear 1s;            
}
@keyframes clear{
    0% {box-shadow:0px 0px 10px #999;
    -moz-box-shadow:0px 0px 10px #999;
    -webkit-box-shadow:0px 0px 10px #999;
    -o-box-shadow:0px 0px 10px #999;}
    100% {box-shadow:0px 0px 2px #999;
    -moz-box-shadow:0px 0px 2px #999;
    -webkit-box-shadow:0px 0px 2px #999;
    -o-box-shadow:0px 0px 2px #999;}    
}
.shadow-block-2:hover{
    box-shadow:0px 0px 10px #999;
    -moz-box-shadow:0px 0px 10px #999;
    -webkit-box-shadow:0px 0px 10px #999;
    -o-box-shadow:0px 0px 10px #999;    
    animation:shadow 1s;
    -moz-animation:shadow 1s;    
    -webkit-animation:shadow 1s;
    -o-animation:shadow 1s;    
}
@keyframes shadow{
    0% {box-shadow:0px 0px 2px #999;
    -moz-box-shadow:0px 0px 2px #999;
    -webkit-box-shadow:0px 0px 2px #999;
    -o-box-shadow:0px 0px 2px #999;}
    100% {box-shadow:0px 0px 10px #999;
    -moz-box-shadow:0px 0px 10px #999;
    -webkit-box-shadow:0px 0px 10px #999;
    -o-box-shadow:0px 0px 10px #999;}    
}
.rotate-block{
    width:200px;
    height:100px;
    background:#39C;
    transform:rotate(-10deg);
    -moz-transform:rotate(-10deg);
    -webkit-transform:rotate(-10deg);
    -o-transform:rotate(-10deg);    
}
.skew-block{
    width:200px;
    height:100px;
    background:#36C;
    transform:skew(10deg, 10deg);
    -moz-transform:skew(10deg, 10deg);    
    -webkit-transform:skew(10deg, 10deg);
    -o-transform:skew(10deg, 10deg);            
}
#perspective-container{
    width:200px;
    height:100px;
    perspective:300px;
    -webkit-perspective:300px;                
}
#perspective-container .perspective-block{
    width:200px;
    height:100px;
    background-color:#9C0;
    transform:rotateY(45deg);
    -moz-transform:rotateY(45deg);    
    -webkit-transform:rotateY(45deg);    
    -o-transform:rotateY(45deg);            
}
</style>
</head>
<body>
&laquo; نمونه برای قابلیت transition &raquo;
<br><br>
<div class="transition-block"></div>
<br><br>
برای بررسی این قابلیت، ماوس را بر روی بلاک div ببرید.
<br><br>
&laquo; خلق جلوه های پیشرفته با transition &raquo;
<br><br>
<div class="transition-button">دکمه 2 بعدی با نمای 3 بعدی</div>
<br><br>
برای پشتبانی شدن قابلیت transition در نسخه های قدیمی تر مرورگرها، باید از پیشوند moz ، webkit و o استفاده کنیم.
<hr>
&laquo; نمونه برای قابلیت animation &raquo;
<br><br>
<div class="animation-block"></div>
<div class="animation-block-2"></div>
<br><br>
برای ایجاد انیمیشن های در حلقه (دور تکرار) از مقادیر infinite در تنظیمات خاصیت animation استفاده می شود.
<hr>
&laquo; نمونه برای قابلیت border-radius &raquo;
<br><br>
<div class="radius-block"></div>
<br><br>
برای پشتبانی شدن قابلیت border-radius در نسخه های قدیمی تر مرورگر فایرفاکس، باید از پیشوند moz استفاده کنیم.
<hr>
&laquo; نمونه برای قابلیت box-shadow &raquo;
<br><br>
<div class="shadow-block"></div>
<div class="shadow-block-2"></div>
<br><br>
برای پشتبانی شدن قابلیت box-shadow در نسخه های قدیمی تر مرورگرها، باید از پیشوند moz و webkit استفاده کنیم.
<hr>
&laquo; نمونه برای قابلیت transform 2d با متد rotate &raquo;
<br><br>
<div class="rotate-block"></div>
<br><br>
&laquo; نمونه برای قابلیت transform 2d با متد skew &raquo;
<br><br>
<div class="skew-block"></div>
<br><br>
برخی از قابلیت های CSS3 برای اجرا در نسخه های قدیمی تر مرورگر اپرا نیاز به پیشوند o دارند.
<br><br>
<hr>
&laquo; نمونه برای قابلیت perspective &raquo;
<br><br>
<div id="perspective-container">
<div class="perspective-block"></div>
</div>
<br><br>
در حال حاضر این قابلیت تنها در برخی مرورگرها به درستی پشتیبانی می شود.
<br><br>
</body>
</html>

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