Me he propuesto crear unos mini-tutoriales de CSS (trucos, tips, efectos, etc.) que vaya aprendiendo con el tiempo, como ayuda a los demás que quieran lograr algo que aquí aparezca y como un respaldo de estas cosas que iré aprendiendo :D
Lo primero que aquí presentare es la proyección de una sombra usando solo CSS y HTML.
CSS3 presenta dos nuevas propiedades que nos permite crear una sombra a distintos elementos HTML, proporcionándonos la posibilidad de manejar el desplazamiento horizontal y vertical de la sombra, el difuminado y el color de la misma, ahora lo bueno, los ejemplos:
Para crear una sombra al texto HTML se usa:
- text-shadow.
A esta propiedad se le definen cuatro propiedades:
- text-shadow: 2px 3px 5px #000000;
El primer valor (2px) representa la distancia horizontal de la sombra con el texto.
El segundo valor (3px) representa la distancia vertical de la sombra con respecto al texto.
El tercer valor (5px) representa la saturación de la sombra, es decir la intencidad con la que veremos a la sombra.
El cuarto valor (#000000), bueno esto es fácil representa el color en hexadecimal, se puede usar cualquier representación de color permitido por CSS.
Aquí un ejemplo ya hecho:
Este texto tiene una sombra de color azul.
Esto se logra con el siguiente CSS:
p{
text-align: center
text-shadow: 2px 3px 5px #0000ff;
}
Fácil no?
Ahora otra opción similar, pero para generar una sombra a una caja HTML creada por etiquetas como div's, heater, footer, article, section, etc. es la que se presenta a continuación:
- box-shadow.
Su uso es prácticamente el mismo que el de "text-shadow".
- box-shadow: 3px 4px 6px #00ff00;
Ejemplo practico:
Este texto tiene una sombra de color azul y esta dentro de un div con sombra gris.
El CSS usado es el siguiente.
div{
background: #e1e1e1;
box-shadow: 3px 4px 6px #a0a0a0; /*apllicación de la sombra al div*/
height: 20px;
text-align:center;
text-shadow: 2px 3px 5px #0000ff /*aplicación de la sombra al texto*/
}
Si tienes alguna duda o quieres recomendar algo, o simplemente tienes ganas de dar tu opinión siéntete libre de hacerlo. A menos que seas un Troll X(
