Is it possible to fade the bottom of a background image to transparent? Would I specify background-image and linear-gradient to achieve this?
Thanks!
Not exactly in the way you describe, but you can consider some possibilities to reach the same effect:
Edit the image so that the transparency gradient is part of the image. If the gradient will always be the same and we are talking about a single image, you should do this
Instead of fading the image over the background, put the 'background' color over the image and set a linear gradient on that (in another div or 2nd background in the same container)
You can check out fading css clipping masks, see the Harry Potter example at https://css-tricks.com/clipping-masking-css/ but I am not sure about browser support.
It is also possible to create the fading clipping mask inside an SVG (so the SVG contains a link to the image file and has a clipping mask) I would guess this is more widely supported than the above option
Related
My web page contains with a background image and a tranparent card-panel on top of it. Is it possible to only darken the background image while keeping the brightness of the area under the transparent card panel the same?
depends on how the position and the shape of card you usually can. What I should do is:
-- create a pseudo element for the HTML element having the background image
-- stretch the pseudo element out to fit the whole area of the parent element
-- make sure that the pseudo element stay under the parent content (the card) in your case
-- Make the pseudo element look darker by adding a background to it, using linear-gradient.
By using linear-gradient, you can control which part of the background image look darker than the other part, the part which you don't want to look darker should have linear-gradient value as transparent. This technique will work fine most of the time for normal shape/position however, it has its own limit. I leave it for you to research how to use them.
In case you are not used to these terms and techniques, I put a few links below:
Pseudo element:
https://www.w3schools.com/css/css3_gradients.asp
Linear Gradient as background:
https://www.w3schools.com/css/css3_gradients.asp
is there a way to crop a background sprite?
We have our background image to the CSS body class. Now, if there is not an element with a white background overlaying the rest of the sprite, we have this mess of all the other images there.
I tried background-size, but that doesn't do it. So is there a CSS value that I'm missing that defines not just the background position, but also the actual area the image that should be used?
Thanks!
https://www.w3schools.com/css/css_image_sprites.asp - This article covers the use case senario and correct execution of how to use image sprites.
Okay, so the only way I could work out for this is to put the main body page background at the bottom of the sprite. Assign the correct background-position values and add a background-color: #fff, so the rest of the page becomes readable text.
Thanks for your input!
I have a div that contains a background image of size 64x64. I would like to give this div a circular shadow or radial background when the user hover's over the div with the mouse.
If I simply give the div a box shadow, the shadow is cast around in a square shape. If I make the div have a radius, then I will need to make my div bigger than 64x64 so that it doesn't crop?
Have a look at at the following example that illustrates what I am trying to describe:
http://jsfiddle.net/rNeaZ/2/
The 4th example (shown in link above) in particular doesn't suit what I am after because:
it's size is much larger than my 64x64 image
the image looks to have a circular border now, which is not what I want; I am after a circular shadow or background behind it
It will probably just be easier and more effective and more efficient to add a nice radial shadow to an image sprite and change the location of the background image on hover.
The simplest solution would be to add an appropriate background-color, but that would only work when you need an offset of 0 0, like your example.
The more general case would be to create a pseudo-element and apply the shadow and background color to that. I can describe this in more detail if the first idea doesn't apply to your case.
I added these icons http://grab.by/9HYW to my site and wanted to change the color on hover...what is the best solution?
The icons are in png format and would like to change on hover to their blue colors...thanks in advance.
You should generate new blue images with your editor (the one that you've created the first icons), then you use css hover.
You can use a css sprite (arguably the cleanest and most cross-browser comparable way) in which you basically have both the regular and hover state in one image and change the background-position of the div on hover. (xpixelz links should help you.)
If the images are actually printed on the page, you can use javascript to swipe the image with the hover state on hover.
I'm not sure how they are displayed on the page, but if they are on a solid colored background, you could make a png of the negative space and place it inside a div of the exact width and height of the image then just change the background color of the div on hover, since the actual logo is transparent you would see the background color of the parent div.
as you may opt for CSS sprites
http://css-tricks.com/css-sprites/
google for "css sprites generator" if you need a quick way ;)
If you are using flat png icons then you can use jFlat jquery plugin. Remember it only supports for HTML5 supported browsers
source : http://flaticon.sodhanalibrary.com/jFlat.html
In CSS, is there a standard way to colorize or apply a tint to a grayscale image?
I would like to create a grayscale image to show focus over an element, and allow the color of the focus to be configurable by colorizing the grayscale image.
Thanks
You could change the alpha and have a solid background color behind it.
If you use a gradient with alpha-channel you can use absolute-positioning and put it on-top of your image. If you can't make a gradient with an alpha-channel then you can adjust the opacity of the overlay using CSS, but the effect isn't as good.
I used this for an mouseover area-selection for a map and it worked quite well.