Bermain-main dengan CSS3 : Gradient

.post-image{text-align:center}
.boxdemo{
    width:150px;
    height:150px;
    max-width:100%;
    display:inline;
    resize:auto;
    border:none;
    -webkit-user-select:none;
}
#sampel1{
    background-image:-webkit-linear-gradient(top, #FF0000, blue);
    background-image:-moz-linear-gradient(top, #FF0000, blue);  
    background-image:-ms-linear-gradient(top, #FF0000, blue);   
    background-image:-o-linear-gradient(top, #FF0000, blue);    
    background-image:linear-gradient(top, #FF0000, blue);           
}
#sampel2{
    background-image:-webkit-linear-gradient(45deg, red, blue);
    background-image:-moz-linear-gradient(45deg, red, blue);
    background-image:-ms-linear-gradient(45deg, red, blue);
    background-image:-o-linear-gradient(45deg, red, blue);
    background-image:linear-gradient(45deg, red, blue);
}
#sampel3{
    background-image:-webkit-linear-gradient(left, red,orange,yellow,lime,green,blue);
    background-image:-moz-linear-gradient(left, red,orange,yellow,lime,green,blue);
    background-image:-ms-linear-gradient(left, red,orange,yellow,lime,green,blue);
    background-image:-o-linear-gradient(left, red,orange,yellow,lime,green,blue);
    background-image:linear-gradient(left, red,orange,yellow,lime,green,blue);
}
#sampel4{
    background-image:-webkit-radial-gradient(center,circle,red,blue);
    background-image:-moz-radial-gradient(center,circle,red,blue);
    background-image:-ms-radial-gradient(center,circle,red,blue);
    background-image:-o-radial-gradient(center,circle,red,blue);
    background-image:radial-gradient(center,circle,red,blue);
}
#sampel5{
    background-image:-webkit-radial-gradient(top left,circle farthest-side,red,blue);
    background-image:-moz-radial-gradient(top left,circle farthest-side,red,blue);
    background-image:-ms-radial-gradient(top left,circle farthest-side,red,blue);
    background-image:-o-radial-gradient(top left,circle farthest-side,red,blue);
    background-image:radial-gradient(top left,circle farthest-side,red,blue);
}
#sampel6{
    background-image:-webkit-repeating-linear-gradient(left, green 10%, yellow 20%);
    background-image:-moz-repeating-linear-gradient(left, green 10%, yellow 20%);
    background-image:-ms-repeating-linear-gradient(left, green 10%, yellow 20%);
    background-image:-o-repeating-linear-gradient(left, green 10%, yellow 20%);
    background-image:repeating-linear-gradient(left, green 10%, yellow 20%);
}
#sampel7{
    background-image:-webkit-repeating-radial-gradient(center, green 10%, yellow 20%);
    background-image:-moz-repeating-radial-gradient(center, green 10%, yellow 20%);
    background-image:-ms-repeating-radial-gradient(center, green 10%, yellow 20%);
    background-image:-o-repeating-radial-gradient(center, green 10%, yellow 20%);
    background-image:repeating-radial-gradient(center, green 10%, yellow 20%);
}
#sampel8{
    background-image:-webkit-linear-gradient(left,red 20%,green 50%,yellow 95%, blue 100%);
    background-image:-moz-linear-gradient(left,red 20%,green 50%,yellow 95%, blue 100%);
    background-image:-ms-linear-gradient(left,red 20%,green 50%,yellow 95%, blue 100%);
    background-image:-o-linear-gradient(left,red 20%,green 50%,yellow 95%, blue 100%);
    background-image:linear-gradient(left,red 20%,green 50%,yellow 95%, blue 100%);
}

Dalam CSS3 anda memiliki kemampuan untuk membuat background dengan gradasi warna (color gradient) sehingga anda tidak perlu lagi berurusan dengan gambar untuk masalah gradient ini.

CSS3 gradient ini belum didukung oleh setiap browser secara penuh, jadi kita harus menambahkan prefix untuk masing-masing browser.

Ada 4 tipe gradient yang bisa digunakan, yakni

  1. Linear Gradient
  2. Radial Gradient
  3. Repeating Linear Gradient, dan
  4. Repeating Radial Gradient.

Setiap contoh gradient dapat diresize dengan mendrag ujung kanan bawah kotak.

Linear Gradient

Tipe gradasi warna ini terdiri dari dua atau lebih susunan warna dan disusun secara lurus (Linear). Syntax dasarnya seperti berikut :

background-image:linear-gradient(titik-awal/derajat, warna1, warna2, warna-n);

Contoh :

background-image:linear-gradient(top, #FF0000, blue);
background-image:linear-gradient(45deg, red, blue);

Jika anda perhatikan dalam syntax dasarnya andapun dapat memberikan 3 warna lebih sekaligus.

background-image:linear-gradient(left, red,orange,yellow,lime,green,blue);

Radial Gradient

Tipe radial gradient akan membentuk gradasi warna dengan tipe lingkaran (radial), syntax nya hamipir sama dengan linear gradient, anda cukup menggantik kata linear menjadi radial. dan ada juga nilai tambahan untuk radial gradient ini.

background-image:radial-gradient(posisi,bentuk-radial ukuran,warna1,warna2,warna-n);

contoh sederhana (posisi, warna,warna) :

background-image:radial-gradient(center,red,blue)

Contoh radial gradient dengan bentuk radial dan ukuran (posisi, bentuk ukuran,warna,warna)

radial-gradient(top left,circle farthest side,red,blue)

Untuk nilai bentuk anda bisa menggunakan nilai circle dan ellipse. sedangkan untuk ukuran (size) anda dapat menggunakan nilai-nilai berikut : (closest-side, closest-corner, farthest-side, farthest-corner, contain, cover. Silahkan untuk bereksperimen dengan nilai-nilai tersebut dan perhatikan perbedaannya.

Color Stop

Ketika anda ingin menggunakan 3 warna lebih dan ingin menentukan sampai mana warna tersebut digunakan, anda bisa menambahkan color stop dengan menambahkan nilainya setelah warna.

linear-gradient(left,red 20%,green 50%,yellow 95%, blue 100%);

Selain menentukan color-stop dengan nilai persen, anda pun dapat menggunakan satua pixel jika ingin lebih detail.

Repeating Linear dan Repeating Radial Gradient

Jika gradient biasa hanya membuat satu kali gradasi warna, maka repeating-linear-gradient dan repeating-radial-gradient akan membuat gradasi berulang. Syntaxnya tidak jauh berbeda dengan dua tipe gradient sebelumnya, namun hanya berbeda dalam penamaannya (ditambahkan repeating-). Penggunaan repeating gradient harus menyertakan color-stop.

Contoh repeating-linear-gradient :

repeating-linear-gradient(left,green 10%,yellow 10%)

contoh repeating-radial-gradient :

repeating-radial-gradient(center,green 10%,yellow 10%)

Bereksperimen dengan CSS3 Gradient

Sudah sangat banyak eksperimen yang melibatkan fitur CSS3 Gradient ini, seperti dalam pembuatan user interface, pattern dan lain sebagainya. dan kali ini kita akan bereksperimen untuk membuat taskbar-nya windows XP. masih ingat bagaimana rupanya?

Markup HTML

Pertama-tama kita siapkan dulu markup HTMLnya, markupnya sederhana saja :

startstart
9:23 AM
</div>

Kita hanya akan bereksperimen dengan membuat ulang taskbar windows XP dengan bantuan CSS3 Gradient. Jadi kita lebih fokus pada taskbarnya saja :).

CSS

Pertama-tama kita akan memberi style untuk taskbar utamanya, tidak lupa saya tambahkan juga CSS Reset untuk margin dan padding dan menentukan font-family.

*{margin:0;padding:0;}
html{height:100%;)
body{
    font-family:arial,sans-serif;
    background-image:url(bliss.bmp);
    background-size:100% 100%;
    height:100%;
}
#taskbar{
    position:absolute;
    bottom:0;
    width:100%;
    height:30px;
    background:-webkit-linear-gradient(
            #3168D5 0%,
            #4993E6 10%,
            #245DD7 15%,
            #2663E0 80%,
            #235BD9 95%,
            #1941A5 100%
        );
    color:white;
}

Untuk body saya beri background default windows XP yakni bliss.bmp. kemudian saya atur ukuran backgroundnnya menjadi 100% untuk width dan heightnya sehingga background menjadi Stretch/mengikuti ukuran body.

Perhatikan bahwa saya hanya menuliskan CSS3 Gradient untuk browser webkit dengan teknik color stop. Anda dapat menambahkan prefix lainnya seperti -moz-,-ms- dan -o-. Warna-warna tersebut saya dapatkan dari sampling warna windows XP aslinya menggunakan photoshop :).

Selanjutnya kita beri style untuk tombol startnya.

#start{
    cursor:pointer;
    float:left;
    height:20px;
    padding:5px 10px;
    width:75px;
        
    
    background:-webkit-linear-gradient(
        #388438 0%,
        #8FBF8F 10%,
        #74B375 15%,        
        #47AB47 80%,
        #45A545 95%,
        #307443 100%
        );
            
    border-top-right-radius:8% 35% ;
    border-bottom-right-radius:8% 35%;
    box-shadow: inset -3px -2px 10px rgba(31,97,31,.9),0 3px 3px rgba(255,255,255,.3);
    color:white;
    font-style:italic;
    font-weight:bold;
    font-size:18px;
    text-shadow:0 1px 3px rgba(0,0,0,.8);
    
}

#start img{margin-right:10px;}


Untuk lengkungan yang terdapat dalam tombol start, saya gunakan CSS3 Border-radius (artikelnya bisa dibaca disini http://www.ariona.net/bermain-main-dengan-css3-border-radius/). Untuk nilainya saya try and error dan mendapatkan nilai yang pas untuk membuat lengkungan yang terlihat seperti tombol start windows XP.

Bagian selanjutnya yang akan kita beri style adalah area notification yang terdapat di sebelah kanan layar. Berikut ini adalah style yang diberikan.

#notification{
    float:right;
    height:10px;
    padding:10px;
    border-left:1px solid #0C2B50;
    font-size:11px;
    background:-webkit-linear-gradient(
            #16AEF0 0%,
            #19B9F3 10%,
            #1187E4 15%,
            #0D9AEF 80%,
            #1393E5 95%,
            #095BC9 100%
        );
    box-shadow:inset 2px 0 3px rgb(25,185,243);
}

Selesai, silahkan coba buka dan replika taskbar windows XP pun berhasil dibuat tanpa bantuan gambar satupun ( kecuali icon 🙂 ).

Demonstrasi

Kesimpulan

Eksperimen di atas (membuat taskbar windows xp) hanyalah sebagian kecil dari implementasi CSS3 Gradient dalam pembuatan user interface, selebihnya anda dapat menggunakan CSS3 Gradient pada project anda dan mengurangi penggunaan gambar untuk penanganan masalah gradient. Pada dasarnya CSS3 gradient ini memerintahkan browser untuk membuat gambar gradient dan menerapkannya, meskipun demikian penggunaan CSS3 Gradient lebih dianjurkan dibandingkan menggunakan file gambar (terkecuali jika gradasinya sangat kompleks dan tidak bisa ditangani oleh css3 gradient).

Sumber : https://www.webkit.org/blog/1424/css3-gradients/

Category HTML & CSSTag

14 Komentar untuk “Bermain-main dengan CSS3 : Gradient

  1. Karena ini website berbagi ilmu… ” saya aja yang jawab 🙂 Beliaw menggunakan WordPress dan beberapa jquery code….

    betul ga mas.hehehehe.. kalo saya ga slh

  2. masih juga nggak valid css3 dengan gradient ini..
    erornya kayak gini ..

    Value Error : background-image top is not a color value )

    • CSS3 gradient ini emang seudah beberapakali mengalami perubahan syntax.

      lagipula validator CSS3 itu masih experimental, toh CSS3nya juga belum selesai (masih dalam tahap pengembangan).

      jadi jangan dipusingkan dengan validatornya 🙂 cob aja kamu validasi CSS punya google, facebook atau situs besar lainnya pasti pada error 😀

Tinggalkan Komentar Anda

This site uses Akismet to reduce spam. Learn how your comment data is processed.