JS/CSS code for creating a beautiful Heart Shaped Bokeh You can replace the bokeh heart shape with any of the heart symbol shapes in this list.
A Pen by Ion Emil Negoita on CodePen.
codingdudecom
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
| <div>Made with the MockoFun <a href="https://medium.com/@codingdudecom/circle-text-2e7e5246cc94">circle text</a> generator</div> | |
| <img style="--rotation-duration:10s;" src="https://i.imgur.com/zdPkiY2.png" alt="Circle Text" class="rotating-circle-text"> |
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
| <div>Made with the MockoFun <a href="https://medium.com/@codingdudecom/circle-text-2e7e5246cc94">circle text</a> generator</div> | |
| <img style="--rotation-duration:10s;" src="https://i.imgur.com/zdPkiY2.png" alt="Circle Text" class="rotating-circle-text"> |
codingdudecom
/ curved-text-generator-js.markdown
Created
November 18, 2020 12:01
Curved Text Generator JS
JS function to generate curved text from a HTML text element. This technique make a span element for each letter and rotates it slightly. Generate a circle text by adjusting the font site and circle radius.
Check out MockoFun Online: curved text generator
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
| <div class="squares"></div> | |
| <footer>Complete <a href="">Square Symbol</a> Collection</footer> |
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
| <div class="squares"></div> | |
| <footer>Complete <a href="">Square Symbol</a> Collection</footer> |
codingdudecom
/ html5-canvas-text-outline.markdown
Created
July 30, 2020 11:18
HTML5 Canvas Text Outline
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.
codingdudecom
/ double-outline-font-multiple-outline-fontwith-svg-stroke.markdown
Created
July 30, 2020 11:18
Double Outline Font & Multiple Outline FontWith SVG Stroke
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.
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
| <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> |
codingdudecom
/ css-stroke-text-using-svg-filters.markdown
Created
July 30, 2020 11:17
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.