My web site has navigation, presented as a list of rectengular buttons with round corners.
Each button should have it's own custom background, which is a photo. Photo is bigger than button and should move in response to mouse movement over this button. We have an effect, like we are looking through the window.
Navigation has following HTML structure: "ul > li > a > img".
I think, each "ul > li" should be a rectangle with round corner and acting as clipping mask for image.
Setting "overflow: hidden;" does't works, because clipping area is simple rectangle without round corners.
CSS properties, like below, does working under Webkit-browsers, but not Firefox.
mask-image: url(/images/mask.png);
mask-position: 0 0;
mask-repeat: no-repeat no-repeat;
mask-size: 125pt 77pt;
What is a cross-browser way to do it ?
I find the best way to do this is to use overflow:hidden.
Anything inside your "div/li" buttons will be clipped to the buttons dimensions. Works well on round corners.
e.g. (div example)( the yellow box is a 400 x 400 image, the red box is 200 x 200 ..example = chrome/-webkit-)
<html>
<style>
.box{width:200px; height:200px; background:red;overflow:hidden;border-radius:30px;}
.image {width:400px; height:400px; background:yellow;}
</style>
<div class="box">
<div class="image">
Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image
</div>
</div>
</html>
(Sorry...I'm new...I assumed they had some method of converting symbols, my bad)
You could give each li div a width and a height then use the CSS background to apply the image positioned with background-position and then use this for rounded corners:
behavior: url("border-radius.htc");
-moz-border-radius: 20px; /* Firefox */
-webkit-border-radius: 20px; /* Safari and Chrome */
-khtml-border-radius: 20px; /* Linux browsers */
border-radius: 20px; /* Opera 10.50, IE and CSS3 */
And include this HTC file for IE support:
http://code.google.com/p/curved-corner/
Related
HTML:
<div>
<button class="my-btn"></button>
</div>
CSS:
.my-btn {
display: inline-block;
height: 19.6px;
width: 19.6px;
border: none;
border-radius: 5px;
background: url(https://www.svgrepo.com/show/21045/delete-button.svg) center no-repeat, #f99d1d;
background-size: 70%;
}
So, I set an svg as a button background. I want this image to be centered, but the problem is that when the page is zoomed, the background image sometimes shifts ~1px to the left or right. It's like on certain zoom levels browser engine can't make the image be surrounded by equal number of pixels from both sides, and instead of:
|----5.5px---- background-image ----5.5px (or 5.4px)----|
it outputs:
|----6px---- background-image ----5px----|
The same happens with vertical axis.
Why does it work like that and how can I make my background image be centered at any zoom level?
Codepen of the example: https://codepen.io/recursion1/pen/JjZPbxO
Screenshot of what I mean by lateral shifting
When using border-radius on an element with background image in Edge the image becomes blurred. Here is the exact same fiddle in Chrome (left column) and Edge (right).
I've also notices that the browser width plays a role in the amount of blur the image gets. When I resized the browser by a few pixels I got even more blur. Edge (left) vs Chrome (right)
Even though the blur is only slight it becoms even more visible on when the image has lower quality. Chrome (left) vs Edge (right)
Is there any way to prevent the image from being blurred?
div:first-child{
border-radius: 10px;
}
div{
box-sizing: border-box;
background-image: url('https://puu.sh/sEUpF/c8fa8f198b.png');
background-repeat: no-repeat;
background-position: center;
background-size: 24px 24px;
border: 1px solid red;
width: 30px;
height: 30px;
background-color: #fff;
}
div + div{
margin-top: 10px;
}
<div>
</div>
<div>
</div>
I notice that your png source image has dimensions of 24x24px but is being displayed by the browser at 15x18px. I'd take a punt that the browsers in-built image rendering is causing the blur as it attempts to scale the image down to fit the new scale and Edge can't compete with Chrome in this respect.
Try altering your background-image to the exact display dimensions and see if you still get blurring then.
Edit
This seems to be an Edge issue with border-radius. A nice suggestion would be to use CSS' Image-rendering property but that doesn't work for Edge (https://css-tricks.com/almanac/properties/i/image-rendering/).
I'd work around it by creating an :after pseudo element to house your icon image and position that inside your container element. Because in a container without border-radius you aren't seeing the unwanted blur
I have a page that sizes fonts dynamically depending on the width of the document.
This results in heights that are not pixel perfect, but the browsers round them up.
In Internet Explorer there's a problem.
Normally, a background image starts from the edge of its element, the same pixel as the edge after it's top offset is rounded to pixels, but when border-radius is applied, the background starts from where the edge of the element would be if the top offset would not have been rounded, so the image may be blurry.
HTML
<div class="FIRST"></div>
<div class="SECOND"></div>
JS
document.body.onresize = function () {
document.body.style.fontSize = document.body.clientWidth / 100 + 'em';
}
CSS
.FIRST {
width: 200px;
height: 1em;
background-color: #000;
}
.SECOND {
width: 200px;
height: 21px;
margin-top: 10px;
background-image: url('data:image/gif;base64,R0lGODlhAQACAIAAAP////8AACH5BAAAAAAALAAAAAABAAIAAAICDAoAOw==');
border-radius: 10px; /* if this is removed the background works as expected */
}
http://jsfiddle.net/u8Bu8
How do I make it not blur the background?
I'd like a CSS solution using the same HTML.
That base64 GIF is just 1px wide and 2px high, top pixel red and bottom white.
Screenshot
Both sides from IE, magnified by two.
The left side is what is expected, but depending on the width of the window sometimes you get what you see on the right side.
I am not sure I recreate your blurring situation. Here is a side by side with IE & Chrome. I tried to get them to zoom in the same, but they are a little off from each other. But honestly IE looks better than Chrome.
http://chrislovestuff.blob.core.windows.net/img/css-bkg-border-radius.png
I've a tiny span with a background image. This background image scrolls below foreground image. While this works perfectly in IE and FF, it doesn't work in Opera and chrome.
I've put my example here. PLease see the block with 4 small rectangles.
PLease suggest solution.
You need to add display:block to your span.
<span style="display:block; background: url("/resources/images/strength_bgr.gif") no-repeat scroll 0pt -20px transparent;">
<img alt="test" src="/resources/images/strength.gif">
</span>
Inline elements do not have a height or width so the whole background is being displayed instead of being cropped by the image size.
Edit after comments
Is there any reason you can't apply the background image to the img tag itself? That would be more consistent cross-browser.
Is there a way to change the appearance of an icon (ie. contrast / luminosity) when I hover the cursor, without requiring a second image file (or without requiring a hidden portion of the image)?
Here's some good information about image opacity and transparency with CSS.
So to make an image with opacity 50%, you'd do this:
<img src="image.png" style="opacity: 0.5; filter: alpha(opacity=50)" />
The opacity: part is how Firefox does it, and it's a value between 0.0 and 1.0. filter: is how IE does it, and it's a value from 0 to 100.
You don't use an img tag, but an element with a background-image css attribute and set the background-position on hover. IE requires an 'a' tag as a parent element for the :hover selector. They are called css sprites.
A great article explaining how to use CSS sprites.
Here's some code to play with. Basic idea: put all possible states of the picture into one big image, set a "window size", that's smaller than the image; move the window around using background-position.
#test {
display: block;
width: 250px; /* window */
height: 337px; /* size */
background: url(http://vi.sualize.us/thumbs/08/09/01/fashion,indie,inspiration,portrait-f825c152cc04c3dbbb6a38174a32a00f_h.jpg) no-repeat; /* put the image */
border: 1px solid red; /* for debugging */
text-indent: -1000px; /* hide the text */
}
#test:hover {
background-position: -250px 0; /* on mouse over move the window to a different part of the image */
}
a button
The way I usually see things done with smaller images such as buttons it that only a certain portion of the image is shown. Then many states of the picture will make up a larger picture which gets shifted around behind the visible port. I'll delete this when someone has code.