Gradient Borders Mixin

Developer
Eli Fitch
Size
3,394 Kb
Views
32,384
  1. Gradient Borders Mixin Previews
  2. Gradient Borders Mixin HTML Codes
  3. Gradient Borders Mixin CSS Codes

How do I make an gradient borders mixin?

A little sass mixin that makes creating gradient borders super easy. What is a gradient borders mixin? How do you make a gradient borders mixin? This script and codes were developed by Eli Fitch on 28 October 2022, Friday.

Gradient Borders Mixin Previews
IQ Test

Gradient Borders Mixin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Gradient Borders Mixin</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! */ * { box-sizing: border-box;
}
body { background-color: #333;
}
.container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.input { width: 450px;
}
.input__input { position: relative; font-size: 36px; width: 100%; padding: 0.5em 0.6em; line-height: 1.4; -webkit-appearance: none; border-radius: 2px; border: none; background-repeat: no-repeat; background-image: linear-gradient(to right, #50c56c 0%, #4ec4ce 100%), linear-gradient(to right, #50c56c 0%, #4ec4ce 100%); border-left: 3px solid #50c56c; border-right: 3px solid #4ec4ce; background-position: 0 0, 0 100%; background-size: 100% 3px; background-color: transparent; color: white;
}
.input__input::-webkit-input-placeholder { color: #eee; font-family: 'Proxima Nova', 'futura', 'helvetica'; transition: color 0.2s ease-out;
}
.input__input:focus { outline: none;
}
.input__input:focus::-webkit-input-placeholder { color: white;
}
.input__input:focus ~ .input__bg { opacity: 1;
}
.input__bg { display: block; position: absolute; z-index: -1; opacity: 0; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to right, #50c56c 0%, #4ec4ce 100%), linear-gradient(to right, #50c56c 0%, #4ec4ce 100%); transition: all 0.3s ease-out;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <div class="input"> <input class="input__input" type="text" placeholder="CSS gradient borders..."> <div class="input__bg"></div> </div>
</div>
</body>
</html>

Gradient Borders Mixin - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { background-color: #333;
}
.container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.input { width: 450px;
}
.input__input { position: relative; font-size: 36px; width: 100%; padding: 0.5em 0.6em; line-height: 1.4; -webkit-appearance: none; border-radius: 2px; border: none; background-repeat: no-repeat; background-image: linear-gradient(to right, #50c56c 0%, #4ec4ce 100%), linear-gradient(to right, #50c56c 0%, #4ec4ce 100%); border-left: 3px solid #50c56c; border-right: 3px solid #4ec4ce; background-position: 0 0, 0 100%; background-size: 100% 3px; background-color: transparent; color: white;
}
.input__input::-webkit-input-placeholder { color: #eee; font-family: 'Proxima Nova', 'futura', 'helvetica'; transition: color 0.2s ease-out;
}
.input__input:focus { outline: none;
}
.input__input:focus::-webkit-input-placeholder { color: white;
}
.input__input:focus ~ .input__bg { opacity: 1;
}
.input__bg { display: block; position: absolute; z-index: -1; opacity: 0; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to right, #50c56c 0%, #4ec4ce 100%), linear-gradient(to right, #50c56c 0%, #4ec4ce 100%); transition: all 0.3s ease-out;
}
Gradient Borders Mixin - Script Codes
Gradient Borders Mixin - Script Codes
Home Page Home
Developer Eli Fitch
Username elifitch
Uploaded October 28, 2022
Rating 4.5
Size 3,394 Kb
Views 32,384
Do you need developer help for Gradient Borders Mixin?

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!

Eli Fitch (elifitch) Script Codes
Name
Smiley guy
Flexslider thumbnail modification
Vanilla JS sticky header
Neon slicey cube
Batman Middle Finger
Slanty Button Mixin
Animated multi-line underline
Animated SVG Hexagon
3D Retro Wave Spin
SVG hamburger menu button
Create amazing marketing copy 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!