Selasa, 28 Januari 2014

Add Captionss for Beauty Image Display

Tag <figure> merupakan salah satu new semantic elements dari HTML5. Lihat table informasi support mengenai hal ini caniuse.com/#feat=html5semantic Dengan menambahkan elemen figure pada tag gambar satu manfaat yang terasa yaitu mempermudah dalam memberikan tag <figcaption> Singkat penjelasan, dengan hadirnya 2 jenis elemen tersebut akan mempermudah kita dalam menghias tagging gambar plus keterangan singkat dari gambar yg dimaksud.
Contoh:
img-post
Gambar seekor kucing unyui-unyu.
Tanpa memberikan embel² CSS tampak akan seperti gambar contoh. Image akan terlihat lebih indah jika 2 element figure & figcaption diberikan sedikit sentuhan CSS ;) Koben mau berbagi info tentang sensible CSS image captions. Master Josh Branchaud sudah membuatkan captionss
.embed, .embed-top, .overlay {
display: inline-block;
vertical-align: top;
position: relative;
margin: 0;
font-size: .8em;
background: white;
overflow: hidden;
}
.embed img, .embed-top img, .overlay img {
width: 100%;
display: block;
}
.embed figcaption, .embed-top figcaption, .overlay figcaption {
width: 100%;
padding: .5em;
color: rgba(50, 50, 50, 1.0);
background: rgba(200, 200, 200, 0.825);
}
.embed *, .embed-top *, .overlay * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.embed figcaption {
position: absolute;
bottom: 0;
}
.embed-top figcaption {
position: absolute;
top: 0;
}
.overlay figcaption {
width: 100%;
height: 100%;
position: absolute;
top: 0;
opacity: 0;
}
.overlay:hover figcaption {
opacity: 1;
}
.light figcaption {
color: rgba(80, 80, 80, 1.0);
background: rgba(245, 245, 245, 0.825);
}
.dark figcaption {
color: rgba(245, 245, 245, 1.0);
background: rgba(50, 50, 50, 0.7);
}
.medium {
font-size: 1.0em;
}
.large {
font-size: 1.2em;
}
.xlarge {
font-size: 1.5em;
}
.hide figcaption {
opacity: 1;
}
.hide:hover figcaption {
opacity: 0;
}
.hide-smooth figcaption {
opacity: 1;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.hide-smooth:hover figcaption {
opacity: 0;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.reveal figcaption {
opacity: 0;
}
.reveal:hover figcaption {
opacity: 1;
}
.reveal-smooth figcaption {
opacity: 0;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.reveal-smooth:hover figcaption {
opacity: 1;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
Saya menghilangkan value figure dari kode sumber. Agar syntax tidak secara khusus untuk digunakan memakai tag figure (bisa juga dengan tag div)!
Penulisan markup<figure class="embed">
<img src="http://placekitten.com/g/300/200" alt=""/>
<figcaption>
The caption text goes here...
</figcaption>
</figure>
Ada 3 jenis style <figure class=". . ."> yg bisa kalian pakai: embed, embed-top and overlay.

Full Feature Listing

Style:
embed Positions a caption at the bottom.
embed-top Positions a caption at the top.
overlay Overlays the entire image with a caption.
Theme:
neutral Black on light gray (default).
light Gray on lighter gray.
dark White on dark gray.
Font Size:
normal Slightly smaller than page font-size, 0.8em (default).
medium The page's font-size, 1.0em.
large Slightly larger than page font-size, 1.2em.
xlarge Large font-size for large images, 1.5em.
Effect:
hide Hide the caption immediately on mouse hover.
hide-smooth Smoothly hide the caption on mouse hover.
reveal Reveal the caption immediately on mouse hover.
reveal-smooth Smoothly reveal the caption on mouse hover.
img-post
Kucing yang unyu-unyu...
img-post
Kucing yang unyu-unyu...
img-post
Kucing yang unyu-unyu...
img-post
Kucing yang unyu-unyu...
img-post
Kucing yang unyu-unyu...
img-post
Kucing yang unyu-unyu...
img-post
Kucing yang unyu-unyu...
img-post
Kucing yang unyu-unyu...
img-post
Kucing yang unyu-unyu...
img-post
Kucing yang unyu-unyu...

Happy figure \m/

Tidak ada komentar:

Posting Komentar