Inspired by PSDDude's 80s font collection this text effect is part of the SVG filters 80s font text effects list on http://www.coding-dude.com/wp/css/svg-filters/
A Pen by Ion Emil Negoita on CodePen.
codingdudecom
codingdudecom
/ 80s-fonts-text-effect-10-css-stranger-things-text-effect.markdown
Created
July 22, 2019 12:05
80s Fonts Text Effect 10: CSS Stranger Things Text Effect
I was inspired by the Photoshop gold text effects collection from PSDDude and I decided to try and create gold text using CSS and SVG filters.
A Pen by Ion Emil Negoita on CodePen.
codingdudecom
/ animated-sun-rays-overlay-css.markdown
Last active
August 20, 2019 10:00
Animated Sun Rays Overlay + CSS
Using the Animated sunlight Photoshop action by PSDDude to create an animated GIF then placing it over an image with "screen" blending mode.
A Pen by Ion Emil Negoita on CodePen.
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: http://www.coding-dude.com/wp/html5/bar-chart-html/
A Pen by Ion Emil Negoita on CodePen.
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.
This file contains hidden or 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 hidden or 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"> |
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.
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.
This file contains hidden or 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> |