◄ Min  Size Fonts: + | - | ± Color: Max ►

Add a Vintage Style to Images

Pasti keren jika trick hover dipadukan dengan berbagai elemen CSS3 untuk memperindah tampilan gambar pada area postingan. Berbicara mengenai image trick dipikir-pikir tidak ada habisnya ;)) Seperti artikel lawas gue satu ini make tint effect for image! Ketika itu penggunaan background dan warna rgba yang membuat gambar tampak berefek warna-warni transparan gimana gitoH :d Nah, sekarang bagaimana jadinya jika trik lawas itu kita perbaharui dengan menambahkan properti background-size dan box shadow
Mari kita mulai cara membuat efek vintage style pada image menggunakan property CSS.
.vintage {
 position: relative;
 float: left;
}
.vintage:before {
 content: "";
 display: block;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background-size: 100% 100%;
 background-color: rgba(255,102,0, 0.6); /* sepia */
 background-image: url(http://2.bp.blogspot.com/-Qva8IVtO25k/UFejhDww-zI/AAAAAAAADAY/RnlCb7JO0xs/s1600/grunge.png);
 box-shadow: inset 0 0 55px #000, inset 0 0 55px #000, inset 0 0 55px #000;
 -webkit-transition: all 1s;
 -o-transition: all 1s;
 transition: all .1s;
}
.vintage:hover:before {
 background: none;
 box-shadow: none;
}
Syntax HTML<div class="vintage">
<img src="YOUR IMAGE HERE" />
</div>
Opsional
Macam-macam background-color bisa diganti dengan:

background-color: rgba(0,0,255,0.5); /* blue */
background-color: rgba(0,255,0,0.5); /* green */
background-color: rgba(0,255,255,0.5); /* cyan */
background-color: rgba(255,0,0,0.5); /* red */
background-color: rgba(255,0,240,0.5); /* violet */
Resource by: http://helplogger.blogspot.com
Happy coding \m/
Loading...
XAdd a Vintage Style to Images
Add a Vintage Style to Images memberikan efek bergaya vintage pada image buat blogger
Subscribe my posts Register For Free!
[?] g+ convert

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/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE