I know i can overlay a transparent image on a div to achieve this, but the question is, is this possible only using css3?
It is actually a progress bar with yellow color has a slight light shade or gradient on it.
You can create progress bar like that with bootstrap
DEMO: https://jsfiddle.net/2Lzo9vfc/190/
HTML
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
<span class="sr-only">70% Complete</span>
</div>
</div>
CSS
.progress-bar {
background: rgba(237,220,109,1);
background: -moz-linear-gradient(left, rgba(237,220,109,1) 0%, rgba(237,220,109,1) 31%, rgba(255,245,180,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(237,220,109,1)), color-stop(31%, rgba(237,220,109,1)), color-stop(100%, rgba(255,245,180,1)));
background: -webkit-linear-gradient(left, rgba(237,220,109,1) 0%, rgba(237,220,109,1) 31%, rgba(255,245,180,1) 100%);
background: -o-linear-gradient(left, rgba(237,220,109,1) 0%, rgba(237,220,109,1) 31%, rgba(255,245,180,1) 100%);
background: -ms-linear-gradient(left, rgba(237,220,109,1) 0%, rgba(237,220,109,1) 31%, rgba(255,245,180,1) 100%);
background: linear-gradient(to right, rgba(237,220,109,1) 0%, rgba(237,220,109,1) 31%, rgba(255,245,180,1) 100%);
}
.progress {
background: #808080;
}
Oh got it, i used following code.
.bar :after {
content: " ";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent );
z-index: 1;
background-size: 220% 102px;
animation: move 2s linear infinite;
overflow: hidden;
}
Related
Hello i want to have this kind of effect with an image (which is not a background image) :
Do u have any idea how i can create this effect with css ?
Look at this:
img {
width: 400px;
}
.content {
background: rgba(255, 255, 255, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 10%, rgba(255, 255, 255, .1) 40%, rgba(255, 255, 255, .5) 75%, rgba(255, 255, 255, 1) 100%) repeat scroll 0 0;
position: relative;
margin-top: -200px;
height: 200px;
}
<img src="http://www.dl.21tech.ir/img-upload/2016/12/95092801.jpg" />
<div class="content"></div>
You can use a container with gradient, outside the img and set negative z-index of image to push it behind container.
<div class="gradient-bg">
<img src="http://img.phombo.com/img1/photocombo/1634288/hd-wallpapers-scenic-desktop-wallpaper-beautiful-fresh-nature-scenery-sunrise-1920x1080-wallpaper.jpg">
<span>Hello There</span>
</div>
.gradient-bg{
display: inline-block;
background: -moz-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(249, 249, 249, 0.89) 100%);
background: -webkit-gradient(linear, left bottom, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(249, 249, 249, 0.89) 100%);
background: -o-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(249, 249, 249, 0.89) 100%);
background: -ms-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(249, 249, 249, 0.89) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(249, 249, 249, 0.89) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
}
span{
position: absolute;
top: 183px;
}
img{
position:relative;
z-index:-1;
display:block;
height:200px; width:auto;
}
Use image height width and gradient accordingly.
This is sample code for the solution
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>
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 )';
}
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 />
I have been looking around and trying for a few days, but i just cant seem to get it 100% right... i am trying to achieve the following effect with css3 gradient:
the closest i have gotten is DEMO:
html {
background:
linear-gradient(80deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(90deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(82deg, transparent 50%, #eee 50%, #eee),
linear-gradient(67deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(52deg, transparent 50%, #eee 50%, #eee),
linear-gradient(37deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(22deg, transparent 50%, #eee 50%, #eee),
linear-gradient(7deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(-8deg, transparent 50%, #eee 50%, #eee),
linear-gradient(-23deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(-38deg, transparent 50%, #eee 50%, #eee),
linear-gradient(-53deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(-68deg, transparent 50%, #eee 50%, #eee),
linear-gradient(-83deg, transparent 50%, #ddd 50%, #ddd);
background-position: center -100%;
background-color: #eee;
background-size: 100% 200%;
min-height: 100%;
}
I will continue attempting it.. any help is greatly Appreciated though.
Update:
There has to be a better/reusable way of doing this... looking into a scss solution, here is what i have thus far:
.sunburst {
#for $ray from 1 through 26 {
$color: #eee;
$degree: 7;
#if $ray%2 == 0 {
$color: #ddd;
}
background:linear-gradient($degree+deg, transparent 50%, $color 50%, $color),
}
}
Now its just the actual maths behind it i am trying to figure out... attempting to steal logic from pow.js, but kind of difficult if your as terrible at maths as i am...
You could use :before and :after :pseudo-elements to get this effect.
html, body {
width: 100%;
height: 100%;
margin: 0;
}
#grad {
position: relative;
width: 100%;
height: 100%;
}
#grad:after, #grad:before {
content: '';
position: absolute;
background: linear-gradient(90deg, transparent 50%, black 50%, black), linear-gradient(82deg, transparent 50%, #12E0DB 50%, #12E0DB), linear-gradient(67deg, transparent 50%, #000000 50%, #000000), linear-gradient(52deg, transparent 50%, #12E0DB 50%, #12E0DB), linear-gradient(37deg, transparent 50%, #000000 50%, #000000), linear-gradient(22deg, transparent 50%, #12E0DB 50%, #12E0DB), linear-gradient(7deg, transparent 50%, #000000 50%, #000000), linear-gradient(-8deg, transparent 50%, #12E0DB 50%, #12E0DB), linear-gradient(-23deg, transparent 50%, #000000 50%, #000000), linear-gradient(-38deg, transparent 50%, #12E0DB 50%, #12E0DB), linear-gradient(-53deg, transparent 50%, #000000 50%, #000000), linear-gradient(-68deg, transparent 50%, #12E0DB 50%, #12E0DB), linear-gradient(-83deg, transparent 50%, #000000 50%, #000000), linear-gradient(-90deg, transparent 50%, #12E0DB 50%, #12E0DB);
background-position: 0% 0%;
background-size: 200% 100%;
height: 100%;
width: 50%;
}
#grad:before {
left: 50%;
transform: rotate(180deg);
}
<div id="grad"></div>
In modern chrome-based browsers there are conic gradients which do this.
div {
height:250px;
background-image:
repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg);
}
<div></div>
your background-postition is set to center -100%;. Just use
background-position: center center;
Now with this change and your provided code half of your image is already done ;). Just add the second half with more linear-gradients
#chipChocolate.py gave a brilliant solution! This is an improvement based on his.
In Firefox transparent behaves like rgba(0,0,0,0) which leaves a thin gray line at the edge. Change to rgba(255,255,255,0) looks better.
Make the visual effect closer to OP's screenshot: 36 strips, each occupies a 10 degree angle.
Effective on <html> tag, like OP's try.
BTW: Chrome's render engine sucks, best viewed in Firefox.
html {
height: 100%;
position: relative;
}
html:before, html:after {
content: '';
height: 100%;
width: 50%;
position: absolute;
top: 0;
background-size: 200% 100%;
background-image: linear-gradient(85deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db),
linear-gradient(75deg, rgba(255,255,255,0) 50%, #000 50%, #000),
linear-gradient(65deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db),
linear-gradient(55deg, rgba(255,255,255,0) 50%, #000 50%, #000),
linear-gradient(45deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db),
linear-gradient(35deg, rgba(255,255,255,0) 50%, #000 50%, #000),
linear-gradient(25deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db),
linear-gradient(15deg, rgba(255,255,255,0) 50%, #000 50%, #000),
linear-gradient(5deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db),
linear-gradient(-5deg, rgba(255,255,255,0) 50%, #000 50%, #000),
linear-gradient(-15deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db),
linear-gradient(-25deg, rgba(255,255,255,0) 50%, #000 50%, #000),
linear-gradient(-35deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db),
linear-gradient(-45deg, rgba(255,255,255,0) 50%, #000 50%, #000),
linear-gradient(-55deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db),
linear-gradient(-65deg, rgba(255,255,255,0) 50%, #000 50%, #000),
linear-gradient(-75deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db),
linear-gradient(-85deg, rgba(255,255,255,0) 50%, #000 50%, #000),
linear-gradient(-95deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db);
}
html:before {
left: 50%;
transform: rotate(180deg);
}
Currently, there is a repeating-conic-gradient, which creates an image consisting of a repeating gradient.
div {
height: 500px;
background: repeating-conic-gradient(
hsl(186deg 100% 50% / 31%) 0deg 15deg,
hsla(0,0%,100%,0) 0deg 30deg
) #1c2c3c
}
<div></div>
You read more about it at W3 CSS Image Values.
This property is not compatible with all browsers. Check caniuse for more information.