Skip to content

Instantly share code, notes, and snippets.

@maxxcrawford

maxxcrawford/CSS3 - Highlighter.html

Created January 26, 2016 20:44
Show Gist options
  • Save maxxcrawford/3c1120c82a40808469e8 to your computer and use it in GitHub Desktop.
Save maxxcrawford/3c1120c82a40808469e8 to your computer and use it in GitHub Desktop.
Download ZIP
Highlighter Effect
Raw
CSS3 - Highlighter.html
<!DOCTYPE html><html class=''>
<head><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/jeffballweg/pen/XJKwvp" />
<style class="cp-pen-styles">html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizelegibility;
font-family: 'Palatino', 'Didot', 'Garamond', serif;
}
body {
margin: 2rem;
font-size: 1.8em;
color: rgba(0, 0, 0, 0.8);
background: #faf8ed url('http://raw.githubusercontent.com/subtlepatterns/SubtlePatterns/gh-pages/bedge_grunge.png');
}
/* yellow */
/* green */
p {
line-height: 1.6em;
}
a,
em {
padding: 0.3em 0em 0.2em 0em;
margin: 0.3em -0.5em 0.3em -0.5em;
border-radius: 50% 3em 50% 3em;
color: rgba(0, 0, 0, 0.7);
-webkit-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
}
a {
background: -webkit-linear-gradient(rgba(227, 221, 36, 0.15), rgba(227, 221, 36, 0.6), rgba(196, 191, 22, 0.6), rgba(227, 221, 36, 0.24));
background: linear-gradient(rgba(227, 221, 36, 0.15), rgba(227, 221, 36, 0.6), rgba(196, 191, 22, 0.6), rgba(227, 221, 36, 0.24));
border-right: solid 0.5em rgba(196, 191, 22, 0.15);
border-left: solid 0.5em rgba(227, 221, 36, 0.3);
text-decoration: none;
}
a:hover,
a:active {
color: rgba(0, 0, 0, 0.9);
}
em {
background: -webkit-linear-gradient(rgba(167, 255, 135, 0.2), rgba(68, 219, 13, 0.55), rgba(41, 150, 10, 0.4), rgba(167, 255, 135, 0.2));
background: linear-gradient(rgba(167, 255, 135, 0.2), rgba(68, 219, 13, 0.55), rgba(41, 150, 10, 0.4), rgba(167, 255, 135, 0.2));
border-right: solid 0.5em rgba(41, 150, 10, 0.07);
border-left: solid 0.5em rgba(68, 219, 13, 0.2);
font-style: normal;
}
</style></head><body>
<h1>Lorem ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="">Nam pharetra magna sapien</a>, nec dapibus neque consequat ac. Pellentesque vitae ligula id elit rhoncus vestibulum facilisis in felis. Ut eget lorem non ante tincidunt facilisis eu fringilla tellus. Morbi neque purus, <a href="">porttitor at magna nec</a>, blandit scelerisque massa. Pellentesque malesuada a sem in sollicitudin. Aliquam placerat lacinia augue in egestas. In in venenatis purus, sit amet pretium ex. In hac habi<a href="">tasse</a> platea dictumst. Maecenas dapibus lorem ut tincidunt scelerisque. Fusce aliquam pretium pharetra. Nullam semper congue lobortis. Morbi fringilla ullamcorper velit, et molestie sem euismod ac. Donec in felis elit.
Curabitur quis tellus nec mauris blandit porttitor pulvinar eget ante. <a href="">Aenean tristique ultrices volutpat</a>. Ut id ipsum dui. Quisque efficitur quam sem, sit amet maximus orci volutpat vitae. Mauris accumsan non tortor a aliquet. <em>Curabitur augue dui, dapibus a ipsum sit amet, vulputate euismod massa. Cras congue turpis augue, id luctus nisi gravida ut.</em>
Aliquam vitae nibh eu ipsum ultricies placerat. <a href="">Pellentesque nibh mi</a>, condimentum sed odio sit amet, pulvinar congue dolor. Aenean ullamcorper, orci eu scelerisque sollicitudin, lectus lorem malesuada lacus, id ultrices dolor enim sit amet nulla. Suspendisse quam lacus, lacinia porttitor scelerisque eu, finibus nec velit. <a href="">Curabitur tellus</a> lorem, sodales quis egestas in, congue a risus. In hac habitasse platea dictumst. Pellentesque at commodo quam. Praesent bibendum sed diam sit amet iaculis.
</p>
<script src='http://codepen.io/assets/editor/live/css_live_reload_init.js'></script>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment