Cara Membuat Efek Background Bergaris dengan CSS3

CSS3 sebagai style dalam sebuah desain web memang sangat penting, karena tanpa CSS3 sebuah desain tampilan web tidak akan begitu menarik untuk dilihat. Oleh karena nya CSS3 menjadi bagian penting dalam desain website. Dengan CSS3 kita bisa membuat desain, layout, efek-efek, mengatur jenis huruf, ukuran huruf dan masih banyak lagi. Nah, berbicara tentang efek dalam CSS3. Berikut ini ada salah satu contoh efek yang bisa kita gunakan dalam menunjang tampilan desain web, yakni tutorial cara membuat efek background bergaris dengan CSS3. Untuk lebih jelasnya simak langkah-langkahnya sebagai berikut.

Dalam membuat desain tampilan, pertama kali yang harus kita lakukan adalah membuat struktur HTML5, berikut ini kode struktur HTML5 untuk membuat background bergaris.

Pada struktur HTML5 diatas bisa kita lihat, ada sebuah objek yang kita letakan didalam body yakni sebuah tulisan. Setelah membuat struktur HTML5 seperti diatas, selanjutnya kita akan membuat kode CSS3 untuk membuat efek background bergaris, dalam kasus ini garis yang akan kita buat adalah garis vertical atau garis dari atas kebawah. Berikut kode CSS3 untuk efek background bergaris.

Pada kode berikut, adalah kode untuk membuat efek garis yang sebenar nya.

Nah, setelah semua kode HTML5 dan CSS3 diketikan, selanjutnya simpan filenya kemudian buka dibrowser masing-masing dan lihat hasilnya, jika kode diatas telah sesuai maka hasilnya akan seperti gambar berikut.

Bagaimana, cukup mudah bukan untuk membuat efek bergaris ? Baiklah cukup sekian tutorial sederhana mengenai cara membuat efek bergaris dengan CSS3, semoga bermanfaat dan selamat mencoba.