Close shade example
How do I make an close shade example?
This Pen is from a Typekit Practice lesson: http://practice.typekit.com/lesson/using-shadesMore about using Typekit with CodePen:. What is a close shade example? How do you make a close shade example? This script and codes were developed by Iharosi on 16 January 2023, Monday.
Close shade example - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Close shade example</title> <script type="text/javascript" src="//use.typekit.net/pvg2zub.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1 class="title"> <em>ABCD</em>
</h1> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/FitText.js/1.1/jquery.fittext.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js'></script>
</body>
</html>
Close shade example - Script Codes CSS Codes
/*
-----------------------------------
The original Pen is from a Typekit Practice lesson:
https://practice.typekit.com/lesson/using-shades
-----------------------------------*/
.title { font-size: 6em;
}
.title em { font-weight: 900; font-size: 3.1em; letter-spacing: 0.1em; color: orange; text-shadow: 0 0.001em navy, -0.001em 0 gray, -0.001em 0.002em navy, -0.002em 0.001em gray, -0.002em 0.003em navy, -0.003em 0.002em gray, -0.003em 0.004em navy, -0.004em 0.003em gray, -0.004em 0.005em navy, -0.005em 0.004em gray, -0.005em 0.006em navy, -0.006em 0.005em gray, -0.006em 0.007em navy, -0.007em 0.006em gray, -0.007em 0.008em navy, -0.008em 0.007em gray, -0.008em 0.009em navy, -0.009em 0.008em gray, -0.009em 0.01em navy, -0.01em 0.009em gray, -0.01em 0.011em navy, -0.011em 0.01em gray, -0.011em 0.012em navy, -0.012em 0.011em gray, -0.012em 0.013em navy, -0.013em 0.012em gray, -0.013em 0.014em navy, -0.014em 0.013em gray, -0.014em 0.015em navy, -0.015em 0.014em gray, -0.015em 0.016em navy, -0.016em 0.015em gray, -0.016em 0.017em navy, -0.017em 0.016em gray, -0.017em 0.018em navy, -0.018em 0.017em gray, -0.018em 0.019em navy, -0.019em 0.018em gray, -0.019em 0.02em navy, -0.02em 0.019em gray, -0.02em 0.021em navy, -0.021em 0.02em gray, -0.021em 0.022em navy, -0.022em 0.021em gray, -0.022em 0.023em navy, -0.023em 0.022em gray, -0.023em 0.024em navy, -0.024em 0.023em gray, -0.024em 0.025em navy, -0.025em 0.024em gray, -0.025em 0.026em navy, -0.026em 0.025em gray, -0.026em 0.027em navy, -0.027em 0.026em gray, -0.027em 0.028em navy, -0.028em 0.027em gray, -0.028em 0.029em navy, -0.029em 0.028em gray, -0.029em 0.03em navy, -0.03em 0.029em gray, -0.03em 0.031em navy, -0.031em 0.03em gray, -0.031em 0.032em navy, -0.032em 0.031em gray, -0.032em 0.033em navy, -0.033em 0.032em gray, -0.033em 0.034em navy, -0.034em 0.033em gray, -0.034em 0.035em navy, -0.035em 0.034em gray, -0.035em 0.036em navy, -0.036em 0.035em gray, -0.036em 0.037em navy, -0.037em 0.036em gray, -0.037em 0.038em navy, -0.038em 0.037em gray, -0.038em 0.039em navy, -0.039em 0.038em gray, -0.039em 0.04em navy, -0.04em 0.039em gray, -0.04em 0.041em navy, -0.041em 0.04em gray, -0.041em 0.042em navy, -0.042em 0.041em gray, -0.042em 0.043em navy;
}
Developer | Iharosi |
Username | iharosi |
Uploaded | January 16, 2023 |
Rating | 3 |
Size | 2,756 Kb |
Views | 10,120 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Hyphenation | 2,561 Kb |
Crafting link underlines | 71,479 Kb |
Highlight selected dom | 3,757 Kb |
Pseudo style | 2,514 Kb |
Backdrop Filters with Safari 9 | 2,380 Kb |
Animated line drawing in SVG | 7,408 Kb |
A Pen by iharosi | 2,878 Kb |
SVG morph anim with Snap.svg | 2,213 Kb |
Parallax scrolling scene | 2,485 Kb |
Img srcset attribute test | 1,800 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Promodoro | Bencarp | 1,712 Kb |
CSS3 Selectables with information rollover | Jasonmayes | 9,565 Kb |
Glitchy Text Effect | Kescoe | 2,208 Kb |
Force Counter | Kenlauguico | 2,732 Kb |
Ripples in water | Nobitagit | 2,704 Kb |
SVG Basics | HipsterBrown | 1,852 Kb |
Simple Responsive Text | Fbrz | 2,282 Kb |
Elon Musk - Tribute Page - FreeCodeCamp | Yunnimun | 8,615 Kb |
Monochrome Form | AlienPiglet | 3,096 Kb |
Placeholder support for contentEditable elements, without JavaScript | Flesler | 1,863 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!