Published
Edited
Feb 25, 2022
20 stars
html`
<style>
/* https://max.hn/thoughts/how-to-create-a-highlighter-marker-effect-in-css */
p.maxh mark {
margin: 0 -0.2em;
padding: 0.1em 0.2em;
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;
}
p.mattp {
font-size: 20px;
line-height: 40px;
}
p.mattp mark {
margin: 0;
padding: 0.6em;
border-radius: 7.5px;
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%
);
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);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
</style>
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
