•  









     

    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
  •  

    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
    Te deseo que tu día de cumpleaños me tengas tan presente como te he tenido en mi corazón cada segundo, cada instante... Feliz Cumpleaños.



    Feliz Cumpleaños. El mejor regalo eres tu, pero te mando este obsequio para poder compartir contigo cada día unos instantes de tu pensamiento. Fuente http://www.euroresidentes. com/Diversion/ Frases_Cumpleanos_2.htm

     







































    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
  •  

     

    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

  •  

     

    Texto

    Texto

     

    Texto

    Texto

     

    HTML

    <table><tbody><tr><td><div class="row">&nbsp;</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">&nbsp;</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

  •    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
  • Fade Image

     

    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

  •  

    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


  •  

    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


  •  

    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


  •  

    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


  •  

    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
  •  


     

    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
  •  


    Fuente

    http://webdesign.tutsplus.com/rotate-and-mask-thumbnails-with-css3
     

     

    HTML

    <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;">&nbsp;</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

  • 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

  • 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.com

    Un 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
  •  

    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
  • 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
  • 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="" />
    <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>

    <div class="picture"><img id="invert" src="https://lh5.googleusercontent.com/-it2OdBAdbWg/VG209NqkyGI/AAAAAAABM0g/aWvzpP1FFTw/w62-h68-no/1.gif" alt="" />
    <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
  •  

    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
  •  

    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