Ejemplos de uso de sombra de texto CSS. CSS: múltiples técnicas para diferentes efectos de trazo de elementos Color de línea de decoración: propiedad Text-decoration-color
La propiedad CSS text-shadow es responsable de establecer la sombra del texto. Muy similar a la propiedad box-shadow.
Sintaxis de sombra de texto CSS
sombra de texto: color X Y R;
- X: desplazamiento de la sombra con respecto al texto a lo largo del eje X (generalmente establecido en píxeles px);
- Y: desplazamiento de la sombra con respecto al texto a lo largo del eje Y (con mayor frecuencia establecido en píxeles px);
- R: radio de sombra (normalmente especificado en píxeles px);
- color - color (se puede especificar en cualquier formato, consulte los nombres de colores html)
La sintaxis de sombra de texto permite especificar varias sombras, separadas por comas. Por ejemplo
sombra de texto: X1 Y1 R1 color1, X2 Y2 R2 color2, ...;
La prioridad de la sombra (que es mayor o menor) depende de la versión de CSS específica. En CSS3, la primera sombra de la lista se coloca en la parte superior, la última de la lista se coloca en la parte inferior. En CSS2 es todo lo contrario.
Ejemplos: cómo hacer una sombra para texto en html
Ejemplo No. 1. Sombra simple para texto en html.
A continuación se muestra el ejemplo más simple con una sombra de texto. Aquí hemos aplicado ambos desplazamientos (X e Y) y también hemos creado un radio de desenfoque.
Текст с тенью
Текст с тенью
Пример №2. Фиксированная или жесткая тень у текста в html
Ниже представлены два примера. Тень в обоих случаях одинаковая (фиксированная), т.е. без размытия. Обратите внимание, какой эффект создается, если текст будет на черном фоне.
Фиксированная или жесткая теньФиксированная или жесткая тень с фоном
На странице преобразуется в следующее
Фиксированная или жесткая тень
Фиксированная или жесткая тень с фоном
Пример №3. Двойная тень у текста в html
Двойная тень
На странице преобразуется в следующее
Двойная тень
Пример №4. Вдавленные буквы у текста в html
Вдавленные буквы - вариант 1Вдавленные буквы - вариант 2
На странице преобразуется в следующее
Вдавленные буквы - вариант 1
Вдавленные буквы - вариант 2
Пример №5. Вдавленные буквы у текста в html
Небольшой 3D текст
На странице преобразуется в следующее
Небольшой 3D текст
Для обращения к margin из JavaScript нужно писать следующую конструкцию:
document.getElementById("elementID").style.margin ="VALUE "
Влад Мержевич
Одно время на текст с тенью была определённая мода и подобный эффект можно было встретить практически на любом сайте. В графическом редакторе тень добавляется просто, выглядит отлично, вот текст с тенью и пихали на веб-страницы независимо от стиля сайта и чувства меры дизайнера. Когда же большинство браузеров стало дружно поддерживать стилевое свойство text-shadow , мода уже прошла и теперь текст с тенью встречается довольно редко. Впрочем у text-shadow есть ряд других неявных способов применения, о которых мало кто подозревает. С помощью этого свойства можно делать контурный текст, «выдавливать» его, создавать свечение, размытие и многое другое.
Использование text-shadow
В качестве значений пишется четыре параметра: цвет тени, смещение по горизонтали и вертикали и радиус размытия тени (рис. 1).
Рис. 1. Параметры text-shadow
Цвет допускается писать в начале или в конце всех параметров в любом подходящем формате CSS. Так что можно сделать и полупрозрачную тень через формат rgba. Положительные значения смещения «отбрасывают» тень вправо и вниз, а отрицательные, соответственно, влево и вверх. Чтобы тень была вокруг текста, достаточно задать нулевые значения смещения. Радиус размытия устанавливает, насколько тень будет резкой. Чем больше радиус размытия, тем мягче выглядит тень.
Большим плюсом text-shadow является возможность добавлять сразу несколько разных теней, перечисляя их параметры через запятую. Эта особенность, в основном, и позволяет делать разные эффекты.
К сожалению, IE до версии 10.0 не поддерживает text-shadow , так что в этом браузере мы никаких красивостей не увидим.
Контурный текст характерен тем, что каждая буква обводится линией, цвет которой отличается от цвета текста (рис. 2). Лучше всего этот эффект смотрится с рубленым шрифтом большого размера, например, заголовков. Для основного текста применение контура лишь ухудшает читабельность.
Рис. 2. Контурный текст
Контур можно создать двумя методами. В первом методе устанавливаем нулевое смещение тени и небольшой радиус её размытия, буквально, 1-2 пиксела (пример 1). Повышение значения размытия превращает контур в свечение вокруг текста, а это уже другой эффект.
Пример 1. Контурный текст
Texto de esquema
El contorno realizado con este método se muestra en la Fig. 1. El contorno resulta ligeramente borroso, por lo que aquellos que quieran obtener una línea clara están destinados al segundo método. Consiste en utilizar cuatro sombras nítidas del mismo color, desplazadas en diferentes ángulos un píxel (ejemplo 2).
Ejemplo 2. Cuatro sombras para el contorno.
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Texto de esquema
La apariencia de dicho contorno se muestra en la Fig. 3. Se nota que el contorno es más expresivo.
Arroz. 3. Contorno con cuatro sombras
Para agregar el efecto de texto 3D que se muestra en la Fig. 4, se aplican varias sombras simultáneamente, que se desplazan entre sí un píxel horizontal y verticalmente.
Arroz. 4. texto 3D
Personalmente, este tipo de texto me recuerda a las letras de estilo retro y, nuevamente, es más adecuado para los títulos que para el cuerpo de una página web.
La cantidad de sombras depende de cuánto quieras "tirar" del texto hacia adelante. Un número mayor aumenta la "profundidad" de las letras, un número menor, por el contrario, reduce la tridimensionalidad. El ejemplo 3 usa cinco sombras del mismo color.
Ejemplo 3: Sombra para agregar tridimensionalidad
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Frigorífico de diez cámaras.
Para todas las sombras establecemos el radio de desenfoque en cero y el mismo color. Las sombras difieren sólo en sus valores de desplazamiento.
Estampado de texto
Para crear el efecto de relieve del texto o, en otras palabras, relieve, el color del texto debe coincidir con el color de fondo. Una parte de las letras que “sobresalen” de la superficie parece estar iluminada, mientras que la otra parte está en la sombra (Fig. 5).
Arroz. 5. Texto en relieve
Para agregar un efecto similar, necesitamos dos sombras: movemos la sombra blanca un píxel hacia la izquierda y la gris oscura hacia la derecha (ejemplo 4).
Ejemplo 4: texto en relieve
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Texto en relieve
El relieve se ve mejor sobre un fondo gris, por lo que el efecto no es adecuado para todos los colores del sitio. Por cierto, es fácil presionar en lugar de extruir texto; simplemente cambie los colores de las sombras;
Sombra de texto: #333 -1px -1px 0, #fff 1px 1px 0;
Brillo
El brillo alrededor del texto es la misma sombra, solo que es brillante y contrastante. Por lo tanto, para crear un efecto de brillo, simplemente cambie el color de la sombra y establezca el radio de desenfoque deseado. Dado que el brillo alrededor del texto debe ser uniforme, el desplazamiento de la sombra debe establecerse en cero. En la figura. La figura 6 muestra un ejemplo de brillo en diferentes colores.
Arroz. 6. Texto resplandeciente
Ejemplo 5. Resplandor
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Lado positivo
Lado Oscuro
Difuminar
La sombra en sí está borrosa, por lo que si dejamos solo la sombra y ocultamos el texto, obtendremos letras borrosas (Fig. 7), y el grado de desenfoque se puede ajustar fácilmente usando el parámetro texto-sombra.
Arroz. 7. Texto borroso
Para ocultar el texto original, simplemente establezca el color en transparente (ejemplo 6). El color de la sombra actúa entonces como color del texto y el radio de desenfoque establece el grado de desenfoque de las letras.
Ejemplo 6: texto desenfocado
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
texto borroso
Sombras y pseudoclases
No es necesario agregar la sombra directamente al texto; la propiedad text-shadow funciona bien con las pseudoclases :hover y :first-letter. Gracias a esto, se obtienen efectos interesantes con el texto, como la primera letra contorneada de un párrafo o el brillo de un enlace al pasar el cursor del ratón sobre él. El ejemplo 7 muestra tales técnicas.
Ejemplo 7: uso de pseudoclases
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Un proyecto de nicho frena el canal tradicional, independientemente de los costes. La estructura del mercado, descartando los detalles, estabiliza el departamento de marketing y ventas, aprovechando la experiencia de campañas anteriores.
Este tutorial presenta varias técnicas de CSS para crear diferentes efectos para el contorno de elementos.
Se puede lograr un efecto de sombra clara simple usando gris en el trazo. CSS3 tiene la capacidad de crear una sombra real usando la propiedad sombra de caja, pero la forma sencilla funcionará en todos los navegadores:
Sombra (relleno: 20px; borde: 1px sólido #f0f0f0; borde inferior: 2px sólido #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;)
El efecto de bloque abollado también es muy fácil de conseguir. Agregar esquinas redondeadas CSS3 mejora el efecto:
Presionado (color: #fff; relleno: 20px; fondo: #111; borde: 1px sólido #000; borde derecho: 1px sólido #353535; borde inferior: 1px sólido #353535; -webkit-border-radius: 5px; -radio-borde-moz: 5px; radio-borde: 5px)
Este efecto es muy similar al doble trazo, que se utiliza a menudo para imágenes. Se utilizan las configuraciones de sangría y trazo, lo que da como resultado un efecto de borde doble. El trabajo adicional con la configuración y el uso de la propiedad de contorno le permiten lograr el efecto de bordes biselados.
Img.light (contorno: 1px sólido #ddd; borde superior: 1px sólido #fff; relleno: 10px; fondo: #f0f0f0; ) img.dark (contorno: 1px sólido #111; borde superior: 1px sólido #555; relleno: 10px; fondo: #333;
Este efecto se puede utilizar en menús o listas. Es una combinación simple de los trazos superior e inferior con diferentes tonos del color de fondo. Una cosa a tener en cuenta es que los selectores CSS de primer y último hijo no son compatibles con los navegadores más antiguos. Para solucionar esta desagradable situación, puedes utilizar jQuery.
#indented ul( margen: 20px 0; relleno: 0; estilo de lista: ninguno; ) #indented ul li ( borde superior: 1px sólido #333; borde inferior: 1px sólido #111; ) #indented ul li:primero -child (borde superior: ninguno;) #indented ul li:last-child (borde-inferior: ninguno;) #indented ul li a ( padding: 10px; display: block; color: #fff; text-decoration: none ; ) #indentado ul li a:hover (fondo: #111;)
El módulo contiene funciones CSS relacionadas con el estilo del texto, como subrayado, sombras de texto y acentos de texto del este de Asia.
Propiedades de estilo de texto
1. Diseño de líneas: subrayado, trazo y tachado
Los subrayados, trazos y líneas tachadas se muestran solo para los bloques de nivel de línea no reemplazados (visualización: en línea) y se muestran en todo el texto, incluidos los espacios entre caracteres y palabras, excepto la sangría al principio y al final de una línea.
Los navegadores pueden romper el subrayado y el trazo donde la línea se cruza con el glifo, apareciendo a cierta distancia a cada lado del contorno del glifo. Cuando el navegador rompe el subrayado o el trazo en los límites del glifo, la forma de la línea en ese límite debe coincidir con la forma del glifo. Sin embargo, la especificación no prescribe un método específico para "seguir la forma" de un glifo, dejando esto en manos del navegador.
Arroz. 1. Rompiendo el subrayado 1.1. Tipo de línea de decoración: propiedad de línea de decoración de texto
Soporte del navegador
ES DECIR: —
Borde: —
Firefox: 36, 35 -moz-
Cromo: 57
Safari: 12.1, 7.1 -kit web-
Ópera: 44
iOSSafari: 8 -kit web-
Navegador UC para Android: 11.8
Cromo para Android: 73
Internet Samsung: 7.2
La propiedad text-decoration-line determina qué tipo de línea, si corresponde, se agrega al elemento.
La propiedad no se hereda.
Sintaxis
Línea de decoración de texto: ninguna; línea-decoración-texto: subrayado; línea-decoración-texto: sobrelínea; línea-decoración-texto: línea continua; línea-decoración-texto: parpadeo; línea-decoración-texto: subrayado sobrerayado; línea-de-decoración-de-texto: línea-subrayado-subrayado; línea-decoración-texto: heredar; línea-decoración-texto: inicial;
1.2. Estilo de línea de decoración: propiedad de estilo de decoración de texto
Soporte del navegador
ES DECIR: —
Borde: —
Firefox: 36, 35 -moz-
Cromo: 57
Safari: 12.1, 7.1 -kit web-
Ópera: 44
iOSSafari: 8 -kit web-
Navegador UC para Android: 11.8
Cromo para Android: 73
Internet Samsung: 7.2
La propiedad text-decoration-style especifica el estilo de las líneas dibujadas para decorar el texto especificado en el elemento. Los valores tienen el mismo significado que para la propiedad de estilo de borde.
La propiedad no se hereda.
Sintaxis
Estilo de decoración del texto: sólido; estilo-decoración-texto: doble; estilo-decoración-texto: punteado; estilo-decoración-texto: discontinuo; estilo-decoración-texto: ondulado; estilo-decoración-texto: heredar; estilo-decoración-texto: inicial;
1.3. Color de línea de decoración: propiedad text-decoration-color
Soporte del navegador
ES DECIR: —
Borde: —
Firefox: 36, 35 -moz-
Cromo: 57
Safari: 12.1, 7.1 -kit web-
Ópera: 44
iOSSafari: 8 -kit web-
Navegador UC para Android: 11.8
Cromo para Android: 73
Internet Samsung: 7.2
La propiedad text-decoration-color especifica el color de la línea de decoración del texto establecido para un elemento con text-decoration-line .
La propiedad no se hereda.
Sintaxis
Color-decoración-texto: currentColor; color-decoración-texto: salmón; color-decoración-texto: #00ff00; color-decoración-texto: rgba(255, 128, 128, 0.5); color-decoración-texto: transparente; color-decoración-texto: heredar; color-decoración-texto: inicial;
1.4. Un resumen rápido de las propiedades de la línea de decoración: la propiedad de decoración de texto
Soporte del navegador
ES DECIR: —
Borde: —
Firefox: 36, 35 -moz-
Cromo: 57
Safari: 12.1, 7.1 -kit web-
Ópera: 44
iOSSafari: 8 -kit web-
Navegador UC para Android: 11.8
Cromo para Android: 73
Internet Samsung: 7.2
La propiedad de decoración de texto es una forma abreviada de escribir las propiedades de color de decoración de texto en línea de decoración de texto en estilo de decoración de texto en una sola declaración. Los valores faltantes se establecen en sus valores iniciales. Valor predeterminado decoración de texto: ninguno sólido currentColor; . La propiedad no se hereda. Sin embargo, el estilo de todas las líneas de texto debe ser el mismo para un elemento.
1.5. Posición de la línea de diseño: propiedad text-underline-position
Soporte del navegador
ES DECIR: —
Borde: 12
Firefox: —
Cromo: 71
Safari: —
Ópera: —
iOSSafari: —
Navegador UC para Android: ?
Cromo para Android: 71
Internet Samsung: —
La propiedad text-underline-position establece la posición del subrayado especificado en el elemento.
La propiedad se hereda.
| Valores: | |
| auto | El navegador puede utilizar cualquier algoritmo para determinar la posición del subrayado; sin embargo, la línea debe colocarse sobre o debajo de la línea base del texto. Valor predeterminado. |
| bajo | El subrayado se encuentra debajo del contenido de texto del elemento. En este caso, el subrayado no suele cruzarse con la línea descendente. Este valor se puede combinar con izquierda o derecha si se prefiere un lado particular en modos tipográficos verticales. |
| izquierda | En los modos de tipografía vertical, el subrayado se alinea con el borde izquierdo del texto. Sin embargo, este valor se interpreta como bajo . |
| bien | En los modos de tipografía vertical, el subrayado se alinea con el borde derecho del texto. Sin embargo, este valor se interpreta como bajo . |
| heredar | |
| inicial | |
Sintaxis
Posición de subrayado de texto: automático; posición-subrayado-texto: debajo; posición-subrayado-texto: izquierda; posición-subrayado-texto: derecha; posición-subrayado-texto: debajo a la izquierda; posición-subrayado-texto: debajo de la derecha; posición-subrayado-texto: heredar; posición-subrayado-texto: inicial; 
Arroz. 2. Subraye el texto en ambos lados en modos de tipografía vertical usando valores izquierdo y derecho
2. Sombra de texto: propiedad de sombra de texto
Soporte del navegador
ES DECIR: 10
Borde: 12
Firefox: 3.5
Cromo: 4
Safari: 4
Ópera: 10
iOSSafari: 3.2
Navegador UC para Android: 11.8
Cromo para Android: 73
Internet Samsung: 4
La propiedad text-shadow se utiliza para agregar una sombra al texto. La sombra de texto es una herramienta interesante que te permite crear efectos sorprendentes. Las sombras pueden ser de una o varias capas, borrosas, coloreadas o translúcidas. Al especificar una sombra para un elemento, puede especificar solo una longitud y un color, creando así una copia en color de un solo carácter o palabra. Además, el uso de una sombra puede hacer que el texto sea más legible si el contraste entre el color del texto y el fondo es bajo.
Cada sombra se aplica tanto al texto como a sus elementos de diseño (propiedad de decoración del texto). Puede especificar varias sombras al mismo tiempo, especificándolas separadas por comas. Las sombras se superponen entre sí, pero no se superponen al texto en sí. La primera sombra siempre se ubica encima de las otras sombras. La propiedad se hereda.
Cada sombra está definida por dos o tres longitudes y un color opcional. Las longitudes permitidas son 0 .
La propiedad no se hereda.
Arroz. 3. Sintaxis de propiedad de sombra de texto | sombra de texto | |
|---|---|
| Valores: | |
| desplazamiento x | Establece el desplazamiento horizontal de la sombra. Un valor positivo dibuja una sombra desplazada a la derecha del texto, una longitud negativa dibuja una sombra a la izquierda. |
| desplazamiento y | Establece el desplazamiento vertical de la sombra. Un valor positivo mueve la sombra hacia abajo, un valor negativo mueve la sombra hacia arriba. |
| difuminar | Establece el radio de desenfoque. No se permiten valores negativos. Si el valor de desenfoque es cero, entonces el borde de la sombra es nítido. De lo contrario, cuanto mayor sea el valor, más borroso será el borde de la sombra. |
| color | Establece sombras. Si no hay color, el color utilizado se toma de la propiedad de color. |
| ninguno | El valor predeterminado significa que no hay sombra de texto. Elimina la sombra de un elemento de un grupo de elementos con la propiedad especificada. |
| inicial | Establece el valor de la propiedad en el valor predeterminado. |
| heredar | Hereda el valor de la propiedad del elemento padre. |
A diferencia de box-shadow, las sombras del texto no se recortan y pueden aparecer si el texto es parcialmente transparente. Al igual que box-shadow, las sombras de texto no afectan el diseño y no hacen que el área desplazable se desplace ni aumente de tamaño.
Sintaxis
Sombra de texto: 2px 2px 4px rosa; sombra de texto: #fc0 1px 0 10px; sombra de texto: 5px 5px #4D4644; sombra de texto: azul 2px 5px; sombra de texto: 5px 10px; sombra de texto: heredar; sombra de texto: inicial;
2.1. Ejemplos de sombras de texto
Sombra del cartel
Sombra de texto
Texto-sombra-1 (fondo: #77F7DE; color: blanco; texto-sombra: -2px -2px 0 #4D4644, 2px -2px 0 #4D4644, -2px 2px 0 #4D4644, 2px 2px 0 #4D4644, 4px 4px 0 blanco, 5px 5px 0 blanco, 6px 6px 0 blanco; espacio entre letras: 0,1em)
sombra 3D
Sombra de texto
Sombra de texto-2 (fondo: gradiente lineal (-45 grados, #FEE864, #F5965E); color: #f4f4f4; sombra de texto: -1px -1px blanco, 1px 1px gris, 2px 2px #7a7a7a, 3px 3px #757575 , 4px 4px #707070, 5px 5px #6b6b6b, 6px 6px #666666, 7px 7px #616161, 8px 8px #5c5c5c, 9px 9px #575757, 10px 10px #525252, 11px 11px #4d4d4d, 18px 18px 30px rgba(0, 0, 0, .4), 18 px 18 px 10 px rgba (0, 0, 0, .4)
Texto sombra
Sombra de texto
Text-shadow-3 (fondo: #FFE6DB; color: #FFE6DB; espaciado entre letras: .1em; text-shadow: 3px 0 rgba(250, 111, 142, .5), 6px 0 rgba(250, 111, 142 , .4), 9px 0 rgba(250, 111, 142, .3), 12px 0 rgba(250, 111, 142, .2), 15px 0 rgba(250, 111, 142, .1);
sombra retra
Sombra de texto
Sombra de texto-4 (color: #FB631E; espacio entre letras: .1em; sombra de texto: 4px 4px blanco, 6px 6px #D7CC88;)
sombra en capas
Sombra de texto
Sombra de texto-5 (fondo: #f1f1f1; color: #fcc105; espacio entre letras: .1em; sombra de texto: 4px 4px #ff981d, 7px 7px rgba(200, 120, 22, .2); )
La tipografía es mi juguete favorito cuando se trata de diseño web. Por supuesto, con su ayuda puedes atraer la atención de una persona con sólo cambiar ligeramente el estilo o el tamaño de la fuente. Muy simple y muy efectivo; se han escrito muchos libros sobre este tema y muchos ejemplares se han roto en disputas. Hoy no daré consejos sobre tipografía en general; no tengo suficientes calificaciones, pero siempre es bienvenido cómo formatear el texto de su sitio web. Así que hoy te mostraré algunas formas de utilizar la propiedad CSS3. sombra de texto, muy simple, pero en las manos adecuadas puede hacer maravillas.
Sintaxis básica de sombra de texto
Esta propiedad CSS3 Funciona en todos los navegadores más recientes, sin prefijos de proveedores como -moz y -webkit. Incluso a IE se le puede enseñar a comprender esta propiedad; es necesario utilizar Modernizr o análogos.
Sombra de texto: color de desenfoque con desplazamiento x y desplazamiento y;
Esa es toda la sintaxis básica. El primer valor es el desplazamiento horizontal, el segundo es el desplazamiento vertical, el desenfoque de la sombra y el color de la sombra. Veamos un ejemplo:
Sombra de texto: 2px 4px 3px rgba(0,0,0,0.3);
Movimos la sombra, la difuminamos 3 píxeles y le asignamos el color negro con una transparencia del 30%. ¿Por qué uso canal alfa o transparencia? Esto te da más libertad en tus acciones; puedes aclararlo o oscurecerlo un poco simplemente cambiando el valor de transparencia, sin tener que preocuparte por elegir un color. Resulta bastante rápido, lo recomiendo.
letras deprimidas
cuerpo (fondo: #222;) #texto h1 (color: rgba(0,0,0,0.6); sombra de texto: 2px 2px 3px rgba(255,255,255,0.1); )
El principio de funcionamiento aquí es el siguiente: el fondo es un poco más claro que las letras, una sombra clara con una ligera transparencia. El resultado está en la imagen, pruébalo.
sombra dura
sombra de texto: 6px 6px 0px rgba(0,0,0,0.2);
Hoy en día el estilo retro está de moda, y allí utilizan sombras sin desenfoque. Bueno, estamos listos para esto.
doble sombra
sombra de texto: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);
Y aquí se utiliza otra característica complicada de la propiedad. sombra de texto, los selectores se pueden enumerar separados por comas, creando así tantas sombras como sea necesario. A la primera sombra se le puede asignar un color similar al del fondo, luego el efecto será como en la imagen.
Abajo y lejos
sombra de texto: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.1 );
El texto es voluminoso y parece colgar sobre el fondo, ¿no? Aquí utilizamos 4 sombras con diferentes niveles de desenfoque y ubicación. En general, cuantas más sombras se utilicen, más realista será el efecto; ten esto en cuenta en tus proyectos.
Pequeño texto 3D
sombra de texto: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
Similar al ejemplo anterior, tres sombras, pero situadas más cerca, de ahí el efecto de tridimensionalidad y peso del texto.
Texto en 3D de Mark Dotto
sombra de texto: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0 ,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
Me encontré con el trabajo de este diseñador en línea y no podía dejarlo pasar. Impresionante realismo.
Texto sangrado de Gordon Hall
color de fondo: #666666;
-webkit-fondo-clip: texto; sombra de texto-moz-fondo-clip: texto;
clip de fondo: texto;
color: transparente;
sombra de texto: rgba(255,255,255,0.5) 0px 3px 3px;
Otro ejemplo de trabajo impresionante con la propiedad.
. Pero el principio es el mismo que dije anteriormente. Fondo ligeramente más claro, sombra clara debajo de las letras y oscura arriba. Hecho de forma sencilla, pero muy chula.
Texto brillante
sombra de texto: 0px 0px 6px rgba (255,255,255,0.7);
Aquí también todo es simple: no movemos la sombra, la difuminamos más y la hacemos blanca. Eso es todo el brillo.
estilo retro
sombra de texto: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;
Hablé arriba sobre el estilo retro, esto es de la misma ópera. Está tan de moda ahora, múltiples sombras claras. Úselo a su propia discreción
Múltiples fuentes de luz
sombra de texto: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05); Propiedad de sombra de texto CSS3 muy sencillo, como ya podéis ver. Pero su uso adecuado, y con un poco de imaginación, puede hacer maravillas.
Experimenta, que tengas un buen día.