I want to have a box with two colors with silver on top and it should slowly fade into white, just as Apple's homepage background. How do i do that?
Thanks as always.
If you want to use CSS3 here's a great example: http://css-tricks.com/examples/CSS3Gradient/
W/o CSS3, you have to make do with an image repeated horizontally (x-repeat), similar to what tvanfosson said.
you are looking for gradient background?
http://www.tizag.com/cssT/background.php
look for "css gradient background"
there are more articles if you google: gradient background css
The basic idea is to use a background image that does the gradient for you. You sent the background color of the page to the "end" color of the gradient, then apply your gradient background image using CSS with a repeat in the opposite direction that you want the gradient to flow. So if you want a 100-pixel, silver to white, gradient from top to bottom you'd create a 100Hx1W pixel image that spans your colors from top to bottom. Set the background color to white and apply the background image repeating across the x axis. You can easily create the gradient using the gradient tool in Photoshop or GIMP.
#body
{
background: #ffffff url(/images/bg.jpg) repeat-x;
}
Related
I was looking at the Nike website and I cannot understand how the inverted scroll effect is achieved with css.
When scrolling on this website - https://www.swoosh.nike/ - you can see the join and the svg logo become inverted based on the background color, here's a picture of the effect to incase the website changes for future reference:
How do they achieve this effect. I can't see any css that tells the colors in the svg or button to become inverted on background color.
The entire Header-Element has
mix-blend-mode: difference;
set in CSS.
I am not sure how to change the background of an image tag in css. For example, I have a darker background in my webpage. Let's say I include an image of a purple X with a white background. How would I change the background of that purple X image to be the same color as my body.
You could add mix-blend-mode: multiply; to your <img>'s css. It will render the white 'transparent' but it'll also alter the other colors in the image.
Best solution would probably be to use transparent PNGs.
I want to create a background with grain effect and using radial gradient. Is that possible to do with css "background" property only? Can you please help me with it? It should look something like that, just without the picture on the right, thanks! (cant post pics here, because I need more reputation points)
You can use the background-image radial gradient property.
For example
{
background-image: radial-gradient(red, green, blue)
}
How can I change the white color to the red, but only white should be changed, the rest should be what they are.
Using only CSS
CSS can't be used to dynamically edit certain pixels of an image, as far as I know.
Alternative solutions:
You could overlay another element over top of the image with a partially transparent red background to sort of "paint" the image red, but this wouldn't achieve exactly what you're asking for.
You could have another image to switch it to that has the red background. You'd switch the image likely by doing something like background-image: url(https://new_image_here)
You can use JavaScript or similar to modify the image or provide a fancier solution...
I have a page with a large background image. The menu and main content portions are 900px and centered. Rather than just fill the menu background with a color, I'd like to simply blur the background image. I'd also like the blurred part to move appropriately when the page is resized so I can't just blur a section of the background. How is the best way to achieve this? I tried putting a semi-transparent .png as the background to my menu div but that didn't work, I didn't see any effect. Does anyone know how to do this? Thanks.
The site that inspired the question is this one: http://www.bluespooncoffee.com
http://jsfiddle.net/MAbpx/
background: rgba(255,255,255,0.5);
This makes the background of something semi transparent because the last value is the alpha (transparency value). Adjust as needed.