4 color border for highlighting feature elements

Developer
Nick Nikolov
Size
4,105 Kb
Views
16,192
  1. 4 color border for highlighting feature elements Previews
  2. 4 color border for highlighting feature elements HTML Codes
  3. 4 color border for highlighting feature elements CSS Codes

How do I make an 4 color border for highlighting feature elements?

A nice top border style for highlighting feature content or anytihng else. a bonus included is a divider class for . What is a 4 color border for highlighting feature elements? How do you make a 4 color border for highlighting feature elements? This script and codes were developed by Nick Nikolov on 17 October 2022, Monday.

4 color border for highlighting feature elements Previews
IQ Test

4 color border for highlighting feature elements - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>4 color border for highlighting feature elements</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! */ body { background: #f3f3ff; font-family: "Open Sans", "Arial", "sans-serif"; color: #446; padding: 40px;
}
.well { box-shadow: rgba(0, 0, 0, 0.3) 0 2px 4px -2px; padding: 30px; background: #fff; margin: 20px 0;
}
.well-feature { position: relative;
}
.well-feature:before { top: 0; right: 0; height: 4px; width: 100%; max-width: 300px; content: ''; display: block; position: absolute; background: #03A9F4; /* Old browsers */ background: -moz-linear-gradient(left, #03A9F4 0%, #03A9F4 25%, #D81B60 25%, #D81B60 50%, #FFEB3B 50%, #FFEB3B 75%, #64DD17 75%, #64DD17 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%, #03A9F4), color-stop(25%, #03A9F4), color-stop(25%, #D81B60), color-stop(50%, #D81B60), color-stop(50%, #FFEB3B), color-stop(75%, #FFEB3B), color-stop(75%, #64DD17), color-stop(100%, #64DD17)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #03A9F4 0%, #03A9F4 25%, #D81B60 25%, #D81B60 50%, #FFEB3B 50%, #FFEB3B 75%, #64DD17 75%, #64DD17 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #03A9F4 0%, #03A9F4 25%, #D81B60 25%, #D81B60 50%, #FFEB3B 50%, #FFEB3B 75%, #64DD17 75%, #64DD17 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #03A9F4 0%, #03A9F4 25%, #D81B60 25%, #D81B60 50%, #FFEB3B 50%, #FFEB3B 75%, #64DD17 75%, #64DD17 100%); /* IE10+ */ background: linear-gradient(to right, #03A9F4 0%, #03A9F4 25%, #D81B60 25%, #D81B60 50%, #FFEB3B 50%, #FFEB3B 75%, #64DD17 75%, #64DD17 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#03A9F4, endColorstr=#64DD17, GradientType=1); /* IE6-9 */
}
hr.divider-feature { margin: 20px 0; height: 1px; border: none; background: #ccc; position: relative;
}
hr.divider-feature:after { top: 0; right: 0; height: 100%; width: 100%; max-width: 300px; content: ''; display: block; position: absolute; background: #03A9F4; /* Old browsers */ background: -moz-linear-gradient(left, #03A9F4 0%, #03A9F4 25%, #D81B60 25%, #D81B60 50%, #FFEB3B 50%, #FFEB3B 75%, #64DD17 75%, #64DD17 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%, #03A9F4), color-stop(25%, #03A9F4), color-stop(25%, #D81B60), color-stop(50%, #D81B60), color-stop(50%, #FFEB3B), color-stop(75%, #FFEB3B), color-stop(75%, #64DD17), color-stop(100%, #64DD17)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #03A9F4 0%, #03A9F4 25%, #D81B60 25%, #D81B60 50%, #FFEB3B 50%, #FFEB3B 75%, #64DD17 75%, #64DD17 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #03A9F4 0%, #03A9F4 25%, #D81B60 25%, #D81B60 50%, #FFEB3B 50%, #FFEB3B 75%, #64DD17 75%, #64DD17 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #03A9F4 0%, #03A9F4 25%, #D81B60 25%, #D81B60 50%, #FFEB3B 50%, #FFEB3B 75%, #64DD17 75%, #64DD17 100%); /* IE10+ */ background: linear-gradient(to right, #03A9F4 0%, #03A9F4 25%, #D81B60 25%, #D81B60 50%, #FFEB3B 50%, #FFEB3B 75%, #64DD17 75%, #64DD17 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#03A9F4, endColorstr=#64DD17, GradientType=1); /* IE6-9 */
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
<div class="well well-feature"> <h2>Hello I'm in a well</h2> <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.</p>
</div>
<p>Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure.</p>
<hr class="divider-feature"/>
<p>To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?</p>
</body>
</html>

4 color border for highlighting feature elements - Script Codes CSS Codes

body { background: #f3f3ff; font-family: "Open Sans", "Arial", "sans-serif"; color: #446; padding: 40px;
}
.well { box-shadow: rgba(0, 0, 0, 0.3) 0 2px 4px -2px; padding: 30px; background: #fff; margin: 20px 0;
}
.well-feature { position: relative;
}
.well-feature:before { top: 0; right: 0; height: 4px; width: 100%; max-width: 300px; content: ''; display: block; position: absolute; background: #03A9F4; /* Old browsers */ background: -moz-linear-gradient(left, #03A9F4 0%, #03A9F4 25%, #D81B60 25%, #D81B60 50%, #FFEB3B 50%, #FFEB3B 75%, #64DD17 75%, #64DD17 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%, #03A9F4), color-stop(25%, #03A9F4), color-stop(25%, #D81B60), color-stop(50%, #D81B60), color-stop(50%, #FFEB3B), color-stop(75%, #FFEB3B), color-stop(75%, #64DD17), color-stop(100%, #64DD17)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #03A9F4 0%, #03A9F4 25%, #D81B60 25%, #D81B60 50%, #FFEB3B 50%, #FFEB3B 75%, #64DD17 75%, #64DD17 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #03A9F4 0%, #03A9F4 25%, #D81B60 25%, #D81B60 50%, #FFEB3B 50%, #FFEB3B 75%, #64DD17 75%, #64DD17 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #03A9F4 0%, #03A9F4 25%, #D81B60 25%, #D81B60 50%, #FFEB3B 50%, #FFEB3B 75%, #64DD17 75%, #64DD17 100%); /* IE10+ */ background: linear-gradient(to right, #03A9F4 0%, #03A9F4 25%, #D81B60 25%, #D81B60 50%, #FFEB3B 50%, #FFEB3B 75%, #64DD17 75%, #64DD17 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#03A9F4, endColorstr=#64DD17, GradientType=1); /* IE6-9 */
}
hr.divider-feature { margin: 20px 0; height: 1px; border: none; background: #ccc; position: relative;
}
hr.divider-feature:after { top: 0; right: 0; height: 100%; width: 100%; max-width: 300px; content: ''; display: block; position: absolute; background: #03A9F4; /* Old browsers */ background: -moz-linear-gradient(left, #03A9F4 0%, #03A9F4 25%, #D81B60 25%, #D81B60 50%, #FFEB3B 50%, #FFEB3B 75%, #64DD17 75%, #64DD17 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%, #03A9F4), color-stop(25%, #03A9F4), color-stop(25%, #D81B60), color-stop(50%, #D81B60), color-stop(50%, #FFEB3B), color-stop(75%, #FFEB3B), color-stop(75%, #64DD17), color-stop(100%, #64DD17)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #03A9F4 0%, #03A9F4 25%, #D81B60 25%, #D81B60 50%, #FFEB3B 50%, #FFEB3B 75%, #64DD17 75%, #64DD17 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #03A9F4 0%, #03A9F4 25%, #D81B60 25%, #D81B60 50%, #FFEB3B 50%, #FFEB3B 75%, #64DD17 75%, #64DD17 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #03A9F4 0%, #03A9F4 25%, #D81B60 25%, #D81B60 50%, #FFEB3B 50%, #FFEB3B 75%, #64DD17 75%, #64DD17 100%); /* IE10+ */ background: linear-gradient(to right, #03A9F4 0%, #03A9F4 25%, #D81B60 25%, #D81B60 50%, #FFEB3B 50%, #FFEB3B 75%, #64DD17 75%, #64DD17 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#03A9F4, endColorstr=#64DD17, GradientType=1); /* IE6-9 */
}
4 color border for highlighting feature elements - Script Codes
4 color border for highlighting feature elements - Script Codes
Home Page Home
Developer Nick Nikolov
Username necks
Uploaded October 17, 2022
Rating 3
Size 4,105 Kb
Views 16,192
Do you need developer help for 4 color border for highlighting feature elements?

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!

Nick Nikolov (necks) Script Codes
Name
SVG Clock
Spinning Loader
Range bar with indicator
CSS Animated Weather icons
60fps animated SVG waves hero
Moblie friendly top navbar
Page header bar toggle on scroll
Heart Rating
Single element speech bubble
Subtle site navigation with description
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!