Mil Trucos Bloggers

Tutoriales y recursos para Blogger

Select Menu
  • Home
  • Blogging
    • Tutorial Blogspot
    • CSS
    • jQuery
    • Widget
  • Tools
    • Font Awesome
    • HTML Editor
    • HTML Encrypter
    • Code Color
    • Responsive Cek
  • Sitemap
  • Static Page
  • Error Page
Home » Recursos Wordpress » Tutoriales Blogger » Agregar sombras a los textos con CSS3

sábado, 19 de enero de 2013

Agregar sombras a los textos con CSS3

Add Comment
Recursos Wordpress, Tutoriales Blogger
sábado, 19 de enero de 2013
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>

¡Hasta la Proxima Bloggeros!

Share

Like

G+

Tweet

Tweet
0 Komentar untuk "Agregar sombras a los textos con CSS3"

Add Comments

Entrada más reciente Entrada antigua Página Principal
Suscribirse a: Comentarios de la entrada (Atom)

Popular Week

  • Scroll infinito en Blogger
    Scroll infinito en Blogger
    Una de las nuevas formas de cargar una pagina web o blog, es el scroll infinito , el cual consta en que a medida que se vaya bajando el con...
  • Pop Up Me gusta de Facebook para Blogger
    Pop Up Me gusta de Facebook para Blogger
    Un usuario anonimo me pidio un truco tipo PopUp en el se mostrase el boton Me Gusta de Facebook,y buscando un poco he encontrado el tutorial...
  • Últimas Entradas Personalizadas con Icono
    Últimas Entradas Personalizadas con Icono
    Hace unos dias publique una entrada titulada  Ultimos Comentarios Personalizados con Icono ,pues bien despues de probar un rato con los codi...
  • Plantilla BloggerTube
    Plantilla BloggerTube
    BloggerTube es una de las plantillas mas populares entre los Bloggeros en especial para aquellos que desean crear un blog de videos o musica...
  • Las 5 etapas en la vida de un blogger,¿En qué fase te Encuentras ya?
    Las 5 etapas en la vida de un blogger,¿En qué fase te Encuentras ya?
    Hola estimados lectores. Creo que este artículo lo verán un tanto familiar algunos colegas, porque probablemente se apegará a varios sucesos...
  • Cambiate a facturas electronicas
    Cambiate a facturas electronicas
    Las facturas de papel fueron en su momento una gran idea pero en este siglo que ha sido denominado "el siglo de la tecnologia" han...
  • No olvides hacerle SEO a tu web
    No olvides hacerle SEO a tu web
    Ya en Mil Trucos Blogger hemos hablado sobre el SEO, pero hoy hablaremos para que sirve verdaderamente el SEO ya que he recibido muchas duda...
  • ¿Blogger es el producto favorito de Google?
    ¿Blogger es el producto favorito de Google?
    ¿Blogger es el producto favorito de Google?, esa es la pregunta que muchos se harán, luego de leer mi post de ayer el cual se titulaba  ¿Blo...
  • Añade un foro a tu blog con Nabble
    Añade un foro a tu blog con Nabble
    Ya he publicado varias entradas con foros para Blogger pero esta vez les recomiendo Nabble,el cual es el sistema que uso actualmente en el f...
  • Juegos Android- Otro acierto de Google
    Juegos Android- Otro acierto de Google
    Desde que los celulares con el sistema operativo de Google: Android se volvieron muy populares ha crecido en torno a ellos una gran comunida...

Labels

  • Anuncios Oficiales
  • Comentarios
  • Concursos
  • Consejos
  • Dominios
  • Efectos
  • Feed
  • Festividades
  • Gadgets y Widgets
  • Humor
  • Imágenes
  • Monetiza tu blog
  • Off Topic
  • Plantillas
  • Recomendados
  • Recursos Web
  • Recursos Wordpress
  • Redes Sociales
  • SEO
  • Trucos Blogger
  • Tutoriales Blogger

Blog Archive

  • ►  2014 (20)
    • ►  enero (20)
  • ▼  2013 (322)
    • ►  diciembre (34)
    • ►  noviembre (31)
    • ►  octubre (35)
    • ►  septiembre (33)
    • ►  agosto (42)
    • ►  julio (13)
    • ►  junio (17)
    • ►  mayo (26)
    • ►  abril (30)
    • ►  marzo (22)
    • ►  febrero (15)
    • ▼  enero (24)
      • Como crear un blog en blogger
      • Botones de Redes Sociales con efecto de opacidad
      • Se autor de Mil Trucos Blogger
      • Añadir la descripción del blog al título en Blogger
      • Agregar bordes a los avatares de los comentarios
      • Averigua cual será tu próximo PageRank
      • Reducir el tamaño del feed de Feedburner
      • Agregar sombras a los textos con CSS3
      • ImageBam, Excelente hosting de imagenes
      • 7 maneras de ganar dinero en internet como un prof...
      • Encuentra cientos de frases para tu Facebook
      • Crear un subdominio para Facebook en Name.com
      • Añadir el gadget de seguidores de Google+
      • Ten cuidado al momento de descargar archivos
      • Estilo de comentarios anidados de Mil Trucos Blogger
      • Crea tus Memes para Blogger con MemexD
      • Registrar Dominios con Ñ en Blogger
      • Tuars Hosting-El mejor hosting gratis
      • Green Minimalist-Plantilla Premium para Blogger
      • Escucha musica gratis en linea
      • The Lol Cam-Excelente app para Facebook
      • Personalizar el gadget de entradas populares con CSS
      • Personaliza tu Twitter
      • Gana 3000 dólares en concurso SEO
  • ►  2012 (171)
    • ►  diciembre (19)
    • ►  noviembre (20)
    • ►  octubre (13)
    • ►  septiembre (15)
    • ►  agosto (10)
    • ►  julio (10)
    • ►  junio (8)
    • ►  mayo (15)
    • ►  abril (12)
    • ►  marzo (15)
    • ►  febrero (19)
    • ►  enero (15)
  • ►  2011 (186)
    • ►  diciembre (20)
    • ►  noviembre (16)
    • ►  octubre (16)
    • ►  septiembre (16)
    • ►  agosto (18)
    • ►  julio (19)
    • ►  junio (22)
    • ►  mayo (25)
    • ►  abril (28)
    • ►  marzo (6)

Labels

  • Anuncios Oficiales
  • Comentarios
  • Concursos
  • Consejos
  • Dominios
  • Efectos
  • Feed
  • Festividades
  • Gadgets y Widgets
  • Humor
  • Imágenes
  • Monetiza tu blog
  • Off Topic
  • Plantillas
  • Recomendados
  • Recursos Web
  • Recursos Wordpress
  • Redes Sociales
  • SEO
  • Trucos Blogger
  • Tutoriales Blogger

Labels

  • Anuncios Oficiales
  • Comentarios
  • Concursos
  • Consejos
  • Dominios
  • Efectos
  • Feed
  • Festividades
  • Gadgets y Widgets
  • Humor
  • Imágenes
  • Monetiza tu blog
  • Off Topic
  • Plantillas
  • Recomendados
  • Recursos Web
  • Recursos Wordpress
  • Redes Sociales
  • SEO
  • Trucos Blogger
  • Tutoriales Blogger

© Mil Trucos Bloggers Published By Kaizen Templates powered by Blogger.com.
All Right Reserved By .