I'm having a problem applying a outline/stroke to text that looks good and/or even works on every browser. Right now I'm using:
<div style="font-family: Helvetica,sans-serif;color: #FFFFFF;font-size:40px;font-weight:bold;letter-spacing:-1px;text-shadow:2px 2px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000;filter:DropShadow(Color=#000000, OffX=2, OffY=2);">Text Example</div>
And while this applies an outline to the text on Firefox, Chrome, and Safari -- it doesn't look that good with some corners not using an outline and the outline doesn't even work in IE so it switches to just using a shadow. Is there a better method of applying a text outline/stroke that will look better and work in every browser?
Text shadow wasn't intended to emulate stroke, so caveat emptor.
Use SVG instead.Take a look here
Actually text-shadow is not meant to add stroke to text, so it doesn't generate accurate effect you want. However it look acceptable if you are using 1px/-1px size of shadow.
you can try JavaScript for that.. "http://www.netzgesta.de/dev/text/#overview"
see if it helps you.
Related
I apply same values for box-shadow property, but on IE11, the shadows seem thinner and I even can't see it in some case.
See this fiddle: http://jsfiddle.net/anhhnt/8pvgZ/2/
Here is result of IE11 for who don't have this browser:
The original property value is :
box-shadow: 0px 1px 3px 0px #777;
When I change it into
box-shadow: 0px 1px 6px 0px #777;
... then it seems OK, but why there is this difference? and what is best solution to work around this?
Thanks in advanced
This happens because each browser has it's own way of rendering elements.
The best way to work around this really is to make your page non-dependant on graphic elements that may differ from browser to browser (such as box-shadow). When i have to use box-shadow, i usually put an almost invisble one, with a subtle border. It works out really nice, and avoid most of the problems we usually have with the absurd difference between browsers' interpretation of the box-shadowproperty.
I made a fiddle based on the one you posted.
When I use the text shadow css, mozilla and chrome are showing different smudging levels.
#dfg{
color: #fff;
text-shadow: 0px 0px 2px white;
}
In mozilla I'm getting a more smudged look which i don't want. I've tried
-moz-text-shadow : 0px 0px 1px white;
but it doesn't help. Is there a method in css to give browser specific text shadow values or should i go for a javascript to identify the browser and then select a shadow level.? Please help.
chrome version
mozilla version
Personally I think a Javascript based method would work best, all modren browsers support the standard CSS shadow function, I think you were thinking of -moz-window-shadow which is a OSX feature.
also look into the blur property of text-shadow, perhaps explicitly defining it?
I find myself seeing things like buttons, inputs, header, ect. and wanting the code so I can reference off them and make my elementary designs look better. I always try to change it up a bit, I don't like stealing other peoples designs.
Viewing the page source from just the browser is very sloppy and usually hard to read. I tried using Firebug but I noticed one huge problem. It doesn't show all the CSS.
Example
Firebug will only show:
box-shadow: 0 14px 10px -12px rgba(111,112,114,0.8);
When the full code is:
box-shadow: 0 14px 10px -12px rgba(111,112,114,0.8);
-webkit-box-shadow: 0 14px 10px -12px rgba(111,112,114,0.8);
-moz-box-shadow: 0 14px 10px -12px rgba(111,112,114,0.8);
If leaves out the moz and webkit.
I can speak with experience in the Chrome Inspect tool, when debugging the page elements the browser automatically ignores and does not show the invalid properties or styles, but if you look at the actual page source code (or the css) your styles will be there.
I think that if Firebug does not show those styles it means Firefox is ignoring them, in this case you are using the -moz-box-shadow but Firefox uses box-shadow to render the element.
download the latest version of any browser and you see absolutely all the css.
With Inspector in Chrome you can see even the different states like :hover :active and so on
Why not just use the inspect element that's built in to Chrome? I use it every day of my life and love it.
I also use "stylebot" to show me some styles of websites, but I only use that to style websites (clientside) that I feel need a bit of fixing, like making buttons bigger, etc.
Is it possible to blur a div with CSS3? And I don't mean the javascript blur, I mean the photoshop blur.
I don't want the edges of the div to be blurred, I want to contents of the div to be blurred as well. (Am I asking too much out of browsers?)
If not possible, what would be some good workaround techniques?
It is possible with an SVG filter.
The basics of it is that it's just a simple feGaussianBlur.
Here it is: http://jsfiddle.net/aXUtU/1/
This works in Firefox 4, and should work from 3.5 up except for the matter of using the svg element without namespace/xmlns stuff (I think it should work in 3.6).
There are some issues with how much space it gives it to flow in; if you take that text down to one line you'll see the last in particular is getting clipped.
Depending on your content, combining multiple box-shadows (inset and outset) and text-shadow could achieve a similar effect. The link above also contains a start on achieving a similar effect on text.
Well... I came up with this:
.blur {
color: transparent;
text-shadow: 0px 0px 2px #000000;
}
This will make the text blurry, for sure! Only thing is that it will make only text blurry. No images affected or anything. But I think that together with this http://plugins.jquery.com/project/blurimage you could make it more powerful!
Have fun with experiments!
I am wondering if there is some way to make an box have the Safari's light highlight all of the time. I would assume there would be a way to replicate this, however I have not found one.
Thanks for any help!
If there is a doubling up, you can remove Safari's blue outline with outline:none.
Currently the only way to achieve this would be to use a background image. You'd take a screenshot from the field and use that as the background for the input. The main drawback here is that you can only have a fixed-size field because the image is static.
However, you may wish to take advantage of some CSS3 styles such as box-shadow which will work in Safari, Chrome and Firefox. Take a look at this page for more info. For your example you'd probably want something like this:
box-shadow: 0 0 4px #aaf;
One final point to make - if you replicate Safari's highlight outline, it's very likely Safari itself will "double up" the effect, so you need to be careful...