Hai sobat?
Kali ini saya di beri Request dari Sahabat Kita
T: Tau nggak cara bikin gambar dengan Ribbon efek CSS
R: Lumayan sih sobat,tapi coba saya uji latihan melalui jsbin.com
T: Oke sob,kalau sudah nanti tutorial ya beri tau saya ya,,,
Jadi saya bikin CSS ini dengan Title "CSS Ribbon Gallery Image"
Jadi saya punya 2 Style kali ini ,yaitu:
Nah,Style tersebut saya artikan,yaitu
Style 1:Ribbon Title
Style 2: Ribbon Tempat Foto
Oke langsung aja,,
Style 1
Install Program CSS
.ribbon-gallery { position: relative; color: #fff; display: inline-block; padding: 7px; overflow: hidden; font: bold 16px Arial; text-shadow:0 0 3px #f2f2f2 inset; width:260px; }
.ribbon-gallery img{ width:250px; height:300px; border:5px solid green;border-radius:1px;background:green;}
.ribbon-gallery img:hover { border:5px solid #52e052;border-radius:0px }
.ribbon-gallery p { display: inline; }
.ribbon-gallery p span { position: absolute; display: inline-block; right: -40px; top: 20px; text-align: center; text-transform: uppercase; background: green; border: 2px solid lime; outline: 5px solid green; width: 300px; padding: 5px 10px; transform: rotate(45deg);color:lime;text-shadow:1px 1px 0 black }
.ribbon-gallery p span:first-letter{border-top:2px solid white;border-bottom:2px solid white;border-radius:6px;padding:3px;color:white;font-weight:bold;}
.ribbon-gallery p:before { content: ""; width: 0; height: 0; position: absolute; top: 59px; z-index: 1; left: -7px; border-left:15px solid transparent;border-top:7px solid green;}
.ribbon-gallery p:after { content: ""; width: 0; height: 0; position: absolute; top: 59px; z-index: 1; right: -7px; border-right:15px solid transparent;border-top:7px solid green;}
Install Program HTML
<div class="ribbon-gallery">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNX-fuRGC7LFSGDm02XuIBQPpFbZYsTFQsnxQOdptTI5CH9YTRjuKyvN4MwUICcGQBBqd9aUlYkDB7UQep15tMeuFl0LWQSDFWguOdim_9So5G2DloaXJ_IaXs_0fPMynoyjqGMVZ33r4Y/s640/blogger-image-1927639594.jpg" alt="" />
<p><span>Template Shadow CSS 2</span></p>
</div>
Style 2
Install Program CSS
/*********Ribbon by: www.belajar-css3.blogspot.com*****/
.ribox{ position: absolute; color: #fff; display: inline-block; padding: 7px; overflow: hidden; font: bold 16px Arial; text-shadow:0 0 3px #f2f2f2 inset; width:260px;height}
.ribox img{width:250px; height:300px; border:5px solid green;border-radius:1px;background:green}
.ribox p { display: inline; }
.ribox p span { position: absolute; display: inline-block; right: -40px; top: 285px; text-align: center; text-transform: uppercase; background: green; border: 2px solid lime; outline: 5px solid green; width: 300px; padding: 5px 10px;color:lime;text-shadow:1px 1px 0 black }
.ribox p span:first-letter{border-top:2px solid white;border-bottom:2px solid white;border-radius:6px;padding:3px;color:white;font-weight:bold;}
.ribox p:before { content: ""; width: 0; height: 0; position: absolute; top: 274px; z-index: 1; left: -7px; border-left:15px solid transparent;border-bottom:7px solid green;}
.ribox p:after { content: ""; width: 0; height: 0; position: absolute; top: 274px; z-index: 1; right: -7px; border-right:15px solid transparent;border-bottom:7px solid green;}
/**************End Style By: www.belajar-css3.blogspot.com*****/
Install Program HTML
<div class="ribox">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNX-fuRGC7LFSGDm02XuIBQPpFbZYsTFQsnxQOdptTI5CH9YTRjuKyvN4MwUICcGQBBqd9aUlYkDB7UQep15tMeuFl0LWQSDFWguOdim_9So5G2DloaXJ_IaXs_0fPMynoyjqGMVZ33r4Y/s640/blogger-image-1927639594.jpg" alt="" />
<p><span>Template Shadow CSS 2</span></p>
</div>
Oke sekian dari saya,saya ucapkan terima kasih.
Jika ada yang ingin Request lagi atau Ada masalah dari tutorial saya,
Silahkan komentar atau kunjungi
Quest Book
Title : Ribbon Gallery Image
Description : Hai sobat? Kali ini saya di beri Request dari Sahabat Kita T: Tau nggak cara bikin gambar dengan Ribbon efek CSS ...
