I have a simple
text-shadow: 0.05em 0.05em 0.05em black;
I open in Google Chrome and there is no shadow at all!
I change it to
text-shadow: 1px 1px 1px black;
and it works!
What is the matter?
0.05em is too small value and your shadow falls behind the text. Try to increase it a little - http://jsfiddle.net/zd4qF/
UPDATE
Your code with .05em will actually work in FF, but not Chrome. That's because of rounding logic in the browsers - FF rounds anything smaller than 1px to 1px, Chrome floors it to 0
If you check the link bellow you can see the conversion rates between em and pixels
Since you asked for 0.05em that is way smaller than 1px :)
http://pxtoem.com/
For eg.
1px should be around 0.063em which makes 0.05 em less than 1px thus less than anything you can display.
It's not visible because the value is too low. em is proportional to the font-size. The smaller the font, the smaller everything that's declared depending on the font using em.
Here's an example with different font-sizes. In this example 0.5em can be seen when the font size is 48pt, but not when it'2 12 pt. See http://jsfiddle.net/JwNbj/1/
EM is a relative attribute and depends on your font size defined in the body element or when you defined it also relative, then it depends on the options defined in the user's browser options.
when your font size is 20px, then 1px will be 0,05em. greets.
Related
since em length scale is relative to the current font size, this problem arose.
I want the border-width of many elements to be one eighth of my normal font width. By normal I mean when the html document has the least necessary parts and just a text written in my font. My font is mono.
You can see how it looks:
When I just write border-width: 0.125em;, borders will not have the same width.
I don't want to use px because I want to produce the same width on very compact displays.
What should I do?
You can use calc(1rem / 8) to get 1/8th of 1rem or use 0.125rem. Using rem will reference the document's base font size instead of whatever em is throughout the document.
div {
font-family: monospace;
border: 0.125rem solid black;
}
<div>foo</div>
As the title suggests, I'm trying to add font borders to the text I have in a page I'm making. The background has a lot of reds, greens, yellows and blacks so a single colour really wouldn't suffice. Here is the code.
I know I can do something with webkit like this:
h1 { -webkit-text-stroke: 1px black; }
But since it's not supported on browsers I'm stuck on square one.
Can anyone help me?
For a 1 pixel stroke, text-shadow would do:
text-shadow: 0 0 1px black;
Using
You can only use text-stroke on webkit browsers (Chrome, safari, etc)
Source: caniuse.com
But like other poeple answered, you can use text-shadow instead
p {
text-shadow: 0 0 1px black;
}
FIDDLE
http://www.w3.org/Style/Examples/007/text-shadow.en.html
see this link may help
it adds text shadow to letters if you dont want feather then keep value to 0px will give you border around text
Assuming I have a set font color that I must maintain, and that it overlays content that can be of any color, how can I make sure the font is readable no matter what it's overlaying?
Here is a jsFiddle to demonstrate the effect I am trying to describe.
http://jsfiddle.net/4AUDr/
#overlay
{
position: relative;
top: -150px;
color: #860101;
}
Meme captions utilize white text with a black outline to make it readable over any hypothetical meme image, however I don't think there is a cross-browser compatible CSS only method of achieving that, and it would potentially look quite horrible with smaller fonts.
What solutions are there to this problem?
While text-shadow is nice, it doesn't actually give the result you want. A shadow is a shadow and what you need to have for most readable text is a "text border". Unfortunately. there is no such thing as text-border in css, but we can make one !
I am surprised by how much unpopular multiple shadows are. This is a case where by multiple shadows you can do miracles :
CSS
p {
color: white;
font-size: 20px;
text-shadow:
0.07em 0 black,
0 0.07em black,
-0.07em 0 black,
0 -0.07em black;
}
This style will simply add a thin shadow (as thin as 7% of your actual font-size) around your text (up, down, left, right).
But are four shadows enough ? Maybe you can get a better result with eight ? It looks like the answer is yes, makes sense to me, but it could also be that we are overkilling things here. Note that in this case I also decreased each shadow's size :
CSS
p.with-eight {
text-shadow:
0.05em 0 black,
0 0.05em black,
-0.05em 0 black,
0 -0.05em black,
-0.05em -0.05em black,
-0.05em 0.05em black,
0.05em -0.05em black,
0.05em 0.05em black;
}
Then in this markup in a colourful background you have a nicely readable text:
HTML
<html>
<body>
<p>This text is readable on any background.</p>
<p class="with-eight">This text is using eight text-shadows.</p>
</body>
</html>
JSFiddle example here
You can experiment with text-shadow property (MDN doc), for instance:
text-shadow: white 0px 0px 10px;
(jsFiddle)
It's supported in IE10. For IE9, you can use proprietary Internet Explorer filters as per this answer.
You can use the css3 property text-shadow
Warning: Browser compatibility problems (IE9 no support)
http://caniuse.com/css-textshadow
a simple example:
.shadow {text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);}
http://jsfiddle.net/H4JtR/
If you use white shadow over black fonts, or vice-versa, your text will be readable no matter what is overlaying.
Another option is to use a background-color with transparency (you may want to apply this to an inline element like a span or a p instead of a div because background-color is going to apply to the whole div area even where there is no text)
background: rgba(33, 33, 33, .9);
http://jsfiddle.net/LSRkE/
Just use a transparency that contrasts with your font color. Then you can lower the alpha-channel value so the image from the background will be visible enough.
Related answer here https://stackoverflow.com/a/5135033/953684
Perhaps this CSS was not around at the time this question was answered, but you can use stroke to add a nice border around text. Like this:
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: rgba(0, 0, 0, 1);
I'm thinking on relying on box-shadow but it renders differently even on Firefox and Chrome/Chromium. The difference is very subtle with low values, but very noticeable with bigger ones.
In this example, you can see the differences arise when using negative values to make the shadow smaller. Left render is Chromium 25, right is Firefox 21.
HTML:
<div>
Hello there!
</div>
CSS:
div{
margin:100px;
padding:100px;
border:1px solid red;
box-shadow:0 80px 15px -85px #000;
}
How can I workaround this problem? Or maybe I should drop box-shadow by now?
Browsers use different algorithms to generate the shadow blur, in Chrome the opacity of shadow pixels decreases more quickly from the inner edge of the shadow area to the outer, and since the inner 1/3 of the shadow is hidden under the box in this example, it appears to look as having different start color. If we make the blur entirely visible by reducing the blur radius and the negative spread distance by 5px, and replace the solid shadow color with semi-transparent rgba(), the difference in the rendering becomes much less significant (demo).
Try to use the -moz-box-shadow property for firefox, it will render better.
div{
margin:100px;
padding:100px;
border:1px solid red;
-moz-box-shadow: 0 80px 15px -85px #000;
box-shadow:0 80px 15px -85px #000;
}
I have a panel which can be expanded or minimised through a vertically centred link with a < or > symbol as the link text. At font-weight: 900 this does not stand out much, even with a large grey background around it. I do not want to use an image and, at the current font size, both symbols currently take up the maximum width of the panel.
Is there any way to thicken the line on the symbols beyond 900? Or is there another alternative I could use?
Thanks in advance.
Richard
In CSS 3 there's another way to make the font size bolder:
color:#888888;
text-shadow: 2px 0 #888888;
letter-spacing:2px;
font-weight:bold;
EDIT:
For some sort of weird reason this doesn't look as pretty as it did over an year ago. It only works with text-shadow of 1px (on most common fonts, other thicker fonts might still work with 2px). And with text-shadow of only 1px, there's no need for such a large letter-spacing.
color:#888888;
text-shadow: 1px 0 #888888;
letter-spacing:1px;
font-weight:bold;
To add to Gogutz answer, you can go even bolder by stacking up the text-shadows in a grid. Comma separate each on the line:
.extra-bold {
text-shadow: 0px 1px, 1px 0px, 1px 1px;
}
You can use text-shadow instead of font-weight
text-shadow: 0px 1px, 1px 0px, 1px 0px;
Unfortunately there's no font-weight thicker than 900, and specifying font-weight by number varies across browsers. Your best bet would be to use a thicker font - you haven't specified what you're using, but Impact is relatively thick and tall for its width while being web-safe. Otherwise you could use #font-face to load in a different font.
Adding to Gogutz answer. You can use the currentcolor keyword to use the color of the text and avoid hardcoding it.
Like this:
text-shadow: 0.5px 0 currentColor;
letter-spacing: 0.5px;
This is quite thick. But works only with webkit.
font-size: -webkit-xxx-large;
font-weight: 900;