Meneruskan dari artikel sebelumnya dari teknik pembuatan css triangle, berikutnya saya ingin mendokumentasikan implementasi tampilan lainnya dari css triangle dengan menambahkan elemen :before dan :after, silahkan baca artikel sebelumnya Membuat CSS Border Triangle
Sepintas tentang elemen before dan after bisa digambarkan dengan div dibawah ini :
h2.contoh {
font:bold 22px Verdana, Arial, Sans-Serif;
text-align:center;
color:#000;
}
<h2 class="contoh">
Contoh</h2>
Contoh
Jika kita menambahkan penggunaan elemen :before dan :after akan menjadi seperti ini:h2.contoh:before {
content:'Ini ';
color: green;
}
h2.contoh:after {
content:' Nya';
color: yellow;
}
Contoh
Itu sekilas tentang penggunaan elemen :before dan :after, berikutnya kita lanjutkan untuk membuat bentuh panah dengan css triangle, silahkan perhatikan gambar berikut:
1. CSS3 Ribbon
a. Ribbon 1 dengan menambahan elemen :after
.ribbon1 {
font:bold 16px Cambria,Georgia,Times,Serif;
color:#fff;
width:60%;
padding:0px 30px;
background:#075c85;
position:relative;
line-height:48px;
margin:50px auto;
}
.ribbon1:after {
content:"";
position:absolute;
top:0px;
left:100%;
width:0px;
height:0px;
border:24px solid transparent;
border-left-color: yellow;
}
- border:24px solid transparent; hal ini membuat semua border seperti gambar diatas berwarna transparan
- dan border-left-color: yellow; dengan kode ini membuat pengecualian warna transparan bagian kiri atau left berwarna yellow atau kuning
Ribbon 1
b. Berikutnya teknik ribon no 2 dengan elemen :before.ribbon2 {
font:bold 16px Cambria,Georgia,Times,Serif;
color:#fff;
width:60%;
padding:0px 30px;
background:#075c85;
position:relative;
line-height:48px;
margin:50px auto;
}
.ribbon2:before {
content:"";
position:absolute;
top:0px;
right:100%;
width:0px;
height:0px;
border:24px solid yellow;
border-left-color:transparent;
}
- border:24px solid yellow; dengan kode ini membuat tampilan border top, right, bottom, left berwarna yellow atau kuning
- border-left-color:transparent; dengan kode css ini membuat pengecualian untuk border left atau yang kirinya transparan.
Ribbon 2
c. Ribbon no 3 kita akan menggabungkan elemen :after dari ribbon no 1 dengan elemen :before dari ribbon no 2 sehingga kita bisa buat tampilan seperti dibawah ini: Ribbon 3
.ribbon3 {
font:bold 16px Cambria,Georgia,Times,Serif;
color:#fff;
width:60%;
padding:0px 30px;
background:#075c85;
position:relative;
line-height:48px;
margin:50px auto;
}
.ribbon3:before {
content:"";
position:absolute;
top:0px;
right:100%;
width:0px;
height:0px;
border:24px solid #075c85;
border-left-color:transparent;
}
.ribbon3:after {
content:"";
position:absolute;
top:0px;
left:100%;
width:0px;
height:0px;
border:24px solid transparent;
border-left-color:#075c85;
}
0 komentar:
Posting Komentar