How a Text Gradient is Made

Size
4,908 Kb
Views
52,624

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 Previews

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);
How a Text Gradient is Made - Script Codes
How a Text Gradient is Made - Script Codes
Home Page Home
Developer Rıza Selçuk Saydam
Username rss
Uploaded August 02, 2022
Rating 4.5
Size 4,908 Kb
Views 52,624
Do you need developer help for How a Text Gradient is Made?

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!

Rıza Selçuk Saydam (rss) Script Codes
Create amazing captions with AI!

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!