-
Sombra
-
Par GloriaV le 23 Février 2015 à 14:20
1. Instarlar generador de sombra
2. http://cssdeck.com/labs/zwdep1rgGererador de sombra:
1. http://layerstyles.org/builder.html
2. http://www.cssmatic.com/es/box-shadow
3. Sombra para texto, bordes, gradientes, botones
4. http://www.alsacreations.com/ombrages-ombres-css-box-shadow-text
5. http://jqueryaplicar-sombra-con-box-shadow-css3.html
a. http://jquery-aplicar-sombra-texto-con-text-shadow.html
Ejemplos de sombra
1. http://www.psdahtmlpasoapaso.com/efecto-sombra-css3-avanzado
2. http://foro.ucoz.es/forum/27-268-9
3. http://www.desarrolloweb.com/articulos/sombras-css3-box-shadow.html
4. http://vagabundia.blogspot.com/ombras-nada-mas-entre-firefox
5. http://www.creativejuiz.fr/ombre-avancees-avec-css3-et-box-shadow
6. http://3con14.info/codigo_web/imagen_adornos.html (opacidad)
7. http://www.ciudadblogger.com/12-ejemplos-sombra-textos-con-text
8. http://nicolasgallagher.com/css-drop-shadows-without-images/
9. http://www.freshdesignweb.com/css3-tutorials-examples.html
10. http://cssdeck.com/labs/box-shadow-effect-example
11. Google Sombra
12. http://www.ciudadblogger.com/ejemplos-de-sombra-en-textos
13. http://rdesign.developpez.com/treer-effets-etonnants-avec
-
Par GloriaV le 23 Février 2015 à 14:29
box-shadow: 5px 10px 7px rgba(0,0,0,0.5), -5px -10px 7px rgba(0,0,0,0.5);
box-shadow: 0 0 1px #999, -2px 2px 3px rgba(0,0,0,.2);
-webkit-box-shadow: 0 10px 6px -6px #777; -moz-box-shadow: 0 10px 6px -6px #777;box-shadow: 0 10px 6px -6px #777;
-webkit-box-shadow:0 0px 4px #777, 0 0 20px #CCC inset; -moz-box-shadow:0 0px 4px #777, 0 0 20px #CCC inset; box-shadow:0 0px 4px #777, 0 0 20px #CCC inset;
-
Par GloriaV le 23 Février 2015 à 14:34
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) ;
Para CSS
position: relative; float: left;
padding: 1em;
margin: 100px;
-webkit-box-shadow: 0 10px 6px -6px #777; -moz-box-shadow: 0 10px 6px -6px #777;box-shadow: 0 10px 6px -6px #777;
Para CSS
top: 10px;
bottom: 10px;
left: 0;
box-shadow: 0 0 15px rgba(0,0,0,0.6);
-
Par GloriaV le 23 Février 2015 à 17:18
box-shadow: 10px -16px teal;
box-shadow: 10px 5px 5px black;
box-shadow: 3px 3px red, -1em 0 0.4em olive;
box-shadow: inset 1em 1em gold;
-
Par GloriaV le 23 Février 2015 à 17:25
box-shadow: 0 0 1em gold;
box-shadow: 0 5px 5px 2px #000;
-moz-box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; box-shadow: -5px -5px 5px #888;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);
-
Par GloriaV le 21 Mars 2015 à 14:50
Sombra para texto
http://www.ciudadblogger.com/2014/07/12-ejemplos-de-sombra-en-textos-con-text-shadow.html
Ejemplo de texto con sombra
<p class="shadow">Ejemplo de texto con sombra</p>
<style type="text/css"><!--
.shadow {
text-shadow:#000 3px 3px 3px;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#666666', Direction=135, Strength=4);
}
--></style>
-
Par GloriaV le 21 Mars 2015 à 14:58
Al principio vienen necesariamente a la mente la fantasía y la fábula. Desfilan después lo cálculos matemáticos, y sólo al final la realización corona el pensamiento.
Konstantín Tsiolkovski
<h1>Texto</h1>
h2.contornear{
text-shadow: -1px 0 #090, 1px 0 #090, 0 1px #090, 0 -1px #090;
color: #fff;
}
h3.a {text-shadow: 0.1em 0.1em 0.05em #333
h3.b {text-shadow: 0.1em 0.1em 0.2em black}
text-shadow: 10px 10px 10px #000;
--></style>
-
Par GloriaV le 21 Mars 2015 à 15:06
Casi todos podemos soportar la adversidad, pero si queréis probar el carácter de un hombre, dadle poder.
Abraham Lincoln
<h1>Texto <br></h1>
<style type="text/css"><!--
#sombraredondeada{
background-color: #090;
color: #fff;
width: 400px;
padding: 10px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
box-shadow: 15px -10px 3px #000;
-webkit-box-shadow: 15px -10px 3px #000;
-moz-box-shadow: 15px -10px 3px #000;
}
--></style>
-
Par GloriaV le 21 Mars 2015 à 15:10
Sombra con imagen
HTML
<div id="sombra"><img src="http://dl4.glitter-graphics.net/pub/2687/2687494iagwh2hw8q.gif"width="255" height="228" alt="" /></div>
HTML o CSS
<style type="text/css"><!--
#sombra { float:left; padding:2px 2px 2px 2px; /* */ background: url(https://lh5.googleusercontent.com/-87Y7dVFHdaw/U7BQls4J_tI/AAAAAAAAkig/iTXeu3pEW_A/w88-h31-no/8.jpg) repeat bottom right; /**/border-radius:8em/3em; }
--></style>
-
Par GloriaV le 21 Mars 2015 à 15:12
Contigo todo, sin ti nada.
<h2>Texto</h2>
<style>
h2 {font-family: Impact; color:#777777; margin:0; font-size: 35px; text-align:center; text-shadow: 1px 1px 3px #323232 ;}
</style>
-
Par GloriaV le 9 Mai 2015 à 10:44
<div id="box2"><img style="width: 250px; border: 2px solid white; border-radius: 50px 0px 50px 0px; height: 250px; box-shadow: 0px -3px 10px #000000;" src="http://img0.liveinternet.ru/images/attach/c/2/82/838/82838890_defne84.gif" alt="" /></div>
-
Par GloriaV le 20 Juillet 2015 à 17:20
box-shadow: 0 5px 5px 3px #000;
Giro del elemento
#sombreado_dos:before{ bottom: 10px; box-shadow: 0 5px 5px 3px #000; content:""; left: 6px; position: absolute; -webkit-transform: rotate(-1deg); -moz-transform: rotate(-1deg); -ms-transform: rotate(-1deg); -o-transform: rotate(-1deg); transform: rotate(-1deg); width: 300px; z-index: -1; }
box-shadow: 0 5px 5px 3px #000;
Giro del elemento
#sombreado_dos:after{ bottom: 10px; box-shadow: 0 5px 5px 3px #000; content:""; right: 6px; position: absolute; -webkit-transform: rotate(1deg); -moz-transform: rotate(1deg); -ms-transform: rotate(1deg); -o-transform: rotate(1deg); transform: rotate(1deg); width: 300px; z-index: -1; }
box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.5);
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-
Par GloriaV le 20 Juillet 2015 à 17:26
box-shadow: 0 3px 9px #777, 0 3px 15px #CCC inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);
box-shadow: -1px -1px 1px #333, 1px -1px 1px #333, -1px 1px 1px #333, 1px 1px 1px #333;
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
-
Par GloriaV le 20 Juillet 2015 à 17:41
box-shadow: 10px 10px 5px #888888;
box-shadow:inset 1px 2px 20px #000000;
box-shadow: 1px 2px 20px #000000;
box-shadow: 0px 0px 50px #000000;
-
Par GloriaV le 23 Juillet 2015 à 14:25
box-shadow: 5px 5px 30px #000;
box-shadow: 0 0 5px #999;
box-shadow: -1px -1px 8px #ccc, 1px -1px 8px #333, -1px 1px 1px #333, 1px 1px 12px #ccc;
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;
-
Par GloriaV le 4 Février 2016 à 12:02
box-shadow: 7px 7px 8px #818181;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
box-shadow: inset 1px 1px 20px #000000;
box-shadow: 0 0 9px rgba(0, 0, 0, .9),inset rgba(0,0,0,.6) 2px 5px 9px;
-box-shadow: 0 2px 29px #000;
-
Par GloriaV le 13 Août 2016 à 18:31
<div class="caja caja-sombra"> <h2>Ejemplo 6</h2> <p>Sombra interior exterior</p> </div>
CSS
.caja{ width: 200px; height: 150px; background-color: #f4f4f4; border-radius: 5px / 100px; border: 1px dotted #9C9C9C; box-shadow: inset 0 4px 6px rgba(0,0,0,.5); } .caja-sombra{ position: relative; float: left; padding: 1em; margin: 100px 50px; } .caja-sombra:before, .caja-sombra:after{ content: ""; position: absolute; z-index: -2; } .sombra1:beforez{ top: 10px; bottom: 10px; left: 0; right: 50%; box-shadow: 0 0 15px rgba(0,0,0,0.6); } .sombra2:before{ right: 0 }
-
Par GloriaV le 13 Août 2016 à 18:38
Ejemplo 6
Sombras esquinas levantadas
<div class="caja caja-sombra"><h2>Ejemplo 6</h2> <p>Sombras esquinas levantadas</p> <div class="sombra-abajo-derecha"></div> <div class="sombra-abajo-izquierda"></div> </div>
CSS
.caja{ width: 200px; height: 150px; background-color: #f4f4f4; border-radius: 5px; border: 1px dotted #9C9C9C; } .caja-sombra{ position: relative; float: left; padding: 1em; margin: 100px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .caja-sombra:before, .caja-sombra:after{ content: ""; position: absolute; z-index: -2; } .caja-sombra:before{ width: 24px; height: 46%; top: 0; right: -10px; display: inline-block; box-shadow: 10px -10px 10px rgba(0, 0, 0, 0.5); -webkit-transform: rotate(2deg) translate(-20px, 25px) skew(-6deg); -moz-transform: rotate(2deg) translate(-20px, 25px) skew(-6deg); -o-transform: rotate(2deg) translate(-20px, 25px) skew(-6deg); transform: rotate(2deg) translate(-20px, 25px) skew(-6deg); } .caja-sombra:after{ display: inline-block; height: 46%; left: -10px; top: 0; width: 24px; box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.5); -webkit-transform: rotate(2deg) translate(20px,25px) skew(6deg); -moz-transform: rotate(2deg) translate(20px,25px) skew(6deg); -o-transform: rotate(2deg) translate(20px,25px) skew(6deg); transform: rotate(2deg) translate(20px,25px) skew(6deg); } .sombra-abajo-derecha{ content: ''; width: 24px; height: 46%; bottom: 0; right: -10px; position: absolute; z-index: -1; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); -webkit-transform: rotate(-2deg) translate(-20px,-25px) skew(6deg); -moz-transform: rotate(-2deg) translate(-20px,-25px) skew(6deg); -o-transform: rotate(-2deg) translate(-20px,-25px) skew(6deg); transform: rotate(-2deg) translate(-20px,-25px) skew(6deg); } .sombra-abajo-izquierda{ content: ''; width: 24px; height: 46%; bottom: 0; left: -10px; position: absolute; z-index: -1; box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.5); -webkit-transform: rotate(-2deg) translate(20px,-25px) skew(-6deg); -moz-transform: rotate(-2deg) translate(20px,-25px) skew(-6deg); -o-transform: rotate(-2deg) translate(20px,-25px) skew(-6deg); transform: rotate(-2deg) translate(20px,-25px) skew(-6deg); }
-
Par GloriaV le 13 Août 2016 à 18:39
<div class="caja caja-sombra sombra1 sombra2"> <h2>Ejemplo 5</h2> <p>Sombras laterales interiores</p> </div>
CSS
.caja{ width: 200px; height: 150px; background-color: #f4f4f4; border-radius: 5px; border: 1px dotted #9C9C9C; } .caja-sombra{ position: relative; float: left; padding: 1em; margin: 100px 50px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .caja-sombra:before, .caja-sombra:after{ content: ""; position: absolute; z-index: -2; } .sombra1:beforez{ top: 10px; bottom: 10px; left: 0; right: 50%; box-shadow: 0 0 15px rgba(0,0,0,0.6); border-radius: 5px / 100px; } .sombra2:before{ right: 0 }