How a Text Gradient is Made
How do I make an how a text gradient is made?
Forked from Chris Coyier. http://codepen.io/chriscoyier/details/lotjh. What is a how a text gradient is made? How do you make a how a text gradient is made? This script and codes were developed by Rıza Selçuk Saydam on 02 August 2022, Tuesday.
How a Text Gradient is Made - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>How a Text Gradient is Made</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.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! */ /* FINAL CODE PIECE THAT YOU CAN COPY, EDIT and USE
.textGradient{ background-image: linear-gradient(left, #07af19 0%, #07af19 0.71, #ffbb1d 29.69, #f7413d 58.94, #4d79e3 100%); background-clip: text; -webkit-text-fill-color: transparent;
}
*/
@import url(http://fonts.googleapis.com/css?family=Andika);
.textGradient-demo { width: 100px; height: 100px; line-height: 100px; font-size: 2em; margin: 0 auto; transition: 0.8s 0.2s;
}
.step-1 .textGradient-demo { border: 1px solid #fd0b58;
}
.step-2 .textGradient-demo { border: none; background-image: -webkit-linear-gradient(left, #07af19 0%, #07af19 0.71%, #ffbb1d 29.69%, #f7413d 58.94%, #4d79e3 100%); background-image: -moz-linear-gradient(left, #07af19 0%, #07af19 0.71%, #ffbb1d 29.69%, #f7413d 58.94%, #4d79e3 100%); background-image: -o-linear-gradient(left, #07af19 0%, #07af19 0.71%, #ffbb1d 29.69%, #f7413d 58.94%, #4d79e3 100%); background-image: -ms-linear-gradient(left, #07af19 0%, #07af19 0.71%, #ffbb1d 29.69%, #f7413d 58.94%, #4d79e3 100%); background-image: linear-gradient(left, #07af19 0%, #07af19 0.71%, #ffbb1d 29.69%, #f7413d 58.94%, #4d79e3 100%);
}
.step-3 .textGradient-demo { -webkit-background-clip: text; -moz-background-clip: text; background-clip: text;
}
.step-4 .textGradient-demo { -webkit-text-fill-color: transparent;
}
.textGradient-title { width: 300px; padding: 1rem; color: white; background: #D94948; border-radius: 20px; margin: auto; opacity: 0; transition: 0.8s 0.2s;
}
.step-6 .textGradient-title { opacity: 1;
}
body { background: #333; font-family: 'Andika', sans-serif; color: white; text-align: center; font-size: large; transform: translateZ(0);
}
.steps { position: relative; height: 45px;
}
.steps > div { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; background: #333; transition: 0.3s;
}
.steps .step-0 { opacity: 1;
}
.step-1 .steps .step-1 { opacity: 1;
}
.step-2 .steps .step-2 { opacity: 1;
}
.step-3 .steps .step-3 { opacity: 1;
}
.step-4 .steps .step-4 { opacity: 1;
}
.step-5 .steps .step-5 { opacity: 1;
}
.step-6 .steps .step-6 { opacity: 1;
}
h1 { text-transform: uppercase; letter-spacing: 1px; font-size: 1.5rem; border-bottom: 1px solid #555; color: #999;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<h1>How a Text Gradient is Made</h1>
<div id="whole-thing"> <div class="steps"> <div class="step-0">Imagine a text</div> <div class="step-1">It is inside a box</div> <div class="step-2">If we make the gradient background, and ...</div> <div class="step-3">clip background with text, and...</div> <div class="step-4">also make text transparent...</div> <div class="step-5">We have text gradient.</div> <div class="step-6">That's how a text gradient is made!</div> </div> <div class="textGradient-demo">Text</div> <div class="textGradient-title"> <button id="re-run">Run Again</button> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
How a Text Gradient is Made - Script Codes CSS Codes
/* FINAL CODE PIECE THAT YOU CAN COPY, EDIT and USE
.textGradient{ background-image: linear-gradient(left, #07af19 0%, #07af19 0.71, #ffbb1d 29.69, #f7413d 58.94, #4d79e3 100%); background-clip: text; -webkit-text-fill-color: transparent;
}
*/
@import url(http://fonts.googleapis.com/css?family=Andika);
.textGradient-demo { width: 100px; height: 100px; line-height: 100px; font-size: 2em; margin: 0 auto; transition: 0.8s 0.2s;
}
.step-1 .textGradient-demo { border: 1px solid #fd0b58;
}
.step-2 .textGradient-demo { border: none; background-image: -webkit-linear-gradient(left, #07af19 0%, #07af19 0.71%, #ffbb1d 29.69%, #f7413d 58.94%, #4d79e3 100%); background-image: -moz-linear-gradient(left, #07af19 0%, #07af19 0.71%, #ffbb1d 29.69%, #f7413d 58.94%, #4d79e3 100%); background-image: -o-linear-gradient(left, #07af19 0%, #07af19 0.71%, #ffbb1d 29.69%, #f7413d 58.94%, #4d79e3 100%); background-image: -ms-linear-gradient(left, #07af19 0%, #07af19 0.71%, #ffbb1d 29.69%, #f7413d 58.94%, #4d79e3 100%); background-image: linear-gradient(left, #07af19 0%, #07af19 0.71%, #ffbb1d 29.69%, #f7413d 58.94%, #4d79e3 100%);
}
.step-3 .textGradient-demo { -webkit-background-clip: text; -moz-background-clip: text; background-clip: text;
}
.step-4 .textGradient-demo { -webkit-text-fill-color: transparent;
}
.textGradient-title { width: 300px; padding: 1rem; color: white; background: #D94948; border-radius: 20px; margin: auto; opacity: 0; transition: 0.8s 0.2s;
}
.step-6 .textGradient-title { opacity: 1;
}
body { background: #333; font-family: 'Andika', sans-serif; color: white; text-align: center; font-size: large; transform: translateZ(0);
}
.steps { position: relative; height: 45px;
}
.steps > div { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; background: #333; transition: 0.3s;
}
.steps .step-0 { opacity: 1;
}
.step-1 .steps .step-1 { opacity: 1;
}
.step-2 .steps .step-2 { opacity: 1;
}
.step-3 .steps .step-3 { opacity: 1;
}
.step-4 .steps .step-4 { opacity: 1;
}
.step-5 .steps .step-5 { opacity: 1;
}
.step-6 .steps .step-6 { opacity: 1;
}
h1 { text-transform: uppercase; letter-spacing: 1px; font-size: 1.5rem; border-bottom: 1px solid #555; color: #999;
}
How a Text Gradient is Made - Script Codes JS Codes
(function() { var demo, run; demo = $("#whole-thing"); run = function() { setTimeout(function() { return demo.addClass("step-1"); }, 3000); setTimeout(function() { return demo.addClass("step-2"); }, 6000); setTimeout(function() { return demo.addClass("step-3"); }, 9000); setTimeout(function() { return demo.addClass("step-4"); }, 12000); setTimeout(function() { return demo.addClass("step-5"); }, 15000); return setTimeout(function() { return demo.addClass("step-6"); }, 18000); }; run(); $("#re-run").on('click', function() { $("#whole-thing").removeClass(); return run(); });
}).call(this);
Developer | Rıza Selçuk Saydam |
Username | rss |
Uploaded | August 02, 2022 |
Rating | 4.5 |
Size | 4,908 Kb |
Views | 52,624 |
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 |
Button Switch | 5,239 Kb |
Loader Animation | 2,761 Kb |
Flat iOS 7 Safari Icon | 3,332 Kb |
Pokemon Icon | 2,655 Kb |
CSS3 Loading Animation | 5,219 Kb |
Flutterby | 3,799 Kb |
Animated Flat Camera Icon | 3,843 Kb |
CSS3 Loader Animation - Peeek | 3,854 Kb |
METU CSS3 Logo | 2,504 Kb |
Sticky footer - adjustPusher | 2,127 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 |
Mosaic transition effect between two photos using jQuery | Stathisg | 2,518 Kb |
Haml Calendar | Katydecorah | 5,643 Kb |
Spinners using Font Icons | Keyamoon | 3,007 Kb |
TestTube CSS | EZPK | 2,710 Kb |
Box Shadow Effects | Retrofuturistic | 2,143 Kb |
CSS Hover Effects | Alen | 3,613 Kb |
Display properties | Hamzaerbay | 1,886 Kb |
JS Countdown Timer | Ayoungh | 2,435 Kb |
Using Flickr API | MoyArt | 6,761 Kb |
Material Design-Layout-Principles Practice | Fraina | 2,331 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!