Gradient on SCSS with Compass
How do I make an gradient on scss with compass?
What is a gradient on scss with compass? How do you make a gradient on scss with compass? This script and codes were developed by Perthz Weerawat Weera on 31 January 2023, Tuesday.
Gradient on SCSS with Compass - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Gradient on SCSS with Compass</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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! */ body { background-color: #fcfff4; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFFCFFF4', endColorstr='#FFB3BEAD'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZjZmZmNCIvPjxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjZGZlNWQ3Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYjNiZWFkIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fcfff4), color-stop(40%, #dfe5d7), color-stop(100%, #b3bead)); background-image: -moz-linear-gradient(left, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); background-image: -webkit-linear-gradient(left, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); background-image: linear-gradient(to right, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
</body>
</html>
Gradient on SCSS with Compass - Script Codes CSS Codes
body { background-color: #fcfff4; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFFCFFF4', endColorstr='#FFB3BEAD'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZjZmZmNCIvPjxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjZGZlNWQ3Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYjNiZWFkIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fcfff4), color-stop(40%, #dfe5d7), color-stop(100%, #b3bead)); background-image: -moz-linear-gradient(left, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); background-image: -webkit-linear-gradient(left, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); background-image: linear-gradient(to right, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
}
Developer | Perthz Weerawat Weera |
Username | Perthz |
Uploaded | January 31, 2023 |
Rating | 3 |
Size | 3,084 Kb |
Views | 2,024 |
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 Animator | 1,894 Kb |
Loading Pixels | 3,371 Kb |
Typed Demo | 2,484 Kb |
Music Card | 6,664 Kb |
Box Shadow | 1,667 Kb |
Kanit Thai Font | 1,954 Kb |
Product Module for Audio Intouch Website | 4,516 Kb |
JS For Loop Demo | 1,787 Kb |
Recommend Article Module for Intouch Website | 4,142 Kb |
CSS Animated Sandwich Icon | 2,770 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 |
Addthis_button | Esambino | 1,691 Kb |
Mostly Fluid | Mccreath | 3,308 Kb |
Sass random color animation | Jotavejv | 4,827 Kb |
Classy Blockquote Styling | Andrewwright | 3,212 Kb |
Formations | Cantelope | 5,731 Kb |
Fullscreen Parallax | Bassta | 3,313 Kb |
Simple Login Form | JoshBlackwood | 4,418 Kb |
Tile Animation Thing | Frxnz | 4,332 Kb |
Login with flip 3d animation | Mariusbalaj | 3,014 Kb |
A Pen by Theun | Tjoen | 6,152 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!