I am developing an Application with jQuery Mobile and Phonegap. I want to have a color gradient from #3c3c3c (grey) to #000000 (black) in the background but when I use this code
background: -webkit-linear-gradient(top, #3c3c3c, #000000);
you can see just a few big bars with different grey shades. So there is no linear gradient. Also you are able to see some green and some violet bars.
- Sorry as a new user I am not able to insert a Screenshot -
I also tried to instead insert a background image which shows a color gradient but this also looks as described above (we have also tried to maximize the color-depth of the picture but this also did not change the result).
Is it possible that the device is not able to display enough colors for a linear gradient?
Is there another possibility for creating a linear gradient?
Any help is greatly appreciated!
I am testing with
Galaxy Tab GT-P1000
Firmware-Version 2.2
To cover all your bases:
background-image: -webkit-gradient(linear, left top, left bottom, from( #3c3c3c), to( #000000)) !important; /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(#3c3c3c, #000000) !important; /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(#3c3c3c, #000000) !important; /* FF3.6 */
background-image: -ms-linear-gradient(#3c3c3c, #000000) !important; /* IE10 */
background-image: -o-linear-gradient(#3c3c3c, #000000) !important; /* Opera 11.10+ */
background-image: linear-gradient(#3c3c3c, #000000) !important;
Drop the !important if you don't need it, I use it to override some default jQM styles that's why and make sure you have background-clip: border-box; (which is default)
May be you have to write like this:
background: -webkit-linear-gradient(top, #3c3c3c 0%, #000000 100%);
Related
Im trying to do a gradiente with css but Im not having sucess.
I have a purple logo at center of my header, and I like to see purple with white, but I dont want my whole header white.
So Im trying to have my header blue, and at center where I have my logo I want a gradient that allows me to have whiter center so I can put my logo there.
I want something like this:
Blue and at center where I want to put my logo I want to have something like white background.
Im trying to do this effect but Im not having the result that Im looking for.
You can see here what Im getting: http://jsfiddle.net/BA9Ry/2/
My html:
<header id="top">
<span id="logo">
<img src="http://i62.tinypic.com/11ls8li.png" />
</span>
</header>
css:
*
{
margin:0;
padding:0;
border:0;
outline:none;
}
#top
{
width:800;
height:auto;
margin:0 auto 0 auto;
background:#7088A8;
background: -webkit-gradient(linear, left center, right center, from(#7088A8), to(#fff));
}
#logo img {
width:200px;
height:100px;
display:block;
margin:0 auto;
}
Use this syntax:
background: -webkit-radial-gradient(#FFF, #7088A8);
this is the line you need
background: -webkit-radial-gradient(#ff, #7088a8);
Expanding on Miljan Puzović's comment answer, you'll need to use radial-gradient instead of gradient(linear, ...).
As you can see from the JSFiddle he provided, there are several different prefixes given to each radial-gradient. If for whatever reason you don't need to support older browsers, you can drop all of them except for -webkit-radial-gradient() and radial-gradient(). For IE 9 and below support, you'll need to user Microsoft's proprietary filter: progid:DXImageTransform.Microsoft.gradient().
Calling background: before all the radial-gradients will give old browsers a single colour background to use if they don't support radial backgrounds.
CSS from the JSFiddle:
#top {
background: #c5e0f4; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #c5e0f4 0%, #60abf8 78%, #6b98c4 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#c5e0f4), color-stop(78%,#60abf8), color-stop(100%,#6b98c4)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #c5e0f4 0%,#60abf8 78%,#6b98c4 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #c5e0f4 0%,#60abf8 78%,#6b98c4 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #c5e0f4 0%,#60abf8 78%,#6b98c4 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #c5e0f4 0%,#60abf8 78%,#6b98c4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5e0f4', endColorstr='#6b98c4',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
Browser Support:
You can read more on the support of browsers here. As you can see -webkit-radial-gradient is still required for most iOS/Android browsers.
Full Syntax:
You can see more about the full syntax of radial-background on Mozilla's Developer Network Website.
I'm hoping to achieve a cross browser gradient, if you inspect the anchor at the top right corner running inline with the branding of my mobile site it has been styled with the prefix moz for Firefox:
www.test-bed.co.uk/mobile/
background: -moz-linear-gradient(center top , #4A4A4A, #2C2C2C) repeat scroll 0 0 transparent;
May I ask is there is a similar way to achieve a cross browser gradient solution with the IE, Opera and webkit prefixes?
An online tool that automates CSS gradient rule generation for all modern browsers: little link.
But generically, here's the main syntax:
background: #color; /*fallback*/
background: -moz-linear-gradient(...);/*Firefox*/
background: -webkit-gradient(...);/*Chrome + Safari*/
background: -webkit-linear-gradient(...);/*Another Chrome + Safari*/
background: -o-linear-gradient(...); /*Opera*/
background: -ms-linear-gradient(...); /*IE10+*/
background: linear-gradient(...); /*W3C standards*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#color', endColorstr='#color',GradientType=0); /*IE6-9*/
Take a look at CSS3 Please. I personally like their indentation style.
.box-gradient {
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Safari 5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6-15 */
background-image: -o-linear-gradient(top, #444444, #999999); /* Opera 11.10-12.00 */
background-image: linear-gradient(to bottom, #444444, #999999); /* Firefox 16+, IE10, Opera 12.50+ */
}
As you can see, there is no -ms- prefix needed since IE10 supports the W3C syntax right away. Please make sure that you use the correct W3C syntax for linear-gradient()!
If you are using firefox as a browser. then you may want to use the addon called colorzilla. It is a nice tool that comes with options like Color picker, Eye Dropper, Pallette browser, CSS gradient generator, web page DOM code Analyzer , inspect Last element as well as zoom.
However you can generator css gradient'sat the folllowing link:
http://www.colorzilla.com/gradient-editor/
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 */
}
I have a multistop gradient created with colorzilla that I have successfully gotten to work as the background of my website. It works perfectly for firefox, chrome, and IE9. For IE7 and below, it only shows a white background, which is acceptible but not preferable, and to be frank, going back 2 generations, I am not worried about it. However, IE8 only shows a gradient from the first color to the last color, no stops in the middle, which would normally get rid of the middle color, which was white in my case. For the purposes of making it somewhat better, I changed it so the white would be the last color of that gradient, but it is by no means a perfect suggestion.
The solution, to me, appears to be converting my already created multistop gradient from the css code it is in into an image that I can repeat endlessly as necessary, as was traditionally done before the modern era of css gradients. However, I have been unable to find any sort of tool or code that would allow me to do this for a given height and width. Does anyone know of any tool, preferably free, that would satisfy these needs? For the purpose of this question, the gradient code I am using is the following:
background: #72b4f9; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcyYjRmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ1JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk2JSIgc3RvcC1jb2xvcj0iIzU3YzE0ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzOTc3MzEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #72b4f9 0%, #ffffff 25%, #ffffff 45%, #57c14f 96%, #397731 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#72b4f9), color-stop(25%,#ffffff), color-stop(45%,#ffffff), color-stop(96%,#57c14f), color-stop(100%,#397731)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #72b4f9 0%,#ffffff 25%,#ffffff 45%,#57c14f 96%,#397731 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #72b4f9 0%,#ffffff 25%,#ffffff 45%,#57c14f 96%,#397731 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #72b4f9 0%,#ffffff 25%,#ffffff 45%,#57c14f 96%,#397731 100%); /* IE10+ */
background: linear-gradient(top, #72b4f9 0%,#ffffff 25%,#ffffff 45%,#57c14f 96%,#397731 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A2CEFB', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
You may want to try CSS3Pie http://css3pie.com it is a quick/free solution for IE7/IE8
Or create a SVG image using the Gradient Background Maker
http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html
Then find a way to import to photoshop
Photoshop always works for me. Im sure you could use GIMP though. A gradient dialog in any image program generally has the same sliders and attributes thet the css generator you used would. You should be bale to create a file at the canvas size you want then essentially use the gradient tool's dialog to set the same settings. For more on that ask on SuperUser or on a forum for users of the app you go with.
Im not aware of an app that will convert the css to an image.
I ended up finding a website that did essentially what I wanted at http://gradcolor.com/. I was able to create multiple gradients at a specific size, and the website created the file for me to download and upload to the website. Thank you everyone for your suggestions, as they led to me finding this.
I have some link buttons that I'm using CSS3 gradient code that I generated from Ultimate CSS Gradient Generator. It is working great except for IE7-9 (not worrying about IE6). Instead of the nice mid-gray to dark gray it is showing a blue to black gradient. The code being used is:
background: #666666; /* Old browsers */
background: -moz-linear-gradient(top, #666666 0%, #141414 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(100%,#141414)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #666666 0%,#141414 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #666666 0%,#141414 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #666666 0%,#141414 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#141414',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #666666 0%,#141414 100%); /* W3C */
To see what it is rendering like: http://bradmccullough.com.w.jaijaz.co.nz/
I have noticed that altering the display css element changes it but can't put my finger on what exactly is going on.
Thanks.
It is because you are using the shorthand color for gray in your CSS. Make sure you use #666666. Looking at the source of the stylesheet, for the IE filter, you're using #666 (although in your post above you have it right).
We had a similar problem recently. We identified that running CSS minify on the CSS files would shorten '#666666' to '#666', resulting in IE8 not being able to render the correct colour value within the 'filter' property. The only alternative was to define the colour as 'white' (our problem was with '#ffffff') or tweaking the colour slightly, i.e. '#fffffe' to prevent it from being written in shorthand.