Selamat datang lagi di warungbelajar, dalam tutorial kali ini kita masih membahas mengenai CSS3, apa nih yang akan kita pelajari ??
ya kita akan belajar mengenai membuat Animasi dengan menggunakan CSS3, keren kan membuat animasi lho, kita akan belajar untuk membuat gerakan pada objek pada halaman web yang kita buat. Read more “Tutorial Belajar CSS 3 Part 7 – Membuat Animasi dengan CSS3”
Jika dalam tutorial sebelumnya kita telah belajar mengenai property trasnform yang ada di CSS3, yang digunakan untuk merubah tampilan dari objek web, seperti perubahan ukuran, rotasi dan lain sebagainya, nah dalam tutorial ini kita akan membahas mengenai property transition yang bisa kita berikan pada perubahan bentuk dari objek yang menggunakan property transform.
dengan menggunakan property transition anda dapat mengatur beberapa parameter seperti waktu yang dibutuhkan untuk transisi, kecepatan untuk transisi, dan beberapa parameter yang lainnya. Read more “Tutorial Belajar CSS 3 Part 6 – Transisi pada CSS3”
Dalam tutorial kali ini kita akan membahas salah satu fitur dari CSS3 yaitu transform, dengan menggunakan transform teman – teman dapat merubah dari tampilan sebuah objek, seperti memutar objek(rotate), memperbesar ukuran(scale), dan skew dan beberapa fitur lainnya Read more “Tutorial Belajar CSS 3 Part 5 – Transform pada CSS3”
Dalam tutorial ini kita akan membahas mengenai salah satu fitur dari CSS3 yang digunakan untuk membuat gradient warna, jika dalam tutorial sebelumnya kita telah belajar mengenai bagaimana cara merubah warna dengan menggunakan CSS, dimana kita hanya belajar memberi satu warna saja pada sebuah objek.
Nah di tutorial ini agar berbeda kita akan belajar mengenai fitur CSS3 yaitu Gradient Color yang digunakan untuk membuat perpaduan beberapa warna pada sebuah objek.
Pada CSS 3 terdapat beberapa 2 tipe dari gradient warna yaitu :
Baik kita akan membahasnya satu persatu tipe dari gradient warna ini.
Linier Gradient digunakan untuk menggabungkan beberapa warna sekaligus, dengan perpaduan warna dengan komposisi vertical (bawah ke atas atau sebaliknya), atau horizontal (kiri ke kanan atau sebaliknya).
Untuk perintah dari Linier Gradient adalah seperti berikut ini :
background: linear-gradient(arah_perubahan_warna, warna ke -1, warna ke -2, warna ke – N);
Untuk memahami contohnya silahkan perhatikan skrip dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #kotak_atas_ke_bawah { background: red; /* Untuk Browser yang tidak mensupport gradient color */ background: -webkit-linear-gradient(orange, yellow); /* Untuk Safari 5.1 to 6.0 */ background: -o-linear-gradient(orange, yellow); /* Untuk Opera 11.1 to 12.0 */ background: -moz-linear-gradient(orange, yellow); /* Untuk Firefox 3.6 to 15 */ background: linear-gradient(orange, yellow); /* Syntax Standart */ width: 100%; height: 100px; } #kotak_kiri_ke_kanan { background: red; /* Untuk Browser yang tidak mensupport gradient color */ background: -webkit-linear-gradient(left, orange , yellow); /* Untuk Safari 5.1 to 6.0 */ background: -o-linear-gradient(right, orange, yellow); /* Untuk Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right, orange, yellow); /* Untuk Firefox 3.6 to 15 */ background: linear-gradient(to right, orange , yellow); /* Syntax Standart */ width: 100%; height: 100px; } #kotak_kiri_atas_ke_kanan_bawah { background: red; /* Untuk Browser yang tidak mensupport gradient color */ background: -webkit-linear-gradient(left top, orange, yellow); /* Untuk Safari 5.1 to 6.0 */ background: -o-linear-gradient(bottom right, orange, yellow); /* Untuk Opera 11.1 to 12.0 */ background: -moz-linear-gradient(bottom right, orange, yellow); /* Untuk Firefox 3.6 to 15 */ background: linear-gradient(to bottom right, orange, yellow); /* Syntax Standart */ width: 100%; height: 100px; } #kotak_multi_warna { background: red; /* Untuk Browser yang tidak mensupport gradient color */ background: -webkit-linear-gradient(orange, yellow, blue); /* Untuk Safari 5.1 to 6.0 */ background: -o-linear-gradient(orange, yellow, blue); /* Untuk Opera 11.1 to 12.0 */ background: -moz-linear-gradient(orange, yellow, blue); /* Untuk Firefox 3.6 to 15 */ background: linear-gradient(orange, yellow, blue); /* Syntax Standart */ width: 100%; height: 100px; } </style> </head> <body> <div id="kotak_atas_ke_bawah"></div> <br/> <div id="kotak_kiri_ke_kanan"></div> <br/> <div id="kotak_kiri_atas_ke_kanan_bawah"></div> <br/> <div id="kotak_multi_warna"></div> </body> </html> |
Semisal kita simpan dengan nama linear-gradient.html, lalu kita buka di browser maka hasilnya adalah
Maka hasilnya adalah seperti gambar diatas, baik kita akan coba bahas satu persatu :
Radial Gradient ini digunakan untuk membuat perpaduan warna secara radial (melingkar), teman – teman bisa membuat perpaduan dengan perintah berikut ini :
background: radial-gradient(warna ke -1, warna ke -2, warna ke – N);
Untuk memahami konsep dari radial gradient silahkan perhatikan skrip dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #kotak_1 { background: red; /* Untuk Browser yang tidak mendukung Radial Gradient */ background: -webkit-radial-gradient(orange, yellow, green); /* Safari 5.1 to 6.0 */ background: -o-radial-gradient(orange, yellow, green); /* Untuk Opera 11.6 to 12.0 */ background: -moz-radial-gradient(orange, yellow, green); /* Untuk Firefox 3.6 to 15 */ background: radial-gradient(orange, yellow, green); /* Syntax standart */ width: 100%; height: 150px; } #kotak_2 { background: red; /* Untuk Browser yang tidak mendukung Radial Gradient */ background: -webkit-radial-gradient(orange 15%, yellow 30%, green 55%); /* Safari 5.1 to 6.0 */ background: -o-radial-gradient(orange 15%, yellow 30%, green 55%); /* Untuk Opera 11.6 to 12.0 */ background: -moz-radial-gradient(orange 15%, yellow 30%, green 55%); /* Untuk Firefox 3.6 to 15 */ background: radial-gradient(orange 15%, yellow 30%, green 55%); /* Syntax standart */ width: 100%; height: 150px; } #kotak_3 { background: red; /* Untuk Browser yang tidak mendukung Radial Gradient */ background: -webkit-radial-gradient(circle, orange, yellow, green); /* Safari 5.1 to 6.0 */ background: -o-radial-gradient(circle, orange, yellow, green); /* Untuk Opera 11.6 to 12.0 */ background: -moz-radial-gradient(circle, orange, yellow, green); /* Untuk Firefox 3.6 to 15 */ background: radial-gradient(circle, orange, yellow, green); /* Syntax standart */ width: 30%; height: 300px; } </style> </head> <body> <div id="kotak_1"></div> <br/> <div id="kotak_2"></div> <br/> <div id="kotak_3"></div> </body> </html> |
Semisal kita simpan dengan nama radial-gradient.html, lalu kita buka di browser maka hasilnya adalah seperti berikut ini :
Maka hasilnya adalah seperti gambar diatas, penjelasannya adalah sebagai berikut :
Bagaimana teman – teman mudah bukan membuat gradient warna, baik linear-gradient ataupun radial gradient, teman – teman hanya tinggal menuliskan propertinya dan value dari masing – masing propertinya.
Dalam tutorial ini kita akan membahas mengenai Effect Shadow dengan menggunakan CSS3, dalam CSS3 anda dapat menggunakan effect Shadow pada Text dan Box.
Jadi teman – teman dapat memberikan effect bayangan (Shadow) pada bagian text ataupun box dengan menggunakan fitur ini. Read more “Tutorial Belajar CSS 3 Part 3 – Membuat Efek bayangan pada text dan box”