-
Par GloriaV le 13 Juillet 2015 à 17:15
HTML
<div class="sube_imagen"><img src="http://.gif" alt="" width="165" height="238" /> </div>
CSS
div.sube_imagen img{
border: 2px solid #fff;
border-radius: 1em;
box-shadow: 3px 2px 6px #000000;
float: left;
margin-left: 40px;
padding: 3px; padding-bottom: 3px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out; }
div.sube_imagen img:hover {
margin-top: 6px; }
votre commentaire -
Par GloriaV le 13 Juillet 2015 à 17:17
Fuente
Feliz cumpleaños. Ser joven es un privilegio, ser hermosa un patrimonio, ser encantadora tu mejor virtud.Soy afortunado de compartir cada día mi vida contigo y cuando se cumple un año más tomo conciencia de lo que te quiero. Feliz Cumpleaños
HTML
<div class="img"> <a target="_blank" href=""> <img src="https://lh4.googleusercontent.com/-s6W2SX5Z4N0/VOG02iCaoJI/AAAAAAABceo/UzVH51_jx4k/w297-h300-no/1-297x300.gif" alt="" width="140" height="160"> </a> <div class="desc">Texto</div></div><div class="img"> <a target="_blank" href=""> <img src="https://lh6.googleusercontent.com/-NZEvbF4eoEw/VOIB9rKRIpI/AAAAAAABcfI/8xsczFa_8CQ/w300-h303-no/2.gif" alt="" width="140" height="160"> </a> <div class="desc">Texto</div></div><div class="img"> <a target="_blank" href=""> <img src="https://lh4.googleusercontent.com/-6FN1DMsliCg/VOIg1gGZAxI/AAAAAAABcfk/GJsM48amUVo/w300-h303-no/1.gif" alt="" width="140" height="160"> </a> <div class="desc">Fuente http://www.euroresidentes. com/Diversion/Frases_Cumpleanos_2.htm</div></div></div>
CSS
<style>
div.img {
margin: 5px;
padding: 5px;
border: 1px dashed ;
box-shadow: 2px 4px 6px;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img {
display: inline;
margin: 5px;
border: 2px dotted ;
}
div.img a:hover img {
border:2px dotted ;
}
div.desc {
text-align: center;
font-weight: normal;
width: 215px;
margin: 5px;
}
</style>
votre commentaire -
Par GloriaV le 13 Juillet 2015 à 17:56
HTML
<div class="rotarX"><img style="border: 1px dotted #fff; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-box-shadow: #6d3112 3px 3px 9px; -moz-box-shadow: #6d3112 3px 3px 9px; box-shadow: #6d3112 3px 3px 11px;" src="https://lh4.googleusercontent.com/-qia8xJhA0mI/VOX-90fIdvI/AAAAAAABcyM/N6W08v_Qc4w/w182-h300-no/1-182x300.gif" alt="" width="165" height="200" /></div>
CSS
<style type="text/css"><!--
.rotarX{
transform:rotateX(0deg);
transition-duration: 2s;
-webkit-transform:rotateX(0deg);
-webkit-transition-duration: 2s;
}
.rotarX:hover{
transform:rotateX(170deg);
transition-duration: 2s;
-webkit-transform:rotateX(170deg);
-webkit-transition-duration: 2s;
}
--></style>
votre commentaire -
Par GloriaV le 13 Juillet 2015 à 18:05
HTML
<table><tbody><tr><td><div class="row"> </div>
<div class="span3 compendious"><a> <img src="https://lh3.googleusercontent.com/-C-tyUK7ObMk/VNN_80-_rPI/AAAAAAABbMo/TYag5E9TlK0/w300-h207-no/2-300x207.gif" alt="" width="190" height="150" /> </a>
<h3><a>Texto</a></h3><p>Texto</p></div></td><td><div class="row"> </div>
<div class="span3 compendious"><a> <img src="https://lh4.googleusercontent.com/-AusTR6X5KxA/VNOa_N8C7sI/AAAAAAABbOs/5baEtw7PoHs/w300-h231-no/1-300x231.gif" alt="" width="190" height="150" /> </a>
<h3><a>Texto</a></h3><p>Texto</p></div></td></tr></tbody></table>
CSS
<style type="text/css"><!--
element.style {
}
.row {
margin-left: 40px;
}
div {
display: block;
}
.row:before, .row:after {
display: table;
content: "";
}
.row:after {
clear: both;
}
body {
margin: 0;
font-family: "Josefin Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 16px;
color: #000000;
background-color: #fff;
box-shadow: #000000 6px 6px 6px;
}
user agent stylesheetdiv {
display: block;
}
Pseudo ::before element
.row:before, .row:after {
display: table;
content: "";
}
Pseudo ::after element
.row:after {
clear: both;
}
.row:before, .row:after {
display: table;
content: "";
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
.compendious>a:hover {
-webkit-box-shadow: 0 0 0 2px #000,inset 0 0 2px 1px #57465b;
box-shadow: 0 0 0 2px #000,inset 0 0 2px 1px #57465b;
}
.compendious>a {
display: table-cell;
vertical-align: middle;
position: relative;
padding: 0 20px;
background: #fff;
width: 180px;
height: 190px;
-webkit-box-shadow: 0 0 0 2px #000,inset 0 0 2px 1px rgba(0,0,0,0.2);
box-shadow: 0 0 0 2px #000,inset 0 0 2px 1px rgba(0,0,0,0.2);
text-align: center;
}
a:hover {
color: #FBC99B;
text-decoration: underline;
}
a:hover, a:active {
outline: 0;
}
a {
color: #000;
text-decoration: none;
}
user agent stylesheeta:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
Pseudo :before element
.compendious>a:before {
z-index: -200;
position: absolute;
content: "";
display: block;
background: #bfbfbf;
border-radius: 20px;
width: 180px;
height: 150px;
top: 6px;
left: 6px;
-moz-transform: scale(1) rotate(2deg) translate(0px,0px) skew(3deg,0deg);
-webkit-transform: scale(1) rotate(2deg) translate(0px,0px) skew(3deg,0deg);
-o-transform: scale(1) rotate(2deg) translate(0px,0px) skew(3deg,0deg);
-ms-transform: scale(1) rotate(2deg) translate(0px,0px) skew(3deg,0deg);
transform: scale(1) rotate(2deg) translate(0px,0px) skew(3deg,0deg);
}
--></style>
votre commentaire -
Par GloriaV le 13 Juillet 2015 à 18:19
Fuente
HTML
<ul id="thumbs"> <li><a rel="nofollow" href="http://cssblog.es/"><img src="image.jpg"></a></li> <li><a rel="nofollow" href="http://cssblog.es/"><img src="image.jpg"></a></li> <li><a rel="nofollow" href="http://cssblog.es/"><img src="image.jpg"></a></li> <li><a rel="nofollow" href="http://cssblog.es/"><img src="image.jpg"></a></li> <li><a rel="nofollow" href="http://cssblog.es/"><img src="image.jpg"></a></li></ul>
CSS
img{
border:none;
}
/* // general */
/* thumbnail list */
ul#thumbs, ul#thumbs li{
margin:0;
padding:0;
list-style:none;
}
ul#thumbs li{
float:left;
margin-right:5px;
border:1px solid #999;
border-radius: 5%/10%;
padding:2px;
}
ul#thumbs a{
display:block;
float:left;
width:130px;
height:130px;
line-height:100px;
overflow:hidden;
position:relative;
z-index:1;
}
ul#thumbs a img{
float:left;
position:absolute;
top:-20px;
left:-50px;
}
/* cursor encima */
ul#thumbs a:hover{
overflow:visible;
z-index:1000;
border:none;
}
ul#thumbs a:hover img{
border:1px solid #999;
background:#fff;
padding:2px;
}
/* // mouse over */
/* clearing floats */
ul#thumbs:after, li#thumbs:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
ul#thumbs, li#thumbs{
display:block;
}
/* */
ul#thumbs, li#thumbs{
min-height:1%;
}
* html ul#thumbs, * html li#thumbs{
height:1%;
}
p.thumb{
float:left;
margin:.5em 0;
margin-right:10px;
border:1px solid #999;
border-radius: 5%/10%;
padding:2px;
}
p.thumb a{
display:block;
float:left;
width:100px;
height:100px;
line-height:100px;
overflow:hidden;
position:relative;
z-index:1;
}
p.thumb a img{
float:left;
position:absolute;
top:-20px;
left:-50px;
}
/* mouse over */
p.thumb a:hover{
overflow:visible;
z-index:1000;
border:none;
}
p.thumb a:hover img{
border:1px solid #999;
background:#fff;
padding:2px;
}
votre commentaire -
Par GloriaV le 13 Juillet 2015 à 19:19
HTML
<p><img class="css3_fadeimg" src="https://lh4.googleusercontent.com/-7bHKcxu7Hgg/VOYc9TkpIgI/AAAAAAABcyk/28etO63tJiI/w205-h300-no/1-205x300%2B%281%29.gif" alt="Fade Image" /></p>
CSS
@-webkit-keyframes fade {
0% {
opacity: 1.0;
}
100% {
opacity: 0.5;
}
}
.css3_fadeimg:hover {
-webkit-animation-name: fade;
-webkit-animation-duration: 1s;
}
votre commentaire -
Par GloriaV le 13 Juillet 2015 à 19:20
HTML
<div class="css3_bounce bounce"><img style="border: 1px dotted #fff; -webkit-border-radius: 1em 4em; -moz-border-radius: 1em 4em; border-radius: 1em 4em; -webkit-box-shadow: #6d3112 3px 3px 9px; -moz-box-shadow: #6d3112 3px 3px 9px; box-shadow: #6d3112 3px 3px 11px;" src="https://lh5.googleusercontent.com/-uEkqZLHzLOo/VOc5DJDPENI/AAAAAAABc04/BtFc1tkORQg/w228-h300-no/2-228x300.gif" alt="" width="175" height="250" /></div>
CSS
@-webkit-keyframes bounce { from { margin-left: 0px; } to { margin-left: 250px; } } .css3_bounce:hover img border: 1px dotted #000;
border-radius: 1em 4em;
box-shadow: 3px 2px 6px #000000;
{ -webkit-animation-name: bounce; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 2; -webkit-animation-direction: alternate; }
votre commentaire -
Par GloriaV le 13 Juillet 2015 à 19:31
HTML
<center><img border="0" class="bordeimg1" height="300" src="http://file.mobilmusic.ru/d6/17/3b/1167663.gif" width="200"></center><br>
CSS
<style>
.bordeimg1 {-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;padding:15px !important;border-radius: 20px;border:1px solid ;background:#FFF;}
.bordeimg1:hover {-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;border-radius: 0% 50%;box-shadow: 0px 0px 15px #000000;cursor:pointer;border:0;}
</style>
votre commentaire -
Par GloriaV le 13 Juillet 2015 à 19:33
HTML
<center><img border="0" class="bordeimg2" height="300" src="http://file.mobilmusic.ru/d8/be/c5/1185477.gif" width="200"></center><br>
CSS
<style> .bordeimg2 {-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;border-radius: 50% 0;box-shadow: 0px 0px 15px #000;padding:15px !important;border:0;background:#FFF;}
.bordeimg2:hover {-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;border-radius:0;cursor:pointer;} </style>
votre commentaire -
Par GloriaV le 13 Juillet 2015 à 19:35
HTML
<center><img border="0" class="bordeimg3" height="300" src="http://file.mobilmusic.ru/06/37/64/1165173.gif" width="200"></center>
CSS
<style>
.bordeimg3 {-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;padding:0 !important;}
.bordeimg3:hover {-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;border-radius: 50%;box-shadow: 0px 0px 15px #000000;border:0;cursor:pointer;}
</style>
votre commentaire -
Par GloriaV le 13 Juillet 2015 à 19:36
HTML
<center><img border="0" class="bordeimg4" height="300" src="http://file.mobilmusic.ru/96/1f/94/1178261.gif" width="200"></center><br>
CSS
<style>
.bordeimg4 {border:0; padding:0 !important;-moz-transition: all 1s;-webkit-transition: all 1s;
-o-transition: all 1s;border-radius: 50%;box-shadow: 0px 0px 15px #000000;border:0;padding:10 !important;}
.bordeimg4:hover {-moz-transition: all 1s; -webkit-transition: all 1s;-o-transition: all 1s;box-shadow: 0;cursor:pointer;border-radius: 0;}</style>
votre commentaire -
Par GloriaV le 13 Juillet 2015 à 19:38
HTML
<center><img border="0" class="bordeimg5" height="300" src="http://gif" width="200"></center>
CSS
<style>
.bordeimg5 {-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;border-radius: 45% / 20%;box-shadow: 0px 0px 15px #000000;padding:0 !important;}
.bordeimg5:hover { -moz-transition: all 1s; -webkit-transition: all 1s;-o-transition: all 1s;border-radius:0;cursor:pointer;}
</style>
votre commentaire -
Par GloriaV le 13 Juillet 2015 à 19:41
Fuente
http://webdesign.tutsplus.com/rotate-and-mask-thumbnails-with-css3HTML
<div id="wrapper"><a class="mask" href="/1.jpg"><img src="https://lh6.googleusercontent.com/47gtEVs4uWM20UyNkj4jDZt-oXVSIQGob0eg6NC4znVF=w213-h300-no" alt="" /></a> <a class="mask" href="/2.jpg"><img src="https://lh6.googleusercontent.com/-sy595_f8r3I/VOy2V3DYrsI/AAAAAAABdFA/VoaPdZWF_zc/w211-h300-no/1-211x300.gif" alt="" /></a>
<div style="clear: both;"> </div>
</div>
<!-- #/wrapper -->CSS
body {
margin:0;
padding:0;
background:#eee;
font-family:Geneva, Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif;
}
#wrapper {
width:420px;
margin:0 auto;
background:#fff;
border: 1px dotted #000;
border-radius: 2em 0.5em;
padding:11px;
border-top:none;
}
#error_message {
color:red;
display:none;
font-size:.8em;
}
#wrapper {
border: 1px dotted #000;
border-radius: 2em 0.5em;
-moz-border-radius:0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
box-shadow:0 0 5px #ccc;
-moz-box-shadow:0 0 5px #ccc;
-webkit-box-shadow:0 0 5px #ccc;
}
.mask {
position:relative;
height:220px;
width:170px;
float:left;
overflow:hidden;
margin:15px;
border-radius: 2em 0.5em;
border:5px solid #f6f6f6;
box-shadow:0 0 1px #000;
-moz-box-shadow:0 0 1px #000;
-webkit-box-shadow:0 0 1px #000;
}
.mask img {
height:300px;
width:400px;
}
.mask img {
position:absolute;
margin-top:-150px; /* half the height */
margin-left:-200px; /* half the width */
top:50%;
left:50%;
}
.mask img {
-webkit-transform: rotate(15deg);
-moz-transform:rotate(15deg);
-o-transform:rotate(15deg);
-ms-transform:rotate(15deg);
transform:rotate(15deg);
}
.mask:hover {border-color:#ddd;}
votre commentaire -
Par GloriaV le 13 Juillet 2015 à 19:43
Fuente:
http://www.ciudadblogger.com/2009/12/efecto-pushbutton-en-las-imagenes.html
HTML
<img class="pushbutton" src="https://lh3.googleusercontent.com/-g5W4Lrez3lM/VAhFvoAzTzI/AAAAAAAA9W8/CoUwaJGIE-w/s153-no/3.gif" alt="" />
CSS
<style type="text/css"><!--
.post img:hover {
position: relative;
top: 3px;
left: 3px;
}
img:hover {
position: relative;
top: 3px;
left: 3px;
}
.pushbutton:hover {
position: relative;
top: 3px;
left: 3px;
}
--></style>
votre commentaire -
Par GloriaV le 13 Juillet 2015 à 19:47
http://cssdeck.com/labs/css-only-pinterest-style-columns-layout
Viste vulgar y solo verán el vestido, viste elegante y verán a la mujer. Coco Chanel
Frases y Citas - http://akifrases.comUn hombre hace lo que puede. Una mujer hace lo que el hombre no puede.Isabel Allende
Una mujer hermosa agrada a los ojos; una mujer buena agrada al corazón; la primera es un dije; la segunda es un tesoro. Marlene Dietrich
HTML
<div id="wrapper">
<div id="columns">
<div class="pin"><img src="http://file.mobilmusic.ru/db/15/6d/1171304.gif" alt="" width="159" height="219" />
<p>Texto</p>
</div>
<div class="pin"><img src="http://s5.rimg.info/ba36e49f9f2a5af6ebc05f484999a5ae.gif" alt="" width="159" height="219" />
<p>Texto</p>
</div>
<div class="pin"><img src="http://file.mobilmusic.ru/23/b4/f0/1165328.gif" alt="" width="159" height="219" />
<p>Texto</p></div></div></div>
CSS
<style type="text/css"><!--
body {
background: url(http://subtlepatterns.com/patterns/scribble_light.png) ; }
#wrapper {
width: 830px;
max-width: 830px;
min-width: 800px;
margin: 10px auto;
}
#columns {
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;
column-count: 3;
column-gap: 15px;
column-fill: auto;
}
.pin {
display: inline-block;
background: #FEFEFE;
border: 2px solid #FAFAFA;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
margin: 0 2px 15px;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
padding: 15px;
padding-bottom: 5px;
background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
opacity: 1;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
.pin img {
width: 100%;
border-bottom: 1px solid #ccc;
padding-bottom: 15px;
margin-bottom: 5px;
}
.pin p {
font: 23px/26px Edwardian Script ITC;
color: #333;
margin: 0;
}
@media (min-width: 960px) {
#columns {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
}
@media (min-width: 800px) {
#columns {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
}
#columns:hover .pin:not(:hover) {
opacity: 0.4;
}
--></style>
votre commentaire -
Par GloriaV le 13 Juillet 2015 à 19:50
HTML
<div id="wrapper">
<div id="columns">
<div class="pin"><img src="http://file.mobilmusic.ru/db/15/6d/1171304.gif" alt="" width="155" height="180" /></div>
<div class="pin"><img src="http://s5.rimg.info/ba36e49f9f2a5af6ebc05f484999a5ae.gif" alt="" width="155" height="180" /></div>
<div class="pin"><img src="http://file.mobilmusic.ru/23/b4/f0/1165328.gif" alt="" width="155" height="180" /></div>
</div></div>
CSS
<style type="text/css"><!--
body {
background: url( ) ;
}
#wrapper {
width: auto;
max-width: auto;
min-width: auto;
margin: 3px auto;
}
#columns {
-webkit-column-count: 4;
-webkit-column-gap: 3px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 3px;
-moz-column-fill: auto;
column-count: 3;
column-gap: 15px;
column-fill: auto;
}
.pin {
display: inline-block;
background: # ;
border: 1px dotted #FAFAFA;
border-radius: 3em;
box-shadow: 0 2px 10px rgba(34, 25, 25, 0.4);
margin: 0 2px 15px;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
padding: 5px;
padding-bottom: 5px;
background: -webkit-linear-gradient();
opacity: 1;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
.pin img {
width: 100%;
border-bottom: 0px solid #ccc;
border-radius: 3em;
}
@media (min-width: 500px) {
#columns {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
}
#columns:hover .pin:not(:hover) {
opacity: 0.4;
}
--></style>
votre commentaire -
Par GloriaV le 14 Juillet 2015 à 10:15
http://cssdeck.com/labs/visual-effects-in-css3-using-filters
Saturate
Grayscale
Brightness
HTML
<div class="picture"><img id="saturate" src="https://lh5.googleusercontent.com/-it2OdBAdbWg/VG209NqkyGI/AAAAAAABM0g/aWvzpP1FFTw/w62-h68-no/1.gif" alt="" />
<h4 class="name">Saturate</h4>
</div>
<div class="picture"><img id="grayscale" src="https://lh5.googleusercontent.com/-it2OdBAdbWg/VG209NqkyGI/AAAAAAABM0g/aWvzpP1FFTw/w62-h68-no/1.gif" alt="" />
<h4 class="name">Grayscale</h4>
</div>
<div class="picture"><img id="brightness" src="https://lh5.googleusercontent.com/-it2OdBAdbWg/VG209NqkyGI/AAAAAAABM0g/aWvzpP1FFTw/w62-h68-no/1.gif" alt="" />
<h4 class="name">Brightness</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:460px;
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*/
#saturate:hover{-webkit-filter: saturate(4.5);}
#grayscale:hover{-webkit-filter: grayscale(1);}
#brightness:hover{-webkit-filter: brightness(2);}
/*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;
}
.picture .name{
top:65px;
font-size:10pt;
}
}
--></style>
votre commentaire -
Par GloriaV le 14 Juillet 2015 à 10:32
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
votre commentaire -
Par GloriaV le 14 Juillet 2015 à 10:38
HTML
<div class="stack rotated"><img src="http://th00.deviantart.net/fs12/200H/i/2006/298/4/8/Potent_ial_by_asage.jpg" alt="" /></div>
CSS
<style type="text/css"><!--
.stack { position: relative; z-index: 10; }
/* Image styles */
.stack img { max-width: 100%; height: auto; vertical-align: bottom; border: 5px solid #fff; border-radius: 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
/* Stacks creted by the use of generated content */
.stack:before, .stack:after { content: ""; border-radius: 5px; width: 135px; height: 180px; position: absolute; border: 10px solid #fff; left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-webkit-transition: 0.3s all ease-out;
-moz-transition: 0.3s all ease-out;
transition: 0.3s all ease-out;
}
.stack:before { top: 4px; z-index: -10; } /* 1st element in stack (behind image) */
.stack:after { top: 8px; z-index: -20; } /* 2nd element in stack (behind image) */
/* Second stack example (rotated to the right from the bottom left) */
.stack.rotated:before {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
transform: rotate(2deg);
}
.stack.rotated:after {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
transform: rotate(4deg);
}
/* Third stack example (One stack element rotated in the opposite direction) */
.stack.twisted:before {
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
transform: rotate(4deg);
}
.stack.twisted:after {
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
transform: rotate(-4deg);
}
/* Reset all rotations on hover */
.stack:hover:before, .stack:hover:after {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
--></style>
votre commentaire -
Par GloriaV le 14 Juillet 2015 à 10:43
HTML
<div class="stack twisted"><img src="http://th05.deviantart.net/fs71/200H/f/2011/038/f/8/charmed_by_kd_matheson-d390k2v.jpg" alt="" /></div>CSS
<style type="text/css"><!--
.stack { position: relative; z-index: 10; }
/* Image styles */
.stack img { max-width: 100%; height: auto; vertical-align: bottom; border: 5px solid #fff; border-radius: 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
/* Stacks creted by the use of generated content */
.stack:before, .stack:after { content: ""; border-radius: 5px; width: 170px; height: 220px; position: absolute; border: 10px solid #fff; left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-webkit-transition: 0.3s all ease-out;
-moz-transition: 0.3s all ease-out;
transition: 0.3s all ease-out;
}
.stack:before { top: 4px; z-index: -10; } /* 1st element in stack (behind image) */
.stack:after { top: 8px; z-index: -20; } /* 2nd element in stack (behind image) */
/* Third stack example (One stack element rotated in the opposite direction) */
.stack.twisted:before {
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
transform: rotate(4deg);
}
.stack.twisted:after {
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
transform: rotate(-4deg);
}
/* Reset all rotations on hover */
.stack:hover:before, .stack:hover:after {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
--></style>
votre commentaire