Textured text
How do I make an textured text?
Some textured text made with CSS3 background-clip. What is a textured text? How do you make a textured text? This script and codes were developed by Creative Punch on 09 December 2022, Friday.
Textured text - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Textured text</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Roboto+Slab:700);
body { background-color: #30303A;
}
h1 { font-size: 6em; font-family: "Roboto Slab"; font-weight: 700; text-align: center; margin-top: 50px; background: url('https://i.imgur.com/KmjTkgD.jpg'); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>Texture text</h1>
</body>
</html>
Textured text - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:700);
body { background-color: #30303A;
}
h1 { font-size: 6em; font-family: "Roboto Slab"; font-weight: 700; text-align: center; margin-top: 50px; background: url('https://i.imgur.com/KmjTkgD.jpg'); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
Developer | Creative Punch |
Username | CreativePunch |
Uploaded | December 09, 2022 |
Rating | 3 |
Size | 1,947 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 |
Gradient text with CSS3 | 2,032 Kb |
A Pen by Creative Punch | 2,368 Kb |
Animated scroll-dependant menu using scrollMonitor | 2,734 Kb |
SVG blurred header | 3,102 Kb |
Animated bar chart | 3,124 Kb |
Animated image gallery preloader | 2,405 Kb |
JQuery Adaptive Slider Demo | 3,568 Kb |
3D jQuery rotator | 3,238 Kb |
Glowing lights loader animation with pure CSS | 2,785 Kb |
Animated CSS3 social buttons | 2,573 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 |
Super Discount | Orrinward | 3,225 Kb |
Awesome Full Page Menu Nav | Ey_intuitive | 4,194 Kb |
AngularJS Animated Todo List | Ehaase | 2,975 Kb |
Blog | Rottingroom | 1,430 Kb |
3D flipping card | Ssaakkaa | 2,238 Kb |
GLSL Hills | Ykob | 6,991 Kb |
P5.js data visualization | Enginarslan | 2,233 Kb |
Board Site | IndianaLuft | 10,542 Kb |
TweenMax transformOrigin Bubble | Nicolund | 2,209 Kb |
Filter inputs | Rowinf | 1,721 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!