Sample code for CSS text stroke definitive guide on coding-dude.com
A Pen by Ion Emil Negoita on CodePen.
codingdudecom
codingdudecom
/ css-stroke-text-using-webkit-text-stroke.markdown
Created
July 30, 2020 11:16
CSS Stroke Text Using -webkit-text-stroke
codingdudecom
/ 80s-fonts-text-effect-4-cyberspace-text.markdown
Created
June 22, 2020 07:28
80s Fonts Text Effect 4: Cyberspace Text
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.
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
If you need a free font that looks like this wave effect you can download the free wavy font from PhotoshopSupply
A Pen by Ion Emil Negoita on CodePen.
Simple CSS SVG filter for creating a fake anaglyph 3D effect.
Try the Anaglyph 3D online photo filter in MockoFun
A Pen by Ion Emil Negoita on CodePen.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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"> |
codingdudecom
/ bar-chart-html-only-table-version-alternative.markdown
Created
April 28, 2020 05:49
Bar Chart HTML Only (table version alternative)
Using only HTML table markup where numerical data is placed, I'm using CSS to display the data as a bar chart:
A Pen by Ion Emil Negoita on CodePen.