crisb
Quiero crear un efecto de resaltado que se asemeje a un resaltado hecho con un bolígrafo. es decir, tiene partes superiores e inferiores onduladas y un comienzo y un final ásperos, como en esta imagen.
¿Cuál es la mejor manera de hacer esto en CSS? ¿Hay alguna manera de hacerlo sin usar imágenes de fondo? También para que funcione bien con line wraps.
Idealmente, la solución tomaría HTML como el que se muestra a continuación y haría que se viera como la imagen.
<p>
<span class="green-highlight">So write with a combination of short, medium, and long sentences. Create a sound that pleases the reader's ear. </span>
<span class="pink-highlight">Don't just write words. </span>
<span class="yellow-highlight">Write music. </span
</p>
mate pi
¡para un marcador de lápiz hiperrealista! Juega con los degradados de fondo para la intensidad y con text-shadow para darle un efecto lavado.
span {
padding: 0.6em 13.7px;
line-height: 1.8em;
font-size: 23px;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;
}
span.highlight {
font-weight: bolder;
background: linear-gradient(104deg, rgba(130, 255, 173,0) 0.9%, rgba(130, 255, 173,1.25) 2.4%, rgba(130, 255, 173,0.5) 5.8%, rgba(130, 255, 173,0.1) 93%, rgba(130, 255, 173,0.7) 96%, rgba(130, 255, 1732,0) 98%), linear-gradient(183deg, rgba(130, 255, 173,0) 0%, rgba(130, 255, 173,0.3) 7.9%, rgba(130, 255, 173,0) 15%);
padding: 0.6em 13.7px;
-webkit-box-decoration-break: clone;
margin: 0;
border-radius: 7.5px;
text-shadow: -12px 12px 9.8px rgba(130, 255, 173,0.7), 21px -18.1px 7.3px rgba(255, 255, 255,1), -18.1px -27.3px 30px rgba(255, 255, 255,1);
}<span class="highlight">Lorem Ipsum is simply dummy text of the printing and</span> <span>typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled <span class="highlight">it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was<span>-
oye lo siento; ¿Tienes alguna idea de cómo implementar este efecto en un fondo oscuro? He intentado alterar los valores pero nada parece funcionar bien.
– Kibe
4 de agosto de 2020 a las 3:43
-
Bueno, no me sorprende que sea más difícil encontrar la configuración adecuada para los fondos oscuros. Un marcador de lápiz también tendrá problemas en la vida real;)
– Matt Pi
28 de agosto de 2020 a las 13:25
-
¡Este es el estilo CSS que ni siquiera sabía que necesitaba!
– musefan
9 de septiembre de 2020 a las 13:44
-
@MattPi me siento estúpido por haberte preguntado eso; No sé qué me pasaba en ese momento.
– Kibe
28 de diciembre de 2020 a las 5:43
-
No creo que haya visto un realismo como este en CSS antes. ¡Guau!
– Sean Whelan
5 de noviembre de 2021 a las 18:08
Max Hoffman
Estaba buscando el mejor efecto posible con CSS puro y encontré el que usa Basecamp bastante atractivo. Sin embargo, todavía había margen de mejora.
Aquí está mi versión mejorada:
Y aquí está el código:
mark {
margin: 0 -0.4em;
padding: 0.1em 0.4em;
border-radius: 0.8em 0.3em;
background: transparent;
background-image: linear-gradient(
to right,
rgba(255, 225, 0, 0.1),
rgba(255, 225, 0, 0.7) 4%,
rgba(255, 225, 0, 0.3)
);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}Inside this text some words <mark>are highlighted</mark> and some aren’t.Si está interesado en cómo funciona esto:
escribí un tutorial sobre cómo se consigue el efecto de resaltado del rotulador.
Juan Slegers
Usando solo CSS, lo más cerca que puede llegar a su captura de pantalla es algo como esto:
.green-highlight, .pink-highlight, .yellow-highlight {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding-left: 3px;
}
.green-highlight {
background: #99FFCC; /* Default color, all browsers */
}
.green-highlight::selection {
background: #99CCCC; /* Selection color, WebKit/Blink Browsers */
}
.green-highlight::-moz-selection {
background: #99CCCC; /* Selection color, Gecko Browsers */
}
.pink-highlight {
background: #FFCCFF; /* Default color, all browsers */
}
.pink-highlight::selection {
background: #FF99FF; /* Selection color, WebKit/Blink Browsers */
}
.pink-highlight::-moz-selection {
background: #FF99FF; /* Selection color, Gecko Browsers */
}
.yellow-highlight {
background: #FFFFCC; /* Default color, all browsers */
}
.yellow-highlight::selection {
background: #FFFF66; /* Selection color, WebKit/Blink Browsers */
}
.yellow-highlight::-moz-selection {
background: #FFFF66; /* Selection color, Gecko Browsers */
}<p>
<span class="green-highlight">
So write with a combination of short, medium,
and long sentences. Create a sound that pleases
the reader's ear.
</span>
<span class="pink-highlight">
Don't just write words.
</span>
<span class="yellow-highlight">
Write music.
</span>
</p>Si eso no está lo suficientemente cerca, me temo que tienes que usar imágenes.
-
Honestamente, ¡tu resultado es notable con un CSS tan simple!
– S. Van den Wyngaert
8 de junio de 2019 a las 14:42
Paulie_D
No usar un color de fondo… no.
Los fondos se extienden hasta los bordes del elemento que siempre son rectangulares (salvo border-radius)
En este caso, una imagen de fondo sería probablemente la opción óptima…PERO:
Puede lograr un efecto similar usando múltiples text-shadows.
Un breve ejemplo.
.green-highlight {
text-shadow:
3px 0px 3px green,
-3px 0px 3px green,
6px 0px 6px green,
-6px 0px 6px green;
}
.red-highlight {
text-shadow:
3px 0px 3px red,
-3px 0px 3px red,
6px 0px 6px red,
-6px 0px 6px red;
}
.yellow-highlight {
text-shadow:
-3px 0px 3px yellow,
3px 0px 3px yellow,
6px 0px 6px yellow,
-6px 0px 6px yellow;
}<p>
<span class="green-highlight">So write with a combination of short, medium, and long sentences. Create a sound that pleases the reader's ear. </span>
<span class="red-highlight">Don't just write words. </span>
<span class="yellow-highlight">Write music. </span
</p>Es solo cuestión de usar tantas sombras como necesites para obtener el efecto completo que necesitas,
Esta respuesta está más cerca de la pregunta original:
.book-in-quest {
font-size: 34px;
letter-spacing: -2.5px;
font-family: arial;
line-height: 1.05;
display: flex;
flex-wrap: wrap;
color: #523D13;
}
.page {
width:428px;
height: 453px;
margin: 20px;
overflow: hidden;
// margin-bottom: 50px;
border-bottom: #846C3C dotted 1px;
}
blockquote, p {
padding-bottom: 10px;
}
blockquote {
font-size: 28px;
margin-top:0;
margin-bottom:0;
margin-inline-start: 30px;
}
p {
margin: 0;
}
.highlight {
font-size: 23px;
background-color:#FFFF66;
line-height: 23px;
border-radius: 100px;
}
.text {
font-size: 34px;
font-weight: 700;
}
<div class="book-in-quest">
<div class="page">
<p>
Roberta is <span class="highlight"><span class="text">creating</span></span> a statue in honor of <span class="highlight"><span class="text">T. Schmidt O. Ren and E. Dash</span></span>, but the photo is <span class="highlight"><span class="text">too old</span></span>. She'll need a better picture from Gary to finish the job! an unusual</span></span>
</div>
</div>Crédito a: https://codepen.io/laurenvast/pen/JmOaNd
Chris Kempen
Si no está limitado a las etiquetas disponibles sub-HTML5, también puede usar el <mark>...</mark> etiqueta introducida en HTML5:
<!DOCTYPE HTML>
<html>
<head>
<style>
mark {
background-color: #069aaa;
color: #fff;
padding: 5px; /* optional... */
}
</style>
</head>
<body>
<p>
This is some <mark>text that's been</mark> highlighted.
</p>
</body>
</html>