-
Contrast
Blur
Hue Rotate
Invert
Sepia
Opacity
HTML
<div class="picture"><img id="contrast" src="https://lh5.googleusercontent.com/-it2OdBAdbWg/VG209NqkyGI/AAAAAAABM0g/aWvzpP1FFTw/w62-h68-no/1.gif" alt="" />
<div class="picture"><img id="invert" src="https://lh5.googleusercontent.com/-it2OdBAdbWg/VG209NqkyGI/AAAAAAABM0g/aWvzpP1FFTw/w62-h68-no/1.gif" alt="" />
<h4 class="name">Contrast</h4>
</div>
<div class="picture"><img id="blur" src="https://lh5.googleusercontent.com/-it2OdBAdbWg/VG209NqkyGI/AAAAAAABM0g/aWvzpP1FFTw/w62-h68-no/1.gif" alt="" />
<h4 class="name">Blur</h4>
</div>
<div class="picture"><img id="hue_rotate" src="https://lh5.googleusercontent.com/-it2OdBAdbWg/VG209NqkyGI/AAAAAAABM0g/aWvzpP1FFTw/w62-h68-no/1.gif" alt="" />
<h4 class="name">Hue Rotate</h4>
</div>
<h4 class="name">Invert</h4>
</div>
<div class="picture"><img id="sepia" src="https://lh5.googleusercontent.com/-it2OdBAdbWg/VG209NqkyGI/AAAAAAABM0g/aWvzpP1FFTw/w62-h68-no/1.gif" alt="" />
<h4 class="name">Sepia</h4>
</div>
<div class="picture"><img id="opacity" src="https://lh5.googleusercontent.com/-it2OdBAdbWg/VG209NqkyGI/AAAAAAABM0g/aWvzpP1FFTw/w62-h68-no/1.gif" alt="" />
<h4 class="name">Opacity</h4>
</div>CSS
<style type="text/css"><!--
body{
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
background-color: #DDD;
}
/*Heading*/
h1{
text-align:center;
color:#444;
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
margin-top:40px
}
/*Container for images*/
#main{
width:660px;
margin:0 auto;
}
.picture{
position:relative;
float:left;
clear:none;
overflow:hidden;
margin:10px auto
}
.picture img{
position:relative;
z-index:1;
height:100px;
width:100px;
margin:0 10px;
}
/*Images Description*/
.picture .name{
display:block;
position:absolute;
width:100%;
top:150px;
left:0;
z-index:2;
text-align:center;
opacity:0.5;
color:#333;
}
/*Effects using Filters*/
#contrast:hover{-webkit-filter: contrast(3);}
#blur:hover{-webkit-filter: blur(4px);}
#hue_rotate:hover{-webkit-filter: hue-rotate(150deg);}
#invert:hover{-webkit-filter: invert(1);}
#sepia:hover{-webkit-filter: sepia(1);}
#opacity:hover{-webkit-filter: opacity(0.5);}
#drop_shadow:hover{-webkit-filter:drop-shadow(0px 0px 10px rgba(0,0,0,.5));}
/*For mobile devices*/
@media only screen and (max-width: 480px) {
h1{font-size:20pt;margin-top:40px}
#main{
width:240px;
margin:0 auto;
}
.picture img{
height:100px;
width:100px;
}
.pictu
-
Commentaires
Aucun commentaire pour le moment
Ajouter un commentaire