On a valid background, I need to add transparent holes/images that shows body background.
Like this websites;
skrill.com
skrillex.com
I can add it as a image but I should resize it according to resolution. Also I'll add some descriptions under this images.
Is there any way to do this?
There are three ways to achieve this effect:
Make the solid background a SVG or PNG, with holes cut through to show the underlying background.
Make the transparent images replicate the background.
Implement the background with <canvas> and use JS to achieve this effect by dynamically redrawing the background.
The sites you linked are using one of these approaches.
Related
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 lot of png-images, and now I want to change their color. I could open all these images in photoshop and add a Layer style - Color Overlay.
For example:
http://www.iconfinder.com/icondetails/103303/128/arrow_right_sans_icon
Change the black color to gray.
But is there an easy way to do this with HTML5/CSS3?
It's possible with just CSS but has so major limitations it's far from a perfect solution.
HTML
<img src="http://cdn2.iconfinder.com/data/icons/picol-vector/32/arrow_sans_right-128.png"/>
CSS
img {
-webkit-mask-image:-webkit-linear-gradient(top, rgba(0, 0, 0,.4), rgba(0, 0, 0,.4));
}
The limitations being
Webkit only
Can only change black to something more transparent, i.e. grey. Colour masks are not possible.
See demo - Tested in Chrome 26.
(A bit late)
If you know the background will remain the same color throughout the entire website and you don't mind messing around a bit in Photoshop, you could of course fill the transparent part with your background color and cut out the icon to make that part transparent.
That way you can place a background color behind it and make it whatever color you want...
HTML
<img src="transparencyswitch.png" height="20" width="20"/>
CSS
img {
background-color: grey;
}
I recommend converting your PNG into a SVG. I had the same problem, till I did that. From there, you only have to change the fill color (which can also be dynamic for, for example, wordpress)
A way of doing this is to put the image in a div and put a div above that with opacity so you still can see the image a little bit but it has the color of the overlaying div.
Other ways aren't possible with html5/css3.
examples: here
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.
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>
Is it possible to repeat-x and repeat-y just a specific portion of an image sprite? I can obviously separate the image into different files, but I was hoping there's a more efficient way of doing it.
Not for background - CSS3 provdes this for borders. You can combine a tiled background with a sliced border to achieve the desired effect.
(Browser support is not complete, though)