A Pen by Wayne Lippold on CodePen.
Created
January 11, 2017 13:48
-
-
Save wlippold/1910b1ae544ed77c7915f1e2f201bdc9 to your computer and use it in GitHub Desktop.
All Effects
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
<html> | |
<head><title>How to create a font effects using google web fonts?</title> | |
<link href='http://fonts.googleapis.com/css?family=Black+Ops+One|Luckiest+Guy|Sonsie+One|Shojumaru&effect=3d|3d-float|anaglyph|brick-sign|canvas-print| | |
crackle|decaying|destruction|distressed|distressed-wood|emboss|fire|fire-animation|fragile|grass|ice|mitosis|neon|outline|putting-green| | |
scuffed-steel|shadow-multiple|splintered|static|stonewash|vintage|wallpaper' | |
rel='stylesheet' type='text/css'> | |
</head> | |
<body style="text-align:center;"> | |
<h1 style="font-size:50px; text-decoration:underline;">Font Effects</h1> | |
<span class="font-effect-3d" style="font-size:50px; font-family:Sonsie One;">3D</span><br> | |
<span class="font-effect-3d-float" style="font-size:50px; font-family:Luckiest Guy;">3d-Float</span><br> | |
<span class="font-effect-anaglyph" style="font-size:50px; font-family:Black Ops One;">Anaglyph</span><br> | |
<span class="font-effect-brick-sign" style="font-size:50px; font-family:Shojumaru;">Brick-Sign</span><br> | |
<span class="font-effect-canvas-print" style="font-size:50px; font-family:Sonsie One;">Canvas-Print</span><br> | |
<span class="font-effect-crackle" style="font-size:50px; font-family:Luckiest Guy;">Crackle</span><br> | |
<span class="font-effect-decaying" style="font-size:50px; font-family:Black Ops One;">Decaying</span><br> | |
<span class="font-effect-destruction" style="font-size:50px; font-family:Shojumaru;">Destruction</span><br> | |
<span class="font-effect-distressed" style="font-size:50px; font-family:Sonsie One;">Distressed</span><br> | |
<span class="font-effect-distressed-wood" style="font-size:50px; font-family:Luckiest Guy;">Distressed-Wood</span><br> | |
<span class="font-effect-emboss" style="font-size:50px; font-family:Black Ops One;">Emboss</span><br> | |
<span class="font-effect-fire" style="font-size:50px; font-family:Shojumaru;">Fire</span><br> | |
<span class="font-effect-fire-animation" style="font-size:50px; font-family:Sonsie One;">Fire-Animation</span><br> | |
<span class="font-effect-fragile" style="font-size:50px; font-family:Luckiest Guy;">Fragile</span><br> | |
<span class="font-effect-grass" style="font-size:50px; font-family:Black Ops One;">Grass</span><br> | |
<span class="font-effect-ice" style="font-size:50px; font-family:Shojumaru;">Ice</span><br> | |
<span class="font-effect-mitosis" style="font-size:50px; font-family:Sonsie One;">Mitosis</span><br> | |
<span class="font-effect-neon" style="font-size:50px; font-family:Luckiest Guy;">Neon</span><br> | |
<span class="font-effect-outline" style="font-size:50px; font-family:Black Ops One;">Outline</span><br> | |
<span class="font-effect-putting-green" style="font-size:50px; font-family:Shojumaru;">Putting-Green</span><br> | |
<span class="font-effect-scuffed-steel" style="font-size:50px; font-family:Sonsie One;">Scuffed-Steel</span><br> | |
<span class="font-effect-shadow-multiple" style="font-size:50px; font-family:Luckiest Guy;">Shadow-Multiple</span><br> | |
<span class="font-effect-splintered" style="font-size:50px; font-family:Black Ops One;">Splintered</span><br> | |
<span class="font-effect-static" style="font-size:50px; font-family:Shojumaru;">Static</span><br> | |
<span class="font-effect-stonewash" style="font-size:50px; font-family:Sonsie One;">Stonewash</span><br> | |
<span class="font-effect-vintage" style="font-size:50px; font-family:Luckiest Guy;">Vintage</span><br> | |
<span class="font-effect-wallpaper" style="font-size:50px; font-family:Black Ops One;">Wallpaper</span><br> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment