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.

<body>
    <div id="wrapper">
      <div><h1>DUMETSCHOOL.</h1></div>
    </div>
</body>

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.

@import url('https://fonts.googleapis.com/css?family=Nosifer');
body {
    color: #d35400;
    background-size: 4px;
    background-image: linear-gradient(90deg, currentColor 50%, black 50%);
}
h1 {
    font-family: 'Nosifer', cursive;
}
#wrapper div {
    margin-top: 300px;
    text-align: center;
    font-size: 70px;
    font-weight: bolder;
}

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

background-image: linear-gradient(90deg, currentColor 50%, black 50%);

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.

Cara Membuat Efek Background Bergaris dengan CSS3

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.

4 Oktober 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat