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 |
Outer Gradient Circle Progress | 17,247 Kb |
Smart Ratio CSS Photo Grid | 3,200 Kb |
Login Form CSS only validation | 5,739 Kb |
Dribble Button CSS Rebound | 7,557 Kb |
Step 3 | 3,874 Kb |
Responsive Typography for dummies. | 6,869 Kb |
Lorem pixel Images | 2,290 Kb |
Letting.js Demo using vanilla js. | 2,298 Kb |
CSS3 Stroke and Gradient Text | 2,577 Kb |
A Pen by James Nowland | 6,998 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 |
Wikipedia viewer | Chpecson | 2,865 Kb |
SlideDown FixedMenu | Mp_graphic | 5,602 Kb |
SVG Animation | Pollardld | 3,133 Kb |
Glitchy Text Effect | Kescoe | 2,208 Kb |
Virtual vinyl | Davidpanik | 3,474 Kb |
Responsive scrolling text | Ashdurham | 2,259 Kb |
ECharts Version 3.0 - Bar Marker Chart | WebCodePro | 2,726 Kb |
Acorrdian 2016 | Milanodituti | 3,720 Kb |
Website Concept | Sagoza | 3,104 Kb |
Canvas snow | Win7killer | 2,572 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!