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
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.
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
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.
I have a Tumblr blog, and I'm using the Effector theme. I like it, but unfortunately it colors the backgrounds of all partially transparent images black. Is there any way I can edit the theme's HTML so that it makes transparent backgrounds white? I looked through the code already, but I think I need someone more familiar with HTML to give me advice.
Thanks!
Looking up the tree from the element, you only need to make one change for it to be white, and that’s in the .photo-panel rule:
background: none repeat scroll 0% 0% rgb(0, 0, 0);
Change rgb(0, 0, 0) to transparent, or just remove that rule entirely.
(For full transparency, also remove the background rule on .post .post-panel, and probably its box-shadow too.)