Efecto de esquema para el texto - CSS

La hoja de estilo en cascada es un lenguaje de diseño simple que hace que el proceso de creación de páginas web se pueda presentar y atractivos. Además, nos permite agregar varios estilos al texto, como color, sombra y otros elementos. Agregar un efecto de esquema es uno de ellos. Los usuarios cambian el tamaño de fuente, la decoración y el peso de la fuente aplicando más propiedades de estilo.

Esta publicación describirá:

• Cómo agregar efecto de esquema al texto usando "golpe de texto" Propiedad?
• Cómo agregar efecto de esquema al texto usando "sombra de texto" Propiedad?

Cómo agregar efecto de esquema al texto utilizando la propiedad de "accidente cerebrovascular"?

El "golpe de textoLa propiedad se puede utilizar para agregar un efecto de esquema al texto. A continuación se mencionan algunos de los tipos de propiedad de "accidente cerebrovascular de texto":

• "-WebKit-Text-Stroke"La propiedad da un golpe al texto. Se puede especificar como una propiedad de taquigrafía estableciendo el ancho y los valores de color.
• "-WebKit-Text-Stroke-Width"Determina el ancho del accidente cerebrovascular.
• "-WebKit-Text-Stroke-Color"Aplica el color a la carrera.
• "-Webkit-text-llenado-color"Agrega color al texto.

La propiedad de trazo de texto debe establecerse con el "webkit-"Prefijo. Solo es compatible con navegadores basados ​​en WebKit, como "Ópera","Safari","Cromo", y "Androide". Alternativamente, el "sombra de texto"La propiedad es compatible con casi todos los navegadores.

Para una mejor comprensión, consulte los ejemplos mencionados a continuación.

Ejemplo 1

Cree un archivo HTML siguiendo las instrucciones:

• Primero, agregue un ""Elemento y asignarlo el"contenido" clase.
• Dentro de este "", agregue el "

  "Elemento con la identificación"texto"Para especificar algún texto al documento. Este "texto"ID se aplicará con propiedades CSS para agregar un efecto de esquema:

CSS- Efecto de esquema para el texto

Ahora, diríjase a la sección CSS para aplicar efectos de esquema al texto.

Clase de estilo "Contenido" de estilo

.contenido
Ancho: 500px;
margen: auto;

El ".contenido"Se utiliza para acceder al""Elemento tiene clase"contenido". Se aplican las siguientes propiedades:

• "ancho"La propiedad establece el ancho del elemento.
• "margen"Especifica el espacio alrededor del elemento.

Elemento de estilo "P"

Ahora, acceda al "pag"Elemento de ID"texto”Y aplique las siguientes propiedades:

#texto
color blanco;
-WebKit-Text-Stroke: 1px White;
Shadow de texto: 0px 1px 4px #46256d;
tamaño de fuente: 45px;

Aquí:

• "color"Especifica el color de fuente del elemento.
• "tamaño de fuente"La propiedad establece el tamaño de fuente del elemento.
• "-WebKit-Text-StrokeLa propiedad se utiliza para aplicar el efecto de esquema al texto.

Producción

Ejemplo 2

#texto
color blanco;
tamaño de fuente: 42px;
-WebKit-Text-Stroke-Width: 1px;
-WebKit-Text-Stroke-Color: Purple;

En el segundo ejemplo, hemos establecido el ancho y el color de esquema de texto especificando el "-WebKit-Text-Stroke-Width" y "-WebKit-Text-Stroke-Color" propiedades.

Producción

Ejemplo 3

#texto
Font-Family: cursiva;
color blanco;
tamaño de fuente: 35px;
-WebKit-Text-Stroke-Width: 2px;
-WebKit-Text-Stroke-Color: Black;

En este ejemplo, el "Familia tipográfica"La propiedad especifica el estilo del texto del elemento.

Producción

Cómo agregar efecto de esquema al texto utilizando la propiedad de "Shadow de texto"?

El CSS "sombra de textoLa propiedad se utiliza para agregar un efecto de sombra al texto y es compatible con todos los navegadores.

Aquí está la representación gráfica de agregar múltiples sombras al texto:

Ejemplo 1

#texto
color blanco;
tamaño de fuente: 40px;
Shadow de texto: -1px 1px 2px #253f11, 1px 1px 2px #253f11, 1px -1px 0 #253f11,
-1px -1px 0 #253f11;

La descripción de las propiedades agregadas se ilustra arriba.

Producción

Ejemplo 2

#texto
color blanco;
tamaño de fuente: 48px;
-WebKit-Text-Stroke: 1px #f0ecec;
Shadow de texto: 0px 1px 5px rgb (0, 0, 175);

En el código indicado anteriormente, hemos aplicado ambos "sombra de texto" y "-WebKit-Text-Stroke"Propiedades CSS.

Producción

Hemos proporcionado diferentes ejemplos para aplicar el efecto de esquema al texto.

Conclusión

Para agregar un efecto de esquema al texto, el CSS "golpe de textoSe puede utilizar la propiedad. Esta propiedad incluye "ancho de trazo de texto","color de huella de texto", y "color de texto de texto". Otra propiedad para agregar efectos de esquema al texto en el CSS es "sombra de texto". Este blog ha explicado cómo agregar un efecto de esquema al texto con múltiples ejemplos.