Text #1

Give your rating
5
2 votes
    • 12+
    • 36+
    • 16+
    • 23+
    • 9+
    • 36+
    • 16+
    • 24+
    • 9+
    • 3+
    • 37+
Demo
  • 1.31 KB
  • CSS, HTML
  • Text
  • highlight
  • MIT License
HTML
<p>Circle sketch <span class="highlight-text-1">Highlight Text</span> Effect</p>
CSS
p {
    color: white;
    font-size: 2rem;
}
.highlight-text-1 {
    position: relative;
    z-index: 1;
}

.highlight-text-1:before {
    content: "";
    z-index: -1;
    left: -0.5em;
    top: -0.1em;
    border-width: 2px;
    border-style: solid;
    border-color: red;
    position: absolute;
    border-right-color: transparent;
    width: 100%;
    height: 1em;
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    transform: rotate(2deg);
    opacity: 0.7;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    padding: 0.1em 0.25em;
}

.highlight-text-1:after {
    content: "";
    z-index: -1;
    left: -0.5em;
    top: 0.1em;
    padding: 0.1em 0.25em;
    border-width: 2px;
    border-style: solid;
    border-color: red;
    border-left-color: transparent;
    border-top-color: transparent;
    position: absolute;
    width: 100%;
    height: 1em;
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
    -o-transform: rotate(-1deg);
    transform: rotate(-1deg);
    opacity: 0.7;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

Alright, let’s dive into this piece of code that’s all about adding a cool effect to text, making it pop with a sketchy, circled highlight! Imagine you’re jazzing up a webpage, and you want certain bits of text to really stand out with a hand-drawn feel. This code snippet is your magic wand for that.

First off, we have a paragraph <p> element, and within it, some text that’s going to get this artsy treatment. The magic happens thanks to CSS, that stylish wizard behind the curtain of web design. CSS lets you dress up your HTML content, and here it’s used to create a highlight effect that looks like it’s been sketched around the text with a marker.

The code sets the stage with basic styling for the paragraph – think of it as setting the base color and font size, making sure the text is visible against whatever background you’ve got. White text that’s big enough to catch the eye, that’s our starting point.

Then, the real fun begins with the .highlight-text-1 class. This is where the sketch effect is born. By using :before and :after pseudo-elements, the code draws two semi-transparent, red, circular lines around the text. These aren’t just any circles – they’re tilted slightly (one at 2 degrees, the other at -1 degree), giving that imperfect, sketched-by-hand look. The circles are made by setting a high border-radius and playing with border colors to make parts of the circle transparent, creating an illusion of a sketch.

In a nutshell, this code snippet transforms plain text into a visual statement, perfect for highlighting key phrases or adding a creative touch to headers. It’s a neat trick for web designers looking to add that extra flair to their pages, making important text not only readable but memorable.

Menu