Is it possible to create a simple border bottom color with a gradient effect?
div{
border-bottom:10px solid linear-gradient(#FF4000, transparent);
height:20px;
width:auto;
background:#ccc;
}<div></div>Is it possible to create a simple border bottom color with a gradient effect?
div{
border-bottom:10px solid linear-gradient(#FF4000, transparent);
height:20px;
width:auto;
background:#ccc;
}<div></div>If you want to create a gradient border on one or more sides of an element, you can do so by defining specific style rules in your CSS for the following properties:
border-image
border-image-slice
border-image-width
.box {
width: auto;
height: 20px;
background: #ccc;
border-image: linear-gradient(to right, rgba(255, 64, 0, 1), rgba(255, 64, 0, 0));
border-image-slice: 1;
border-image-width: 0 0 10px 0;
}<div class="box">
</div>Note: To achieve a fade-to-transparent effect in the gradient, you need to use rgba colors instead of hex colors.
rgba(255, 64, 0, 0) (with an alpha channel of 0) represents full transparency, while rgba(255, 64, 0, 1) (with an alpha channel of 1) is completely opaque.
By utilizing the :after pseudo element along with linear-gradient, you can achieve the desired outcomes. The following code showcases the use of background:liner-gradient on the :after pseudo element using just one single element.
If you are aiming for older browsers, you might need to include browser prefixes as well.
Feel free to explore the Demo.
div {
height: 100px;
border: 1px solid red;
position: relative;
}
div:after {
height: 2px;
width: 100%;
position: absolute;
content: "";
left: 0;
bottom: 0;
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}<div>Hi</div>Give this a try:
.customClass {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(14,173,172)), color-stop(0.67, rgb(0,255,255)));
background-image: -moz-linear-gradient(center bottom, rgb(14,173,172) 50%, rgb(0,255,255) 67%);
padding: 10px;
}
.customClass > div { background: #fff; }
One way to create a gradient border is by using a separate element in your HTML and styling it with CSS.
<style>
div {height:20px; background: linear-gradient(#FF4000, transparent); padding-bottom: 10px;}
div div {background: yellow; padding-bottom: 0;}
</style>
<div>
<div></div>
</div>
-moz-linear-gradient(to right, #3acfd5 0%, #3a8ed5 100%)
div {
-moz-border-image: -moz-linear-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;
height: 20px;
width: auto;
background: #ccc;
}<div></div>Recently, I came across an interesting SVG file depicting a question mark enclosed in a circle. Intrigued by its design, I wanted to extract the paths from this SVG image so that I could integrate it directly into my codebase. Following some online tutoria ...
Struggling to place a loading element between the top toolbar and bottom tabs on various iPhone models and iOS versions. The challenge arises with iOS 10. Using "margin-top" causes errors, while "padding-top" doesn't work on iPhone X. Is there a CSS s ...
I need to create a graphics editor similar to Paint using SVG for a school project. I have JavaScript code for drawing shapes like circles and lines, but when I try to add them to an onClick function for a button, it doesn't seem to be working. funct ...
I have attempted to disable auto-complete for the password input, but it doesn't seem to be working. Below is a sample of my code: <form name="testfrm" ng-submit="test(testfrm)" autocomplete="off"> <input type="password" id="passwor ...
I successfully implemented a Jquery busy indicator in my application using the following link: However, I noticed that even though it prevents users from clicking on input elements while loading, I can still navigate to these elements by pressing the tab ...
While delving into the realm of HTML, I stumbled upon a concept that has left me perplexed. Upon stacking two divs on top of each other, I observed an interesting phenomenon where rotating the second div by 180deg (i.e transform:rotateY(180deg)), causes t ...
I'm struggling to create a grid with 3 items in each row, but my current grid layout only displays one item per row. Each grid item also contains an image. How can I modify the code to achieve a grid with 3 items in a row? Here's the code snippet ...
I am currently working with material-ui and react, and facing an issue with the positioning of a top bar within a Grid element. The top bar is meant to be fixed in its position, but not at the very top of the page as it is inside a parent Grid element. I ...
I have integrated a listview control in my ASPX page. The data is being fetched from the database and displayed in the listview. I have also utilized jQuery script to implement the .fadein() and .fadeout() effects on the listview elements. However, when I ...
I am trying to use the v-autocomplete component to display the entire text of the selected item. On initial selection, everything displays correctly: However, once it is chosen, only a portion of the text is shown, leaving out important information: ...
I am trying to dynamically change the color of elements in my navbar by creating a filter in my typescript code. I have a string with values like 'greyscale(73%) saturate(1400%)'. How can I apply this string to the fa-icon's filter property ...
Is it possible to set the min-width of a submenu in CSS to be equal to that of the corresponding link in a navigation menu? I am using LESS for my styling. <ul> <li> <a href="">Item FooBarBaz</a> <ul class="submenu"&g ...
This is what I currently have: <tr> <td colspan="4" style="font-size:7pt; font-color:red; font-weight: bold;"> PLEASE NOTE: SPECIFY THE ARTICLE IN AS MUCH DETAIL AS POSSIBLE </td> </tr> However, the text does not a ...
I'm currently developing a website that allows users to navigate using swipe gestures. Each slide contains multiple links that should redirect users to different locations upon clicking. However, I've encountered a bizarre issue where the links a ...
I'm currently facing an issue with Bootstrap's tab component. I need help figuring out how to hide a lorem ipsum section and show a hidden div when a specific tab is clicked, and then revert the changes when a different tab is selected. $(func ...
As I dive into React/Material-UI and learn the ropes of CSS, I've come across a challenge with my simple page layout featuring an AppBar. Unfortunately, this AppBar is overlapping the elements that should be positioned below it. In my quest for a sol ...
I'm having trouble linking my external CSS to my HTML file. In the head of my index.html, I have this code: <head> <title>Twenty by HTML5 UP</title> <meta charset="utf-8" /> <meta name="viewport ...
I am currently working on a website that contains the following PHP code: echo "<form action='choice.php' method='post'>"; echo "<input type='submit' name='choice' value='left' /> "; As I am i ...
Being new to Vue.js, I am looking to create a simple animation on component load for the first time. You can find my initial code here: <template> <div id="app"> <div class="rect" /> </div> </template ...
I'm currently working on a design where I have a group of parent containers with the float left property applied. Inside each parent container, there is a child div with position absolute defined within them. Here's an example: <div class="wr ...