اطلاعات و نمونه کدهایCSS3

[sky boy]

کد CSS3 براب استفاده از RGB (رنگ)

.alpha70 { position: relative; z-index: 2; width: 100px; height: 100px; color: #fff; margin-top: -30px; padding: 10px; /* Fallback for web browsers that doesn't support RGBa */ background: rgb(0, 0, 0); /* For IE 5.5 - 7*/ filterrogidXImageTransform.Microsoft.gradient(startColorstr=#b2000000, endColorstr=#b2000000); /* For IE 8*/ -ms-filter: "progidXImageTransform.Microsoft.gradient(startColorstr=#b2000000, endColorstr=#b2000000)"; /* RGBa with 0.7 opacity */ background: rgba(0, 0, 0, 0.7); }

​

 

[sky boy]

کد CSS3 سایه متن

text-shadow

.text-shadow { font-size: 2em; /* Firefox, WebKit, Opera 9+ */ text-shadow: 3px 3px 5px #999; }

​

 

[sky boy]

کد CSS3 اندازه و چرخش عنصر است که از طریق CSS تغییر کرده است.

transform

.menu-item { position: relative; display: inline-block; border: 1px dashed #000; padding: 10px; background: #ffffa2; height: 20px; opacity: 0.3; text-decoration: none; z-index: 100; /* Internet Explorer */ -ms-transform: scale(2) rotate(30deg) translate(50px); /* Firefox */ -moz-transform: scale(2) rotate(30deg) translate(50px); /* WebKit */ -webkit-transform: scale(1.2) rotate(30deg) translate(50px); /* Opera */ -o-transform: scale(2) rotate(30deg) translate(50px); /* Standard */ transform: scale(2) rotate(30deg) translate(50px); }

​

 

[sky boy]

کد CSS3 شناور شدن در حالت نشانگر روی پراگراف

Transitions simple

/* Shorthand version */ #hello { display: inline-block; border: 1px dashed #000; padding: 10px; background: #ffffa2; height: 20px; opacity: 0.3; /* Firefox */ -moz-transition: height 1s ease-out, opacity 1s ease; /* WebKit */ -webkit-transition: height 1s ease-out, opacity 1s ease; /* Opera */ -o-transition: height 1s ease-out, opacity 1s ease; /* Standard */ transition: height 1s ease-out, opacity 1s ease; } #hello:hover { height: 40px; opacity: 1; }

​

 

[sky boy]

کد CSS3 منوی شناور بسیار زیبا
Transitions with rotation

/* Shorthand version */ .menu-item { position: relative; display: inline-block; border: 1px dashed #000; padding: 10px; background: #ffffa2; height: 20px; opacity: 0.3; text-decoration: none; /* Firefox */ -moz-transition: all 1s ease; /* WebKit */ -webkit-transition: all 1s ease; /* Opera */ -o-transition: all 1s ease; /* Standard */ transition: all 1s ease; } .menu-item:hover { opacity: 1; /* Firefox */ -moz-transform: scale(2) rotate(30deg) translate(50px); /* WebKit */ -webkit-transform: scale(1.2) rotate(30deg) translate(50px); /* Opera */ -o-transform: scale(2) rotate(30deg) translate(50px); /* Standard */ transform: scale(2) rotate(30deg) translate(50px); z-index: 1000; }

​

 

[sky boy]

کد CSS3 یک منوی زیبا- تبدیل به تقلید از اثر پشته در سیستم عامل مک X.
جای image.jpg باید لینک عکس قرار داده بشه

<div class="stack-container-bottom"><div class="stack-container">
<img src="images/2.jpg" alt="" class="ie-2nd"><img src="images/1.jpg" alt="" class="ie-1st">
<img src="images/4.jpg" alt="" class="ie-4th"><img src="images/3.jpg" alt="" class="ie-3rd">
<img src="images/6.jpg" alt="" class="ie-6th"><img src="images/5.jpg" alt="" class="ie-5th">
<img src="images/7.jpg" alt="" class="ie-7th"></div>
</div><style>
.stack-container { position: relative; height: 680px; margin-bottom: 30px; }
.stack-container-bottom { position: absolute; left: 200px; bottom: 0; width: 148px; height: 130px; z-index: 1000; }
.stack-container img { position: absolute; left: 0px; bottom: 0; padding-bottom: 5px; /* Firefox */ -moz-transition: -moz-transform 0.3s ease; /* WebKit */ -webkit-transition: -webkit-transform 0.3s ease; /* Opera */ -o-transition: -o-transform 0.3s ease; /* Standard */ transition: all 0.3s ease; }
.stack-container img:nth-child(7) { /* Firefox */ -moz-transform: scale(1.5); /* WebKit */ -webkit-transform: scale(1.5) translate(16px, -5px); /* Opera */ -o-transform: scale(1.5); /* Standard */ transform: scale(1.5); }
.stack-container-bottom:hover img:nth-child(1) { /* Firefox */ -moz-transform: rotate(12deg) translate(-4px, -600px); /* WebKit */ -webkit-transform: rotate(12deg) translate(-4px, -600px); /* Opera */ -o-transform: rotate(12deg) translate(-4px, -600px); /* Standard */ transform: rotate(12deg) translate(-4px, -600px); }
.stack-container-bottom:hover img:nth-child(2) { /* Firefox */ -moz-transform: rotate(11deg) translate(5px, -520px); /* WebKit */ -webkit-transform: rotate(11deg) translate(5px, -520px); /* Opera */ -o-transform: rotate(11deg) translate(5px, -520px); /* Standard */ transform: rotate(11deg) translate(5px, -520px); }
.stack-container-bottom:hover img:nth-child(3) { /* Firefox */ -moz-transform: rotate(10deg) translate(12px, -440px); /* WebKit */ -webkit-transform: rotate(10deg) translate(12px, -440px); /* Opera */ -o-transform: rotate(10deg) translate(12px, -440px); /* Standard */ transform: rotate(10deg) translate(12px, -440px); }
.stack-container-bottom:hover img:nth-child(4) { /* Firefox */ -moz-transform: rotate(9deg) translate(18px, -360px); /* WebKit */ -webkit-transform: rotate(9deg) translate(18px, -360px); /* Opera */ -o-transform: rotate(9deg) translate(18px, -360px); /* Standard */ transform: rotate(9deg) translate(18px, -360px); }
.stack-container-bottom:hover img:nth-child(5) { /* Firefox */ -moz-transform: rotate(8deg) translate(23px, -280px); /* WebKit */ -webkit-transform: rotate(8deg) translate(23px, -280px); /* Opera */ -o-transform: rotate(8deg) translate(23px, -280px); /* Standard */ transform: rotate(8deg) translate(23px, -280px); }
.stack-container-bottom:hover img:nth-child(6) { /* Firefox */ -moz-transform: rotate(7deg) translate(26px, -200px); /* WebKit */ -webkit-transform: rotate(7deg) translate(26px, -200px); /* Opera */ -o-transform: rotate(7deg) translate(26px, -200px); /* Standard */ transform: rotate(7deg) translate(26px, -200px); }
.stack-container-bottom:hover img:nth-child(7) { /* Firefox */ -moz-transform: rotate(6deg) translate(30px, -120px); /* WebKit */ -webkit-transform: rotate(6deg) translate(30px, -120px); /* Opera */ -o-transform: rotate(6deg) translate(30px, -120px); /* Standard */ transform: rotate(6deg) translate(30px, -120px); }
</style< <!--[if IE]< <style< .stack-container-bottom:hover img.ie-1st { left: 115px; top: -550px; filter: progidXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9781476007338057, M12=-0.20791169081775931, M21=0.20791169081775931, M22=0.9781476007338057); /* IE6,IE7 */ -ms-filter: "progidXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.9781476007338057, M12=-0.20791169081775931, M21=0.20791169081775931, M22=0.9781476007338057)"; /* IE8 */ zoom: 1; }
.stack-container-bottom:hover img.ie-2nd { left: 98px; top: -470px; filter: progidXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.981627183447664, M12=-0.1908089953765448, M21=0.1908089953765448, M22=0.981627183447664); /* IE6,IE7 */ -ms-filter: "progidXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.981627183447664, M12=-0.1908089953765448, M21=0.1908089953765448, M22=0.981627183447664)"; /* IE8 */ zoom: 1; }
.stack-container-bottom:hover img.ie-3rd { left: 84px; top: -390px; filter: progidXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.984807753012208, M12=-0.17364817766693033, M21=0.17364817766693033, M22=0.984807753012208); /* IE6,IE7 */ -ms-filter: "progidXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.984807753012208, M12=-0.17364817766693033, M21=0.17364817766693033, M22=0.984807753012208)"; /* IE8 */ zoom: 1; }
.stack-container-bottom:hover img.ie-4th { left: 71px; top: -310px; filter: progidXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9876883405951378, M12=-0.15643446504023087, M21=0.15643446504023087, M22=0.9876883405951378); /* IE6,IE7 */ -ms-filter: "progidXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.9876883405951378, M12=-0.15643446504023087, M21=0.15643446504023087, M22=0.9876883405951378)"; /* IE8 */ zoom: 1; }
.stack-container-bottom:hover img.ie-5th { left: 61px; top: -230px; filter: progidXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9902680687415704, M12=-0.13917310096006544, M21=0.13917310096006544, M22=0.9902680687415704); /* IE6,IE7 */ -ms-filter: "progidXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.9902680687415704, M12=-0.13917310096006544, M21=0.13917310096006544, M22=0.9902680687415704)"; /* IE8 */ zoom: 1; }
.stack-container-bottom:hover img.ie-6th { left: 50px; top: -150px; filter: progidXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.992546151641322, M12=-0.12186934340514748, M21=0.12186934340514748, M22=0.992546151641322); /* IE6,IE7 */ -ms-filter: "progidXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.992546151641322, M12=-0.12186934340514748, M21=0.12186934340514748, M22=0.992546151641322)"; /* IE8 */ zoom: 1; }
.stack-container-bottom:hover img.ie-7th { left: 42px; top: -70px; filter: progidXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9945218953682733, M12=-0.10452846326765346, M21=0.10452846326765346, M22=0.9945218953682733); /* IE6,IE7 */ -ms-filter: "progidXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.9945218953682733, M12=-0.10452846326765346, M21=0.10452846326765346, M22=0.9945218953682733)"; /* IE8 */ zoom: 1; }
</style< <![endif]-->

​

 

[sky boy]

کد css3 بسته بندی کردن برای شکستن کلمات
word-wrap

.word-wrap { width: 100px; height: 100px; padding: 10px; border: 1px solid #000; word-wrap: break-word; }

​