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.
Related
I have a page with a black, starry background and the navbar has white text. The navbar stays at the top when you scroll, and the links of the navbar become almost invisible when they pass over other images on the page because the navbar is transparent. How can I invert the color of the text based on whatever is directly behind it?
You want to use mix-blend-mode: difference;, like here: https://jsfiddle.net/avdeoq97/
But it would be better to give your navbar a different background, like a dropshadow with a glass effect, so it can always be seen. The inverted colour alone might not be very accessible.
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.
Is is possible to create the design shown in the image using HTML and CSS? If so then what would I need to do?
The image is zoomed in so that's why it looks pixelated. The slanted lines are overlaying on top of a different elements with different backgrounds (white and blue). The lines also blend into the background at the end.
You'd probably want to use two different background images for the top and the bottom elements . Use http://www.stripegenerator.com for the basic striped background then use your image editor of choice to create the fade.
This might get you started in the right direction. It's possible but tedious:
DEMO
You can swap the colors easily. I couldn't get an opacity gradient for the diagonals, however.
See here to build the lines' CSS.
I have the image below - is it possible to fill it with a color (eg: the part in the triangle) using HTML/CSS?
Or can I create this shape with HTML/CSS and then fill it?
Or do I have to use a colored in image?
Would be preferable to use HTML/CSS completely or at least fill the image..
thx
If you leave the part that you want to fill transparant then you can fill it with a color using css. If you want to create the triangle without using an image you can use SVG but that is not supported in some versions of IE (8 and older) or you can use Raphael JS to draw it in pretty much all browsers.
HTML and CSS don't actually DO anything, they're just markup for how stuff should be presented. So no, you cannot edit an image using HTML and CSS only, though it is probably possible with JavaScript.
What you could do with HTML and CSS is to display an image with an alpha channel and set a background color on the element containing the image. The background color would then be displayed where the image is transparent.
you can... Make sure the triangle part of your png is transparent and the rest white... PLace your image in a div with the same width and height as your pic and give that div a background color. Voila... Everything is white except the transparent triangle.
Good luck.
<div style="width:66px;height:30px;background-color:green;">
<img src="yourimage" alt="" />
</div>
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;
}