-
Texto efectos
-
Par GloriaV le 14 Février 2015 à 13:28
1. http://redeando.blogspot.com.estexto-estilo-luces-de-neon.
2. http://redeando.estexto-intermitente-que-cambia-de-color
3. http://redeando. sombras-animadas-que-cambian-de-color
4. Texto con imagen
5. http://shpargalkablog.ru/2011/07/transformaciya-css.html
6. Galeria con texto
7. Texto animado
8. Texto con JS
9. http://codepen.io/mikpatte/pen/LELMdL
10. http://codepen.io/tmrDevelops/pen/dPzGqV
11. Para texto con imagen
12. http://cssdeck.com/labs/7y2gz430
13. http://cssdeck.com/labs/stacked-papers-using-box-shadow
14. http://cssdeck.com/labs/simple-perspective-preloader
15. http://cssdeck.com/picks/180
16. http://cssdeck.com/labs/8852y8sb
17. http://cssdeck.com/labs/shuffled-paper
18. Texto en neon
19. Texto flotante
20. Letra flotante
21. Multicolor
22. Acordeón
23. Hover
24. Flotante
25. En columnas
26. Sombra
27. http://cssdeck.com/labs/content-box-with-lifted-shadows
28. Golden (sombra)
29. http://cssdeck.com/labs/tabs-using-css
30. http://cssdeck.com/labs/profile-interface
31. http://cssdeck.com/labs/eclectic-circle-in-css3-animation
32. http://codepen.io/MattiaAstorino/pen/
33. http://codepen.io/waddington/pen/qJsGd
34. http://codepen.io/ashleynolan/pen/QwvKaw
35. http://codepen.io/Lewitje/pen/JoJepP
36. http://codepen.io/riktar/pen/dPRgOq
37. http://codepen.io/tmrDevelops/pen/yybKwd
38. http://codepen.io/yoannhel/pen/sJpDj
39. http://codepen.io/gcyrillus/pen/vqkgf
40. Acordeón
42. Fade para texto
43. Cubo con texto
44. http://tympanus.net/typography-effects-with-css3-and-jquery/
45. http://bradsknutson.com/blog/unfocused-text-with-css/
46. http://codepen.io/tmrDevelops/pen/qsckv
47. http://codepen.io/pseudoheld/pen/Hyqlt
48. http://tympanus.net/Development/HoverEffectIdeas/index.html
48. Texto con hover Codepen
49. http://www.dynamicdrive.com/dynamicindex10/
50. http://codepen.io/ultimatedelman/pen/zDLAv
51. http://codepen.io/alexincarnati/pen/EFlnc
-
Par GloriaV le 15 Février 2015 à 12:18
Cambio de color del texto seleccionado
CSS
/* webkit, opera, IE9 */ ::selection { background:#B9C4EA; color:#000; } /* mozilla firefox */ ::-moz-selection { background:#B9C4EA; color #000; }
-
Par GloriaV le 17 Février 2015 à 17:12
Para texto, imagen...
Fuente
HTML
<div id="sq"> <div class="circ1">Te amo</div> <div class="circ2"><a href="http://tutorialgloriav.eklablog.com/" target="_blank"><img src="http://imagenes.gifmania.com.pr/Gifs-Animados-Amor/Animaciones-Corazones/Imagenes-Animadas-Corazones-Colores/corazon-colores16.gif" alt="" /></a></div> <div class="circ3">Con corazón y alma</div> </div>
CSS
<style><!--.circ1{ width:160px; height:160px; border-radius:120px; background-color:rgb(255, 255, 255); } .circ2{ width:150px; height:180px; border-radius: 80px / 50px; background-color:rgb(255, 255, 255); } .circ3{ width:150px; height:220px; border-radius: 80px / 50px; background-color:rgb(255, 255, 255); } .circ1{ width:120px; height:120px; border-radius:120px; background-color:rgb(255, 255, 255); margin:20px 0 0 60px; } .circ2{ width:150px; height:80px; border-radius: 80px / 50px; background-color:rgb(255, 255, 255); margin:-90px 0 0 80px; } .circ3{ width:150px; height:90px; border-radius: 80px / 50px; background-color:rgb(255, 255, 255); margin:-90px 0 0 0px; } @-webkit-keyframes animar{ 0% { } 50% { -webkit-transform:translateX(700px) scale(1.2);} 100% {-webkit-transform:translateX(0px); } } #sq{ -webkit-animation-name: animar; -webkit-animation-duration: 20s; -webkit-animation-timing-function: lineal; -webkit-animation-iteration-count:infinite; opacity: 0.6; margin:0; position:absolute; } #sq{ -webkit-animation-name: animar; -webkit-animation-duration: 20s; -webkit-animation-timing-function: lineal; -webkit-animation-iteration-count:infinite; opacity: 0.6; margin:0; position:absolute; } #sq2{ -webkit-animation-name: animar; } --></style>
-
Par GloriaV le 17 Février 2015 à 17:39
Séneca
No hay cosa más fuerte que el verdadero amor.
HTML
<div id="recuadro1"> <h3>Texto</h3> <p>Texto</p></div>
CSS
#recuadro1{ border-radius: 20px; background-color:#E1CCDE; width:200px; height:200px; padding:8px; -moz-animation-play-state:paused; -moz-animation-name: animacion1; -moz-animation-duration: 4s; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -webkit-animation-play-state:paused; -webkit-animation-name: animacion1; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -o-animation-play-state:paused; -o-animation-name: animacion1; -o-animation-duration: 4s; -o-animation-iteration-count: infinite; -o-animation-direction: alternate; } #recuadro1:hover { -moz-animation-play-state:running; -webkit-animation-play-state:running; -o-animation-play-state:running; } @-moz-keyframes animacion1 { from { border-radius:0px; background-color:#E1CCDE; } to { border-radius:40px; background-color:#F4B9EB; } } @-webkit-keyframes animacion1 { from { border-radius:0px; background-color:#E1CCDE; } to { border-radius:40px; background-color:#F4B9EB; } } @-o-keyframes animacion1 { from { border-radius:0px; background-color:#E1CCDE; } to { border-radius:40px; background-color:#F4B9EB; } } body { background:white; margin:50px; }
-
Par GloriaV le 17 Février 2015 à 19:10
"¿Los límites existen? ‘Oh no, esos son creaciones modernas de tu sociedad, en el idioma universal no existe la expresión límite, sólo existe la manifestación de la expresión de la infinidad", respuesta del Maestro Malatai a esta pregunta
HTML
<div class="element"> <div class="img"><img src="https://lh6.googleusercontent.com/-_l3PR-U8_FY/VOcpWz4-QpI/AAAAAAABc0M/wco-gPSSM0s/w223-h300-no/2-223x300%2B%281%29.gif" alt="" /></div> <div class="description"> <p>"¿Los límites existen? ‘Oh no, esos son creaciones modernas de tu sociedad, en el idioma universal no existe la expresión límite, sólo existe la manifestación de la expresión de la infinidad", respuesta del Maestro Malatai a esta pregunta</p> </div> </div>
CSS
.element { border: 2px dotted #330e02; border-radius: 5%/10%; background: #fff; float: left; height: 320px; margin-right: 10px; overflow: hidden; position: relative; width: 417px; } .element a { text-decoration: none; color: #000; } .img, .description { height: 300px; } .img { margin-top: 0; background: #fff; -webkit-transition-property: margin-top; -webkit-transition-duration: .5s; -moz-transition-property: margin-top; -moz-transition-duration: .5s; -o-transition-property: margin-top; -o-transition-duration: .5s; -ms-transition-property: margin-top; -ms-transition-duration: .5s; } .element:hover .img { margin-top: -120px; } .description { background: #fdf8d2; color: #000; font-family: Edwardian Script ITC; font-size: 22px; } .description p { padding:0 0 0 5px; }
-
Par GloriaV le 19 Février 2015 à 16:31
Saber y saberlo demostrar, es valer dos veces.Baltasar Gracián
HTML
<div class="css3_pulsate pulsate">Saber y saberlo demostrar, es valer dos veces.Baltasar Gracián</div>
CSS
@-webkit-keyframes pulsate { 0% { width:200px; } 5% { width:250px; left:-25px; } 10% { width:200px; left:0px; } 15% { width:250px; left:-25px; } 20% { width:200px; left:0px; } 40% { width:200px; background-color:#BEEBFE; } 45% { width:250px; left:-25px; background-color:#BEEBFE; } 50% { width:200px; left:0px; background-color:#BEEBFE; } 55% { width:250px; left:-25px; background-color:#BEEBFE; } 60% { width:200px; left:0px; background-color:#BEEBFE; } 80% { width:200px; background-color:#82D9FC; } 100% { width:200px; background-color:#82D9FC; } } .css3_pulsate:hover { -webkit-animation-name: pulsate; -webkit-animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; }
-
Par GloriaV le 20 Février 2015 à 14:50
Fuente
La mente de una mujer es más limpia que la de un hombres: la limpian más a menudo.Oliver Herford.
HTML
<div class="transition-opacity"><p>Texto</p><br /><p><img style="border: 2px double #f69f64; border-radius: 10px; -webkit-box-shadow: #6d3112 3px 3px 9px; box-shadow: #6d3112 3px 3px 11px; display: block; margin-left: auto; margin-right: auto;" src="https://lh4.googleusercontent.com/-51R5po3iN58/U2numiM_JsI/AAAAAAAAXCM/wPvwnMidnis/w314-h400-no/42.gif" alt="" width="250" height="290" /></p></div>
CSS
<style type="text/css"><!-- .transition-opacity { background: #fff; color: #000; margin: 0 auto; padding: 10px; text-align: center; max-width: 500px; font-size: 20px; border: 2px ridge #f69f64; border-radius: 10px; box-shadow: 1px 1px 7px #000; cursor: pointer; transition: 3s linear; } .transition-opacity:hover { opacity: .1; } --></style>
-
Par GloriaV le 20 Février 2015 à 15:14
Dios tiene un principe para tí,
pero eso no significa que no seas ya una reina.
HTML
<div class="transition-translate"> <p style="text-align: center;">Dios tiene un principe para tí, <br />pero eso no significa que no seas ya una reina.</p> <img style="border: 2px dotted #0099c8; border-radius: 110px/140px; -webkit-box-shadow: #6d3112 3px 3px 9px; box-shadow: #6d3112 3px 3px 11px; display: block; margin-left: auto; margin-right: auto;" src="https://lh5.googleusercontent.com/-bLLEVt-HGns/U-jZpnNed7I/AAAAAAAA2rI/thbYxI5wfIw/w245-h170-no/8.gif" alt="" width="270" height="230" /></div>
CSS
<style type="text/css"><!-- .transition-translate { position: relative; top: 0; z-index: 2; background: #fff; color: #000; margin: 0 auto; padding: 10px; text-align: center; max-width: 400px; font-size: 20px; border: 3px double #0099c8; border-radius: 110px/140px; -webkit-box-shadow: #3f3850 44px 44px 44px;-moz-box-shadow: #71346f 14px 14px 14px; box-shadow: 0 5px 5px 2px #000; cursor: pointer; transition: 3s linear; } .transition-translate:hover { top: 50px; } --></style>
-
Par GloriaV le 20 Février 2015 à 16:09
Una mujer bella no siempre es inteligente; una mujer inteligente siempre es bella.
HTML
<div class="transition-width"> <p>Texto</p><p><img style="border: 2px double #cc5670; border-radius: 5em/1em; -webkit-box-shadow: #6d3112 3px 3px 9px; box-shadow: #6d3112 3px 3px 11px; display: block; margin-left: auto; margin-right: auto;" src="http://mir-animashki.com/_ph/67/461291948.gif" alt="" width="250" height="290" /></p></div>
CSS
<style type="text/css"><!-- .transition-width { background: #FEFBFE; color: #000; margin: 0 auto; padding: 10px; text-align: center; max-width: 400px; font-size: 20px; border: 2px dotted #cc5670; border-radius: 5em/1em; cursor: pointer; transition: 3s linear; } .transition-width:hover { max-width: 300px; } --></style>
-
Par GloriaV le 20 Février 2015 à 17:51
Fuente
Los dioses ayudan a los hombres que se ayudan a sí mismos, y esto es mediante el trabajo. Virgilio
HTML
<div class="imagepluscontainer" style="z-index: 2;"> <p><img style="border: 2px double #b7d9fa; border-radius: 8px; -webkit-box-shadow: #6d3112 3px 3px 9px; box-shadow: #6d3112 3px 3px 11px; display: block; margin-left: auto; margin-right: auto;" src="https://lh6.googleusercontent.com/-dy6eflBlE2o/VOdyIloF99I/AAAAAAABc4o/lG0DJAbHW1U/w191-h300-no/1-191x300.gif" alt="" width="220" height="290" /></p> <div class="desc">Texto</div></div>
CSS
<style> .imagepluscontainer{ position: relative;width: 200px; z-index: 1; } .imagepluscontainer img{ position: relative; z-index: 2; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .imagepluscontainer:hover img{ -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); -moz-transform: scale(1.05, 1.05); -webkit-transform: scale(1.05, 1.05); -ms-transform: scale(1.05, 1.05); -o-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); } .imagepluscontainer div.desc{ /* CSS for desc div of each image. */ position: absolute; width: 90%; z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */ bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */ left: 5px; padding: 8px; background: rgba(255, 255, 255, 0.8); color: #000; font-family: "Edwardian Script ITC"; font-size: 22px; -moz-border-radius: 0 0 8px 8px;-webkit-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; opacity: 0; /* Set initial opacity to 0 */ -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); -moz-transition: all 0.5s ease 0.5s; -webkit-transition: all 0.5s ease 0.5s; -o-transition: all 0.5s ease 0.5s; -ms-transition: all 0.5s ease 0.5s; transition: all 0.5s ease 0.5s; } .imagepluscontainer div.desc a{ color: white; } .imagepluscontainer:hover div.desc{ -moz-transform: translate(0, 100%); -webkit-transform: translate(0, 100%); -ms-transform: translate(0, 100%); -o-transform: translate(0, 100%); transform: translate(0, 100%); opacity:1; /* Reveal desc DIV fully */ } </style>
-
Par GloriaV le 20 Février 2015 à 18:05
Para texto, imagen...
Te amo
Anoche miré al cielo y empecé a dar a cada estrella una razón por la que te quiero tanto. Me faltaron estrellas.
HTML
<div class="box"> <h2>Te amo<span class="l"> </span><span class="r"> </span></h2> <div class="block"> <div class="block_in"> <p>Texto</p><p><img style="border: 2px double #916ea7; border-radius: 5px; -webkit-box-shadow: #6d3112 3px 3px 9px; box-shadow: #6d3112 3px 3px 11px; display: block; margin-left: auto; margin-right: auto;" src="https://lh4.googleusercontent.com/-wnHHm0Xt9ds/VOdkMDfcSrI/AAAAAAABc4Q/MtryfXKO1z0/w276-h262-no/1-276x262.gif" alt="" width="305" height="250" /></p></div></div></div>
CSS
<!-- end of #container --> <style type="text/css"><!-- .box { background:#fcf3fc; padding:0; margin: 40px 30px 45px 40px; overflow: hidden; width: 400px; border: 1px solid #908396; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-box-shadow:0 0 10px #DCDCDC inset; -moz-box-shadow:0 0 10px #DCDCDC inset; box-shadow:0 0 10px #DCDCDC inset; } .box h2 { font-size:1em; font-weight:20; text-transform:uppercase; color:#000; background: #e4dbec; margin:0 -10px -1px -10px; padding:12px; padding-left: 15px; padding-right: 45px; -webkit-box-shadow:0 0 10px #DCDCDC inset; -moz-box-shadow:0 0 10px #DCDCDC inset; box-shadow:0 0 10px #DCDCDC inset; border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; } .block { padding:0; } .block_in { padding:12px; } .box div.hide { display: block; width: 40px; line-height: 24px; position: absolute; right: 5px; top: 8px; cursor: pointer; font-size: 10px; text-transform: uppercase; text-align: center; border: solid 1px #aaa; background: #faeaf3; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-box-shadow:0 0 4px #DCDCDC inset; -moz-box-shadow:0 0 4px #DCDCDC inset; box-shadow:0 0 4px #DCDCDC inset; } .box div.hide:hover { background: #fff; } .box div.hide span.h { display: block;} .box div.hide span.s { display: none;} .box div.show span.h { display: none;} .box div.show span.s { display: block;} .closed div.hide span.h { display: none;} .closed div.hide span.s { display: block;} .closed div.show span.h { display: block;} .closed div.show span.s { display: none;} --></style>
-
Par GloriaV le 20 Février 2015 à 19:17
No se puede exigir del mineral para convertirse en el gas.
No se puede exigir de la locura que actua con sabiduría.
Y si el primero es todavía posible hacer,
lo segundo no logrará nunca.
Amen
HTML
<blockquote> <p class="hov">Lorem</p> <p class="hov">ipsum</p> <p class="hov">dolor</p> <p class="hov">sit</p> <p class="hov">amen</p> </blockquote>
CSS
<style><!-- blockquote:hover p.hov { box-shadow: 1px 1px #666, 2px 2px #666, 3px 3px #666; } --></style>
-
Par GloriaV le 24 Février 2015 à 14:06
CSS3 Text Effect 4
HTML
<div id="eff4">CSS3 Text Effect 4</div>
CSS
<style type="text/css"><!-- #eff4 { background: #0C84F3 -webkit-gradient(linear, left top, right top, from(#0DF2B4), to(#C0DFFC), color-stop(0.5, #ffffff)) 0 0 no-repeat; color: rgba(255, 255, 255, 0.1); font-size: 30px; font-weight: bold; position: relative; -webkit-animation: shine 2s infinite; -webkit-background-clip: text; -webkit-background-size: 300px; } @-webkit-keyframes shine { 0% { background-position: top left; } 100% { background-position: top right; } } --></style>
-
Par GloriaV le 24 Février 2015 à 14:53
El amor es la alegría de los buenos, la reflexión de los sabios, el asombro de los incrédulos.
Platón
HTML
<div id="wrapper"> <h1>Texto</h1> <p>Texto</p>
CSS
#wrapper h1{ font:normal 16pt Monotype corsiva; color:#000; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); } #wrapper p{ font:normal 16pt Monotype corsiva; color:#000; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1),8 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); }
-
Par GloriaV le 24 Février 2015 à 16:18
http://bradsknutson.com/blog/css3-flash-card-demo/
Hacer una corona es mucho más fácil
que hallar una cabeza digna de llevarla.
Johann Wolfgang von GoetheHTML
<div class="flip-card"> <div class="flip-front"><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.bellaterreno.com/graphics/clipart_mystical/crowntiny/crowntiny_spin_shadow_ani.gif" alt="" />Texto, imagen</div><div class="flip-back"></div></div>
CSS
.flip-card { height: <-- height of flash card -->; width: <-- width of flash card -->; transform: perspective(400px) rotateY(0deg); -moz-transform: perspective(400px) rotateY(0deg); -webkit-transform: perspective(400px) rotateY(0deg); -o-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transition: all ease 0.2s; -moz-transition: all ease 0.2s; -webkit-transition: all ease 0.2s; -o-transition: all ease 0.2s; -ms-transition: all ease 0.2s; } .flip-card .flip-front { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .flip-card .flip-back { height: 100%; width: 100%; } .flip-card:hover { transform: perspective(400px) rotateY(180deg); -moz-transform: perspective(400px) rotateY(180deg); -webkit-transform: perspective(400px) rotateY(180deg); -o-transform: perspective(400px) rotateY(180deg); -ms-transform: perspective(400px) rotateY(180deg); } .flip-card:hover .flip-back { transform: perspective(400px) rotateY(-180deg); -moz-transform: perspective(400px) rotateY(-180deg); -webkit-transform: perspective(400px) rotateY(-180deg); -o-transform: perspective(400px) rotateY(-180deg); -ms-transform: perspective(400px) rotateY(-180deg); } --> -->
-
Par GloriaV le 5 Mars 2015 à 16:42
Efectos hover con CSS3
-
Título primera imagen
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ipsum quam, tincidunt at laoreet nec, egestas at felis. Proin sed purus lorem. Donec euismod orci pretium dui.
Mas Info -
Título segunda imagen
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ipsum quam, tincidunt at laoreet nec, egestas at felis. Proin sed purus lorem. Donec euismod orci pretium dui.
Mas Info
HTML
<div id="container"> <div id="cabecera"> <h1>Efectos hover con CSS3</h1> </div> <div id="contenido"> <ul class="efectos"> <li><img style="border: 1px dotted #52BEFE; -webkit-border-radius: 1em/0.5em; -moz-border-radius: 1em/0.5em; border-radius: 1em/0.5em; -webkit-box-shadow: #6d3112 3px 3px 9px; -moz-box-shadow: #6d3112 3px 3px 9px; box-shadow: #6d3112 3px 3px 11px;" src="http://productions.caffix.org/wp-content/uploads/2009/11/m-6e0568979b684dc9a70f8317aa58_128_128.gif" alt="" width="135" height="135" /> <h2>Título primera imagen</h2> <hr /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ipsum quam, tincidunt at laoreet nec, egestas at felis. Proin sed purus lorem. Donec euismod orci pretium dui.</p> <a class="boton" title="Haz click aquí para más información" href="#">Mas Info</a></li> <li><img style="border: 1px dotted #52BEFE; -webkit-border-radius: 1em/0.5em; -moz-border-radius: 1em/0.5em; border-radius: 1em/0.5em; -webkit-box-shadow: #6d3112 3px 3px 9px; -moz-box-shadow: #6d3112 3px 3px 9px; box-shadow: #6d3112 3px 3px 11px;" src="http://www.gifsde.com/uploads/651ce2_ohmmmmm.gif" alt="" width="135" height="135" /> <h2>Título segunda imagen</h2> <hr /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ipsum quam, tincidunt at laoreet nec, egestas at felis. Proin sed purus lorem. Donec euismod orci pretium dui.</p> <a class="boton" title="Haz click aquí para más información" href="#">Mas Info</a></li></ul></div></div>
CSS
background:#B4C1DE url(../img/bg.png) 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:#B4C1DE url(../img/efecto-fondo.jpg) no-repeat center center; position:relative; list-style:none; width:400px; height:250px; overflow:hidden; border:20px solid #FFF; border-radius: 1em 0.5em; 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 } ul.efectos li img { z-index:30; position:absolute; top:0; left:0; -webkit-transition:all .7s ease-out; -moz-transition:all .7s ease-out; -ms-transition:all .7s ease-out; -o-transition:all .7s ease-out } ul.efectos li h2 { font-size:3em; color:#fff; line-height:1.5em; letter-spacing:.1em; text-align:center; text-transform:uppercase; -webkit-transition:all .5s ease-in; -webkit-transform:scale(0.1); -moz-transition:all .5s ease-in; -moz-transform:scale(0.1); -ms-transition:all .5s ease-in; -ms-transform:scale(0.1); -o-transition:all .5s ease-in; -o-transform:scale(0.1); opacity:0; margin:0; padding:0 } ul.efectos li:hover h2 { padding-top:30px; -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); opacity:1 }ul.efectos li a.boton { display:block; text-align:center; font-family:helvetica, arial, sans-serif; position:relative; text-transform:uppercase; letter-spacing:.2em; text-decoration:none; font-size:1.6em; background:#333; color:#fff; width:150px; margin-left:125px; border:none; -webkit-transition:all .6s ease-in; -webkit-transform:translateY(230px) scale(5); -moz-transition:all .6s ease-in; -moz-transform:translateY(230px) scale(5); -ms-transition:all .6s ease-in; -ms-transform:translateY(230px) scale(5); -o-transition:all .6s ease-in; -o-transform:translateY(230px) scale(5); opacity:0; cursor:pointer; z-index:50; padding:4px } ul.efectos li:hover a.boton { -webkit-transform:translateY(0) scale(1); -moz-transform:translateY(0) scale(1); -ms-transform:translateY(0) scale(1); -o-transform:translateY(0) scale(1); opacity:1 }
-
-
Par GloriaV le 13 Mars 2015 à 19:22
<
http://cssdeck.com/labs/profile-interfaceCreated by balapa95
HTML
<div class=container> <div class=nama> <h3>Created by balapa95</h3> </div><img class=me src="https://lh3.googleusercontent.com/-NhjadQ0xxTU/VJQfrCl4kxI/AAAAAAABREg/-lIzr86dUW4/w240-h300-no/4-240x300.gif" alt=" " /></div>
CSS
<style type="text/css"><! * { margin:0px; padding:0px; } .container { background-color:#fff; width:270px; z-index:2; display:block; margin:130px auto; position:relattive; padding-top:10px; border-radius:5px; } .nama { width:270px; display:block; z-index:-2; position:absolute; left:50%; margin:-15px 0px; transition:0.3s all ease-out; } .nama h3 { left:-50%; color:white; font-size:16px; position:relative; text-align:center; background:#c4c7c2; line-height:50px; border-top-left-radius:5px; border-top-right-radius:5px; } .container:hover .nama { margin:-55px 0; } .container:hover .me { transform:scale(1.05); } .me { border-radius:10%; border: 1px dotted #fff; width:50%; display:block; margin:0 auto; margin-top:20px; transform:scale(.95); transition:.3s all ease; } --></style>
-
Par GloriaV le 16 Mars 2015 à 18:11
El profesor mediocre dice.
El buen profesor explica.
El profesor superior demuestra.
El gran profesor inspira.
HTML
<table id="myexample" style="border-right: gray 2px dotted; border-radius: 10px/5px; border-top: gray 2px dotted; border-left: gray 2px dotted; border-bottom: gray 2px dotted,border-radius: 10px/5px;" border="0" width="280" align="center"><tbody><tr><td>Texto</td></tr></tbody></table>
CSS
<script type="text/javascript">// <![CDATA[ //configure interval btw flash (1000=1 second) var speed=500 function flashit(){ var crosstable=document.getElementById? document.getElementById("myexample") : document.all? document.all.myexample : "" if (crosstable){ if (crosstable.style.borderColor.indexOf("yellow")!=-1) crosstable.style.borderColor="red" else crosstable.style.borderColor="yellow" } } setInterval("flashit()", speed) //--> // ]]></script>
-
Par GloriaV le 18 Juillet 2015 à 16:13
Para texto, código, imagen...
1 Título
Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.2 Título
Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.3 Título
Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.4 Título
Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.5Título
Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.6 Título
Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.
HTML
<div id="tarjetas"> <div class="tarjeta"><p>1 Título</p>Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.</div><div class="tarjeta"><p>2 Título</p>Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.</div><div class="tarjeta"><p>3 Título</p>Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.</div><div class="tarjeta"><p>4 Título</p>Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.</div><div class="tarjeta"><p>5 Título</p>Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.</div><div class="tarjeta"><p>6 Título</p>Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.</div><div class="tarjeta"><p>7 Título</p>Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.</div><div class="tarjeta"><p>8 Título</p>Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.</div><div style="clear: both;"> </div></div>
CSS
#tarjetas {width:460px; margin: 0 auto; background:#f7f7f7; border:1px solid #FFF; box-shadow:0 0 1px #CCC; padding:0 10px 10px 10px; } .tarjeta { float:left;width:200px; padding:10px; background:#FCFCFC; line-height:10px; font-size:19px; color:transparent; text-shadow:0 0 3px black; box-shadow: 0 0 7px #ccc; border-radius:1px; margin-left:10px; margin-top:10px; -moz-transition: 0.4s; -webkit-transition: 0.4s; -o-transition: 0.4s;transition: 0.4s; } .tarjeta:hover { box-shadow:2px 2px 1px #ccc; -webkit-transform: rotate(5deg) scale(1.2) skew(1deg) translate(0px); -moz-transform: rotate(5deg) scale(1.2) skew(1deg) translate(0px); -o-transform: rotate(5deg) scale(1.2) skew(1deg) translate(0px); color:#222; text-shadow:0 0 1px white; background-image: linear-gradient(bottom, rgb(245,245,245) 17%, rgb(255,255,255) 59%); background-image: -o-linear-gradient(bottom, rgb(245,245,245) 17%, rgb(255,255,255) 59%); background-image: -moz-linear-gradient(bottom, rgb(245,245,245) 17%, rgb(255,255,255) 59%); background-image: -webkit-linear-gradient(bottom, rgb(245,245,245) 17%, rgb(255,255,255) 59%); background-image: -ms-linear-gradient(bottom, rgb(245,245,245) 17%, rgb(255,255,255) 59%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(245,245,245)), color-stop(0.59, rgb(255,255,255)) ); } .tarjeta p { font-size:13px; }
-
Par GloriaV le 30 Juillet 2015 à 12:31
Texto
HTML
<div class="row"> <div class="col-sm-1"> <div class="round round-sm"><span class="glyphicon glyphicon-file"><img src="https://img-fotki.yandex.ru/get/4810/sibircko-ir.38/0_59ee5_b2693a2_orig" width="140" height="165" alt="" /></span><br /></div> </div> </div><div class="container"> <div class="row"><div class="col-sm-1"><div class="round round-sm hollow "><span class="glyphicon glyphicon-file">Texto</span></div></div></div></div>
CSS
.round{ -moz-border-radius:50%; /* for Firefox */ -webkit-border-radius:50%; /* for Webkit-Browsers */ border-radius:50%; /* regular */ opacity:1; /* Transparent Background 50% */ background:#eee; padding:40px; height:170px; width:170px; text-align: center; alignment-adjust: middle; vertical-align:middle; text-decoration: none; color:#000; } .round:hover{ -moz-border-radius:50%; /* for Firefox */ -webkit-border-radius:50%; /* for Webkit-Browsers */ border-radius:20%; /* regular */ opacity:1; /* Transparent Background 50% */ background:#ccc; padding:40px; height:170px; width:170px; text-align: center; alignment-adjust: middle; vertical-align:middle; text-decoration: none; color:#fff; }
-
Par GloriaV le 30 Juillet 2015 à 13:10
http://stackoverflow.com/questions/19052755/text-in-rounded-corners-and-hover-not-working
Las buenas mujeres dicen toda su vida, y día a día, hora por hora y minuto a minuto, muchas cosas que los ángeles pueden leer. Bram Stoker
Que acaso no existan los ángeles, pero que hay gente que podrían ser ángeles...David Foster Wallace
HTML
<a href="http://fondogifflashgloriav.ek.la/angeles-c25903940"> <div class="round"> <img src="https://img-fotki.yandex.ru/get/6421/122885204.12c/0_81333_8aeaa0d4_orig" width="140" height="165"align="center" /><br />Texto</div> </a> <a href="http://fondogifflashgloriav.ek.la/angeles-c25903940"> <div class="round"> <img src="https://img-fotki.yandex.ru/get/4310/sweetlankakiss.15/0_29679_32ad8cd7_orig" width="140" height="165" align="center" /><br />Texto</div> </a>
CSS
<style type="text/css"><!-- .round{ -moz-border-radius:30%; /* for Firefox */ -webkit-border-radius:30%; /* for Webkit-Browsers */ border-radius:30%; /* regular */ opacity:1; /* Transparent Background 30% */ background:#eee; padding:40px; height:170px; width:170px; text-align: center; alignment-adjust: middle; vertical-align:middle; text-decoration: none; color:#000; } .round:hover{ -moz-border-radius:30%; /* for Firefox */ -webkit-border-radius:30%; /* for Webkit-Browsers */ border-radius:10%; /* regular */ opacity:1; /* Transparent Background 30% */ background:#ccc; padding:40px; height:170px; width:170px; text-align: center; alignment-adjust: middle; vertical-align:middle; text-decoration: none; color:#fff; }--></style>
-
Par GloriaV le 17 Juillet 2016 à 14:57
Texto 1
Texto 2
<div id="f1_container" class="hover">
<div id="f1_card" class="shadow">
<div class="front face">
<img style="margin-left: auto; border-radius: 2%;
box-shadow: 1px 1px 6px 1px #666; display: block;
margin-right: auto;"
src="http://dentalcompany.es/Blog/wp-content/uploads/2015/05/5-Chaplin-baile-animado.gif"
width="195" height="210"/>
</div> <div class="back face center">
<p>Texto 1</p> <p>Texto 2</p></div></div></div>CSS
#f1_container {
position: relative;
margin: 10px auto;
width: 400px;
height: 400px;
perspective: 1000;
-webkit-perspective: 700; background: red;
} #f1_card {
width: 400px; height: 400px;
transform-style: preserve-3d;
transition: all 1.0s ease-in-out;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 1s ease-in-out;
-webkit-transform-origin: right; }
#f1_container:hover
#f1_card {
-webkit-transform: rotateY(-180deg);
}
-
Par GloriaV le 17 Juillet 2016 à 15:02
Texto 1
Texto 2
<div id="f1_container" class="hover"> <div id="f1_card" class="shadow"> <div class="front face"> <img style="margin-left: auto; border-radius: 2%; box-shadow: 1px 1px 6px 1px #666; display: block; margin-right: auto;" src="http://dentalcompany.es/Blog/wp-content/uploads/2015/05/5-Chaplin-baile-animado.gif" width="195" height="210"/> </div> <div class="back face center"> <p>Texto 1</p> <p>Texto 2</p></div></div></div>
CSS
#f1_container { position: relative; margin: 10px auto; width: 50%; height: 50%; perspective: 1000; -webkit-perspective: 400; background: ; } #f1_card { width: auto; height: auto; transform-style: preserve-3d; transition: all 1.0s ease-in-out; -webkit-transform-style: preserve-3d; -webkit-transition: all 1s ease-in-out; -webkit-transform-origin: right; } #f1_container:hover #f1_card { -webkit-transform: scaleX(-1); } #f1_card { width: 50%; height: 50%; border-radius:2%; border: 1px dotted #000; transform-style: preserve-3d; transition: all 1.0s ease-in-out; -webkit-transform-style: preserve-3d; -webkit-transition: all 1s ease-in-out; -webkit-transform-origin: right; } #f1_container:hover #f2_card { -webkit-transition-delay: 2s; -webkit-transform: scaleX(-1); } } .face { position: absolute; left: 100%; bottom: 100%; width: 50%; height: 50%; -webkit-backface-visibility: hidden; z-index: 3; } .face.back { -webkit-transform: scaleX(-1); } } .face2 { position: absolute; left: 100%; width: 50%; height: 50%; -webkit-backface-visibility: hidden; z-index: 0; } .face2.back2 { -webkit-transform: scaleX(1); }
-
Par GloriaV le 17 Juillet 2016 à 15:05
Texto 1
Texto 2
<div id="f3_container" class="hover"> <div id="f3_card" class="shadow"> <div class="front face"> <img src="https://img-fotki.yandex.ru/get/6438/131165231.36/0_aa92e_e58bda4a_orig" width="195" height="210"/> </div> <div class="back face center"> <p>Texto 1</p> <p>Texto 2</p> </div></div></div>
CSS
<style> #f3_container { position: relative; margin: 10px auto; width: auto; height: auto; z-index: 1; } #f3_container { -webkit-perspective: 1000; -moz-perspective: 1000; -o-perspective: 1000; -ms-perspective: 1000; perspective: 1000; } #f3_card { width: 50%; height: 40%; -webkit-transform-style: preserve-3d; -webkit-transition: all 1.0s linear; -moz-transform-style: preserve-3d; -moz-transition: all 1.0s linear; -o-transform-style: preserve-3d; -o-transition: all 1.0s linear; -ms-transform-style: preserve-3d; -ms-transition: all 1.0s linear; transform-style: preserve-3d; transition: all 1.0s linear; } #f3_container:hover #f3_card, #f3_container.hover_effect #f3_card { -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -webkit-box-shadow: -5px -5px 5px #aaa; -moz-box-shadow: -5px -5px 5px #aaa; box-shadow: -5px -5px 5px #aaa; } </style>
-
Par GloriaV le 17 Juillet 2016 à 15:06
Texto
<div id="f2_container" class="hover"> <div id="f2_card" class="shadow"> <div class="front face"> <img src="https://img-fotki.yandex.ru/get/4909/131165231.6a/0_dc80c_3093e75b_orig"width="195" height="210"/></div> <div class="back face center"> <p>Texto</p></div></div></div>
CSS
<style> #f2_container { position: relative; margin: 10px auto; width: auto; height: auto; z-index: 1; } #f2_container { -webkit-perspective: 1000; -moz-perspective: 1000; -o-perspective: 1000; -ms-perspective: 1000; perspective: 1000; } #f2_card { width: 50%; height: 35%; -webkit-transform-style: preserve-3d; -webkit-transition: all 1.0s linear; -moz-transform-style: preserve-3d; -moz-transition: all 1.0s linear; -o-transform-style: preserve-3d; -o-transition: all 1.0s linear; -ms-transform-style: preserve-3d; -ms-transition: all 1.0s linear; transform-style: preserve-3d; transition: all 1.0s linear; } #f2_container:hover #f2_card, #f2_container.hover_effect #f2_card { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-box-shadow: -5px 5px 5px #aaa; -moz-box-shadow: -5px 5px 5px #aaa; box-shadow: -5px 5px 5px #aaa; } </style>
-
Par GloriaV le 17 Juillet 2016 à 15:10
<div id="f1_container" class="hover">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://media.giphy.com/media/N8XWcaExxbiFO/giphy.gif" />
</div>
<div class="back face center">
<p>Este efecto es perfecto para mostrar información adicional sobre imágenes.</p>
<p>Mejor tutorial
<a href="http://tutorialgloriav.eklablog.com/" target="_new">
<p>© GloriaV<p>
</div>
</div>
</div>CSS
<style>
#f1_container {
margin-top:20px;
position: relative;
width: 400px;
height: 300px;
z-index: 1;
}
.face.back {
display: none;
}
#f1_container {
-webkit-perspective: 1000;
}
#f1_card {
-webkit-box-shadow: 5px 5px 5px #aaa;
-moz-box-shadow: 5px 5px 5px #aaa;
box-shadow: 5px 5px 5px #aaa;
border-radius: 5px; border: 1px solid #ccc;
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 1.0s linear;
-moz-transform-style: preserve-3d;
-moz-transition: all 1.0s linear;
-o-transform-style: preserve-3d;
-o-transition: all 1.0s linear;
-ms-transform-style: preserve-3d;
-ms-transition: all 1.0s linear;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f1_container:hover #f1_card, #f1_container.hover_effect #f1_card {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-box-shadow: -5px 5px 5px #aaa;
-moz-box-shadow: -5px 5px 5px #aaa;
box-shadow: -5px 5px 5px #aaa;
}
.face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.face.back {
display: block;
-webkit-transform: rotateY(180deg);
-webkit-box-sizing: border-box;
-moz-transform: rotateY(180deg);
-moz-box-sizing: border-box;
-o-transform: rotateY(180deg);
-o-box-sizing: border-box;
-ms-transform: rotateY(180deg);
-ms-box-sizing: border-box;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: white;
text-align: center;
background-color: #ccc;
color:#000;
}
</style>
-
Par GloriaV le 17 Juillet 2016 à 15:14
SliderTextoFuente -http://www.corelangs.com/css/box/float.html
<div class="box2">Slider</div> <div class="box3"> <img src="http://sl.glitter-graphics.net/pub/2422/2422088qh0kylt7go.gif" alt="" width="20" height="16" />Texto</div>
CSS
.box1 { width:200px; height:100px; background-image: url('https://lh3.googleusercontent.com/-VrjACCpEwuc/V1_gToQADGI/AAAAAAAB-ko/SvwjNigL32IQFiUq99_Qj0eLvy5FPbDqACL0B/w426-h930/1.jpg'); margin:0 auto; border-radius: 5px; border: 1px dotted #9C9C9C; box-shadow: 1px 1px 5px #666; position: relative; z-index: 2; bottom: -10px; } .box2 { width:250px; height:100px; border-radius: 5px; border: 1px dotted #9C9C9C; box-shadow: 1px 1px 5px #666; background-color:red; position:relative; z-index:1 ; margin:0 auto; padding:10px; } .box3 { background-image: url('https://lh3.googleusercontent.com/-VrjACCpEwuc/V1_gToQADGI/AAAAAAAB-ko/SvwjNigL32IQFiUq99_Qj0eLvy5FPbDqACL0B/w426-h930/1.jpg'); height: 100px; border-radius: 5px; border: 1px dotted #9C9C9C; box-shadow: 1px 1px 5px #666; margin: 0 auto; position: relative; top: -10px; width:90%; z-index: 4; }
-
Par GloriaV le 17 Juillet 2016 à 15:18
Texto 1
Texto 2
<div id="f1_container" class="hover"> <div id="f1_card" class="shadow"> <div class="front face"> <img src="https://img-fotki.yandex.ru/get/9496/131165231.50/0_c6d17_90e7518d_orig" width="195" height="210" /> </div> <div class="back face center"> <p>Texto 1</p><p>Texto 2</p></div></div></div>
CSS
<style> #f1_container { position: relative; margin: 10px auto; width: auto; height: auto; z-index: 1; } .face.back { display: none; } #f1_container { -webkit-perspective: 1000; } #f1_card { width: auto; height: auto; -webkit-transform-style: preserve-3d; -webkit-transition: all 1.0s linear; -moz-transform-style: preserve-3d; -moz-transition: all 1.0s linear; -o-transform-style: preserve-3d; -o-transition: all 1.0s linear; -ms-transform-style: preserve-3d; -ms-transition: all 1.0s linear; transform-style: preserve-3d; transition: all 1.0s linear; } #f1_container:hover #f1_card, #f1_container.hover_effect #f1_card { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-box-shadow: -5px 5px 5px #aaa; -moz-box-shadow: -5px 5px 5px #aaa; box-shadow: -5px 5px 5px #aaa; } .face { position: absolute; width: auto; height: auto; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } .face.back { display: block; -webkit-transform: rotateY(180deg); -webkit-box-sizing: border-box; -moz-transform: rotateY(180deg); -moz-box-sizing: border-box; -o-transform: rotateY(180deg); -o-box-sizing: border-box; -ms-transform: rotateY(180deg); -ms-box-sizing: border-box; transform: rotateY(180deg); box-sizing: border-box; padding: 10px; color: white; text-align: center; background-color: #fff; } </style>
-
Par GloriaV le 17 Juillet 2016 à 15:57
Fuente -http://www.corelangs.com/css/box/transparent.html
Texto<div class="duck"> <br>Texto </div>
CSS
<style> .duck { width:100%; height:100%; background: url(http://www.soullightenhancement.com/images/workshop/SOUL-LIGHT-ENHANCEMENT-WITH-HEALING.jpg) no-repeat; border-radius: 5px; box-shadow: 1px 1px 5px #666; border:1px dotted #ffffff; font-size: 30px; font-family:Harrington; color:rgba(0,0,0,.5); font-weight: 900; } .trBorder { height: 100%; width: 100%; margin: 10px; border-radius: 5px; border: 5px solid rgba(255,255,255,.5); } </style>
-
Par GloriaV le 17 Juillet 2016 à 15:59
Ejemplo
<div id="Rojo_Negro">Ejemplo</div>
CSS (1º opción)
<style>
#Rojo_Negro {
text-align:center;
position:relative;
background-color:#D6A6D4;
color:#000;
-webkit-transition-property:background-color, color;
-webkit-transition-duration:2s, 2s;
-moz-transition-property:background-color, color;
-moz-transition-duration:2s, 2s;
-o-transition-property:background-color, color;
-o-transition-duration:2s, 2s;
transition-property:background-color, color;
transition-duration:2s, 2s;
}
#Rojo_Negro:hover {
background-color:#A4BBD6;
color:#FFF;
-webkit-transition-property:background-color, color;
-webkit-transition-duration:2s, 2s;
-moz-transition-property:background-color, color;
-moz-transition-duration:2s, 2s;
-o-transition-property:background-color, color;
-o-transition-duration:2s, 2s;
transition-property:background-color, color;
transition-duration:2s, 2s;
}
</style>CSS (2º opción)
<style>
#Rojo_Negro {
text-align:center;
position:relative;
background-color:#D6A6D4;
color:#000;
height:40px;
width:200px;
border-radius: 5px;
box-shadow: 1px 1px 5px #666;
border:1px dotted #ffffff;
-webkit-transition-property:background-color, color;
-webkit-transition-duration:2s, 2s;
-moz-transition-property:background-color, color;
-moz-transition-duration:2s, 2s;
-o-transition-property:background-color, color;
-o-transition-duration:2s, 2s;
transition-property:background-color, color;
transition-duration:2s, 2s;
}
#Rojo_Negro:hover {
background-color:#A4BBD6;
color:#FFF;
border-radius: 15px;
box-shadow: 1px 1px 5px #666;
border:1px dotted #000;
-webkit-transition-property:background-color, color;
-webkit-transition-duration:2s, 2s;
-moz-transition-property:background-color, color;
-moz-transition-duration:2s, 2s;
-o-transition-property:background-color, color;
-o-transition-duration:2s, 2s;
transition-property:background-color, color;
transition-duration:2s, 2s;
}
</style>