Autor Tema: Sombras para css  (Leído 817 veces)

Desconectado Juanda

  • PHPer@
  • **
  • Mensajes: 82
  • Karma: 2
  • Programador general de sistemas opuestos.
    • Ver Perfil
Sombras para css
« en: 08 de Mayo de 2011, 07:44:29 am »
Encontré una web donde había muchos trucos de sombras en css y quise compartirlos con ustedes.

TEXTO CON SOMBRA

Creo que ya esta este pequeño código aquí, pero no esta mal recordarlo y recopilarlo.
text-shadow es una propiedad de CSS nivel 3 que le da a un texto una sombra:

En este caso la sombra sera dura y quedara de esta forma:
Imagen en desarrolo.

Propiedad:
Código: [Seleccionar]
h3 {text-shadow: 0.1em 0.1em #333}
TEXTO CON SOMBRA SUAVE
Es igual a la anterior solo varia el código un tanto.
Quedara de este forma:

Imagen en desarrolo.

Propiedad:
Código: [Seleccionar]
h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}

TEXTO BLANCO LEGIBLE
Esta propiedad aplica una sombra igual a la interior pero solo a textos blancos
Quedaria de esta forma:

Imagen en desarollo.
Propiedad:
Código: [Seleccionar]
h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}

TEXTO CON SOMBRA Y BRILLO
Esta propiedad aplica al texto un brillo delantero y una sombra detrás.
Imagen:

En desarrollo
Propiedad:
Código: [Seleccionar]
h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #333}

Esto es un poco peligroso, como podrá apreciar si su navegador no admite la propiedad "text-shadow". De hecho, en este ejemplo los colores del fondo y del texto son casi iguales (#CCCCCC y #D1D1D1), de modo que sin las sombras apenas existe algún contraste.

Las imágenes están en desarrollo ya que tengo que hacer las fuentes, sacar pantallazo y editarlas.

Como ven hay 2 códigos que no publique ya que no eran de mi agrado pero puedes encontrarlas aquí:
http://www.spanish-translator-services.com/espanol/t/007/text-shadow.html
Todo el tema fue desarrollado por mi a base de la misma web.




Programador general de sistemas opuestos.

Comunidad PHPeros

Sombras para css
« en: 08 de Mayo de 2011, 07:44:29 am »

Desconectado Mixvice

  • PHPero Experto
  • *****
  • Mensajes: 687
  • Karma: 32
  • Sexo: Masculino
  • ¡Y Tu Papá Tambien!
    • Ver Perfil
    • Tuhabbo
Re:Sombras para css
« Respuesta #1 en: 08 de Mayo de 2011, 08:08:56 am »
Tan solo unos post mas abajo y... http://www.phperos.net/foro/index.php?topic=6922.0

Además estas faltando a una de las reglas que es dar código sin explicarlo... para que sirve el atributo text-shadow?
Que estas haciendo con esto:
Código: [Seleccionar]
0.1em 0.1em 0.2em black
« Última modificación: 08 de Mayo de 2011, 08:11:11 am por Mixvice »

Desconectado Juanda

  • PHPer@
  • **
  • Mensajes: 82
  • Karma: 2
  • Programador general de sistemas opuestos.
    • Ver Perfil
Re:Sombras para css
« Respuesta #2 en: 08 de Mayo de 2011, 17:29:52 pm »
Tan solo unos post mas abajo y... http://www.phperos.net/foro/index.php?topic=6922.0

Además estas faltando a una de las reglas que es dar código sin explicarlo... para que sirve el atributo text-shadow?
Que estas haciendo con esto:
Código: [Seleccionar]
0.1em 0.1em 0.2em black

Ese post es solamente para un shadow, aquí se tratan de sombras.
Lo siento si no explique el código, mas tarde estará actualizado con la explicación.
Programador general de sistemas opuestos.