Selamat siang brader blogger semua kembali posting ni setelah sebelumnya memposting
firefox versi 4 yang ternyata memiliki tampilan yang sedikit berbeda dari versi seblumnya. untuk kali ini ini saya akan memposting bukan seputar internet komputer melainkan seputar css dan blogger.
Seperti judul posting ini yaitu membuat
Speak Buble dengan Css3. Speek buble ini merupakan tehnik permainan border dengan css. Dengan menggunakan Css Speak Buble dapat dibuat tanpa menggunakan image jadi ini akan lebih ringan dibuka di browser.
Langsung saja pada penerapan dan koding css-y.
Sebagai contoh saya membuat speak buble untuk teks area.
contohnya bisa dilihat dibawah ini.
Pertama kita buat kode CSS Speak Buble-y seperti ini.
.speakbuble {
position:relative; padding:30px; margin:3px 0; margin-top:1%; color:#000;
text-align:center; background:#CCC; font-weight:bold;
text-shadow:1px 1px 1px #eee;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;}
.speakbuble:after {
content:"";
display:block; position:absolute;
bottom:-30px; left:10px; width:0; height:0;
border-width:0 40px 50px 0px;
border-style:solid;
border-color:transparent #CCC;}
.speakbuble + p {margin:2px 0 0 55px; font-weight:bold;}
Selanjutnya untuk memanggilnya gunakan kode html seperti ini :
Cukup mudah bukan silahkan di custom sesuai selera blogger.
Untuk background bisa menggunakan
background Gradient CSS3,
Box shadow ataupun lain2nya biar lebih menarik. Selamat mencoba.
0 komentar:
Posting Komentar