Prodigy of Head | Add Captionss for Beauty Image Display

Link to Tutorial Blog for Stylish Blogger

Posted: 28 Jan 2014 07:00 PM PST

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.

Happy figure \m/

Prodigy of Head | Add Captionss for Beauty Image Display

Prodigy of Head | Add Captionss for Beauty Image Display

Full Feature Listing

Next

Newer Post

Previous

Older Post