Nah udah lama nih nggak posting, sekarang udah nggak posting tentang sepeda lagi. Sekarang lagi seneng - senengnya belajar css3 nih. Belajar bikin web dengan tampilan yang keren sekarang jadi lebih gampang dengan css3. Langsung aja dah saya kasih materi yang sudah saya pelajari. CEKIBROT.Nih coding di cssnya untuk buat gradient di tabel, colom , header atau footer.
==atas bawah==
#linearBg2 {
/* fallback */
background-color: #1a82f7;
background: url(images/linear_bg_2.png);
background-repeat: repeat-x;
/* Firefox 3.6+ */
background: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);
/* Safari 4-5, Chrome 1-9 */
/* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(#2F2727, #1a82f7);
/* Opera 11.10+ */
background: -o-linear-gradient(#2F2727, #1a82f7);
}
==Kiri ke kanan==
#linearBg1 {
/* fallback */
background-color: #1a82f7;
background-image: url(images/linear_bg_1.png);
background-repeat: repeat-y;
/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #2F2727, #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);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #2F2727, #1a82f7);
}
==double==
#even-stops {
/* fallback DIY*/
/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
/* 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);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
}
==double2==
#arbitrary-stops {
/* fallback DIY*/
/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
/* 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);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
}
==full size==
#radial-center {
/* fallback */
background-color: #2F2727;
background-image: url(images/radial_bg.png);
background-position: center center;
background-repeat: no-repeat;
/* Firefox 3.6+ */
background: -moz-radial-gradient(circle, #1a82f7, #2F2727);
/* Safari 4-5, Chrome 1-9 */
/* Can't specify a percentage size? Laaaaaame. */
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);
/* Opera cannot do radial gradients yet */
}
==position,sized==
#radial-position {
/* fallback */
background-color: #2F2727;
background-image: url(images/radial_fancy.png);
background-position: 80% 20%;
background-repeat: no-repeat;
/* Firefox 3.6+ */
/* -moz-radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* ) */
background: -moz-radial-gradient(80% 20%, closest-corner, #1a82f7, #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);
/* Opera cannot do radial gradients yet */
}
Nah itu untuk buat gradient sesuai dengan keterangan diatas. Tapi kalau mau buat background belakang contentnya yang gradient tinggal buat kayak gini.
body {
background-color: #1a82f7;
background: url(images/linear_bg_2.png);
background-repeat: repeat-x;
background: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);
}
Nah sisanya tinggal edit - edit aja sendiri OK..
==SELAMAT BELAJAR==
==SELAMAT BELAJAR==
Posting Komentar
Berkata: