I'm working on a website, where I use image sprites on a button. In every other browser I've tried, except for IE11, the text on my sprite is crisp as it should be, but in IE11, the text gets blurry (See images).
The blurry one being IE11 ofc. The width of the sprite is 189px and the height is 378px. I use the following CSS:
button {
width:189px;
height:189px;
background-image:url('../images/kontakt-os.png');
background-position: top;
cursor:pointer;
border-radius: 100px;
}
button:hover {
background-position: bottom;
-webkit-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0);
-moz-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0);
box-shadow: 0px 0px 10px 1px rgba(179, 47, 1, 1.0);
}
So is this just an IE flaw, or can I actually do something about it ?
Thanks in advance.
EDIT:
I might just add, that if I just insert the same image as <img src="lala.png"> the text is NOT blurry. It only applies to backgrounds :/
It is a normal IE bug.
http://www.infoworld.com/t/microsoft-windows/blurry-fonts-bug-kb-2670838-persists-ie11-and-windows-7-231035
i Haven't found any solutions to this subject yet.
I'd recommend not having that button as a sprite at all for the following reasons-
It is not accessible or SEO efficient - neither screen readers nor search engine crawlers can read the text in the image.
It requires an additional HTTP request to download the sprite image, which will make your site load more slowly - especially on mobile devices
Unless you make the button much larger than it needs to be rendered on the page and scale down, then you will have issues of blurring when scaling up on high density devices, such as newer full size iPads and premium Android tablets, recent Macs and premium windows laptops. Clearly making the image larger than it needs to be means it is larger and exacerbates the speed penalty from point two.
If you want to change the colour scheme at any point in the future, you only need to change your CSS color properties, not re-generate new images.
It is trivial to make this button appear like your screenshot in CSS.
If you use markup something like this-
<button class="text-button" type="button">Send Besked</button>
And CSS like this-
.text-button {
background: #b32e01;
border: none;
border-radius: 8px 8px 8px 0;
color: #ffffff;
cursor: pointer;
height: 3em;
outline: none;
padding: 1em 0;
text-transform: uppercase;
width: 12.5em;
}
.text-button:hover {
-webkit-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0);
-moz-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0);
box-shadow: 0px 0px 10px 1px rgba(179, 47, 1, 1.0);
}
It ends up looking like this (see JSFiddle for source)-
Although only a rough mockup (you may want to change proportions, add a gradient or change the background on hover - I can't see the original sprite to know the transformations you make in the hover state sprite) it already looks much like the original, and with all the advantages above - in particular that it should solve the text problem you originally posted.
I've just come across this issue.
I just placed the background image inside a span to keep the border radius and background image on different elements, seems to have done the trick.
.item {
border-radius: 8px 8px 8px 0;
}
.item span {
background-image:url('imagepath.png');
}
I found success in eliminating the blur effect by using :not(:hover). It seems to force the background-image into not blurring.
Try adding
button:not(:hover) {
width:189px;
height:189px;
background-image:url('../images/kontakt-os.png');
background-position: top;
cursor:pointer;
border-radius: 100px;
}
Related
I have this Jquery slider plugin for Wordpress, and it's just the jquery cycle plugin by Malsup.
Anyway, I added a caption in each slide. I just can't find a color that shows clearly in each slide. So I made a semi-transparent (50% opacity) png in Photoshop, 5px x 5 px. Currently, my CSS looks like this:
.homepage-slides p {
background: transparent url('images/title-bg.png') repeat top left;
bottom: 0;
left: 0;
color: #000000;
font-size: 12px;
font-weight: bold;
margin: 0;
padding: 5px;
position: absolute;
text-align: left;
width: 100%;
}
I also tried using an absolute path to the png, but no go. Here's the result:
As you can see, the caption in the bottom is almost impossible to read. It'd be cool if I could find a way to have like ... this semi-transparent, yellow rectangular box and then have the black caption inside that box, so you could read the caption. Any help with this would be truly appreciated!
Mr.Jason
Try this Html and Css,
<body>
<div class="stroke-effect">
This text should have a stroke in some browsers
</div>
</body>
Css
body{
background-color:#000;
}
.stroke-effect{
font-weight:bold;
color: #000;
text-shadow:
-1px -1px 0 #ffffff,
1px -1px 0 #ffffff,
-1px 1px 0 #ffffff,
1px 1px 0 #ffffff;
}
Check this http://jsfiddle.net/VqDKp/
Good Luck!
I'd recommend not using images. One reason is that png images with transparent backgrounds don't have transparency in some browsers (I know it maybe only older browsers but still).
Another reason. The image wont be positioned 100% of the background in your script.
I personally like using CSS made backgrounds as they pretty much cover all browsers types. Here's my background example for you :)
background:rgba(200,200,200,0.5); //50% silver-ish background.
You could use an opacity. But I wouldn't recommend that as it would effect the content in your p element as well as. I believe using an alpha filter would do the same but it's been a while since I've used them.
Here's a further example for you :)
background:linear-gradient(top, rgba(0,0,0,0) 0%, rgba(70,70,70,0.5) 30%, rgba(200,200,200,0.5) 100%);
//from top to bottom 100% transparent black.
//Very dark grey 50% transparent at 30% from the top of the element.
//Silver-ish 100% at the bottom at 50% transparency.
using the webkit extensions respectively for the above example :)
I hope this helps.
I was trying to draw a small triangle (as the tail of a rectangular chat-bubble) in CSS. I managed to do that, but then I wanted to apply a box-shadow to the tail and the box. So, I have the following CSS for the tail:
#bubble::after {
content: "";
display: block;
position: absolute;
bottom: -22px;
left: 10px;
border-width: 22px 0 0 20px;
border-style: solid;
border-color: #fff transparent;
-webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, .6);
box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, .6);
}
Which renders this (Sorry; background is a bit blurry because of the zoom):
Notice how the box-shadow doesn't render alongside the diagonal part of the bubble's tail.
The desired effect I would like to achieve is:
This is a screenshot from inside Photoshop, so it might looks a bit different than the partial screenshot of the browser's portview (the shadow is supposed to be larger, I forgot to update the layer style after scaling the path).
How would I achieve that?
Thanks!
P.S: I am open to the thought of using a raster image or a SVG, although I'd prefer if I didn't have to.
I think that what you're trying to do is relevant to this previous post on SA: CSS Drop Shadow for CSS drawn arrow
I'm afraid that's not possible with CSS only. box-shadow applies to the element's box, with an image that's still a rectangle :)
See http://lineandpixel.com/blog/png-shadow for a write-up from another frustrated user.
You'll have to bite the bullet and use a raster image or SVG.
Problem with IE 9 and earlier IE browsers putting dotted lines around my checkboxs. It seems to want to call post textarea and post input adding a border around the checkbox and then calling post input focus and putting a background around it.
The dotted line wont go away even if I put border 0px in post input. No other browser FF, chrome does this....
Nothing to do with the checkbox .reset file
Image in IE 9: http://i46.tinypic.com/hvqj2g.png
Code Calling: http://i46.tinypic.com/30ic1f5.png
#post textarea,
#post input {
border:1px solid #ddd;
}
#post textarea:focus {
outline: none;
ie-dummy: expression(this.hideFocus=true);
}
#post input:focus {
-moz-box-shadow: 0px 0px 0px 2px #eee ;
-webkit-box-shadow: 0px 0px 0px 2px #eee ;
box-shadow: 0px 0px 0px 2px #eee ;
background: #fefcbe;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
#post input#submit-btn{
background: #eee;
color:#444;
text-shadow: 1px 1px 1px #fff;
}
Any ideas for IE 9?
The dotted line is “focus rectangle”, a usability feature that has unfortunately been implemented inconsistently in browsers. As you remark in your comment, it disappears if you set outline: none on the element; the focus rectangle is technically an outline resulting from a browser’s default style sheet. This means, among other things, that a person who uses the Tab key to move inside the page (possibly because he has to) will not see any focus indicator there, i.e. does not see where he is.
Depending on the state (Quirks Mode vs. “Standards” Mode) of IE 9, the focus rectangle appears around the checkbox, or around the associated label. The comments above apply to “Standards” mode.
Your issue of “its acting like a text box” as per your comment cannot be resolved without knowing what you mean by it and without having access to the code. Please post actual code or a URL of code, not a screenshot that contains an image of a fragment of code.
Works for me:
element:focus{
outline: thin transparent;
}
try using some javascript in your HTML element:
<input onclick="this.blur()" />
I'm rotating an element using -webkit-transform: rotate() and in Chrome 14.0.835.2 dev-m it's doing some really weird stuff to the text inside the element. It reminds me of a similar effect you get in Photoshop when you rotate text using "smooth" anti-aliasing instead of "crisp".
Anyone know what's going on here? Is it specific to this webkit or Chrome version or is there something I can do to fix it? (It's also not anti-aliasing the borders between list elements)
Here's the CSS:
div.right-column.post-it
{
position: relative;
width: 240px;
background-color: #fe9;
padding: 20px;
-webkit-transform: rotate(.7deg);
background: #fe9 -webkit-gradient(radial, 20% 10%, 0, 50% 10%, 500, from(rgba(255,250,220,1)), to(rgba(255,238,253,0)));
box-shadow: 1px 1px 0 #ddccaa,
2px 2px 0 #dbcaa8,
3px 3px 0 #d9c8a6,
4px 4px 0 #d7c6a4,
5px 5px 0 #d5c4a2,
6px 6px 1px #d3c2a0,
4px 4px 2px rgba(90,70,50,.5),
8px 8px 3px rgba(90,70,50,.3),
12px 12px 5px rgba(90,70,50,.1);
}
Try triggering the CSS 3d Transform mode with webkit. this changes the way chrome renders
-webkit-transform: rotate(.7deg) translate3d( 0, 0, 0);
edit
There also a Webkit only style declaration -webkit-font-smoothing which takes the values
none
subpixel-antialiased
antialiased
where subpixel-antialiased is the default value.
Alas, the subpixel antialias is no good solution for rotated text. The rendering machine cant handle that. The 3d transform switches to just antialiased. But we can try to set it directly.
See here http://maxvoltar.com/archive/-webkit-font-smoothing
The blurred fonts are caused by a weird webkit issue invloving -webkit-backface-visibility. This took me forever to figure out, and I haven't seen it anywhere else on the web yet.
I now add -webkit-backface-visibility: hidden; to the body of my site as a CSS reset style. Watch it sharpen the fonts on your entire site, its amazing. You're transformations are not 3d so this wont affect anything anyway, but if you do decide to do 3d transformations somewhere else on your site just add back -webkit-backface-visibility: visible; to the specific element. Should also fix the flickering too.
I have the following code, which makes a box with rounded corners and shadow. It should be compatible with all browsers and it really is, but the thing is I need transparent shadow and IE doesn't support RGBA values :(
<style>
#box {
width: 250px;
height: 250px;
background-color: #1e9ad3;
padding: 20px;
margin: 20px;
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
behavior: url(PIE.htc);
box-shadow: 0px 4px 3px rgba(0,0,0,0.15);
-webkit-box-shadow: 0px 4px 3px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 4px 3px rgba(0,0,0,0.15);
}
</style>
<body>
<div id="box">
Hello world!
</div>
</body>
Any suggestions how to do this? My "box" could be on different backgrounds, or on the background with texture, so that's why I can't make the color of shadow for example light grey.
Here's the live example: http://bbin.own.cz/box.html
The CSS3Pie documentation gives the answer.
PIE parses RGBA color values wherever they are allowed. However it is only able to successfully render their opacity value in a few contexts. In all other contexts they will be rendered with the correct RGB color, but fully opaque. Here are the supported contexts in which the opacity will be rendered correctly:
The solid background-color as specified in the -pie-background property.
The color value of box-shadow, if the shadow has no blur.
In short, the answer is no, this can't be done. IE simply doesn't support RGBA properly. CSS3Pie is able to do it in a few contexts, but a box shadow with a blur is not going to work.
If CSS3Pie can't do it, then it's a pretty good bet that it simply isn't possible in IE.
You'll be able to do it if you lose the blur, but of course that changes the whole effect, so it's not really a solution for you.
You'll need to use custom MS settings for pre IE8
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
Havent tested this but you can google for more info. source