Cara Membuat Efek Background Bergaris dengan CSS3

04/10/2017    Risman Hakim    897     Website

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.

Artikel, Web Design, HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More