Mengenal Pseudo-element dengan Bubble

Tutorial kali ini akan membahas CSS pseudo-elements yang merupakan bagian dari :after pseudo-elements dapat dimanfaatkan untuk membuat beberapa efek menarik, tanpa perlu menggunakan markup yang rumit. Tapi sebelumnya, mari kita lihat masing-masing pseudo-elements ini dan bagaimana cara dasar dalam menggunakannya.

Pseudo-elemen :after digunakan untuk menyisipkan konten pada area sebelum atau setelah konten dalam sebuah elemen. Konten yang dihasilkan, ditentukan dengan menggunakan properti ’content’, untuk itu s-widodo.com akan memberikan beberapa contoh dari Pseudo-elemen :after dalam contoh ini saya menggunakan Pembuatan Bubble

.bubble_1{ font-family:Arial, Helvetica, sans-serif;color:#fff; text-transform:uppercase; line-height:40px; text-align:center; font-size:20px;
position: relative;
width:300px;
height: 120px;
padding: 0px;
background: #FA0000;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;margin:auto}

.bubble_1:after{
content: ';
position: absolute;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #FA0000;
display: block;
width: 0;
z-index: 1;
left: -15px;
top: 45px;
}

.bubble_2{ font-family:Arial, Helvetica, sans-serif;color:#fff; text-transform:uppercase; line-height:40px; text-align:center; font-size:20px;
position: relative; margin:auto;
width: 300px;
height: 120px;
padding: 0px;
background:#0099FF;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px; }

.bubble_2:after{
content: ';
position: absolute;
border-style: solid;
border-width: 15px 0 15px 15px;
border-color: transparent #0099FF;
display: block;
width: 0;
z-index: 1;
right: -15px;
top: 45px;
}

.bubble_3{ margin:auto; font-family:Arial, Helvetica, sans-serif;color:#fff; text-transform:uppercase; line-height:40px; text-align:center; font-size:20px;
position: relative;
width: 300px;
height: 120px;
padding: 0px;
background:#FF9900;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px; }

.bubble_3:after{
content: ';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #FF9900 transparent;
display: block;
width: 0;
z-index: 1;
top: -15px;
left: 135px;
}

.bubble_4{ margin:auto; font-family:Arial, Helvetica, sans-serif;color:#fff; text-transform:uppercase; line-height:40px; text-align:center; font-size:20px;
position: relative;
width: 300px;
height: 120px;
padding: 0px;
background:#9933CC;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px; }

.bubble_4:after{
content: ';
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #9933CC transparent;
display: block;
width: 0;
z-index: 1;
bottom: -15px;
left: 135px;
}

HTML

<div class="bubble_1">bubble 1 </div>

<div class="bubble_2">bubble 2 </div>

<div class="bubble_3">bubble 3 </div>

<div class="bubble_4">bubble 4 </div>

Dari sini, Anda hanya perlu menambahkan pseudo-elemen bentuk segitiga untuk membuat efek ribbon. Pseudo-element :after.

Sekian Dari saya.

Salam : swidodo.com