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.
Related
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
Edit explaining why this isn't duplicated:As I said in the comment, it's not exactly duplicated because the answer there isn't the solution here. Here I started explaining how I got it as (1, 1, 1) and wanted it to be (0, 0, 0), while there they didn't went has far precise and got it only to (2, 2, 2). You could say the question is the same one but I think mine is better explained and I needed a good answer for the information that I provided.
By default, the background color of the text selection is blue with some opacity.
I tried to make it full black by using ::selection and testing the alpha value of rgba() but the closest I only got was rgb(1, 1, 1). Is it possible to get rgb(0, 0, 0)? Here's the code:
::selection {
background-color: rgba(0, 0, 0, 0.996093750000000055511151231257827021181583404);
color: #fff;
}
textarea {
border: 1px solid #000;
outline: 0;
resize: none;
}
<textarea autofocus onfocus="this.select()" spellcheck="false">Text.</textarea>
If I change it to 0.996093750000000055511151231257827021181583405 I get rgb(51, 51, 51) for some strange reason. Where do these randoms numbers come from anyway? I'm using Google Chrome.
[..] I get rgb(51, 51, 51) for some strange reason.[..]
A little trivia:
This pseudo-element ::selection was in the drafts of CSS Selectors Level 3, but was removed during the Candidate Recommendation phase.
See here: https://www.w3.org/TR/selectors/#selection
However, it was added again in Pseudo-Elements Level 4.
See here: https://drafts.csswg.org/css-pseudo-4/#highlight-selectors
I tried to dig up the old refs, like this one: https://www.w3.org/TR/2001/CR-css3-selectors-20011113/#UIfragments; but I couldn't find the problem you are facing.
Reason:
I draw upon the Level-4 specs, which says this:
For non-replaced content, the UA must honor the color and
background-color (including their alpha channels) as specified.
However, for replaced content, the UA should create a semi-transparent
wash to coat the content so that it can show through the selection.
This wash should be of the specified background-color if that is not
transparent, else of the specified color; however the UA may adjust
the alpha channel if it is opaque
So, what you are seeing is actually the wash that is being implemented by the UA.
That explains the behaviour on replaced content like that of textareas and inputs. However, although the specs say that for non-replaced content, the UA must honor the colors (with alpha channels); it seems the browsers have not yet completely implemented the spec (i.e. level-4 so to speak). They anyway aren't bound to. Heck they haven't agreed on complete level-3 compliance.
And, ::selection is anyway deprecated in level-3! So, this is the closest to the reason you can get. Live with it.
I found the formula/reason to why it's impossible the way I'm trying.
That "random number" is 1 - (1 / 256) which in another words means, it doesn't let me have opaque, it has to have the minimum of opacity that does change the original color without it, which makes the rgb(1, 1, 1) never get to rgb(0, 0, 0) no matter how many decimal numbers I find.
So unless there's another technique of changing the color of the text selection that I'm not aware of, it's impossible to obtain full actuall opaque black, only black with the minimum opacity/transparency which nobody can see the diference at human eye but still, it will always be rgba(1, 1, 1). :c
The other advanced, complex and unecessary way is to use hacks/tricks/workarounds with a lot of fake visual effects and probably JavaScript which is totally not worth the ammount of work.
Resuming: Alpha with the value 1 is opaque, all the values between 1 and 1 - (1/256) still are too but I can't use those values as it apparently doesn't allow me to use opaque so I can only use between 0 and 1 - (1/256). I'm not sure which if the exact result of 1 - (1/256) is opaque or not.
So the best way is to use background-color: rgba(0, 0, 0, calc(1 - 1 / 256));.
Provide the color codes in Hex format.
So, your ::selection becomes:
::selection {
background-color: #000;
color: #fff;
}
I want such background blending effect like in screenshot attached.
I have already used rgba backgrounds but that does not looks like my designs.
Here is the image and code I used.
I tried using different background image and css3 elements but its not working properly.
Is this possible to this using any jquery?
.green_band {background: rgba(24, 95, 14, 0.5);}
No, at this time (summer 2014) you can only fake that using alpha transparency (e.g. using rgba).
The CSS blend modes will come, but “it is an upcoming technology, and, at the time of this writing, browser support is patchy”.
See “Getting to know CSS Blend Modes” for an introduction and the browser support tables for background-blend-mode.
Using the upcoming CSS blend-mode properties:
background-color: rgb(24, 95, 14);
background-blend-mode: multiply;
Here is the W3C Editor’s Draft: Compositing and Blending Level 1
I'm not sure there's a way to use blending modes outside of Photoshop unless you want to write WebGL shaders.
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 am working on a project where the button needs to have a certain style such as the one posted on the blog below:
http://joeygallegos.tumblr.com/
The button is visible only in Chrome, Safari, Android and iPhone/iPod touch. And I would like to make it available in cross-browser format. I am good at hand writing CSS, but I am not quite able to understand cross-browser gradients. If somebody could please help me to better grasp it that would be much appreciated. Bellow is the snippet I used to make the gradient:
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #8fc2e8), color-stop(0.5, #54a1d9), color-stop(0.5, #126aa9), color-stop(1, #2ddef2));
If possible I would like it to be like Google's markup with the attributes such as -webkit, -moz, -ms, -o, linear:
background-image: -webkit-gradient(linear,left top,left bottom,from(
#4D90FE),to(#357AE8));
background-image: -webkit-linear-gradient(top,#4D90FE,#357AE8);
background-image: -moz-linear-gradient(top,#4D90FE,#357AE8);
background-image: -ms-linear-gradient(top,#4D90FE,#357AE8);
background-image: -o-linear-gradient(top,#4D90FE,#357AE8);
background-image: linear-gradient(top,#4D90FE,#357AE8);
If it is possible that you could list it in the same colors as the ones listed above it would be a tremendous help. Thank you!!
The first version of gradient support was made available in webkit browsers in the following form:
-webkit-gradient( linear, x y, x y, from( color ), [color-stops...,] to( color ) )
Which is where you use:
background: -webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#357AE8));
But then the web decided that was too complex and simplified it to this (which is what most browsers use now):
-prefix-linear-gradient( direction|angle, color-stops... )
Which is where you use:
background-image: -webkit-linear-gradient(top,#4D90FE,#357AE8);
background-image: -moz-linear-gradient(top,#4D90FE,#357AE8);
background-image: -ms-linear-gradient(top,#4D90FE,#357AE8);
background-image: -o-linear-gradient(top,#4D90FE,#357AE8);
background-image: linear-gradient(top,#4D90FE,#357AE8);
IE feels it needs to be different, so it uses filters and has not upgraded to this new better way of expressing gradients until IE10. So, what you have is fine. If you want IE7-IE9 support, use this too:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4d90fe",endColorstr="#357ae8");
There are many tools out there too to help you make gradients and generate the cross-browser code for you (Google is yo friend). Colorzilla has a good one.
As well as defining the different background images, you should define a plain background-color for browsers that don't support any kind of gradient.
The only one you appear to be missing is the one for older IE, where you use filter to produce a gradient.