Ir al contenido principal

Blogger, Wordpress - Agregar sombras a los textos con CSS3

Algo que me encanta  de CSS3, es que puedes agregar sombras a tus textos, cosas que con con CSS, se volvía un trabajo complicado.
Como ven en el título del blog, está el texto y éste mismo tiene una sombra. Hoy aprenderemos algunas propiedades, para aplicarlo a nuestro diseño web, e incluso a nuestro Blogger o Wordpress.




 Ejemplo:
#titulo { text-shadow: -10px 20px 15px #000  }


Primero tenemos "#", y seguido a éste tenemos el nombre del titulo, texto u objeto (Puedes llamarlo como tú quieras).
Segundo llega, la propiedad text-shadow.
Tercero tenemos -10px : Permite que la sombra esté alineada a la izquierda, por lo tanto, sí ese valor se cambia a positivo, la sombra se alineará a la derecha.

20px: En este caso la sombra está debajo del titulo, eso es porque sí el valor es positivo, la sombra estará debajo, y sí es negativo por ende estará arriba de nuestro titulo.

15px: Esto permite que la sombra, !se vea como una sombra!, básicamente, sí éste valor cambia a negativo tendrás  una sombra fuerte o nítida, sí lo dejas positivo, tendrás entonces una sombra nublada o borrosa.

Por último: El número  "000", indica el color de la sombra, gran mayoría de webmasters usan sombra de color negra, pero ya sabes, que sí deseas cambiar el color puedes pasarte por:

http://es.wikipedia.org/wiki/Colores_web


El resultado, de lo que hemos hecho es igual a:
Aplicando las propiedades de text-shadow, de las sombras en CSS3
 Recuerda, que sí utilizas numeral, tendrás que definir el texto al que le  piensa poner la sombra de la siguiente manera:

<h1 id="titulo"> ¡Hola, mundo!</h1>

Comentarios

Entradas populares de este blog

Curso 3D básico para arquitectos (GRATIS) - parte 2

PAGINA ANTERIOR IMPORTAR POLÍGONOS DESDE 3DSMAX     Hasta ahora nos hemos centrado únicamente en la modelación de la casa en cadkey, una vez terminada ésta y creado el archivo de polígonos en formato dwg vamos a importar desde  3dsmax  el archivo casa-ejemplo.dwg que tenemos guardado en nuestro escritorio. Para ello abrimos el programa 3dsmax10 y en la pestaña archivo seleccionamos importar-dwg,  en la opción Files of type elegimos   Legacy AutoCAD y seguidamente en el escritorio ( desktop ) seleccionamos el archivo que habíamos creado.

Blogger - Marcadores Sociales Flotantes con la opción de cerrar

El truco se ve de la siguiente manera: Puede ver un Demo de este truco en el siguiente  blog de pruebas .

Blogger - Marcadores Sociales flotantes en la parte superior de la pagina

Los marcadores sociales son algo con lo cual todo blog debe contar, y hoy les traigo un excelente truco en el cual los  marcadores sociales  se ubican en la parte superior de la pagina y al bajar la pagina los marcadores bajan con ella. Los botones se verán de la siguiente manera: