آموزش html5 و css3 از صفر تا 100- بخش آخر

Css3 شامل ویژگی هایی بود که طراحان وب را شگفت زده کرد چون بدون استفاده از photoshop وjquery  به راحتی میتوانستند عملکردهای زیبایی را در وب سایت خود خلق کنند مانند حاشیه های هلالی یا  (border-radius)که در بخش قبلی آموزش html5  و css3 نمونه ای از آن را دیدید در ادامه آموزشcss3 را با چند مثال کاربردی در این بخش به پایان خواهیم رساند .

چرخش اجزا

شما میتوانید با استفاده از درجه و ویژگی transformهر چیزي را بچرخانید.

فرض کنید درhtml داریم :

<div class="cssonline">

man matn dakhele hastam<br />

man kaj misham&cent; <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 - 09384363798

ایمیل : drupalcenter.ir@gmail.com

ارتباط با مدیر سایت از طریق تلگرام

logo-samandehi

مرکز دروپال ایران بزرگترین وب سایت  آموزش دروپال در کشور ، در مهر ماه سال 1388 به طور رسمی فعالیت خود را در زمینه وب و دنیای دیجیتال آغاز کرده است. مجموعه مرکز دروپال ایران شامل « آموزش های تصویری » ، « معرفی جدیدترین ماژول ها » ، « ترجمه مقالات دروپالی روز دنیا » ، « طراحی قالب دروپال» و « خبرهای دنیای دروپال» می باشد.این مجموعه به همراه گروه فنی خود و به  پشتوانه کاربران فعال و متعهد ، با  در نظر داشتن چشم اندازی برای آینده نزدیک ، قصد دارد تا به معرفی و آموزش  هرچه بیشتر و بهتر هسته قدرتمند و دوست داشتنی دروپال ،  به روش های مختلف در زمینه های گوناگون بپردازد تا در کنار کاربران خود به موفقیت های هرروز خود بیفزاید. در همین راستا قصد داریم تا بصورت تخصصی و حرفه ای مباحث مختلف دروپال را با کوچک ترین جزئیات و تکنیک ها به دروپال کاران و کسانی که قصد دارند طراحی وب سایت ،پورتال و سیستم های هوشمند را آغاز کنند ، آموزش دهیم.گستردگی مطالب ، تنوع در آموزش ها ، نگاه تخصصی و همگام بودن با کاربران در آموزش عوامل متمایز کردن مرکز دروپال ایران با سایر آموزش دهندگان می باشد.
دروپال برای انجام طراحی های شگفت انگیز !  Drupal Builds something amazing