| <h2>Simple CSS Image Effects</h2> | |
| <ol> | |
| <li>Original</li> | |
| <li>Black and White</li> | |
| <li>Sepia</li> | |
| <li>Warm Colors</li> | |
| <li>Cold Colors</li> | |
| <li>Green Tint</li> | |
| <li>Magenta Tint</li> | |
| </ol> |
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.
Inspired by PSDDude's 80s font collection this text effect is part of the SVG filters 80s font text effects list on
A Pen by Ion Emil Negoita on CodePen.
Sample code for CSS text stroke definitive guide on coding-dude.com
A Pen by Ion Emil Negoita on CodePen.
CSS Stroke Text Using text-shadow. The idea is to have multiple shadows combined all around the text to give the illusion of a real stroke text.
Sample code for CSS text stroke definitive guide on coding-dude.com
A Pen by Ion Emil Negoita on CodePen.
CSS Stroke Text Using text-shadow. The idea is to have multiple shadows combined all around the text to give the illusion of a real stroke text.
Sample code for CSS text stroke definitive guide on coding-dude.com
A Pen by Ion Emil Negoita on CodePen.
| <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%"> | |
| <text class="stroke-text" x="50%" y="50%">SVG STROKE TEXT</text> | |
| </svg> | |
| <footer>The Definitive Guide to <a href="http://www.coding-dude.com/wp/css/css-stroke-text/">Stroke Text CSS</a> made by <a href="http://www.coding-dude.com">Coding Dude</a></footer> |
CSS Stroke Text Using text-shadow. The idea is to have multiple shadows combined all around the text to give the illusion of a real stroke text.
Sample code for CSS stroke text definitive guide on coding-dude.com
A Pen by Ion Emil Negoita on CodePen.
CSS Stroke Text Using text-shadow. The idea is to have multiple shadows combined all around the text to give the illusion of a real stroke text.
Sample code for CSS text stroke definitive guide on coding-dude.com
A Pen by Ion Emil Negoita on CodePen.
| <div class="squares"></div> | |
| <footer>Complete <a href="">Square Symbol</a> Collection</footer> |