Tutorial Membuat Box Menggunakan CSS

Tutorial Membuat Box Menggunakan CSS

      Tak ada komentar pada Tutorial Membuat Box Menggunakan CSS

Membuat Box Menggunakan css

Turorial kali ini Bier Pinter akan mengajak kamu bagaimana cara membuat box menggunakan css. Box dalam tutorial kali ini sangat sederhana tapi menarik. Dan kalian juga bisa mendesain ulang kotak tersebut sesuai dengan kemauan kalian. Mungkin dengan menganti warna, menggubah box shadow atau menambahkan gambar pada kotak tersebut. Semakin banyak kalian latihan desain menggunakan CSS, maka semakin banyak kalian tahu properti-properti css.

Persiapan, masukan dulu koding lengkap box ini ke code editor kalian, setelah itu kita bahas properti dan nilai yang digunakan untuk membuat box tersebut.

HTML

CSS

Setelah kalian memasukkan koding box, coba kalian lihat hasilnya. Hasilnya akan terlihat seperti gambar dibawah ini, namun jika kalian mengarahkan kursor ke arah kotak tersebut maka akan muncul seperti bayangan kotak. Jadi seolah-olah kotak tersebut ada dua. Gambar yang dibawah ini hanya contohnya saja. Kalian cek hasil yang di code editor kalian.

Tutorial Membuat Box Menggunakan CSS

Gambar 1.1 – Box atau Kotak

Baca Juga: Cara Membuat Progress Bar Menggunakan Javascript

Desain kotak dengan menambahkan lebar dan tinggi serta menambahkan warna background hijau. Border radius untuk membuat efek lengkung pada setiap sisi kotak. Semakin besar kalian menambahkan nilai pada border radius maka kotak akan semakin melengkung atau terlihat bulat.

Ketika kita mengarahkan kursor ke kotak maka efek bayangan kotak akan terlihat, itulah fungsi hover disini. Box shadow yang membuat efek seperti bayangan, sehingga kotak terlihat double. rumus box shadow : vertikal, horizontal, blur, warna. Namun di kotak ini kita tidak menambahkan blur. Kita hanya menambahkan vertikal, horizontal, dan warna pada box shadow. Setelah itu kita menambahkan transition dengan durasi satu detik. Transition seperti durasi bayangan kotak ketika muncul. Jadi semakin besar angka durasi, maka bayangan kotak akan muncul lebih lama.

Class content untuk mendesain huruf dan letak huruf. Demikian tutorial cara membuat box menggunakan css. Semoga tutorial kali ini bermanfaat.

Tinggalkan Balasan