Efek ini dapat tampil dengan baik pada mesin browser Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.
Peningkatan progresif dengan pseudo-elemen
Dengan HTML sederhana seperti <div>Konten</ div> atau <p>Konten</p> Anda dapat menghasilkan efek gelembung seperti berikut ini:
Posting ini akan membahas teknik yang digunakan untuk menciptakan efek sudut yang dilipat. lihat gambar dibawah...
Dengan menerapkan CSS3 properti seperti border-radius dan sejenisnya Anda dapat menghasilkan bentuk yang lebih kompleks dan orientasi. berikut ini adalah css contoh dasar:
.efek-gelembung {
position:relative;
padding:15px;
margin:1em 0 3em;
color:#000;
background:#f3961c;
/* css3 */
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
background:-moz-linear-gradient(top, #f9d835, #f3961c);
background:linear-gradient(top, #f9d835, #f3961c);
}
/* efek gelembung */
.efek-gelembung:after {
content:"";
display:block; /* mempaiki tampilan pada FF3.0 */
position:absolute;
bottom:-15px;
left:50px;
width:0;
border-width:15px 15px 0;
border-style:solid;
border-color:#f3961c transparent;
}untuk menggunakan css diatas pada html, silahkan gunakan kode dibawah ini:
<div class="efek-gelembung">
/.......... Tulisan anda disini ............./
</div>Demikian saja, semoga berguna untuk anda yang membutuhkan...
Tidak ada komentar :
Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>
Konversi KodeOOT