Cara Membuat Pita dengan CSS3

Cara Membuat Pita dengan CSS3 - Pernahkah kalian melihat tampilan pita atau ribbon pada website ? Biasanya bentuk tampilan pita dikombinasikan dengan konten berupa teks judul. Lalu, bagaimana cara membuat pita ? Nah, pada kesempatan kali ini akan saya bagikan tutorialnya yaitu bagaimana Cara Membuat Pita dengan CSS3. Langsung saja saya akan praktekan langkah - langakah membuat pita berikut ini.

Langkah 1 : Cara Membuat Pita dengan CSS3

Baik, langsung saja kita mulai dengan membuat struktur sederhana untuk membuat pita, silahkan ketikan sintak HTML berikut untuk memasukan konten berupa teks kedalanm pitanya.

<body>
    <div id="wrapper">
        <span id="text">DUMETSCHOOL.</span>
    </div>
</body>

Langkah 2 : Cara Membuat Pita dengan CSS3

Selanjutnya, untuk membuat bentuk tampilan pita kita akan memanfaatkan CSS3 untuk mendesain tampilannya, baik layout, warna dan lainnya, silahkan kalian ketikan sintak CSS3 berikut.

@import url('https://fonts.googleapis.com/css?family=Anton');
*{margin:0px;padding:0px;}
html {
      width:100%;
    height:100%;
      text-align: center;
}
#wrapper {
    padding: .34em 1em;
    margin: 0;
    margin-top: 5%;
    position:relative;
    color: #ffffff;
    font-family: 'Anton', sans-serif;
    font-size: 45px;
    text-align: center;
    letter-spacing: 0.1em;
    text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
    box-shadow: inset 0px 1px 0px rgba(255,255,255,.3),
                inset 0px 0px 20px rgba(0,0,0,0.1),
                0px 1px 1px rgba(0,0,0,0.4);
    background: -webkit-linear-gradient(top,#1eb2df, #17a7d2);
    display: inline-block;
}    
#wrapper:before,
#wrapper:after {
    content: "";
    width: .2em;
    bottom: -.5em;
    position:absolute;
    border: .9em solid #1eb2df;
    z-index: -2;
}    
#wrapper:before {
    left: -1.35em;
    border-right-width: .75em;
    border-left-color:transparent;
}    
#wrapper:after {
    right: -1.35em;
    border-left-width: .75em;
    border-right-color:transparent;
}    
#text:before, #text:after {
    content:"";
    bottom: -.5em;
    position:absolute;
    border-style:solid;
    border-color: #0675b3 transparent transparent transparent;
    z-index:-1;
}
#text:before {
    left: 0;
    border-width: .5em 0 0 .5em;
}
#text:after {
    right: 0;
    border-width: .5em .5em 0 0;
}

Nah, setelah semua sintak diatas telah kalian ketikan semua, selanjutnya simpan filenya dengan nama index.html kemudian buka pada browser masing - masing dan lihat hasilnya, maka tampilan pita yang telah kita buat akan seperti gambar berikut.

Cara Membuat Pita dengan CSS3

Bagaimana, menarik bukan tampilan pitanya ? Baik, cukup sekian tutorial sederhana mengenai bagiamana Cara Membuat Pita dengan CSS3, semoga tutorial ini bisa bermanfaat dan selamat mencoba :)

8 Mei 2018

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 Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat