Skip to content

Instantly share code, notes, and snippets.

Avatar

codingdudecom

View GitHub Profile
View css-stroke-text-using-svg-filters.markdown

CSS Stroke Text Using SVG Filters

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.

License.

View css-stroke-text-using-text-shadow.markdown

CSS Stroke Text Using text-shadow

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.

License.

View css-stroke-text-using-webkit-text-stroke.markdown
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">
You can’t perform that action at this time.