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.
<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.
*{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.
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 :)
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
