آموزش html5 و css3 از صفر تا 100- بخش آخر
Css3 شامل ویژگی هایی بود که طراحان وب را شگفت زده کرد چون بدون استفاده از photoshop وjquery به راحتی میتوانستند عملکردهای زیبایی را در وب سایت خود خلق کنند مانند حاشیه های هلالی یا (border-radius)که در بخش قبلی آموزش html5 و css3 نمونه ای از آن را دیدید در ادامه آموزشcss3 را با چند مثال کاربردی در این بخش به پایان خواهیم رساند .
چرخش اجزا
شما میتوانید با استفاده از درجه و ویژگی transformهر چیزي را بچرخانید.
فرض کنید درhtml داریم :
<div class="cssonline">
man matn dakhele hastam<br />
man kaj misham¢ <br />
</div>
استایل را به صورت زیر وارد میکنیم :
div.cssonline{
width:200px;
height:100px;
background: SandyBrown;
transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
}
حاصل یک مستطیل کج است که 20 درجه چرخیده است.
ایجاد گرادیانت با استفاده از css3
این قطعه کد گرادیانت های عمودی و افقی در صفحه ایجاد میکند
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(0deg, red, blue);
background: -o-linear-gradient(0deg, red, blue);
background: -moz-linear-gradient(0deg, red, blue);
background: linear-gradient(0deg, red, blue);
}
#grad2 {
height: 100px;
background: -webkit-linear-gradient(90deg, red, blue);
background: -o-linear-gradient(90deg, red, blue);
background: -moz-linear-gradient(90deg, red, blue);
background: linear-gradient(90deg, red, blue);
}
#grad3 {
height: 100px;
background: -webkit-linear-gradient(180deg, red, blue);
background: -o-linear-gradient(180deg, red, blue);
background: -moz-linear-gradient(180deg, red, blue);
background: linear-gradient(180deg, red, blue);
}
#grad4 {
height: 100px;
background: -webkit-linear-gradient(-90deg, red, blue);
background: -o-linear-gradient(-90deg, red, blue);
background: -moz-linear-gradient(-90deg, red, blue);
background: linear-gradient(-90deg, red, blue);
}
</style>
</head>
<body>
<div>
<h3>گرادیانت های خطی</h3>
</div>
<div id="grad1" style="color:white;text-align:center;">0deg</div><br>
<div id="grad2" style="color:white;text-align:center;">90deg</div><br>
<div id="grad3" style="color:white;text-align:center;">180deg</div><br>
<div id="grad4" style="color:white;text-align:center;">-90deg</div>
<p><strong>این مثال دراینترنت اکسپلورر9 و نسخه های قبل از آن پشتیبانی نمیشود. </strong></p>
</body>
</html>
ساخت یک انیمیشن ساده در css3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-animation: myfirst 5s;
animation: myfirst 5s;
}
@-webkit-keyframes myfirst {
from {background: blue;}
to {background: red;}
}
@keyframes myfirst {
from {background: blue;}
to {background: red;}
}
</style>
</head>
<body>
<p><b> این مثال دراینترنت اکسپلورر9 و نسخه های قبل از آن پشتیبانی نمیشود.</b></p>
</body>
</html>
و در آخر شایان ذکر است به دلیل پشتیبانی نکردن IE9 و نسخه های قبل از آن از css3 ، از استفاده ازcss3 در سایت های خود منصرف نشوید ! به طور قطع کاربران درجه یک اینترنت تفاوت chrome و IE6 را میدانند پس با استفاده از css3 یک صفحه زیبا را به آنها هدیه دهیم .
امید است از این سری آموزش بهره لازم را برده و بتوانید با استفاده از به روز ترین تکنولوژی ها (html5 و css3 و ... ) بتوانید سایت های زیبا خلق کنید .
موفق باشید .
راه های ارتباط با ما
آدرس : دفتر شهریار : شهرک وائین ، بعثت 5 نبش سپیدار 10 پلاک 26
تلفن : 09370977406
ایمیل : drupalcenter.ir@gmail.com
ارتباط با مدیر سایت از طریق تلگرام