Tutorial Belajar CSS 3 Part 7 – Membuat Animasi dengan CSS3

by Aris Samsudin | Dec 14, 2017 | Tutorial CSS

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. (more…)

Tutorial Belajar CSS 3 Part 6 – Transisi pada CSS3

by Aris Samsudin | Dec 12, 2017 | Tutorial CSS

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. (more…)

Tutorial Belajar CSS 3 Part 5 – Transform pada CSS3

by Aris Samsudin | Nov 25, 2017 | Tutorial CSS

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 (more…)

Tutorial Belajar CSS 3 Part 4 – Gradient Warna CSS3

by Aris Samsudin | Nov 17, 2017 | Tutorial CSS

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 :

1. Linier gradient
2. radial gradient

Baik kita akan membahasnya satu persatu tipe dari gradient warna ini.

Linier Gradient

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 :

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 :

• Objek pertama yang menggunakan id “kotak_atas_ke_bawah”, warna yang terbuat adalah perpaduan antara warna orange dan kuning dengan komposisi gradient warna dari atas ke bawah, hal tersebut karena kita menuliskan linear-gradient(orange, yellow); , karena kita tidak memberikan nilai pada parameter pertama untuk menentukan pola warna sehingga warna ditampilkan dari atas ke bawah.
• Objek kedua yang menggunakan id “kotak_kiri_ke_kanan”, warna yang terbuat sama perpaduan antara orange dan kuning dengan komposisi gradient warna dari kiri ke kanan, karena parameter pertama kita berikan nilai “to right”
• Objek ketiga yang menggunakan id “kotak_kiri_atas_ke_kanan_bawah”, warna yang terbuat sama perpaduan antara orange dan kuning dengan komposisi gradient warna dari kiri atas ke kanan bawah, karena parameter pertama kita berikan nilai “to bottom right”
• Objek ketiga yang menggunakan id “kotak_multi_warna”, warna yang terbuat sama perpaduan antara orange, kuning, dan biru karena kita memberikan nilai “orange,yellow, blue”

Radial Gradient

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 :

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 :

• Objek pertama yang menggunakan id “kotak_1” perpaduan warnanya adalah orange, kuning, dan hijau, karena kita memberikan nilai “orange, yellow, green”
• Objek kedua yang menggunakan id “kotak 2” perpaduan warnaya adalah orange, kuning, dan hijau, tetapi terdapat presentase dari masing masing warna yang membentuk radial, semakin besar nilai presentasenya maka akan semakin besar area warna yang ada pada radial.
• Objek ketiga yang menggunakan id “kotak 3” perpaduan warnanya adalah orange, kuning, dan hijau, tetapi warna radial ini akan membentuk lingkaran berbeda dengan 2 objek sebelumnya yang mengikuti ukuran dari objeknya, radial warna pada objek ini berbentuk lingkaran karena nilai “circle” pada parameter pertama.

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.

Tutorial Belajar CSS 3 Part 3 – Membuat Efek bayangan pada text dan box

by Aris Samsudin | Nov 16, 2017 | Tutorial CSS

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. (more…)

Tutorial Belajar CSS 3 Part 2 – CSS3 Rounded Corners

by Aris Samsudin | Nov 10, 2017 | Tutorial CSS

Selamat datang di Warung Belajar, Alhamdulillah di tutorial ini kita sudah menginjak pembahasan di CSS 3, dalam tutorial ini kita akan membahas mengenai CSS3 Rounded Corners.

CSS3 Rounded Corners adalah salah satu fitur yang dimiliki CSS3 yang digunakan untuk membuat lengkungan pada sudut objek, jika dalam tutorial CSS kita sudah membahas mengenai box model di CSS, dalam tutorial tersebut kita belajar bagaimana membuat box yang secara default untuk sudutnya ya kotak biasa.

(more…)