As shown in the images the radial gradient produces visual artefact, i'm using it as a mask to produce ios like effect.
background:-webkit-radial-gradient(transparent 0%,transparent 30%,white 32%);
background:-o-radial-gradient(transparent 0%,transparent 30%,white 32%);
background:radial-gradient(transparent 0%,transparent 30%,white 32%);
transparent does not work with ios, replaced with rgba(255, 255, 255, 0) and it worked fine
Related
I want to create a sharp gradient like the picture below with this format -webkit-gradient(linear, 120% -300%, -00% -350%, from(rgb(0, 0, 0)), to(rgba(0, 0, 0, 0))) But I am unable to achieve it.
I know there are lot of css generators available but they are creating css in this format. linear-gradient(167deg, rgba(149,58,141,1) 73%, rgba(149,58,141,0) 82%);
I am trying to achive this gradient. Thanks in advance.
There are many formats to define a color in css:
Hexadecimal colors: #FFF or #fff
RGB colors: rgb(255, 255, 255)
RGBA colors: rgba(255, 255, 255, 1)
HSL colors: hsl(0, 100%, 100%)
HSLA colors: hsl(0, 100%, 100%, 1)
Predefined/Cross-browser color names: white
But are there differences in performance between these different formats? For example, does the browser take longer to understand that it has to render white pixels for color rgb(255, 255, 255) than for color #FFF?
I know that there are already similar questions on SO such as these:
Are there any cons to using color names in place of color codes in CSS?
#FFFFFF or “white” in CSS?
Which is better, #fff or #FFF? [closed]
But none of them really provide an answer when it comes to performance on the browser side.
So could someone enlighten me on how browsers handle these different formats?
From what I read in the article I linked below using HEX code is better but not by much we are talking if you have 100,000 colors in your code then it will create 1ms difference between them.
but you can visit this link to get a more meaning full understanding of why is doesn't make that much of a difference
and to see if it really makes a difference run an audit on your website and see the performance difference for each and see which one is better if any.
Link to answer
I want to know which one uses CPU and RAM more efficiently?
using an image file and repeating:
background:url(../images/livebg/02a.jpg) repeat-x
or using CSS webkit background gradient:
background : -moz-linear-gradient(50% 100% 90deg,rgba(0, 111, 122, 1) 0%,rgba(0, 68, 75, 1) 100%);
background : -webkit-linear-gradient(90deg, rgba(0, 111, 122, 1) 0%, rgba(0, 68, 75, 1) 100%);
background : -webkit-gradient(linear,50% 100% ,50% 0% ,color-stop(0,rgba(0, 111, 122, 1) ),color-stop(1,rgba(0, 68, 75, 1) ));
background : -o-linear-gradient(90deg, rgba(0, 111, 122, 1) 0%, rgba(0, 68, 75, 1) 100%);
Image size is 1x40 pixel.
There is no real difference. Current browser engines all render the gradient internally as an image and then use that during actual page rendering. It's possible that a re-render is triggered when resizing the containing elements, but that's negligible.
The question reeks of premature micro-optimization. Page rendering speeds are rarely relevant, compared to the much larger overheads of network traffic and roundtrips. As such, it is definitely a better idea to use the CSS gradients, as it eliminates a roundtrip (although you should embed a 40 pixel image as a data-URL anyway for the exact same reason).
CSS gradient will not use your bandwidth but would use your CPU and ram more than background image.
And on the other hand, background image will use your majority bandwidth compared to gradients. So it is trade off.
I would suggest CSS gradients if you can work with that because if your image is a large chunk of data it could clog your application.
Optimal usage would be using CSS gradients and using image as fall back for unsupported browsers.
Both works fine. but its better to use gradients since images takes more time to load than gradients.
I was using Jquery UI themes that use repeated 1 pixel wide images that are repeated as backgrounds. A bit of CSS trickery and changed them all to gradients, the performance improvement was very noticeable.
Not sure about a wider image performance, however the gradients look far sharper and modern.
Because I find it challanging creating static image backgrounds, such as example below, that are responsive and covers different resolutions and heights/widths, I was thinking using CSS3 color gradients to reproduce the same background and make it streching dynamically.
I would appriciate any input on tools/tips&tricks/etc on how to recreate such background with CSS. I have looked at online tools for generating CSS rules, such as http://www.css3factory.com/linear-gradients, but these doesn't create sharp line between two colors such as in my example.
try to set 2 linear gradient on top of each others, first with rgba() color with opacity to a few % .(or hsla() )
and the second with 100% opacity. about like this :
background:
linear-gradient(
130deg ,
rgba(171, 17, 51, 1) 30%,
rgba(255, 51, 102, 0.75)
),
linear-gradient(
200deg ,
#AB1133 50%,
#FF3366 50%
)
;
DEMO tune it to your needs
I created <hr> tag and it's not showing properly in Internet Explorer. Here is it's CSS:
hr {
clear: both;
border: 0;
height: 1px;
background: transparent;
background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0));
}
And here is jsfiddle http://jsfiddle.net/NC6ya/. How can I fix it in IE so it looks as it's supossed to do?
Thanks.
You jsfiddle does in fact work perfectly fine in IE10. It doesn't work in IE9 or earlier because those versions of IE do not support CSS gradients.
There are a few solutions available to you:
Use a polyfill script such as CSS3Pie to add support for CSS gradients to older IE versions. As I say, CSS3Pie is probably the best script available for this as it works pretty much seamlessly and works in all IE versions from IE6 to IE9.
Use IE's proprietary -ms-filter style.
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')";
It's not pretty but it does the job (albeit with some known bugs). Note the above is just an example copied from elsewhere; you'll need to tweak it to your requirements. There are a number of gradient generator tools that will help you get the right syntax for IE. Try this one for example.
If you need to support IE7 or IE6, you'll need to specify both the filter and -ms-filter syntax variants. For just IE8 / IE9 support you only need the -ms-filter syntax.
Personally, I'd prefer the polyfill option above rather than the filter, because it's neater -- you're using standard CSS code -- and also because it avoids a couple of nasty little quirks in the filter style that are best avoided.
And of course, the final option is just to let old IE versions go without a gradient. Provide a suitable solid background for them as a fall-back, and forget about it. It's always nice to support old IE users where possible, but if it's not going to make a noticeable difference to the usability of the site, it's sometimes not worth the effort. This should be decided on a case-by-case basis; sometimes it's best to give support, other times it isn't. It's up to you to decide in you specific case.
Hope that helps.
Finally, one other thing I would suggest is to add another CSS line with an unprefixed version of the gradient style:
background-image: linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0));
If you're specifying prefixed styles, you should always also specify the equivalent unprefixed version as well, because once a browser supports the standard, they often remove support for the prefixed version, which means that if you haven't specified the standard, it can break your code in future versions. Not good.
I believe the issue is to do with the css properties that IE recognises. If you add the following to your css then you should see a gradient effect, albeit not the same as your example.
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 )
I found these articles which may be of use to
http://msdn.microsoft.com/en-us/library/ms532847.aspx
http://www.briangervais.com/blog/css-gradients-with-internet-explorer-ie6-10