Like this. in general i will make 1 px wide image of this then will repeat-x.
but is it possible to make same type of background with CSS3 , if yes then tell me how tp make same of this.
alt text http://shup.com/Shup/367066/110519102044-My-Desktop.png
with all browser compatibility IE 8, 7, 6 , FF , Chrome, Safari, iphone.
Pretty much all of the browsers support gradients. Here's the CSS you need:
.gradient{
/* For any browser that can't create a gradient */
background-color: #EFEFEF;
/*//mozilla*/
background: -moz-linear-gradient(top, #efefef, #FFF);
/* Chrome/Safari */
background: -webkit-gradient(linear, left top, left bottom, from(#EFEFEF), to(#FFF));
/*IE 6/7 */ filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#EFEFEF',EndColorStr='#FFF');
/*IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#EFEFEF, endColorstr=#FFF)";
}
Try some of the CSS gradient generators that you can find with a Google search, such as:
http://gradients.glrzad.com/
or
http://www.designdetector.com/demos/css-gradients-demo-1.php
Also, take a look at Webkit's gradient tutorial:
http://webkit.org/blog/175/introducing-css-gradients/
And Firefox:
http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
Now - that in mind:
This is new stuff -- CSS3, which isn't finalized yet. Browser support for CSS3 stuff is very cutting edge. You're not going to get cross browser support for the browsers you've listed. Latest Webkit (Safari, Google Chrome) and Firefox are your best bets. IE supports filters. Opera doesn't support any kind of gradients though.
I think IE 6 and 7 may not support CSS3 gradient.
Even though, you can get the CSS code from this site
http://gradients.glrzad.com/
Related
I'm trying to make some polygon, rotate animation effect and gradient on fonts. Chrome and Firefox works fine but internet explorer 11 not working properly. I'm Working on SASS.
I've done some research tried some example but non of that worked.
I've having certain issue on IE/11.
Prospective property (Included prefix /
not working)
clip-path: polygon not working
linear-gradient not working on font
display: inline-block;
background-image: linear-gradient(to right top, #bd74c2, #69306D);
-webkit-background-clip: text;
-ms-background-clip: text;
Here is my code JSFiddle
In my research it says some of this property will work on IE10+ but im having issue on IE11. Is there another way to work on these property's.
The problem on IE11 is that -ms-background-clip: text wont work.
More info can be found on the caniuse website:
Firefox, Chrome and Safari support the unofficial
-webkit-background-clip: text (only with prefix)
Ref: https://caniuse.com/#search=background-clip
Your options on IE11 would be for your font to fall back to a flat colour (graceful degradation), Using an svg instead as DayOne suggested or to replace the text with an image on that browser (seriously old-school)
I'm nearly done with my website, but now I'm checking browsers compatibility and have some problems with Safari. I resolved some of them, but this can't.
I'm using this code to add background for my textarea
background-image:
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#126d82 .1em, transparent .1em);
background-image: -webkit-linear-gradient(90deg, transparent 79px, #126d82 79px, #126d82 81px, transparent 81px),
-webkit-linear-gradient(#126d82 .1em, transparent .1em);
background-size: 100% 2em;
background-position: 30px 31px;
This all works as I expected in all browsers except Safari. I tried something with -webkit-linear-gradient but doesn't help.
What can I do to make this work?
Thank you.
This is link to my website so you can see difference http://motiongiraffx.com/
Safari 5.1.7 is quite old. (Current version is 8.0.7.) I'm not sure how Safari versions sync up with WebKit versions, but original Safari support used a different syntax for linear-gradient:
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
MDN has more information.
Well, 5.1.7. is an older version of safari and that's why it doesn't work (see caniuse.com).
The best way when working with linear-gradient is to use some online generator, like colorzilla, which does all the work for you and keeps in mind for older browsers.
See the apple documentation:
Note: Recent drafts of the W3C proposal have simplified the syntax. This chapter describes the most recent implementation shipping in Safari. You should expect Safari’s syntax for gradients to continue to change as the W3C standard evolves. While new syntax is expected, the existing syntax—and prior syntax—should still work.
The -webkit-linear-gradient and webkit-radial-gradient properties require iOS 5.0 or later, or Safari 5.1 or later on the desktop. If you need to support earlier releases of iOS or Safari, see Prior Syntax (-webkit-gradient).
Try:
background-image: linear-gradient(to bottom, #color1, #color2);
Try removing -linear from both instances of -webkit-linear-gradient. With that change, I got the 'notebook' effect in both Safari and Chrome.
In order to reduce all the vendor prefixes (and make life easier in general) you can get going with SASS and Bourbon. Once you use some of the includes available, the vendor prefixing occurs automatically, and helps with a lot of these browser-specific issues.
For example:
#include background(linear-gradient(red, green) left repeat);
I've been looking for a solution to background gradients that work in modern browsers and versions of IE down to 7. If someone has a best practice that works, I would appreciate the method as I keep running into solutions that break on a certain browser or version. It should atleast work in IE7-9, Firefox, Safari, Opera, and Chrome.
This is a quite complete gradient generator
colorzilla
Anyway for now there isn't a clear standard in css. We hope it will arrive asap !
If you would like to see some gradient even in Explorer 6-8 using a CSS3-like approach (for ex. linear-gradient(#EEFF99, #66EE33), and without using Explorer proprietary filter) you can try Css PIE. I used it extensively, it's an amazing piece of software based on HTML Component (.htc), expecially good for buttons, but in my experience has some problem when your page rely on many ajax effects, particularly if you redim the size of the frame/page, because not always the buttons/gradients are updated. (anyway CSS Pie is used even in important sites)
Css PIE
Use this tool to generate your gradient
Old browsers (< IE7) don't have support to css gradient properties. You can use css3 to make gradient backgrounds and then set a solid color to old browsers.
No ie7, but this is a good start
background: -moz-linear-gradient(-45deg, rgba(150,150,150,0.2) 1%, rgba(80,80,50,0.5) 52%, rgba(20,20,20,0.8) 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(1%,rgba(150,150,150,0.2)), color-stop(52%,rgba(80,80,50,0.5)), color-stop(100%,rgba(20,20,20,0.8)));
background: -webkit-linear-gradient(-45deg, rgba(150,150,150,0.2) 1%,rgba(80,80,50,0.5) 52%, rgba(20,20,20,0.8) 100%);
background: -o-linear-gradient(-45deg, rgba(150,150,150,0.2) 1%,rgba(80,80,50,0.5) 52%, rgba(20,20,20,0.8) 100%);
background: -ms-linear-gradient(-45deg, rgba(150,150,150,0.2) 1%,rgba(80,80,50,0.5) 52%, rgba(20,20,20,0.8) 100%);
background: linear-gradient(-45deg, rgba(150,150,150,0.2) 1%,rgba(80,80,50,0.5) 52%, rgba(20,20,20,0.8) 100%);
/* FF3.6+ */
/* Chrome,Safari4+ */
/* Chrome10+,Safari5.1+ */
/* Opera 11.10+ */
/* IE10+ */
/* W3C */
As other have said, CSS3 is compatible with FF, Chrome etc.
For IE9, you can use their official CSS Gradient Background Maker, which will generate an inline SVG image, supported also by most of modern browsers (although it give some issues on Safari).
For IE8, you can use
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#000000, GradientType=1);
Reference
For IE 5.5 - 7:
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FFFFFF, endColorStr=#FFFFFF, GradientType=1);
Reference
startColorStr and endColorStr are pretty self-explanatory. GradientType is 1 for horizontal and 0 for vertical. There's no such thing as radial nor diagonal gradients before IE9.
I strongly suggest you not to use an htc solutions (like css3pie) as they give a lot of side effects.
It's not really easy to implement, but if you need a polyfill there's cssSandpaper.
My answer is not related to HTML or CSS. This is a another way that if you know basics of creating gradient images using MS Paint or GIMP then this technique will work for all type of browsers.
I would like to know how to make rounded border in IE8. I'm using
-moz-border-radius:4px;
-webkit-border-radius:4px;
for mozilla and safari.
There's a jQuery plugin for that. http://jquery.malsup.com/corner/
Download https://code.google.com/p/curved-corner/ and include in your project. Then use the following css to have rounded corner.
For example:
.somediv{
-webkit-border-radius:4px; /* older webkit based browsers */
-khtml-border-radius:4px; /* older khtml based browsers */
-moz-border-radius:4px; /* older firefox */
border-radius:4px; /* standard */
behavior: url(border-radius.htc); /* IE 6-8 */
}
The url to the file is relative to the HTML file which loads the CSS. So this is different to background: url(...) behavior which is relative to the CSS file. More details here
You can't. IE doesn''t handle modern standards and practices and, specifically, no such CSS property exists in IE8.
In IE9 you can use border-radius.
For the older IE versions, there are javascript libraries that will do it for you. You can't do it purely with CSS. At the very least you will need background images.
You can use CSS3 PIE for this. It's easy to implement. Just download it here: http://css3pie.com/download/ and extract its contents.
Then, on your stylesheet, just put behavior:url(css3pie/PIE.htc); along with the css codes of each element that uses border-radius.
For example:
.samplediv{
behavior:url(css3pie/PIE.htc);
-webkit-border-radius:10px;
-khtml-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
Here's my rule:
#element {
background: -moz-linear-gradient(center top, #FFF 8px, #F2F2F2 24px, #F2F2F2 100%) repeat scroll 0 0 #F2F2F2;
}
I want to take that rule and apply it to all of the browsers that support a linear gradient. What would this rule's syntax look like for Chrome, Safari, and ... Internet Explorer?
I'm considering making a super simple web app that will take a CSS file with Mozilla rules and kick out the other browser's implementations of the rules as well.
Here are the gradients as requested...
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
This site do the trick : http://www.colorzilla.com/gradient-editor/
Choose "Import from css" from the "CSS" zone and paste your code !!!
You can try with something like "background: -moz-linear-gradient(center top, rgb(216,54,33), rgb(112,5,7));" for exemple.
Be carefull : code must be formated a certain way... if there is space after comma (", ") for exemple this do not work...
It's not too hard... But this website (css-tricks.com) can explain it much better than I can.
What you're looking for is already available here: CSS3 Gradient Generator - that works for Mozilla and Webkit-based (Safari/Chrome) browsers.
As for IE, MSDN should help you.
I usually use something along the lines of
// Firefox
background: -moz-linear-gradient
// Chrome & Safari
background: -webkit-gradient
background: -webkit-linear-gradient
// Opera
background: -o-linear-gradient
// IE
background: -ms-linear-gradient
It's probably as crossbrowser solution as you're going to get - but then again CSS is not my forte.