-
<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 -
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 -
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 -
Estilos
1. Estilos antiguos (ruso)
2. Google
Generadores
1. http://css-text-shadow/
2. http://csstypeset.com/
3. http://www.dynamicdrive.com/dynamicindex10/
-
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 -
<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 -
Cambio de color del texto seleccionado
CSS
/* webkit, opera, IE9 */ ::selection { background:#B9C4EA; color:#000; } /* mozilla firefox */ ::-moz-selection { background:#B9C4EA; color #000; }
-
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 -
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 -
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 -
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 -
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 -
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 -
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 -
Fuente
a. http://codepen.io/micke/pen/bNrqvQ
La belleza de la mujer se halla iluminada por una luz que nos lleva y convida a contemplar el alma que tal cuerpo habita, y si aquélla es tan bella como ésta, es imposible no amarla.
Sócrates
Con amor.
GloriaV
HTML
CSS
-
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 -
HTML
<p><embed width="450" height="450" src="http://htmlka.com/wp-content/uploads/2011/05/colorChooser.swf" wmode="transparent"></embed></p>
<p><a href="http://htmlka.com/wp-content/uploads/2011/05/colorChooser.swf" target="_blank"><span style="text-decoration: underline;"><strong><span style="color: #000000; font-size: small;">05</span></strong></span></a></p>
-
!!!70
HTML
<p>
<embed wmode="transparent" src="http://www.yapfiles.ru/files/73870/colorwizard.swf" width="420" height="450" />
</p>
<a href="http://www.yapfiles.ru/files/73870/colorwizard.swf" target="_blank"><u><strong><font color="#000000" size="2">!!!70</font></strong></u></a>
-
HTML
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="470" height="500">
<param name="movie" value="http://u.jimdo.com/www21/o/ s4e9df44a0ad8ccd8/flash/mfa3cf33b72d58060/ 1337970615/flash.swf" />
<param name="quality" value="high" />
<embed wmode="transparent" src="http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/flash/mfa3cf33b72d58060/1337970615/flash.swf" quality="high" pluginspage=
"http://www.macromedia. com/go/getflashplayer" type="application/x-shockwave-flash" width="470" height="500" />
</object>