Gradients
How do I make an gradients?
What is a gradients? How do you make a gradients? This script and codes were developed by Dmitriy Karpov on 27 August 2022, Saturday.
Gradients - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Gradients</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div> <a id="red" class="active">Red</a> <a id="green">Green</a> <a id="yellow">Yellow</a> <a id="blue">Blue</a>
</div> <script src="js/index.js"></script>
</body>
</html>
Gradients - Script Codes CSS Codes
html { height:100%; width:100%;
}
body { margin:0; font-family: sans-serif;
}
body:before, body:after { position:absolute; content:''; top:0; right:0; bottom:0; left:0; z-index:0;
}
div { position: absolute; top: 0; right: 0; background: #000; color: #FFF; font-size: 10px; padding: 10px; z-index: 1;
}
div a { cursor: pointer; padding: 0 1px 0 1px;
}
div a:nth-child(1).active {color: #F00;}
div a:nth-child(2).active {color: #0F0;}
div a:nth-child(3).active {color: #FF0;}
div a:nth-child(4).active {color: #00F;}
.red { background:-webkit-linear-gradient(top left, rgba(173,41,28,1), rgba(240,142,71,1)); background: -moz-linear-gradient(top left, rgba(173,41,28,1), rgba(240,142,71,1)); background: linear-gradient(top left, rgba(173,41,28,1), rgba(240,142,71,1));
}
.red:before { background:-webkit-radial-gradient(contain, rgba(249,81,55,1), rgba(249,81,55,0)); background: -moz-radial-gradient(contain, rgba(249,81,55,1), rgba(249,81,55,0)); background: radial-gradient(contain, rgba(249,81,55,1), rgba(249,81,55,0));
}
.red:after { background-image:url(http://carpovsystems.com/labs/gradients/images/red.png);
}
.green { margin:0; background:-webkit-linear-gradient(left, rgba(64,120,33,1), rgba(98,170,42,1), rgba(74,123,32,1)); background: -moz-linear-gradient(left, rgba(64,120,33,1), rgba(98,170,42,1), rgba(74,123,32,1)); background: linear-gradient(left, rgba(64,120,33,1), rgba(98,170,42,1), rgba(74,123,32,1));
}
.green:before { background:-webkit-radial-gradient(50% 100%, contain farthest-side, rgba(205,231,44,1), rgba(205,231,44,0)); background: -moz-radial-gradient(50% 100%, contain farthest-side, rgba(205,231,44,1), rgba(205,231,44,0)); background: radial-gradient(50% 100%, contain farthest-side, rgba(205,231,44,1), rgba(205,231,44,0));
}
.green:after { background-image:url(http://carpovsystems.com/labs/gradients/images/green.png);
}
.yellow { margin:0; background:-webkit-linear-gradient(left top, rgba(255,165,0,1), rgba(255,235,1,1)); background: -moz-linear-gradient(left top, rgba(255,165,0,1), rgba(255,235,1,1)); background: linear-gradient(left top, rgba(255,165,0,1), rgba(255,235,1,1));
}
.yellow:before { background:-webkit-radial-gradient(contain, rgba(255,255,255,0.7), rgba(255,255,255,0)); background: -moz-radial-gradient(contain, rgba(255,255,255,0.7), rgba(255,255,255,0)); background: radial-gradient(contain, rgba(255,255,255,0.7), rgba(255,255,255,0));
}
.yellow:after { background-image:url(http://carpovsystems.com/labs/gradients/images/yellow.png);
}
.blue { margin:0; background:-webkit-linear-gradient(top, rgba(164,231,248,1), rgba(43,134,205,1)); background: -moz-linear-gradient(top, rgba(164,231,248,1), rgba(43,134,205,1)); background: linear-gradient(top, rgba(164,231,248,1), rgba(43,134,205,1));
}
.blue:before { background:-webkit-radial-gradient(50% 0%, contain farthest-side, rgba(223,251,255,1), rgba(223,251,255,0)); background: -moz-radial-gradient(50% 0%, contain farthest-side, rgba(223,251,255,1), rgba(223,251,255,0)); background: radial-gradient(50% 0%, contain farthest-side, rgba(223,251,255,1), rgba(223,251,255,0));
}
.blue:after { background-image:url(http://carpovsystems.com/labs/gradients/images/blue.png);
}
Gradients - Script Codes JS Codes
var Gradients = { Update: function() { for (var i = 0; i < Gradients.a.length; i++) { Gradients.a[i].className = ''; } this.className = 'active'; Gradients.e.className = this.id; }, Bind: function() { for (var i = 0; i < Gradients.a.length; i++) { Gradients.a[i].addEventListener('click', Gradients.Update, false); } }, Init: function(e) { Gradients.e = e; Gradients.a = document.getElementsByTagName('a'); Gradients.Bind(); Gradients.Update.call(Gradients.a[0]); }
};
Gradients.Init(document.body);
Developer | Dmitriy Karpov |
Username | karpovsystems |
Uploaded | August 27, 2022 |
Rating | 3 |
Size | 2,394 Kb |
Views | 44,528 |
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 |
Metro style icons | 3,691 Kb |
City generator | 2,944 Kb |
CSS3 text transitions | 2,569 Kb |
Spin | 4,269 Kb |
Eye of Sauron | 3,085 Kb |
Larvaes | 2,686 Kb |
Curve Bezier | 3,261 Kb |
Sphere | 2,432 Kb |
Javascript Pagination | 6,333 Kb |
CSS 3D Panorama | 3,478 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 |
Savemedia1.1 | EdsonAlcala | 2,148 Kb |
Jochaho Skeleton | Dhanushbadge | 1,689 Kb |
Animate elements with fixed gradient | Badabam | 4,406 Kb |
Background-blend-mode Test | 0x04 | 4,744 Kb |
CSS Heart Loaders | Nourabusoud | 2,161 Kb |
Week7 replicate | Hwcasis | 1,620 Kb |
Glowing Pulse Form | Jackrugile | 2,542 Kb |
Cars going | Netoguimaraes | 1,699 Kb |
React Recipe Box | Krokodill | 5,347 Kb |
Hoi hoi | JohnTheCat | 7,248 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!