Skip to content

Instantly share code, notes, and snippets.

codingdudecom

View GitHub Profile
View 80s-fonts-text-effect-4-cyberspace-text.markdown
View 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.

@codingdudecom
codingdudecom / index.html
Created Jun 2, 2020
Simple CSS Image Effects
View index.html
<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>
@codingdudecom
codingdudecom / index.html
Created May 30, 2020
Simple CSS Image Effects
View index.html
<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>
View css-wavy-font-animation.markdown
View anaglyph-3d-css-effect.markdown
View index.html
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@1,900&display=swap" rel="stylesheet">
<div class="text">ROUNDED TEXT BEFORE</div>
<div class="text smooth">ROUNDED TEXT AFTER</div>
<p>
Inspired by PhotoshopSupply.com: <a href="https://www.photoshopsupply.com/actions/smooth-edges-photoshop-action-free">Smooth Edges Photoshop</a></p>
<svg viewbox="0 0 100% 100%">
<defs>
<filter id="smooth">
View index.html
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@1,900&display=swap" rel="stylesheet">
<div class="text">ROUNDED TEXT BEFORE</div>
<div class="text smooth">ROUNDED TEXT AFTER</div>
<p>
Inspired by PhotoshopSupply.com: <a href="https://www.photoshopsupply.com/actions/smooth-edges-photoshop-action-free">Smooth Edges Photoshop</a></p>
<svg viewbox="0 0 100% 100%">
<defs>
<filter id="smooth">
View bar-chart-html-only-table-version-alternative.markdown
View bar-chart-html-only-table-version-alternative.markdown
You can’t perform that action at this time.