To create a linear gradient in Internet Explorer i used to adopt this (terrible) code:
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#282828', EndColorStr='#185976');
I wonder wether exists a way to create a radial gradient using filter and DXImageTransoform ?
Live Demo
#element{
background: #fff; /* The color you want for the radial gradient */
width:100px;
height:100px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100, finishopacity=0, style=2);
}
Link where I got the info
Radial Gradient
For the Radial Gradient we have to create a div-elements. This element
is a Overlay for the background. Than we'll use the Alpha-Filter.
Alpha will make this element transparent in a special style. style=2
is a radial alpha. This means that the center of the element will be
full colored (opacity=100) and the opacity will lose to the edges
(finishopacity=0)
Related
Is it possible to make a part of image gradient on an existing background?
The result as in the example picture you added can be achieved by using 2 containers, one with a background image, the other (which lies on top of the first) uses a CSS gradient background, where one of the gradient colors has an alpha of 0 (i.e. is transparent).
For more info on CSS gradients see: https://developer.mozilla.org/nl/docs/Web/CSS/CSS_Images/Using_CSS_gradients
to make a gradient that is transparent on one side, use rgba color, for example:
#grad1 {
height: 200px; width:500px;
background: linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0));
}
The a in rgba stands for alpha, it is the transparency an has a value between 1(opaque) and 0(transparent)
So, here is JSFIDDLE.
Here, you see header with background color gradient:
background: linear-gradient(to right, #827099 0%, #dc5562 100%)
I also have span with :before css attribute that mimics the background color behind it.
The purpose of this is to get a "cut" feature as a part of the word "THIS". You will notice that a top left portion of "T" is missing or more like hidden behind the :before attribute.
The issue I am having is that since the background color is linear-gradient, when the screen width changes, so does the linear-gradient (you can see by making the browser window smaller)
This change in the gradient does not reflect on the :before attribute and it no longer matches the background color.
Is there a way to fix this while keeping the linear-gradient of the background?
Not sure if this is an option for your use case, but you could set the linear gradient to ensure that the color change doesn't happen until after it clears the cutout.
You would set the first stop in the gradient to be the width of the padding (118px) plus the width of the clip border (21px) and then change the clip border colors to be the same as the starting color of the gradient. In the example below I rounded up to 140px.
https://jsfiddle.net/6dvy7dks/
.head {
background: linear-gradient(to right, #827099 140px, #dc5562 100%);
}
span.first:before {
border-top-color: #827099;
border-left-color: #827099;
}
How can I create a programmatic horizontal gradient that starts at a prescribed location (in pixles on the x-axis)?
Here's the issue- I've got an image set as background-image - ideally, what I'd like to do is declare a CSS gradient that starts close to the edge of the image (~1800 pixels) and fades gracefully to full black.
So far, the best solution I have is to have two div elements- one with the photo background and the other with a 1px tall gradient image repeated along the y-axis with a background-position that starts at 1780px.
This works, but I really want to get away from the 1px image trick. Any ideas?
<div id="photobg">
<div id="gradientbg">
</div>
</div>
#photobg {
background-image:url('photourl.jpg');
}
#gradientbg {
background-image:url('1pxgradient.jpg');
background-repeat: repeat-y;
background-position: 1780px 0;
height: 100%;
}
What I'd like to do, in theory, is use color stops at 1780 px for a CSS gradient but as I understand it, CSS only supports % values as color stops.
Reference:
CSS 3 Gradient n pixels from bottom - Webkit/Safari
No, you can use pixels with linear gradient:
background-image: linear-gradient(transparent 1780px, black 100%);
You can also combine this gradient with multiple background images on one div.
You might want to check out this jsbin, I've made for you:
http://jsbin.com/sonewa/1/edit
This block of css will do what you want
background: -moz-linear-gradient(center top , #00AFF0, #53D4FE); //this is for mozilla
background-image: -webkit-linear-gradient(top, #00AFF0, #53D4FE); //this is for chrome and safari
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00AFF0', endColorstr='#53D4FE', GradientType=0); //this is for IE
while the gradient is from color #00AFF0 to #53D4FE (top to bottom)
I have a form inside a div with a transparent color. I'd need to have the input texts plain white (non transparent). How can I do it?
Here's some code:
http://jsfiddle.net/d5Xuu/11/
(don't mind the background, it's just a random image I picked for the example)
Thanks
#carlo; may be you have to use use css3 rgba color for your background transparency which is not effect div child elements.
background: rgba(0,0,0,0.3)
for IE use filter
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); /* IE 6 & 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; /* IE8 */
you can generate your rgba filter from here http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/
If you use:
opacity: .7
of a div, his sons take the same property.
You can solve using rgba (255,255,255, .7)
http://jsfiddle.net/d5Xuu/19/
I am working on a website which uses multiple css3 gradients as overlay for a background tiled with texture image
site url: --snipped--
currently for header i am using following css:
#header {
background: #DBD6D3;
height: 364px;
background: -moz-radial-gradient(50% 0% 0deg,circle farthest-corner,#FFFFFF,#DBD6D3);
background: -webkit-gradient(radial,50% 59,500,50% 0,40,from(#DBD6D3),to(#FFFFFF));
}
#header .wrp{background:url('img/headerBg.png');height:100%;padding-top:40px;}
here headerBg.png is a semi-transparent texture of size 5x5 pixel, ad for body I need to create this background:
I need to know how to make this kind of radial background in CSS3, initially I had used same code as header but with rgba() for color, setting end of the gradient with 0 opacity but it created too much noise.
tried few online generators as well for CSS3 radial background but none of them were good!
This image i am using is taking up 280kbs and I want to reduce it as it significantly effects the performance! Help would be appreciated.
update:
Upload psd, can be downloaded from
http://ylspeaks.com/stackoverflow_css3.zip
and adding bounty
Edit Jan 2011:
Webkit nightly now supports elliptical gradients http://webkit.org/blog/1424/css3-gradients/, these will eventually find their way into Safari and Chrome. Faking elliptical radial gradients through css transforms will eventually be unnecesary.
Your problem has the most difficult constraints I've ever encountered, but it is an interesting challenge and it illustrates the limitations of each browsers approach for radial backgrounds, so that's why I decided on trying.
First, the rgba approach is stillborn because the opacity is going to hide some of the noise. It's better to apply semitransparent noise on top of the gradient, you can avoid the extra div by applying multiple background on the same image:
background: url(noise.png) repeat top left, -webkit-gradient(radial,50% 0,700,50% 0,100,from(#6f2813),to(#B9513D)) transparent;
You may notice the color property at the end of declaration, it looks weird but this how you declare colors when you apply multiple backgrounds.
Second, webkit doesn't support elliptical backgrounds, so the work around to this is squishing the gradient through -webkit-transform and positioning it a bit further up:
-webkit-transform: scale(1, 0.7) translate(0, -350px);
For sanity, the right thing to do would seem be applying circular backgrounds on both FF and webkit and then transform them. However, Firefox's transform doesn't support scaling gradients! So we apply an elliptical background:
background: url(noise.png) repeat top left, -moz-radial-gradient(50% 0 0deg,ellipse farthest-side,#B9513D,#6f2813) transparent;
But, since Webkit's container is squished, Firefox's gradient is larger! At this point we would think about applying different css rules for the height of the gradient, but since Firefox doesn't scale the gradient, we can apply the same transformation on the elliptical background the get the containers to be of the same height:
-moz-transform: scale(1, 0.7) translate(0, -250px);
And voila! we have an elliptical gradient with noise, that works on both Safari and Firefox!
http://duopixel.com/stackoverflow/gradient/
background: #702914;
background: -moz-radial-gradient(50% 0% 0deg,circle farthest-corner,#A94122,#702914);
background: -webkit-gradient(radial,50% 59,500,50% 0,40,from(#702914),to(#A94122));