Apply gradient effect at border level of a div - css

I am trying to give gradient effect to a div at the border level with two colors inset using css. But i am unable to get the same as shown in example.The gradient effect should be from top to middle of sqaure area.
I do have marked the area of gradient effect in image.

Please check this code
.box {
margin: 50px auto;
width: 250px;
height: 250px;
padding: 20px;
border-top: 10px solid #3e3ad5;
border-bottom: 10px solid #d53a3a;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
-webkit-background-size: 10px 100%;
-moz-background-size: 10px 100%;
background-size: 10px 100%;
background-image: -webkit-linear-gradient(top, #3e3ad5 0%, #d53a3a 100%), -webkit-linear-gradient(top, #3e3ad5 0%, #d53a3a 100%);
background-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%), -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
background-image: -o-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%), -o-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
background-image: linear-gradient(to bottom, #3e3ad5 0%, #d53a3a 100%), linear-gradient(to bottom, #3e3ad5 0%, #d53a3a 100%);
}
<div class="box"><span>Border Gradient</span></div>

Related

Split a div in 3 section

I have to do a soccer team shield with css, the idea is do a circle with the team colors and I have done the circles for shields with 1 or 2 colors but I am having troubles with 3 color shields
I'm using this for 2 colors shields
.equipo{
border-radius: 50%;
vertical-align: middle;
border: 1px solid #333333;
box-sizing: border-box;
width: 25px;
height: 25px;
background-image: linear-gradient(to right, #01135B 50%, #FFFFFF 50%);
background-image: -o-linear-gradient(left, #01135B 50%, #FFFFFF 50%);
background-image: -moz-linear-gradient(left, #01135B 50%, #FFFFFF 50%);
background-image: -webkit-linear-gradient(left, #01135B 50%, #FFFFFF 50%);
background-image: -ms-linear-gradient(left, #01135B 50%, #FFFFFF 50%);
display: inline-block;
}
<div class="equipo"></div>
but I want that it have 3 color and I try this, but it doesn't work
.equipo{
border-radius: 50%;
vertical-align: middle;
border: 1px solid #333333;
box-sizing: border-box;
width: 25px;
height: 25px;
background-image: linear-gradient(to right, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -o-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -moz-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -webkit-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -ms-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
display: inline-block;
}
<div class="equipo"></div>
What I have to do, I want 3 or more colors?
It is the nature of CSS gradients to behave, well, like gradients. The trick for having discrete colors, which do not blend, is to make the blend area have no width. This is done by putting two colors at the same point on the gradient, as shown below.
.equipo {
border-radius: 50%;
vertical-align: middle;
border: 1px solid #333333;
box-sizing: border-box;
width: 25px;
height: 25px;
background-image: linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%);
background-image: -o-linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%);
background-image: -moz-linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%);
background-image: -webkit-linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%);
background-image: -ms-linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%);
display: inline-block;
}
<div class="equipo"></div>
Add the same color again, if one ends at 30%, the next one should start at 30%,
As so: -moz-linear-gradient(left center , #01135b 30%, #ffffff 30%, #ffffff 65%, #df0408 30%)
This will essentially make a hard edge/stop on the previous color
.equipo {
border-radius: 50%;
vertical-align: middle;
border: 1px solid #333333;
box-sizing: border-box;
width: 25px;
height: 25px;
display: inline-block;
background: -moz-linear-gradient(left center , #01135b 32%, #ffffff 32%, #ffffff 66%, #df0408 66%);
}
<div class="equipo"></div>
Apply the same principal to the rest.
Try this just added new linear gradients which is overriding your styling if this is what you were looking for you can remove the upper gradients. Also added one alternate with many colors.
.equipo{
border-radius: 50%;
vertical-align: middle;
border: 1px solid #333333;
box-sizing: border-box;
width: 25px;
height: 25px;
background-image: linear-gradient(to right, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -o-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -moz-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -webkit-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -ms-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
display: inline-block;
background-image: -o-linear-gradient(top, #a8e9ff 0%, #052afc 25%,#ff8d00 100%);
background-image: -ms-linear-gradient(top, #a8e9ff 0%, #052afc 25%,#ff8d00 100%);
background-image: -webkit-gradient(linear, right top, right bottom, color-stop(15%,#a8e9ff), color-stop(32%,#052afc),color-stop(90%,#ff8d00));
}
.grad {
background-image: -moz-linear-gradient( to right, red, #f06d06, rgb(255, 255, 0), green, blue, gray, purple );
background-image: -webkit-linear-gradient( to right, red, #f06d06, rgb(255, 255, 0), green, blue, gray, purple );
background-image: linear-gradient( to right, red, #f06d06, rgb(255, 255, 0), green, blue, gray, purple );
}
<div class="equipo"></div>
<div class="equipo grad"></div>
here i worked for a flag, this is same as your requirement, try this
.flag-sample {
border-radius: 50%;
border: 1px solid #333333;
width: 100px;
height: 100px;
display: block;
background: -moz-linear-gradient(left center , #01135b 33%, #ffffff 33%, #ffffff 66%, #df0408 66%);
}
<div class="flag-sample"></div>

Gradient in IE8

Here is my css (for this gradient the code was copied from colorzilla). Nothing too special. If i remove all the gradient parts and stay with a solid color, the colored stripe renders in IE8 just fine. But the gradient is not displaying (in chrome everything looks correct). How to fix this? Thnks.
.hdr:after {
content: " ";
display: block;
position: absolute;
min-width: 960px;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: #e7eff3;
background: -moz-linear-gradient(left, #e7eff3 0%, #1d667a 50%, #e7eff3 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #e7eff3), color-stop(50%, #1d667a), color-stop(100%, #e7eff3));
background: -webkit-linear-gradient(left, #e7eff3 0%, #1d667a 50%, #e7eff3 100%);
background: -o-linear-gradient(left, #e7eff3 0%, #1d667a 50%, #e7eff3 100%);
background: -ms-linear-gradient(left, #e7eff3 0%, #1d667a 50%, #e7eff3 100%);
background: linear-gradient(to right, #e7eff3 0%, #1d667a 50%, #e7eff3 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e7eff3', endColorstr='#e7eff3', GradientType=1);
-ms-filter: 'progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7eff3', endColorstr='#e7eff3',GradientType=1 )';
}

How to make it so linear-gradient does not repeat

I have the following css:
header {
background-color: #5A775A;
position: relative;
top: -25px;
width: 100%;
height: 10%;
color: white;
}
h1 {
position: relative;
left: 60px;
top: 20px;
}
html {
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #000000 0%, #5A775A 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #000000 0%, #5A775A 100%);
/* Opera */
background-image: -o-linear-gradient(bottom, #000000 0%, #5A775A 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #000000), color-stop(1, #5A775A));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #000000 0%, #5A775A 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #000000 0%, #5A775A 100%);
}
Which is producing the following design:
As you can see the gradient is repeating. How do I make it so it does not repeat vertically, and it is just one long gradient across the entire page?
EDIT:
Trying to use
background-size: 100% 100%;
background-repeat: no-repeat;
Produces:
The problem with this is it does not span across the entire screen.
Simply use
background-size: 100% 100%;
background-attachment: fixed;
With background-repeat: no-repeat; add: background-size: cover;

Apply linear gradient on <hr>

I want an hr that contains 50% of the page.
hr {
background-color: #E0DFDF;
background-image: -moz-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
background-image: -webkit-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
background-image: -o-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
background-image: linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
border: none;
margin: 1.5em auto;
height: 1px;
width: 50%;
}
background-color: #border; is invalid CSS. I guess you are porting some code from preprocessor (e.g. SASS), please fix it.
Your syntax is wrong:
/* incorrect */
-webkit-linear-gradient: (left, white 0%, #E0DFDF 50%, white 100%);
^^
/* correct */
-webkit-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
Here's a demo:
hr {
background-image: -moz-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
background-image: -webkit-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
background-image: -o-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
background-image: linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
border: none;
margin: 1.5em auto;
height: 1px;
width: 50%;
}
<hr>
Your syntax is incorrect. linear-gradient: (...) should be ---> linear-gradient(...), without the semi-colon(:).
hr {
background: -webkit-linear-gradient(to right, white 0%, #E0DFDF 50%, white 100%);
background: -moz-linear-gradient(to right, white 0%, #E0DFDF 50%, white 100%);
background: -o-linear-gradient(to right, white 0%, #E0DFDF 50%, white 100%);
background: linear-gradient(to right, white 0%, #E0DFDF 50%, white 100%);
border: 0;
margin: 1.5em auto;
height: 1px;
width: 50%;
}
<hr />

transparent image on top of gradient background

I'm trying to get the background image to lay on top of the gradient background, do I have to create another div to do this?
#inner_bg {
width: 846px;
height: 646px;
margin: -1px 0 0 0;
background: url(../simg/inner_bg.gif) no-repeat 20px 140px;
background: #031f34;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI5JSIgc3RvcC1jb2xvcj0iIzAzMWYzNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iIzAzNjY4ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iIzA1YjdkMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(left, #031f34 9%, #03668f 40%, #05b7d1 70%);
background: -webkit-gradient(linear, left top, right top, color-stop(9%,#031f34), color-stop(40%,#03668f), color-stop(70%,#05b7d1));
background: -webkit-linear-gradient(left, #031f34 9%,#03668f 40%,#05b7d1 70%);
background: -o-linear-gradient(left, #031f34 9%,#03668f 40%,#05b7d1 70%);
background: -ms-linear-gradient(left, #031f34 9%,#03668f 40%,#05b7d1 70%);
background: linear-gradient(to right, #031f34 9%,#03668f 40%,#05b7d1 70%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#031f34', endColorstr='#05b7d1',GradientType=1 );
float: left;
position: relative;
}
Yes you will need another element to work with (maybe a pseudo element like ::before), the backgrounds are replacing each other (when they are valid).
http://jsfiddle.net/fTpaz/2/
#inner_bg {
width: 846px;
height: 646px;
margin: -1px 0 0 0;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI5JSIgc3RvcC1jb2xvcj0iIzAzMWYzNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iIzAzNjY4ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iIzA1YjdkMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(left, #031f34 9%, #03668f 40%, #05b7d1 70%);
background: -webkit-gradient(linear, left top, right top, color-stop(9%,#031f34), color-stop(40%,#03668f), color-stop(70%,#05b7d1));
background: -webkit-linear-gradient(left, #031f34 9%,#03668f 40%,#05b7d1 70%);
background: -o-linear-gradient(left, #031f34 9%,#03668f 40%,#05b7d1 70%);
background: -ms-linear-gradient(left, #031f34 9%,#03668f 40%,#05b7d1 70%);
background: linear-gradient(to right, #031f34 9%,#03668f 40%,#05b7d1 70%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#031f34', endColorstr='#05b7d1',GradientType=1 );
float: left;
position: relative;
}
#inner_bg::before{
content: ' ';
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background: red;
opacity:0.5;
}​
Create another divide. Position on top of the div with the gradient background. Add a z-index higher than that of the div with the gradient background.

Resources