PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : [آموزش] پس زمینه گرادینت در CSS3



Mohsen Neo
2012/08/07, 04:37 PM
درود ...

در این بخش گرادینت در css3 رو یاد میگیریم.:دی

چون از کدها همه چی معلومه من چیزی نمینویسم ...


گرادینت بالا به پایین
http://up.vbiran.ir/images/tcp129yy59veh5epra.png


#linearBg2 {
/* Old browsers */
background-color: #1a82f7;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #2F2727, #1a82f7);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #2F2727, #1a82f7);
/* IE 10 */
background: -ms-linear-gradient(top, #2F2727, #1a82f7);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #2F2727, #1a82f7);
}


گرادینت چپ به راست
http://up.vbiran.ir/images/1ekizuvn41l8xrm8hwoq.png
#linearBg1 {
/* Old browsers */
background-color: #1a82f7;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, left top, right top, from(#1a82f7), to(#2F2727));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(left, #2F2727, #1a82f7);
/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #2F2727, #1a82f7);
/* IE 10 */
background: -ms-linear-gradient(left, #2F2727, #1a82f7);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #2F2727, #1a82f7);
}


گرادینت با توقف کم
http://up.vbiran.ir/images/m8s7b42fw0f42364xbvi.png

#even-stops {
/* fallback DIY*/ /* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.25, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.75, #1a82f7), to(#2F2727));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
/* IE 10 */
background: -ms-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
}


گرادینت با توقف زیاد
http://up.vbiran.ir/images/3s71up7bdbv6w3nk3iu2.png

#arbitrary-stops {
/* fallback DIY*/ /* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.95, #1a82f7), to(#2F2727));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
/* IE 10 */
background: -ms-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
}


گرادینت وسط
http://up.vbiran.ir/images/hhrg70w0qo9g982f02nw.png

#radial-center {
/* fallback */
background-color: #2F2727;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);
/* Firefox 3.6+ */
background: -moz-radial-gradient(circle, #1a82f7, #2F2727);
/* IE 10 */
background: -ms-radial-gradient(circle, #1a82f7, #2F2727);
/* Opera cannot do radial gradients yet */
}


گرادینت در یک محل
http://up.vbiran.ir/images/k5ovoi98nwayfggk09t1.png

#radial-position {
/* fallback */
background-color: #2F2727;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#1a82f7), to(#2F2727));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);
/* Firefox 3.6+ */
background: -moz-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);
/* IE 10 */
background: -ms-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);
/* Opera cannot do radial gradients yet */
}


و در آخر در فایل html به این صورت قرار میدهیم:


<style>
body{
padding:50px;
}
#linearBg2 {
padding:30px;
color:#fff;
/* Old browsers */
background-color: #1a82f7;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #2F2727, #1a82f7);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #2F2727, #1a82f7);
/* IE 10 */
background: -ms-linear-gradient(top, #2F2727, #1a82f7);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #2F2727, #1a82f7);
}

#linearBg1 { padding:30px; color:#fff;


/* Old browsers */
background-color: #1a82f7;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, left top, right top, from(#1a82f7), to(#2F2727));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(left, #2F2727, #1a82f7);
/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #2F2727, #1a82f7);
/* IE 10 */
background: -ms-linear-gradient(left, #2F2727, #1a82f7);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #2F2727, #1a82f7);
}
#even-stops { padding:30px; color:#fff;


/* fallback DIY*/ /* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.25, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.75, #1a82f7), to(#2F2727));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
/* IE 10 */
background: -ms-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
}
#arbitrary-stops { padding:30px; color:#fff;


/* fallback DIY*/ /* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.95, #1a82f7), to(#2F2727));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
/* IE 10 */
background: -ms-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
}
#radial-center { padding:30px; color:#fff;


/* fallback */
background-color: #2F2727;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);
/* Firefox 3.6+ */
background: -moz-radial-gradient(circle, #1a82f7, #2F2727);
/* IE 10 */
background: -ms-radial-gradient(circle, #1a82f7, #2F2727);
/* Opera cannot do radial gradients yet */
}
#radial-position { padding:30px; color:#fff;


/* fallback */
background-color: #2F2727;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#1a82f7), to(#2F2727));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);
/* Firefox 3.6+ */
background: -moz-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);
/* IE 10 */
background: -ms-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);
/* Opera cannot do radial gradients yet */
}
</style>

<div id="linearBg2"><center>VBIran.Ir</center></div><br />
<div id="linearBg1"><center>VBIran.Ir</center></div><br />
<div id="even-stops"><center>VBIran.Ir</center></div><br />
<div id="arbitrary-stops"><center>VBIran.Ir</center></div><br />
<div id="radial-center"><center>VBIran.Ir</center></div><br />
<div id="radial-position"><center>VBIran.Ir</center></div><br />



دمو : CSS3 Gradient (http://mohseneo.persiangig.com/other/css3_gradient.html)

منبع: css-tricks.com

Mr.Ramin
2012/08/07, 05:26 PM
تائید شد !
این سایت هم برای انتخاب و ساخت گرادینت با CSS3 میتونه برای علاقه مندان خیلی مفید باشه !
Ultimate CSS Gradient Generator - ColorZilla.com (http://www.colorzilla.com/gradient-editor/)
CSS3 Gradient Generator (http://gradients.glrzad.com/)