با ظهور CSS نسخه ۳ و html نسخه ۵ انقلابی در طراحی وب سایت صورت گرفته است. البته این انقلاب را ما بصورت کامل مشاهده نکرده ایم و دلیل ان هم مرورگرهایی است که هنوز این تغییرات و ویرایش های جدید را ساپورت نمی کنند و مسلما نیاز به زمان زیادی است تا بتوان وب سایتهای مبتنی بر CSS نسخه ۳ و html نسخه ۵ را در دنیای مجازی به راحتی مشاهده کرد. اما شما بعنوان یک طراح وب سایت باید خود را آماده این تغییرات نمایید تا در صورت ورود به فاز جدید از قافله عقب نمایند. فایلی که امروز برای شما عزیزان آماده کردم Cheat Sheet یا خلاصه دستورات CSS 3 همگی در یک فایل PDF 5 صفحه ای است که در کنار قرار دادن این دستورات در کنار هم می تواند کمک شایانی به شما کند.

دانلود

دستورات برای شناسایی نسخه ها IE:

<!–[if IE ]>
<link href="iecss.css" rel="stylesheet" type="text/css”>
<![endif]–>

این دستور بیان میکند اگر نسخه مرورگر IE با هر ورژنی بود از فایل iecss.css برای فرمت بندی صفحه استفاده کند و در غیر این صورت از فرمت بندی که در صفحه تعیین میشود استفاده کند

<!–[if IE 6 ]>
<p>Only IE 6 will see this</p>
<![endif]–>

اگر IE6 بود دستورات بین تگ p را مشاهده می کند که میتواند لینک به یک فایل css باشد مثل بالا و یا در همان جا به صورت internal دستورات css را تعریف کرد و یا در آنجا از دستورات javascript استفاده کرد.

<!–[if lt IE 7 ]>
<p>Only less than IE 7 will see this</p>
<![endif]–>

اگر نسخه پایین تر از IE7 بود دستورات بین تگ p را مشاهده می کند.

    <!–[if lte IE 7 ]>
    <p>Only less than or equal to IE 7 will see this</p>
    <![endif]–>

اگر نسخه IE7 و پایین تر از IE7 بود دستورات بین تگ p را مشاهده می کند

<!–[if gt IE 7 ]>
<p>Only greater than IE 7 will see this</p>
<![endif]–>

اگر نسخه بالاتر تر از IE7 بود دستورات بین تگ p را مشاهده می کند

<!–[if gte IE 7 ]>
<p>Only greater than or equal to IE 7 will see this</p>
<![endif]–>

اگر نسخه IE7 وبالا تر از IE7 بود دستورات بین تگ p را مشاهده می کند .

به همین ترتیب :

<!–[if IE 5]>
<p>This covers all versions of IE5 including IE5.5</p>
<![endif]–>
<!–[if !IE 6]>
<p>IE7 or IE5 only</p>
<![endif]–>
<!–[if (IE 6)|(IE 7)]>
<p>IE6 or IE7 only </p>
<![endif]–>

اعمال یک Styleخاص مانند بزرگ کردن حرف اول هر پاراگراف

توسط این Styleمی خواهیم که اولین کاراکتر هر پاراگراف را بصورت متفاوت و بزرگتر از بقیه کاراکترهای موجود در متن نمایش دهیم و بدیهیست که کاربرد اصلی این Effect بر روی متون انگلیسی مشهود تر میباشد واین Style بیشتر برای مقالات یا مجالات یا کتب کاربرد دارد .

(ادامه…)

در جلسه قبل ساخت یک انیمیشن توسط CSS3  را یاد گرفتیم حال در این جلسه می خواهیم انیمیشن خود را کنترل کنیم.

animation-play-state

ویژگی بالا این امکان را به ما دهد که انیمیشن خود را متوقف یا اجرا کنیم.

animation-play-state: paused|running;

اگر مقدار دستور بالا را برابر با paused قرار دهیم انیمیشن خود را متوقف کرده و اگر مقدار آن را running قرار دهیم انیمشن ما اجرا می شود.

یک صفحه درست کردم که بهتر مفهوم و کارایی animation و animation-play-state را متوجه بشوید.

یک مثال دیگر برای یادگیری بهتر:

خوب می خواهیم یک انیمیشن ایجاد کنیم که وقتی که نشانه گر موس را روی تصویر مورد نظر برده تصویر چند دور بچرخد و رنگ پس زمینه و رنگ متن تغییر کند.

div{
-moz-transition: all 1s ease-in-out 0s;
-webkit-transition: all 1s ease-in-out 0s;
position:relative;
background:red;
width:100px;
height:70px;
margin:200px auto;
text-align:center;
font-family:Tahoma;
text-align:center;
padding-top:30px;
}
div:hover {
background-color: #03F;
color: #fff;
transform: rotate(360deg) scale(1.5);
-moz-transform: rotate(360deg) scale(1.5);
-webkit-transform: rotate(360deg) scale(1.5);
}

سلام دوستان از امروز می خوام در این جا آموزش CSS3 به زبان ساده و دوستانه برای شما علاقه مندان ارائه کنم.امیدوارم مفید واقع شود.

در هر جلسه یک ویژگی معرفی می شود.

مقدمه :

برخی خواص CSS3:

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

(ادامه…)

پیش نمایش

کدهای HTML زیر را کپی کنید :

</pre>
<ul>
	<li><a>صفحه اصلی</a></li>
	<li><a>گالری</a></li>
	<li><a>درباره ما</a></li>
	<li><a>تماس با ما</a></li>
</ul>
<pre>

کدهای CSS زیر را کپی کنید :

body{
background:#333;
}
nav {
display: block;
width: 100%;
overflow: hidden;
}

nav ul {
margin: 80px 0 20px 0;
padding: .7em;
float: right;
list-style: none;
background: #444;
background: rgba(0,0,0,.2);
-moz-border-radius: .5em;
-webkit-border-radius: .5em;
border-radius: .5em;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
}

nav li {
float:right;
}

nav a {
float:right;
padding: .8em 1.5em;
text-decoration: none;
color: #555;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
font: 11px Tahoma, Geneva, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
border-width: 1px;
border-style: solid;
border-color: #fff #ccc #999 #eee;
background: #c1c1c1;
background: -moz-linear-gradient(#f5f5f5, #c1c1c1);
background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#c1c1c1));
background: -webkit-linear-gradient(#f5f5f5, #c1c1c1);
background: -o-linear-gradient(#f5f5f5, #c1c1c1);
background: -ms-linear-gradient(#f5f5f5, #c1c1c1);
background: linear-gradient(#f5f5f5, #c1c1c1);
}

nav a:hover, nav a:focus {
outline: 0;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
background: #fac754;
background: -moz-linear-gradient(#fac754, #f8ac00);
background: -webkit-gradient(linear, left top, left bottom, from(#fac754), to(#f8ac00));
background: -webkit-linear-gradient(#fac754, #f8ac00);
background: -o-linear-gradient(#fac754, #f8ac00);
background: -ms-linear-gradient(#fac754, #f8ac00);
background: linear-gradient(#fac754, #f8ac00);
}

nav a:active {
-moz-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
-webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
}