CSS Highlight Text

css-highlight-text.markdown

CSS Highlight Text

Support files and demo for the CSS highlight text article on CodingDude: CSS Highlight Text

In this short tutorial I will show you several cool ways in which you can use CSS to highlight text. Just like on paper, you highlight text in a HTML page to draw attention to important sections, paragraphs or group or words. On paper you might use a marker, highlighter or even a colored pen or pencil, but how do you highlight text in HTML using CSS?

A Pen by Ion Emil Negoita on CodePen.

License.

index.html

<h1>Here's how to <span class="simple-highlight">Highlight Text</span> with CSS</h1>

<p>Lorem ipsum, dolor sit amet <span class="ribbon-highlight">consectetur</span> adipisicing elit. <span class="circle-sketch-highlight">Consectetur</span> amet tempora a explicabo, laborum <span class="realistic-marker-highlight">facere ipsam</span>? Voluptas ad <span class="arrow-highlight">perferendis cumque</span> in ipsum nobis magni! <span class="border-highlight">Corporis</span> nesciunt quos <span class="sketch-highlight">similique ratione</span> aliquid.</p>

<ul>
  <li><span class="simple-highlight">.simple-highlight</span> or just use <mark>&lt;mark&gt;</mark> </li>
  <li><span class="ribbon-highlight">.ribbon-highlight</span></li>
  <li><span class="arrow-highlight">.arrow-highlight</span></li>
  <li><span class="sketch-highlight">.sketch-highlight</span></li>
  <li><span class="realistic-marker-highlight">.realistic-marker-highlight</span></li>
  <li><span class="border-highlight">.border-highlight</span></li>
  <li><span class="circle-sketch-highlight">.circle-sketch-highlight</span></li>
      
  </ul>


<footer style="font-size:0.5em;">
  <h2>Check out full article on coding-dude.com: <a href="http://www.coding-dude.com/wp/css/highlight-text-css/">Highlight Text CSS</a></h2>
  <h2>Inspired by <a href="https://www.photoshopsupply.com/actions/highlight-text-in-photoshop">Photoshop Highlight Text</a> by 
  <a href="https://www.photoshopsupply.com"
     >PhotoshopSupply.com</a></h2></footer>


<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters" style="display:none;">
  <defs>
    <filter id="marker-shape">
      <feTurbulence type="fractalNoise" baseFrequency="0 0.15" numOctaves="1" result="warp" />
      <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warp" />
    </filter>
  </defs>
</svg>

style.css

:root{
  font-family:sans-serif;
  font-size:20px;
  margin:0 20vw;
}
li{
  padding:0.25em;
}
.simple-highlight{
  background-color:yellow;
  padding:0.1em 0.2em;
}

.ribbon-highlight{
  position:relative;
  margin:0.1em;
}
.ribbon-highlight:before{
  content:"";
  z-index:-1;
  left:-0.5em;
  top:0.1em;
  border-width:0.5em;
  border-style:solid;
  border-color:lightgreen;
  position:absolute;
  width:100%;
  border-left-color:transparent;
  border-right-color:transparent;
}

.arrow-highlight{
  position:relative;
  margin:0 0.5em;
  padding:0 0.2em;
}
.arrow-highlight:before{
  content:"";
  z-index:-1;
  left:-0.5em;
  top:0.1em;
  border-width:0.5em;
  border-style:solid;
  border-color:orange;
  position:absolute;
  width:calc(100% - 0.5em);
  border-left-color:transparent;
}

.arrow-highlight:after{
  content:"";
  z-index:-1;
  right:0;
  top:0.1em;
  border-width:0.5em;
  border-style:solid;
  border-color:orange;
  position:absolute;
  border-top-color:transparent;
  border-bottom-color:transparent;
  border-left-color:transparent;
  transform:rotate(180deg);
  transform-origin:center right;
}

.border-highlight{
  border:2px dashed red;  
  padding:0.03em 0.25em;
}

.sketch-highlight{
  position:relative;
}

.sketch-highlight:before{
  content:"";
  z-index:-1;
  left:0em;
  top:0em;
  border-width:2px;
  border-style:solid;
  border-color:darkblue;
  position:absolute;
  border-right-color:transparent;
  width:100%;
  height:1em;
  transform:rotate(2deg);
  opacity:0.5;
  border-radius:0.25em;
}

.sketch-highlight:after{
  content:"";
  z-index:-1;
  left:0em;
  top:0em;
  border-width:2px;
  border-style:solid;
  border-color:darkblue;
  border-left-color:transparent;
  border-top-color:transparent;
  position:absolute;
  width:100%;
  height:1em;
  transform:rotate(-1deg);
  opacity:0.5;
  border-radius:0.25em;
}


.circle-sketch-highlight{
  position:relative;
}

.circle-sketch-highlight: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;
  transform:rotate(2deg);
  opacity:0.7;
  border-radius:50%;
  padding:0.1em 0.25em;
}

.circle-sketch-highlight: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;
  transform:rotate(-1deg);
  opacity:0.7;
  border-radius:50%;
}



.realistic-marker-highlight{
  position:relative;
}

.realistic-marker-highlight:before{
  content:"";
  background-color:#ff6db7;
  width:100%;
  height:1em;
  position:absolute;
  z-index:-1;
  filter:url(#marker-shape);
  left:-0.25em;
  top:0.1em;
  padding:0 0.25em;
}