Artikel gaya untuk CSS3 Border for Image jatuh pada postingan kali ini. Seperti gaya pada blockquote Post Here for Blockquote, serta hover pada image Hover Image for Blogger. Sekarang bagaimana membuat CSS3 Border Images for Beautiful, Flexible Boxes. Dengan kata lain kita akan bermain border (batas, pinggiran) menggunakan sebuah gambar dan gambar nanti akan bisa diisi dengan kata-kata setelah disentuh dengan sedikit ramuan dari kode² CSS3 (fleksibel) Kalau kata² keterangan diatas membingungkan, mari kita langsung cek ke tekape saja :D
Hanya dengan menggunakan salah satu dari gambar beresolusi kurang lebih 75 x 80 tersebut sobat dapat menghasilkan seperti berikut! Result1 and Result2 How Does It Work? :D
LIVE DEMO
Sudah lihat kan bagaimana aksi dari trik ini :-" Bumbu-bumbu yg kita butuhkan disini meliputi gambar yg tentunya sudah harus ada. Jika menginginkan seperti tampak pada LIVE DEMO gambarnya sobat dapat melakukan upload disini dan lalu dihosting Pics.
Original Article
Good Luck :-bd
Hanya dengan menggunakan salah satu dari gambar beresolusi kurang lebih 75 x 80 tersebut sobat dapat menghasilkan seperti berikut! Result1 and Result2 How Does It Work? :DSudah lihat kan bagaimana aksi dari trik ini :-" Bumbu-bumbu yg kita butuhkan disini meliputi gambar yg tentunya sudah harus ada. Jika menginginkan seperti tampak pada LIVE DEMO gambarnya sobat dapat melakukan upload disini dan lalu dihosting Pics.
Kode CSS
.border-image-example {
border-width: 45px;
-webkit-border-image: url(bg-pawprints-lines.jpg) 45 repeat;
-moz-border-image: url(bg-pawprints-lines.jpg) 45 repeat;
border-image: url(bg-pawprints-lines.jpg) 45 repeat;
font-family: Arial, Helvetica, sans-serif;
color: #222;
width: 320px;
margin: 30px 0 30px 20px;
float: left;
}
p {
margin: 0;
padding: 0 0 12px 0;
line-height: 1.4;
}
Tulisan berwarna biru ganti dengan gambar yg disuruh upload tadi.border-width: 45px;
-webkit-border-image: url(bg-pawprints-lines.jpg) 45 repeat;
-moz-border-image: url(bg-pawprints-lines.jpg) 45 repeat;
border-image: url(bg-pawprints-lines.jpg) 45 repeat;
font-family: Arial, Helvetica, sans-serif;
color: #222;
width: 320px;
margin: 30px 0 30px 20px;
float: left;
}
p {
margin: 0;
padding: 0 0 12px 0;
line-height: 1.4;
}
Kode HTML
Kode ini dipakai dalam penulisan nanti pada postingan sobat.<div class="border-image-example">
<p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental.</p>
<p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.</p>
</div>
Sobat hanya tinggal memakai kode tag yg diberi warna hijau. Jika sobat tidak mau memakai paragraf <p>...</p> sobat tinggal menghapus pada kode CSS yg diberi warna merah. Lihat source pada live demo jika mau kode2 yg lainnya ;) :D<p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental.</p>
<p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.</p>
</div>
Good Luck :-bd
Loading... |
2 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...