CSS3 fallback for older browsers - css

I have made a circle using CSS3, trouble is in older browsers (ie7 etc) the circle appears as a square.
I know I could use a background image as a backup, but doesnt this defeat the point of using code?
If i was to put background-image in, where would it go in the CSS?
.ButtonB:hover, .ButtonB.hover {
background: -moz-linear-gradient(
center top,
rgba(255, 255, 255, .2) 0%,
rgba(255, 255, 255, .1) 100%
);/* FF3.6 */
background: -webkit-gradient(
linear,
center bottom,
center top,
from(rgba(255, 255, 255, .1)),
to(rgba(255, 255, 255, .2))
);/* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF')"; /* IE8 */
}

Using the following will provide better support for a variety of browsers and will fallback to a solid colour when gradients are not supported, you could replace this solid colour with an image.
background: #0A284B; /* for images use #0A284B url(image.jpg)*/
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1;
You will need to specify a height or zoom: 1 to apply hasLayout to the element for this to work in IE.

You're using a whole load of CSS features that aren't supported in older browsers -- gradients, alpha channel transparency, may border radius too.
Short answer is that often the best answer is simply to leave it and let the really old browsers show it differently; it may not look as pretty as you intended, but if it's usable in IE7 then you've probably done enough already.
If you really do need to support these features in IE7 and other old browsers then you might want to look into CSS3Pie, which provides a javascript-based fallback solution in IE for all of the features I can see you using here. Download the script and follow the instructions on the site for setting it up.
Hope that helps.

.ButtonB:hover, .ButtonB.hover {
background: url('yourpathtoimage'); /* for old browsers */
background: -moz-linear-gradient(
center top,
rgba(255, 255, 255, .2) 0%,
rgba(255, 255, 255, .1) 100%
);/* FF3.6 */
...
}
In this case if browser support linear-gradient it will override first line.

Related

CSS Border Image Gradient Not Working in Safari 10

I ran into an issue with Safari 10 and CSS border image gradients. It works in all other browsers, and even in Safari 9. It even shows up in Safari 10 in online simulators. Please see images below:
(I guess that's IE 11, not IE 10. Thanks for the correction!)
I assumed it was just my CSS so I really simplfied it and made a fiddle. You can see it at https://jsfiddle.net/tgbuxkee/
It's also generated below too.
div {
width: 200px;
height: 200px;
border: 6px solid transparent;
-moz-border-image: -moz-linear-gradient(top, #f0e2d0 0%, #c08b62 100%);
-webkit-border-image: -webkit-linear-gradient(top, #f0e2d0 0%, #c08b62 100%);
border-image: linear-gradient(to bottom, #f0e2d0 0%, #c08b62 100%);
-webkit-border-image-slice: 2;
border-image-slice: 2;
}
<div>
</div>
Does anybody have any idea why this could be happening? I know there is a bug with some image borders in Safari but I don't think that is the case here (maybe it is).
And guidance is helpful.
Thank you.
I have run into this issue in the past and remember reading somewhere on the web that avoiding the border-color: transparent setting would solve the problem. I don't remember where I read about it.
It seems like Safari 10 on Mac gives preference to the transparent border color over the border image and so displays nothing. Just setting the border-width and border-style alone would solve it. This solution works on other supported browsers also.
Tested on Chrome v56 (dev), Safari 10 (Mac), Safari 5 (Windows), Safari (iOS), IE11, Edge, Firefox 47.0.1, Opera 41.
Note: You've quoted IE10 in the question but as far as I know border-image doesn't work in it and so the given solution also doesn't.
div {
width: 200px;
height: 200px;
border-width: 6px;
border-style: solid;
-moz-border-image: -moz-linear-gradient(top, #f0e2d0 0%, #c08b62 100%);
-webkit-border-image: -webkit-linear-gradient(top, #f0e2d0 0%, #c08b62 100%);
border-image: linear-gradient(to bottom, #f0e2d0 0%, #c08b62 100%);
-webkit-border-image-slice: 2;
border-image-slice: 2;
}
<div>
</div>
The following may be helpful supplemental information. The accepted answer is still true for Safari 11 (as of posting), but for the record, I have also found that with, border-image:url, Safari(v11) will accept the shorthand border, with transparent, if you list the -webkit- vendor prefix last, like this:
div {
border:1px solid transparent;
border-image:url([some-border-image]) 1 0 1 repeat;
-webkit-border-image:url([some-border-image]) 1 0 1 repeat;
}
Since it is non-standard to list the vendor prefix last, I prefer the accepted answer as most web standards friendly.

How to make background-image with linear-gradient work on IE 11?

Any idea how I can make background-image with linear-gradient to work on IE 11?
The following code works fine on IE 10 but doesn't work on IE 11.
background-image: url(IMAGE), -ms-linear-gradient(top, #ffffff, #BEE38F);
I can make linear-gradient to work on IE 6-9, 11 using the following filter but background image is not displayed in this case.
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#BEE38F',GradientType=0 )
I'm open to an ideas.
Update: Here's the code I currently have.
background-image: url(IMAGE), -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#BEE38F));
background-image: url(IMAGE), -webkit-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), -moz-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), -ms-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), -o-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), linear-gradient(to bottom, #ffffff, #BEE38F);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#BEE38F',GradientType=0 );
linear-gradient() is supported unprefixed on IE10 RTM and later, including IE11. You never need the -ms- prefix — only the pre-release versions of IE10 required it and those versions don't even run anymore. You're just wasting space by including the prefix in your CSS.
Note that the directional syntax for linear-gradient() is different; what was originally top is now represented as to bottom instead (see this blog post, this question, and the spec for details):
background-image: url(IMAGE), linear-gradient(to bottom, #ffffff, #BEE38F);
Maddening, isn't it?
Prior to IE 11,
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cccccc');
For IE 11:
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);
That's right folks, we not only have to worry about supporting older IEs, apparently we'll now have to deal with NEWER IE quirks as well...
These are all super great solutions if you are overlaying a linear gradient directly on text. But if you want to display it overtop an image it doesn't work in IE.. don't ask me why but it doesn't.
I scowered many resources and finally came across this diddy
#media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.yourTargetClass:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
background-image: linear-gradient(-221deg, rgba(205,234,255,0.41), rgba(227,253,255,0.82)); /* THIS IS WHAT EVER OVERLAY COLOUR YOU WANT */ }
opacity:0.55;
}
}
I wrapped this within an IE selector for 10+. You need to include the opacity as that will help blend the gradient overlay with the content.
Hope this helps someone!
I noticed that for IE 11 the liniear-gradient works fine on itself. Unfortunately it doesn't work well as an overlay if you want to use a bacground image as well.
The only way that I was able to make it work for me was to switch to using rgba instead of hex colors and percentage. Also it only worked when I put the liniear-gradient first and not vice versa.
background-image:
linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)),
url('images/background.jpg');
I faced the same issue and in addition to doing the filter and linear-gradient, I also had to add the width in my CSS class, once I set the width, I could see my custom styles with background gradient.

Generate a saturation/brightness mask using gradients

I would like to know if it's possible to generate a mask of saturation+brightness that are used in color pickers for instance (something like http://johndyer.name/lab/colorpicker/refresh_web/colorpicker/images/map-hue.png) but using only linear-gradient in css3 ?
I tried severals things, such as :
background: linear-gradient(to right, hsla(0,100%,0,0) 0%, hsla(0,0%,0%,.5) 100%), /* saturation mask */
linear-gradient(to top, hsla(0,0%,0%,.5) 0%, hsla(0,0%,100%,.5) 100%), /* lightness mask */
but I can't make something like the picture, can't find the right combinaison, and because I don't fully understand, I don't know if it's possible.
Thanks
It is maybe the way you write it.
for the image, 1 gradient + a background-color will do.
you did not close correctly you rules , one value is still expected 100%) , /* li
:)
this could be it :
ele {
background:
linear-gradient(0deg, hsla(0,0%,0%,.5) 0%, hsla(0,0%,100%,.5) 100%) no-repeat left ,
white linear-gradient(180deg, hsla(0,0%,0%,.5) 0%, hsla(0,0%,100%,.5) 100%) no-repeat right;
background-size:95% 100%, 5% 100%;
}
http://codepen.io/anon/pen/ubDsr (gradient covers body)
You had your gradients reversed and some incorrect hsla values.
Just use hex notation, it's easier in this case:
background-image:
linear-gradient(to top, #000 0%, transparent 100%), /* lightness*/
linear-gradient(to right, #fff 0%, transparent 100%); /* saturation */
Here's a demo where you can compare the result with an image-based solution (normal = gradients, hover = Bootstrap Colorpicker).

CSS Gradients & Shadows on IE

I have been pulling my hair out trying to get the shadows to work on IE... They are working fine in chrome, safari, and firefox! Does someone have experience with this subject? I put the site up so you can see the full code and output.
Test Site
I am using lesscss, so maybe that is my issue? I hope not!!! I am also using the IE CSS3 Fix, ie-css3.htcThe code I am using is as follows... I was attempting to do this without the htc, but with no luck.. at least the htc got my background gradients to work in IE... before it was showing only blue-black, the default Microsoft background gradient colors.
predefine.less
.RUNgradient(#COLOR: #CLR1){
#CLRL:lighten(#COLOR, 10%);
#CLRD:darken(#COLOR, 10%);
background-color: #CLRL;
background-repeat:repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#CLRL), to(#CLRD));
background-image: -moz-linear-gradient(top, #CLRL, #CLRD);
background-image: -ms-linear-gradient(top, #CLRL, #CLRD);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #CLRL), color-stop(100%, #CLRD));
background-image: -webkit-linear-gradient(top, #CLRL, #CLRD);
background-image: -o-linear-gradient(top, #CLRL, #CLRD);
background-image: linear-gradient(top, #CLRL, #CLRD);
behavior: url(css/ie-css3.htc);
}
styles.less
div.wrapper{
width:500px;
margin:25px auto;
padding: 10px 25px;
text-align:center;
.RUNgradient;
.RUNshadow;
p{
font:24px #HEADERFONT;
color:#ffffff;
.RUNtextshadow;
}
}
Filters are the answer! Almost...
For the gradient,
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="#CLRL~", EndColorStr="#CLRD~")";
And for the shadows,
filter: ~"progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR~", Strength="#STR~")";
Only thing left is changing the direction in a way to have the shadow visible all around the element, not just to one side.
Solution
After researching Microsoft Filters, I figured out how to get a similar effect. The corners are a bit rough for my liking, but this is MUCH closer than before!
This is the shadow filer I used...
.RUNshadow(#BLURRING:10px){
#SCLR:#111111;
#DIR:225;
#DIR2:45;
#DIR3:135;
#DIR4:315;
#STR:4;
box-shadow: 0px 1px #BLURRING #111111;
-moz-box-shadow: 0px 1px #BLURRING #111111;
-webkit-box-shadow: 0px 1px #BLURRING #111111;
filter: ~"progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR2~", Strength="#STR~")
progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR~", Strength="#STR~")
progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR3~", Strength="#STR~")
progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR4~", Strength="#STR~")";
}
I have been pulling my hair out trying to get the shadows to work on IE... They are working fine in chrome, safari, and firefox! Does someone have experience with this subject?"
Yeah, that's normal. Most people don't bother. Remember to ask yourself, Do Websites Need To Look Exactly The Same In Every Browser?
If you really want this, you'll have to use the gradient filter for IE. Add the following style to your RUNgradient class:
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="#CLRL~", EndColorStr="#CLRD~")";
For both of them you can use IE filters.
You can use the gradient filter for gradients and the Shadow filter for shadows. The gradient filter works very well, the shadow filter looks really bad.
You can read in the documentation of the filters how to use them. But if you want to do it automatic you need see how CSS3 please is dealing with the filters and convert gradients to IE filter gradients.
You need to add these lines to the style tag for making this to work in IE,
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222'); /* IE6 & IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222')"; /* IE8 */
Sample code Snippet:
.ms-viewheadertr ms-vhltr
{
background: #222 ;/when gradients doesn't fill it fills the color/
background: -webkit-linear-gradient(#444, #222);/* For Safari 5.1 to 6.0 */
background: -moz-linear-gradient(#444, #222);/* For Firefox 3.6 to 15 */
background: -o-linear-gradient(#444, #222);/* For Opera 11.1 to 12.0 */
background: linear-gradient(#444, #222);/* Standard syntax */
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222'); /* IE6 & IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222')"; /* IE8 */
}

How to make a background with 45 degree lines with css?

Using CSS or CSS3, how can i make the folowing background ?
If possible, i'd like ie6,7,8 support. I can use a javascript based tool to simulate CSS3 for old browsers (like css3pie).
If possible, i'd like ie6,7,8 support.
Use a background image. Even if you could use pure CSS3 to create such a pattern for a background (I highly doubt that is possible), it's not worth the hassle to use a bunch of JavaScript libraries and such just to get it to work in those versions of IE.
I use this.
Then you just do background-image:url(blahblahblah.gif)
Any reason you're still supporting IE6? It would be easy to do without IE6 support. IE really sucks for gradient support, so you'll need to use an image, but here's the CSS anyway.
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
I know this probably doesn't match your image. I'm sorry, but your image host is blocked by my work, so you'll have to interpret from here. This will work with webkit browsers and FF3.6, and will fall back to the color specified in background-color for non-compliant browsers.
You have to use a repeating texture square. Find a small ping and use a repeating backround.

Resources