Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
Sin Resultado
Ver Todos los Resultados
Home CSS

CSS: Textos con sombra, contornos, …

20 febrero, 2011
en CSS
0
Reglas CSS por defecto para los navegadores
Share on FacebookShare on Twitter

Vamos a ver unos cuando efectos que conseguiremos con las CSS en los textos. Con estos efectos podremos evitar utilizar imágenes para conseguir pequeñas sombras o contornos

  • Texto con sombra
  • Texto con sombra borrosa
  • Texto blanco legible
  • Varias sombras
  • Contornos
  • Brillo de neón

Resumen del Contenido

  • Texto con sombra
  • Texto con sombra borrosa
  • Texto blanco legible
  • Varias sombras
  • Trazar letras como contornos
  • Brillo de neón

Texto con sombra

El CSS nivel 3 tiene una propiedad llamada «text-shadow» que permite añadir una sombra a cada letra de un texto. En su forma más simple, es más o menos así:

h3 {text-shadow: 0.1em 0.1em #333}

Esto añade una sombra gris oscuro (#333) un poco a la derecha (0.1em) y abajo (0.1em) en relación con el texto normal. El resultado se ve así.

Ver ejemplo

Otro ejemplo puede ser el siguiente:

h1.test {text-shadow: #6374AB 20px -12px 2px;}

El color: Le hemos dado un color a la sombra: “#6374AB”.
La coordenada x de la sombra relativa al texto: 20 píxeles. La coordenada y de la sombra relativa al texto: -12 píxeles.
Lo disperso que se encuentra la sombra (2px). Si aumentamos mucho este valor, la sombra será ilegible.

Texto con sombra borrosa

La forma más sencilla de la propiedad «text-shadow» tiene dos partes: un color (como #333 en el ejemplo anterior) y un desplazamiento (0.1em 0.1em en el ejemplo anterior). El resultado es una sombra nítida con el desplazamiento indicado. Pero también puede hacerse que el desplazamiento sea impreciso, lo que da por resultado una sombra más o menos borrosa.

La cantidad de imprecisión se da como otro desplazamiento. Aquí se muestran dos líneas, una con un poco de imprecisión (0.05em) y la otra con mucha imprecisión (0.2em):

h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}

Ver ejemplo

Texto blanco legible

El uso de sombras puede hacer más legible el texto cuanto hay poco contraste entre el primer plano y el fondo. Lo que sigue es un ejemplo de texto blanco contra fondo azul pálido, primero sin sombra y luego con ella:

h3 {color: white}
h3.a {
color: white;
text-shadow: black 0.1em 0.1em 0.2em}

Ver ejemplo

Varias sombras

También es posible poner más de una sombra. En general, el resultado es un tanto extraño:

h3 {text-shadow: 0.2em 0.5em 0.1em #600,
-0.3em 0.1em 0.1em #060,
0.4em -0.3em 0.1em #006}

Ver ejemplo

Pero colocando acertadamente dos sombras, una oscura y la otra clara, el efecto puede ser útil:

h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #333}

Ver ejemplo

Esto es un poco peligroso, como podrá apreciar si tu 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.

Trazar letras como contornos

El ejemplo con dos sombras de la versión previa se puede llevar todavía más allá. Con cuatro sombras, es posible dar a las letras un contorno:

h3 {text-shadow: -1px 0 black, 0 1px black,
1px 0 black, 0 -1px black}

Ver ejemplo

No es un contorno perfecto, prueba en varios navegadores para ver el resultado

Brillo de neón

Si se pone una sombra borrosa justo detrás del texto, es decir, con desplazamiento igual a cero, el efecto es un resplandor alrededor de las letras. Si el resplador de una sola sombra no es suficientemente intenso, basta repetir la misma sombra unas pocas veces:

h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
0 0 0.2em #87F}

Ver ejemplo

Etiquetas: cssCSS3text-shadow
ANUNCIO
Post anterior

CSS: Efecto cebrado en tablas y listas

Próximo Post

Errores mas comunes al utilizar CSS

Otros Posts

Reglas CSS por defecto para los navegadores

Selectores y propiedades más usadas en CSS3

10 febrero, 2016
1

Los selectores son lo que definen sobre qué elementos se aplican las reglas. Pueden ser una combinación de: Nombre de etiquetas HTML Nombres de clases, precedidos por carácter “.” Identificador de elemento, precedido por carácter...

Novedades con Bootstrap 3

Novedades con Bootstrap 3

28 octubre, 2013
0

Com ya sabemos, Bootstrap es una herramienta con un montón de funciones de HTML y CSS que te permitirán usar muchas de sus novedades, ya que te dará tipografía estilizada, botones, formularios, tablas, navegación, y...

Recomendados

Tutorial crear efecto metálico en un botón

Máscara de enfoque

11 marzo, 2011
Como acceder a la administración de WordPress

WordPress 3.7 final ya disponible

25 octubre, 2013
Tutorial crear efecto metálico en un botón

Heramienta de Texto en Photoshop

29 enero, 2011
Tutorial crear efecto metálico en un botón

Trabajando con capas en Photoshop

18 enero, 2011

Tutotial Monsters

Somos un equipo creativo apasionado por brindar los mejores recursos gratuitos y premium a la comunidad de diseño.
PADAWAN

  • Home
  • Política de privacidad
  • Política de Cookies
  • Aviso Legal
  • Contactar

© 2020 Tutorial Monsters - Estamos para Colaborar SEOConsultora.

Sin Resultado
Ver Todos los Resultados
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Este sitio web utiliza cookies. Al continuar utilizando este sitio web, usted da su consentimiento para que se utilicen cookies. Visite nuestra Política de privacidad y cookies .