-
Imagen efectos
-
Par GloriaV le 14 Février 2015 à 16:20
Efectos para imagen
1. http://pourquoipas732.eklablog.com/details-article
2. http://pourquoipas732.eklablog.com/deplacement
3. http://pourquoipas732.eklablog.com/clic-sur
4. http://pourquoipas732.eklablog.com/page-par
5. http://pourquoipas732.eklablog.com/variante
6. http://pourquoipas732.eklablog.com/variante
7. Hover
8. 9 ejemplos de efectos
9. 55 efemplos de efectos
10. http://www.marcofolio.net/css/
a. Para imagen con texto
11. Esquina doblada (tener cuidado con este código)
12. Efecto "Temblor"
13. Para texto, imagen, código
14. Varios efectos(acordeón, menu...)
15. http://cssdeck.com/-folded-corner-effect-with-animations
16. http://cssdeck.com/labs/jquery-fade-in-on-scroll
17. Rotación
18. http://cssdeck.com/labs/css3-window
19. http://cssdeck.com/labs/pure-css3-page-flip-effect
20. http://-reflections-on-animated-3d-glossy-elements
21. http://cssdeck.com/labs/turntable
22. http://redeando.blogspot.com.es/2013/02/galeria
23. http://codepen.io/amyfu/pen/zBcfJ
24. http://www.creativejuiz.fr/blog/ danimations-simples-en-css3
25. http://cssdeck.com/labs/css3-animation-effects-demos
26. http://cssdeck.com/labs/sweet-image-zoom-effects
27. http://cssdeck.com/labs/css3-proximity-effect-layout
28. http://cssdeck.com/labs/simple-css-image-carousel
29. http://cssdeck.com/labs/jgsg6wjt
30. http://cssdeck.com/labs/list-curls
31. http://cssdeck.com/labs/collage
32. http://cssdeck.com/labs/pure-css-image-slider
33. http://cssdeck.com/labs/imagefilter
34. http://cssdeck.com/labs/pure-css-featured-image-slider
35. http://cssdeck.com/labs/3-d-photo-gallery
36. http://cssdeck.com/labs/pure-css-slider-target
37. Imagen con texto
38. http://cssdeck.com/labs/pure-css3-slideshow-without-page-jump
39. http://cssdeck.com/labs/css3-stacks-with-pseudo-elements
40. Imagen con texto
41. Acordeón imagen, texto
42. http://cssdeck.com/labs/solitary-css3-slider-rotation-transition
43. 9 efectos para imagen , texto
44. Efecto "Blur"
45. http://cssdeck.com/labs/nyafuite
46. Galeria con tres efectos
47. http://tympanus.net/codrops/2011/12/26/css3-lightbox/
48. http://www.freshdesignweb.com/css3-tutorials-examples.html/2
49. http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index10.html
50. http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/
51. http://tympanus.net/codrops/2011/12/26/css3-lightbox/
52. Zoom con Java
http://www.ciudadblogger.com/2012/04/aumentar-imagenes-al-pasar-el-cursor.html
53. http://www.cssauthor.com/jquery-css3-hover-effects/
54. http://codepen.io/anon/pen/ByeWPX
55. Para imagen y texto
votre commentaire -
Par GloriaV le 14 Février 2015 à 17:46
1. http://www.xul.fr/css/transition.php
2. http://www.hostdime.com.co/blog/3-impresionantes-efectos
3. http://pourquoipas732.eklablog.com/pour-christine
4. 20 ejemplos de Hover
5. 40 ejemplos de Hover . Tiene muchos códigos
a. Boton con Rollover
6. http://www.xul.fr/css/transition.php
7. http://www.the-art-of-web.com/css/timing-function/
8. http://www.css3create.com/Reflection-en-CSS
9. http://santyweb.blogspot.com.es/2011/06/css-agrandar-
10. http://css3.bradshawenterprises.com/cfimg/
a. http://www.css3create.com/Effets-de-survol-avec
10. http://www.imaginaformacionanimaciones-css3-transitions/
11. http://paulund.developpez.com/tutoriels/css/images-filters/
12. http://forum.alsacreations.com/ Remplacement
13. http://www.cssreset.com/how-to--image css3-transitions/
14. http://santyweb.blogspot.css3-propiedad-transition-crea.html
15. http://webintenta.com/css3-transitions-con-css.html
16. http://expanding-search-bar-deconstructed/ (varios efectos)
17. http://bourbon.io/docs/
18. http://openclassrooms.com/transition-d-image-en-css
19. http://css.mammouthland.net/zoomer-css.php (zoom)
20. Lenguaje de los códigos
21. http://www.creativejuiz.fr/blog/theme/css-css3
22. http://www.lawebera.es/como-hacer/ejemplos-css
23. http://www.jose-aguilar.com/blog/secciones/css/page/4/
24 . Galeriá con Highslide
votre commentaire -
Par GloriaV le 14 Février 2015 à 18:51
Opacidad y zoom
<div class="hovergallery">
<img src="URL imagen 1" /><img src="URL imagen 2" /><img src="URL imagen 3" /><img src="URL imagen 4" /><img src="URL imagen 5" /><img src="URL imagen 6" /></div><style type="text/css">
/*GloriaV */
/*URL: http://tutorialgloriav.eklablog.com/*/
.hovergallery img{ -webkit-transform:scale(0.8);
border-radius: 5%;
border: 1px dotted #000;
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-ms-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;opacity: 0.7; /*Nivel de opacidad de las imágenes*/margin: 0 10px 5px 0; /*Margen entre las imágenes*/
}.hovergallery img:hover{-webkit-transform:scale(1.1); /*Webkit: Escala de aumento de la imagen 1.2x tamaño original*/-moz-transform:scale(1.1);
>-o-transform:scale(1.1);
-ms-transform:scale(1.1);
box-shadow:3px 3px 10px #000; /*Sombra sobre toda la imagen*
/-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:3px 3px 10px #000;
-ms-box-shadow:3px 3px 10px #000; opacity: 1
;}
</style>
votre commentaire -
Par GloriaV le 14 Février 2015 à 18:56
Giro 1 Fuente
1ª opción
<div class="morphaizum pic"><img style="border: 0px solid #0033c7; -webkit-border-radius: 5%/10%; -moz-border-radius: 5%/10%; border-radius: 5%/10%; -webkit-box-shadow: #000 3px 3px 9px; -moz-box-shadow: #000 3px 3px 9px; box-shadow: #000 3px 3px 9px;" src="http://virtuellife.v.i.pic.centerblog.net/0a1f3400.gif" alt="" width="235" height="199" /></div>
/*MORPH*/ .morphaizum {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease; transition: all 0.5s ease; }
.morphaizum:hover {
-webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg);
transform: rotate(360deg);}2ª opción Demo
<table><tbody><tr><td><div class="morphaizum pic"><img src="http://ekladata.com/aYrkmDLrZIt4qOczZlPkKs08jqA@230x220.gif" alt="" width="230" height="220" /></div></td><td><div class="morphaizum pic"><img src="http://stat18.privet.ru/lr/0a13684e7bf1781b216364f17e6d16d8" alt="" width="230" height="220" /></div></td></tr></tbody></table>
/*MORPH*/ .morphaizum {margin: 20px 10px 15px 20px; border: 1px dotted #84909A; border-radius:4px;box-shadow: 2px 2px 10px #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease; transition: all 0.5s ease; }
.morphaizum:hover {
-webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg);
transform: rotate(360deg);}
votre commentaire -
Par GloriaV le 15 Février 2015 à 10:57
Cubo de tres lados. Fuente
<div id="contenedorcubo"> <div class="cube"> <div class="face top"><img src="https://lh4.googleusercontent.com/-jZ4bK-AUgQM/VN8nHOE7UpI/AAAAAAABcaY/mLgFBqzupQk/s96-no/1.gif" alt="" width="100" height="100" /></div> <div class="face left"><img src="https://lh3.googleusercontent.com/-So71bObzxx4/VN81EN8An0I/AAAAAAABcbI/hN7z7qZfqns/s102-no/1.gif" alt="" width="100" height="100" /></div><div class="face demoright"><img src="https://lh4.googleusercontent.com/-J7NW24qWA34/VN8oqWUXPZI/AAAAAAABcas/kHt9v8sXUSk/w81-h71-no/2.gif" alt="" width="100" height="100" /></div> </div></div>
<style>
: 250px;height: 250px;position: relative;float:center;}
.cube {
position:relative;
top: 0px;
left: 0px;
}
.face {
position: absolute;
width: 100px;
height: 100px;
overflow: hidden;
font-family: monospace;
font-size: 24px;
}
.top {
top: 0;
left: 89px;
background: #fff;
color: ;
-webkit-transform: rotate(-45deg) skew(15deg, 15deg);
-moz-transform: rotate(-45deg) skew(15deg, 15deg);
}
.left {
top: 77px;
left: 44px;
background: #fff;
color: ;
-webkit-transform: rotate(15deg) skew(15deg, 15deg);
-moz-transform: rotate(15deg) skew(15deg, 15deg);
}
.demoright {
top: 77px;
left: 133px;
background: ;
color: ;
-webkit-transform: rotate(-15deg) skew(-15deg, -15deg);
-moz-transform: rotate(-15deg) skew(-15deg, -15deg);
}
</style>
votre commentaire -
Par GloriaV le 15 Février 2015 à 11:12
Giro 2
<div class="imagerotate"><img style="width: 215px; height: 208px; margin-left: 3px; -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; box-shadow: 5px 5px 3px 1px;" title="Con amor. GloriaV" src="https://lh5.googleusercontent.com/-vfQHss3g3ww/U9TiqQuV-yI/AAAAAAAAtKQ/1D0M4ADFct0/w240-h320-no/13.gif" alt="" width="205" height="260" /> <img style="width: 215px; height: 208px; margin-left: 3px; -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; box-shadow: 5px 5px 3px 1px;" title="Con amor. GloriaV" src="http://file.mobilmusic.ru/d9/43/4e/1250804.gif" alt="" width="205" height="260" /></div>
.imagerotate img {-moz-border-radius:5px;
-moz-transition: -moz-transform 1s ease 0s;
background:#B292A9 !important;
border: 1px solid #ffffff !important;
border-radius: 5px 5px 5px 5px;
height: 150px; margin: 5px;
padding: 0px;
position: relative;
width: 220px;
}
.imagerotate img:hover {
background:#AD184E !important;
-moz-transform:rotate(5deg);
-o-transform:rotate(5deg);
-webkit-transform:rotate(5deg);
-ms-transform:rotate(15deg);
}
div.sube_imagen img{
border: 2px solid #000;
float: left;
margin-left: 20px;
-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 15 Février 2015 à 12:02
Opacidad Fuente<a class="opacity" href=""><img src="http://laranaroja.com/wp-content/uploads/2012/08/gif-animado-gracioso-entrenador-monitor-de-windsurf-tocar-culo.gif" alt="" /></a>
/* Efecto opacidad en la imágenes en Aizum Blog */
/*GloriaV */
/*URL: http://tutorialgloriav.eklablog.com/*/
a.opacity img { filter:alpha(opacity=50);
border: 2px dotted #fff;
border-radius: 1em/1em;
box-shadow: 3px 2px 6px #000000;
-moz-opacity: 0.5; opacity: 0.5;
-khtml-opacity: 0.5; }
a.opacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0; opacity: 1.0;
-khtml-opacity: 1.0; }
votre commentaire -
Par GloriaV le 15 Février 2015 à 12:07
Sombra y bordes para todos imágenes.module_titre {
text-shadow: 0px 1px 1px #ffffff,1px 0px 2px#fff,2px 3px 3px #000,1px 3px 2px #B6B6B6;
}
#header {border-radius:10%; }
.module_contenu img {margin: 20px 10px 15px 20px; border: 1px dotted #84909A; border-radius:10%;box-shadow: 2px 2px 10px #000;}
votre commentaire -
Par GloriaV le 15 Février 2015 à 12:54
<div class="aumenta_imagen"><img src="https:jpg" width="250"alt="" /> <img src="http:jpg" width="250" alt="" /></div>
div.aumenta_imagen img{
border: 2px solid #fff;
border-radius: 1em/1em;
box-shadow: 3px 2px 6px #000000;
height: 170px;
width: 230px;
margin: 15px 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease; }
div.aumenta_imagen img:hover {
height: 128px;
width: 202px;
border-radius: 20px;
margin-left: -30px; }
votre commentaire -
Par GloriaV le 15 Février 2015 à 13:07
Hover 1<div class="hovergallery"><img src="http://katka5212.bloglap.hu/kepek/201401/uj018.gif" alt="" width="180" height="250" /> <img src="https://lh5.googleusercontent.com/-uZasZsRKh28/U1p5I5BUK6I/AAAAAAAATFw/dQF71VljcS0/w569-h444-no/5.gif" alt="" width="200" height="200" /> <img src="http://dl4.glitter-graphics.net/pub/1024/1024014p7fz7jhlrw.gif" alt="" width="200" height="200" /> <img src="https://lh4.googleusercontent.com/-3IMVihieIkM/U9jVrwtOruI/AAAAAAAAwZQ/Zq4EeFiDQj0/w457-h500-no/656059024.gif" alt="" width="200" height="200" /></div>
<style type="text/css"><!-- /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ .hovergallery img{
border: 2px solid #fff;
border-radius: 1em/1em;
box-shadow: 3px 2px 6px #000000;
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}
.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}
--></style>
votre commentaire -
Par GloriaV le 16 Février 2015 à 17:01
Hover. Con imagen para fondo
Fuente
<div id="container"><div id="cabecera"> </div><div id="contenido"><ul class="efectos"><li><img src="http://senderosdeiluminacion.bligoo.com/media/users/16/814428/images/public/187154/1325488685529-DEVI_SARASVATI_by_VISHNU108.gif?v=1325488806005" alt=" " width="200" height="190" /><hr /></li><li><img src="http://fc05.deviantart.net/fs70/f/2011/330/3/2/shiva_temple_by_vishnu108-d4hcvmg.gif" alt=" " width="200" height="190" /><hr /></li></ul></div></div>
<style type="text/css"><!--
body { background:#ffffff url(https://lh4.googleusercontent.com/-QVeub426KUE/U-Cuu1VAosI/AAAAAAAA0Us/vqAuDzatiJQ/w289-h149-no/2.gif) repeat top left; font-family:'Yanone Kaffeesatz', sans-serif;
font-size:62.5%;
margin:0;
padding:0
}
ul.efectos {
position:relative;
margin:0;
padding:0
}
ul.efectos li {
background:#ffffff url(https://lh4.googleusercontent.com/-QVeub426KUE/U-Cuu1VAosI/AAAAAAAA0Us/vqAuDzatiJQ/w289-h149-no/2.gif) no-repeat center center; position:relative;
list-style:none;
width:200px;
height:190px;
overflow:hidden;
border:2px solid #FFF;
border-radius:8em/3em;
float:left;
-webkit-box-shadow:0 0 10px #333;
-moz-box-shadow:0 0 10px #333;
-ms-box-shadow:0 0 10px #333;
-o-box-shadow:0 0 10px #333;
box-shadow:0 0 10px #333;
margin:0 20px 40px;
padding:0
}
ul.efectos li:hover img {
>-webkit-transform:scale(6);
-moz-transform:scale(6);
-ms-transform:scale(6);
-o-transform:scale(6);
opacity:0
}
--></style>
votre commentaire -
Par GloriaV le 16 Février 2015 à 18:15
Para texto, imagen... Fuente-
Para texto o para imagen
Te amo, de una manera inexplicable, de una forma inconfesable y de un modo incontrolable.
<ul class="blocks"><li><div class="popup"><img src="http://www.picgifs.com/glitter-gifs/i/i-love-you/picgifs-i-love-you-1412852.gif" alt="" width="145" height="115" /></div> </li><ul class="blocks"><li> <p>Para texto o para imagen</p><div class="popup"> <p>Texto.</p></div></li></ul></ul>
<style type="text/css"><!--
@import url(http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic);
>html {
font-family:'Noto Sans', serif;
}
.blocks {
margin: auto;
max-width:1070px;
padding:0;
}
.blocks li {
color: #000;
background-color: #eed6ac;
cursor:default;
float:left;
list-style:none;
margin:1%;
padding:60px 0;
position:relative;
text-align:center;
transition:.3s cubic-bezier(.3,0,0,1.3);
width:31%;
border-radius: 5%/10%;
font-weight: bold;
}
.blocks li:hover {
transform:scale(.7);
z-index:3000;
}
.popup {
background-color: inherit;
color:#000;
height: 100%;
width:100%;
left:0;
opacity:0;
position:absolute;
top:0;
padding: 15px;
border-radius: 5%/10%;
transition:.3s cubic-bezier(.3,0,0,1.37);
}
.popup span {
font-size:12px;
font-weight: normal;
left:0;
padding:15px 25px;
position:absolute;
top:50%;
transform:translateY(-50%);
}
.popup h3 {
font-size:13px;
margin:0 0 5px;
padding:0;
}
.blocks li:hover .popup {
opacity:1;
transform:scale(2);
box-shadow: 0 0 10px 2px rgba(0,0,0,.4);
}
--></style>
votre commentaire -
Par GloriaV le 16 Février 2015 à 18:43
<ul class="contenedor">
<li class="elemento3d n1"><img src="https://lh3.googleusercontent.com/-r0_rnH6EA88/U9Y2SKOQ2AI/AAAAAAAAt8I/nJRvLgzbUp0/w240-h320-no/1175362.gif" alt="" width="124" height="166" /></li>
<li class="elemento3d n2"><img src="https://lh4.googleusercontent.com/-kFpT5HvGjqU/U9Y3x1rOVoI/AAAAAAAAt-A/mASyABcItak/w240-h320-no/1173736.gif" alt="" width="124" height="166" /></li>
<li class="elemento3d n3"><img src="https://lh5.googleusercontent.com/-g8ZX9BZjPLk/U9Y5wNDioCI/AAAAAAAAuCk/RY_Kh5KI3cg/w240-h320-no/1170601.gif" alt="" width="124" height="166" /></li>
</ul><style><!--
.n1{transform: rotate3d(0, 0, 1, 20deg);}
.n2{transform: rotate3d(0, 1, 0, 20deg);}
.n3{transform: rotate3d(1, 0, 0, 20deg);}
.n4{transform: rotate3d(1, 0, 1, 40deg);}
.n5{transform: rotate3d(1, 0, 0, 40deg);}
.contenedor {
padding: 0;
margin: 0 auto;
list-style: none;
display: flex;
flex-direction :row;
flex-wrap: wrap;
justify-content: space-around;
align-items:center;
height:300px;width:460px;
perspective:400px;
}
.elemento3d{
text-align:center center;
padding: 40px;cursor:pointer;
border: 2px dotted #ccc;
border-radius: 10px;
box-shadow: 3px 2px 6px #000000;
line-height: 10px;
color: white;
font-weight: bold;
font-size: 40px;
width:40px;
background-color:#fff;
-webkit-box-shadow: 0px 5px 7px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 5px 7px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 5px 7px 0px rgba(50, 50, 50, 0.75);
}
.elemento3d:hover{
transform: rotate3d(0, 0, 0, 30deg);
}
--></style>
votre commentaire -
Par GloriaV le 17 Février 2015 à 12:43
Hover para todos imágenes#content img:hover{
opacity: 1;
-webkit-box-shadow: 0px 0px 15px #000000;
box-shadow: 0px 0px 50px #000000;
}
#content img { -webkit-border-radius: 00px;
border-radius: 00px;
-webkit-transition: 0.4s linear;
transition: 0.4s linear;
}
.module_contenu img:hover {opacity: 2; -webkit-transition: 500ms;
-webkit-transform: rotate(10deg);
border-radius: 5px 25px 5px 25px;
}
votre commentaire -
Par GloriaV le 17 Février 2015 à 13:12
Para texto, imagen... Fuente
Yo añadí "margin-left: 150px;" para posicionar cada imagen.- Con amor. GloriaV
<ul class="thumb">
<ul class="thumb">
<li><img src="http://file.mobilmusic.ru/09/68/da/803960.gif" alt="" width="150" height="180" /></li>
<li><img src="http://file.mobilmusic.ru/63/5e/bc/1281199.gif" alt="" width="150" height="180" /></li>
<li><img src="http://file.mobilmusic.ru/fa/66/47/699794.gif" alt="" width="150" height="180" /></li> <li>Con amor. GloriaV</li>
</ul>
</ul><style><!--/* la lista flota a la izquierda porque quiero que el DIV con el texto se muestre a su lado */ /* por ese motivo, debo dimensionarla con width y height */ ul.thumb { float: left; height: 400px; list-style: none; margin: 0; position: relative; width: 300px; } /* cada item es una imagen que fuerzo a que se muestren pequeñas */ ul.thumb li { /* se posicionand e manera absoluta */ position: absolute; left: 80px; top: 0; z-index: 0; /* algo de decoración */ background-color: #; box-shadow: 0 0 10px #444 inset; padding: 4px; /* el tamaño de la imagen a mostrar */ height: 202px; width: 150px; /* la transición será el efecto */ -moz-transition: all 1s ease-in-out 0s; -webkit-transition: all 1s ease-in-out 0s; -o-transition: all 1s ease-in-out 0s; } ul.thumb li img { height: 100%; width: 100%; } /* cada item se posiciona y se rota a gusto */ ul.thumb li:nth-child(1) { -moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); -o-transform: rotate(20deg); margin-left: 150px; margin-top: 0px; } ul.thumb li:nth-child(2) { -moz-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); -o-transform: rotate(-30deg); margin-top: 0px; } ul.thumb li:nth-child(3) { -moz-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); -o-transform: rotate(-15deg); margin-left: 240px; margin-top: 0px; } ul.thumb li:nth-child(4) { -moz-transform: rotate(10deg); -webkit-transform: rotate(10deg); -o-transform: rotate(10deg); margin-left: 100px; margin-top: 150px; } /* el efecto al poner el cursor encima */ ul.thumb li:hover { /* se elimina la rotación */ -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); /* se muestra la imagen con su tamaño real */ height: 275px; width: 300px; /* se la posiciona y se la pone en primer plano */ margin-left: 0px; margin-top: -50px; z-index:10; /* algo de decoración */ border-radius: 10px; padding:20px; } --></style>
votre commentaire -
Par GloriaV le 17 Février 2015 à 16:14
Sombra multicolor
<div class="sombra"><img style="border: 2px solid #fff; -webkit-border-radius: 1em/1em; -moz-border-radius: 1em/1em; border-radius: 1em/1em; box-shadow: 3px 2px 6px #000000;" src="https://lh6.googleusercontent.com/-aCSnJVK3FoQ/VJ2J1EwVbEI/AAAAAAABTMU/wwhJCTvM6eY/w216-h290-no/1-216x290.gif" alt="" width="145" height="229" /></div>
<style><!--
.sombra {
border: 2px solid #fff;
border-radius: 1em/1em;
box-shadow: none;
filter: progid:DXImageTransform.Microsoft.Shadow(enabled=false); }
.sombra:hover {
width: 148px;
height: 236px;
webkit-box-shadow: 0 0 25px #CA008B, 3px 4px 20px #5A00CA, -3px 4px 25px #00CA92, -3px -3px 25px #00CA6E, 3px -3px 25px #CABC00,3px 3px 25px #CA3D00,-3px -3px 25px #00CAC4;
moz-box-shadow: 0 0 25px #CA008B, 3px 4px 20px #5A00CA, -3px 4px 25px #00CA92, -3px -3px 25px #00CA6E, 3px -3px 25px #CABC00,3px 3px 25px #CA3D00,-3px -3px 25px #00CAC4;
box-shadow:0 0 25px #CA008B, 3px 4px 20px #5A00CA, -3px 4px 25px #00CA92, -3px -3px 25px #00CA6E, 3px -3px 25px #CABC00,3px 3px 25px #CA3D00,-3px -3px 25px #00CAC4;
>filter: progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5,enabled=true);
}
--></style>
votre commentaire -
Par GloriaV le 17 Février 2015 à 16:20
Color - Negro
<div class="bwaizum pic"><img style="border: 1px dotted #707070; -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; -webkit-box-shadow: 3px 2px 6px #000000; -moz-box-shadow: 3px 2px 6px #000000; box-shadow: 3px 2px 6px #000000;" src="http:// .jpg" alt="" width="250" height="230" /></div>
/*B&W*/.bwaizum {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease; }
.bwaizum:hover {
-webkit-filter: grayscale(100%); }
votre commentaire -
Par GloriaV le 17 Février 2015 à 17:48
Tres imágenes
<div class="title"><img src="http://frimousse67.f.r.pic.centerblog.net/70054f10.gif" alt="" width="164" height="146" /></div>
<div class="screen"><div class="header"> Crosses | Library | New Packs </div> <div class="cube blue"> <div class="title"> SOMEBODY THAT U USED TO KNO <span>GYOTE</span> </div> </div> <div class="cube red"> <div class="title"> 2 MILLION <span>AVICII</span> </div> </div> <div class="cube next"> <div class="title"> SHAKE DAT <span>SAVAGE</span> </div> </div> <div class="cube nextNext"> <div class="title"> NEXT SONG 0.9 OPACITY <span>nextsongartist</span> </div></div></div>
h1, h3 {
color:#;
font-family:sans-serif;
}
.screen {
background:#;
width:506px;
height:270px;
overflow:hidden;
position:relative;
-webkit-perspective:400px;
}
.cube {border: 2px dotted #fff;
border-radius: 1em;
box-shadow: 3px 2px 6px #000000;
position:absolute;
}
.cube .title {
color:#;
font-family:sans-serif;
font-weight:lighter;
padding:3px;
}
.title span {
display:block;
font-size:12px;
padding-top:3px;
}
.red {
background:#;border: 2px dotted #fff;
border-radius: 1em;
box-shadow: 3px 2px 6px #000000;
top:50px;
left:278px;
-webkit-transform-origin: right center;
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
z-index:50;
}
.blue {
background:#;border: 2px dotted #fff;
border-radius: 1em;
box-shadow: 3px 2px 6px #000000;
top:50px;
left:78px;
-webkit-transform-origin: left center;
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
z-index:50;
}
.header {
background:#;border: 2px dotted #fff;
border-radius: 1em;
box-shadow: 3px 2px 6px #000000;
position:absolute;
top:-20px;
height:10px;
line-height:10px;
color:#fff;
font-weight:bold;
font-family:sans-serif;
text-align:center;
width:0%;
opacity:0.8;
-webkit-transition: -webkit-transform 0.5s ease;
}
.screen:hover .red {border: 2px dotted #fff;
border-radius: 1em;
box-shadow: 3px 2px 6px #000000;
-webkit-transform: rotateY(-70deg) translateX(150px) translateY(24px) translateZ(50px);
}
.screen:hover .blue {border: 2px dotted #fff;
border-radius: 1em;
box-shadow: 3px 2px 6px #000000;
-webkit-transform: rotateY(70deg) translateX( -150px ) translateY(24px) translateZ(50px); }
.screen:hover .header {border: 2px dotted #fff;
border-radius: 1em;
box-shadow: 3px 2px 6px #000000;
-webkit-transform: translateY(40px);
}
.screen:hover .next {border: 2px dotted #fff;
border-radius: 1em/1em;
box-shadow: 3px 2px 6px #000000;
opacity:1;
margin-top:0px;
}
.next {
background:#;
top:50px;
left:178px;
-webkit-transform-origin: left center;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 0.6s ease-in-out;
z-index:1;
-webkit-transform: translate3d( -50px, 400px, -800px );
opacity:0.4;
}
.screen .next {
-webkit-transform: translate3d( 0px, 20px, 0px );
box-shadow:none;
opacity:0;
margin-top:150px;
} .nextNext {
background:#;
top:50px;
left:178px;
-webkit-transform-origin: left center;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 0.6s ease-in-out;
z-index:100;
-webkit-transform: translate3d( 0px, 600px, 600px );
opacity:0.4;
}
.screen:hover .nextNext {
-webkit-transform: translate3d( 0px, 240px, 0px );
box-shadow:none;
opacity:0.9;
}
votre commentaire -
Par GloriaV le 17 Février 2015 à 17:57
Para texto, imagen...
<div class="separator"><a><img src="http://file.mobilmusic.ru/a7/56/c6/1173558.gif" alt="" width="240" height="270" /></a></div>
.separator { margin: 20px; text-align: center; clear: both; } .separator a { display: table; position: relative; z-index: 10; max-width: 94% !important; margin: 10px auto !important; } .separator img { display: table-cell; max-width: 100% !important; padding: 15px; background: #fff; border-radius:160%/20%; -webkit-box-shadow: 0 1px 5px #999; -moz-box-shadow: 0 1px 5px #999; box-shadow: 0 1px 5px #999;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .separator a:before; .separator a:after { content: ""; display: block; position: absolute; top: -5px; left: 0; width: 100%; height: 100%; background: white; border-radius:160%/20%; -webkit-box-shadow: 0 1px 5px #999; -moz-box-shadow: 0 1px 5px #999; box-shadow: 0 1px 5px #999; -webkit-transition: .3s all; -moz-transition: .3s all; transition: .3s all; } .separator a:before { z-index: -2; -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); transform: rotate(2deg); border-radius:160%/20%; } .separator a:after { z-index: -3; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); transform: rotate(-3deg); } .separator a:hover:before; .separator a:hover:after { top: -2px; left: 2px; bottom: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); }
votre commentaire -
Par GloriaV le 17 Février 2015 à 18:16
Para texto, imagen... Fuente
Amor, amor, amor...
El amor es como una guerra, fácil de iniciar, difícil de terminar, imposible de olvidar.
<div id="recuadro1">
<h3>Amor, amor, amor...</h3>
<a href="http://tutorialgloriav.eklablog.com/" target="_blank"><img src="http://www.glamik.ru/Glamik/melkie_cvetoch/54.gif" alt="" /></a>
<p>Texto</p></div><style type="text/css"><!--#recuadro1{
left:30px;
position:relative;
border-radius: 20px;
background-color:#feeef0;
width:200px;
height:240px;
padding:4px;
-moz-animation-name: animacion1;
-moz-animation-duration: 4s;
-webkit-animation-name: animacion1;
-webkit-animation-duration: 4s;
-o-animation-name: animacion1;
-o-animation-duration: 4s;
}
@-moz-keyframes animacion1 {
from {
left:30px;
background-color:#fcdce0;
}
to {
left:300px;
background-color:#f0608e;
}
}
@-webkit-keyframes animacion1 {
from {
left:30px;
background-color:#fcdce0;
}
to {
left:300px;
background-color:#f0608e;
}
}
@-o-keyframes animacion1 {
from {
left:30px;
background-color:#fcdce0;
}
to {
left:300px;
background-color:#f0608e;
}
}
body {
background:white;
}
--></style>
votre commentaire