En este artículo aprenderemos sobre Texto resaltado CSS Efectos y crea una estética genial para resaltar ciertas palabras y oraciones.
Resaltar texto (CSS) se usa para enlaces, para hacerlos más visibles, para palabras importantes para llamar la atención sobre ellas y para otros usos como el texto más copiado o twitteado, una manera fácil de mostrar qué texto es el más popular.
En la vida real, usaría una variedad de rotuladores resaltadores, pero en el desarrollo web, usaremos HTML y CSS.
¿Cómo resalto el texto en CSS?
Para resaltar texto en HTML, debe usar un elemento en línea como el elemento y aplicarle un estilo de fondo específico. Esto creará el efecto de resaltado, que puede modificar de muchas maneras diferentes para crear diferentes looks.
La mayoría de los ejemplos de este artículo siguen la siguiente estructura:
<p>
Normal Text vs <span class=”highlight”>highlighted text.</span>
</p>
.highlight{
display: inline-block;
padding: .25em 0;
background: #FFC107;
color: #ffffff;
}12 impresionantes efectos de texto resaltados con CSS
Sumerjámonos y veamos algunos ejemplos del mundo real de geniales efectos de texto resaltados en CSS. ¡Puede usar estos ejemplos para su sitio web, aprender de ellos o inspirarse!
1. Resaltado de texto con color amarillo
Un hermoso ejemplo de cómo resaltar texto con un poco de estilo.
Tenga en cuenta que el resaltado no es perfectamente rectangular y usa algunos bordes redondeados junto con una pequeña rotación para darle una apariencia más natural.
Encuentro este efecto especialmente útil para los encabezados. A veces, según el color de resaltado, es posible que deseemos cambiar también el color del texto resaltado a algo que pueda crear más contraste con el fondo.
Recuerde que el objetivo de resaltar algo es hacerlo más fácil de leer.
2. Efecto de texto resaltado CSS inclinado
Este genial efecto de texto resaltado de CSS inclinado es genial y se ve atractivo.
Simplemente usa el elemento HTML para resaltar texto en negrita con este efecto genial.
Muy simple de usar y viene con un buen ejemplo de código para aprender.
3. Bloquear texto resaltado (CSS)
Mediante el uso de un elemento span HTML, puede crear este encantador efecto de texto resaltado CSS bloqueado.
Solo necesita aplicar la clase CSS a su elemento span y luego se aplica el efecto.
Muy fácil de usar y crea una apariencia audaz, cambie fácilmente los colores para que coincidan con su estilo en el CSS.
4. Resaltar texto con animación al cargar la página
En este ejemplo, podemos ver un enfoque totalmente diferente al efecto de resaltado.
El resaltado no estará presente en la carga de la página, sino que se animará al cargar la página creando un hermoso efecto que seguramente captará la atención de su visitante.
Si está buscando una animación en la carga de la página, este ejemplo es para usted.
5. Resaltado de texto CSS animado al pasar el mouse
Los efectos de texto de resaltado de CSS estático son geniales, pero usar una animación simple puede crear más participación.
Este efecto de desplazamiento es fantástico y hace que las palabras sean más interactivas, lo cual es muy importante.
Incluso puede adaptar esto para que funcione con un botón que aparece en una palabra junto con este efecto.
6. Resaltar texto con animación de lápiz circular
Un genial efecto de texto resaltado con CSS que hace que parezca que has marcado una palabra con un bolígrafo.
Este CSS CodePen le muestra cómo puede apuntar fácilmente a una sola palabra dentro de una oración, dentro de una etiqueta HTML P.
El CSS utilizado aquí también es lo suficientemente simple, puede cambiar fácilmente los colores y el tamaño del círculo.
7. Resaltado de texto de croquis CSS
Este ejemplo por Emil de iones nos muestra que el resaltado se puede hacer de muchas maneras diferentes.
En este caso, en lugar de utilizar un efecto de resaltado amarillo más tradicional, utiliza un efecto de resaltado de aspecto incompleto que parece como si se hubiera hecho con un bolígrafo sobre una hoja de papel.
8. Efecto de resaltado de marcador realista
Hecho por jeffreyeste es otro efecto de desplazamiento genial combinado con un efecto de marcador realista.
Utiliza un SVG para lograr un aspecto realista, pero es lo suficientemente simple como para usarlo en una página web, se escalará a cualquier tamaño de texto.
CSS puro también, por lo que es muy ligero.
9. Resaltar texto con transición subrayada
Cuando hablamos de resaltar texto, generalmente pensamos en agregar algo encima del texto. Sin embargo, otra forma de enfatizar algo también puede ser subrayándolo.
Entonces, por qué no, aquí hay un tipo diferente de efecto de resaltado si no le importa usar un subrayado en su lugar.
10 Efecto de marcador realista
Si está buscando un efecto de marcador súper realista, este es para usted.
Se ve realmente genial y realista como si realmente hubieras usado un rotulador.
Se usa un SVG para lograr esto y crear los bordes especiales en el texto resaltado, pero sigue siendo lo suficientemente simple de usar y no complicado.
11 Resaltar texto con degradados de color
Si le gustan los degradados, ¿por qué no usar también el color degradado para el texto resaltado?
Este ejemplo hace uso de la función de degradado lineal dentro de la imagen de fondo para generar el efecto de resaltado degradado. ¡Siéntete libre de jugar con él y personalizar los degradados!
12 Resaltado superpuesto multicolor
Un poco más complicado, pero el resultado es muy interesante y podría ser justo lo que estás buscando.
Requiere el uso de todo HTML, CSS y JS para lograr este efecto.
Sin embargo, puede cambiar fácilmente los colores con los valores RGB en el código JS.
13 Texto resaltado degradado (CSS)
Una forma elegante de resaltar texto HTML con un degradado genial.
Puede elegir cualquier gradiente que desee y crear una apariencia elegante para su texto.
El CSS es simple, pero el resultado es fantástico.
14 Gran efecto de marcador realista
Resaltar texto puede ser una manera fantástica de resaltar ciertas cosas, en este caso, el precio es el ejemplo aquí.
Si tiene una página importante como precios, resaltar el texto puede ser una manera segura de comenzar a llamar la atención sobre un área específica.
Este ejemplo usa un SVG simple para obtener una apariencia realista, pero el CSS sigue siendo relativamente simple.
15. Efecto de texto resaltado CSS de borde
Un efecto de texto resaltado CSS muy simple.
Básicamente, solo un borde alrededor del texto, usando un elemento de intervalo para seleccionar ciertas partes del texto.
También puede cambiar fácilmente el color y el relleno alrededor del texto resaltado de CSS.
dieciséis. Flecha CSS Resaltar efecto de texto
Otro efecto de texto resaltado CSS genial con un estilo diferente.
Muestra cómo puede resaltar palabras específicas dentro de una oración.
Se usa CSS simple y solo un elemento span con una clase CSS para usarlo en una página web.
17 Efecto de texto resaltado CSS de cinta
Hay muchas formas de resaltar texto usando CSS, aquí tenemos un efecto de cinta verde que resalta algunas palabras.
Al usar una forma diferente, puede ayudar a que su texto se destaque más.
El CSS también es simple, fácil de cambiar el color o el efecto si es necesario.
18 Efecto de texto resaltado CSS adicional (jQuery)
Hemos visto algunos efectos de texto resaltados CSS sorprendentes y todos ofrecen algo diferente. Pueden ayudar a que ciertas partes de su texto se destaquen y llamen la atención sobre algo.
Esta bonificación se agregó porque le muestra cómo puede usar jQuery para usar mediante programación estos efectos de texto para resaltar texto, ¡compruébelo!
Artículos relacionados
Sobre el Autor:
lucas embrey es un desarrollador full-stack, BSc en Ciencias de la Computación y con sede en el Reino Unido.
Puedes saber más sobre él en https://lukeembrey.com/
