CSS3 Stroke and Gradient Text
How do I make an css3 stroke and gradient text?
Set the task of having dynamic stylised text for a DOM based game. This is the "100" points icon.edit: Chris mentioned a bit more about the challenges here:. What is a css3 stroke and gradient text? How do you make a css3 stroke and gradient text? This script and codes were developed by James Nowland on 31 October 2022, Monday.
CSS3 Stroke and Gradient Text - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Stroke and Gradient Text</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="Winning"> <div data-text="100" class="Winning-text">100</div>
</div>
</body>
</html>
CSS3 Stroke and Gradient Text - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:700);
.Winning { text-align: center;
}
.Winning-text { color: #000; display: inline-block; font-size: 35vw; line-height: 100vh; font-family: 'Roboto Slab', serif; font-weight: 700; position: relative; letter-spacing: -0.050em; -webkit-text-stroke: 10px #aa5ed3; background: -webkit-gradient(left top, left bottom, color-stop(0%, gray), color-stop(58%, #3b3232), color-stop(100%, #3b3232)); background: -webkit-linear-gradient(top, gray 0%, #3b3232 58%, #3b3232 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.Winning-text:after { color: red; content: attr(data-text); position: absolute; -webkit-text-stroke: 0.150em #d9a3ff; left: 0; z-index: -2; font-size: 1em;
}
body { background-color: #c5eef9; height: 100%;
}
Developer | James Nowland |
Username | jnowland |
Uploaded | October 31, 2022 |
Rating | 3.5 |
Size | 2,577 Kb |
Views | 16,192 |
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 |
Download Rebound | 10,865 Kb |
Hamburger and Search CSS Animations | 4,173 Kb |
CSS Ribbon with inner border. | 166,994 Kb |
Three Heading Solutions | 11,415 Kb |
Letting.js Demo using vanilla js. | 2,298 Kb |
Dribble Button CSS Rebound | 7,557 Kb |
Responsive Typography for dummies. | 6,869 Kb |
Animating Scale with text featuring blurry raster DPI issues | 2,983 Kb |
SVG Modified with Query String | 1,663 Kb |
Ad Folding without regions | 3,938 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 |
Donut Chart example - MorrisJS | Capelo | 2,385 Kb |
Jochaho Skeleton | Dhanushbadge | 1,689 Kb |
DevCamp 2014 - Denver Public Library | See8ch | 5,033 Kb |
Sketchy Box | Mnicpt | 3,033 Kb |
Jquery 2d character movement | Drewtadams | 4,291 Kb |
Spiralator 9000 | AdmiralPotato | 4,671 Kb |
CSS3 keyframe onload animation. | Samueljseay | 1,706 Kb |
Flex layout example | Mofny | 1,663 Kb |
Cake | Kennyname | 7,220 Kb |
Dice | Fraina | 5,026 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!