I was wondering if there was a way of adding a stroke and shadow to text, I can get it working in Chrome and Safari as webkit supports text-stroke and text-shadow. I can get the stroke to display in Firefox but that is using text-shadow and playing with the offset. So does anyone know a way around this issue?
The text-stroke property isn't part of the standard CSS spec, so it's best to avoid it - Chrome would be well within their rights to pull out it at any time.
You're right that you can create text-stroke-like effects using multiple comma-separated text-shadows - in fact you can use the same technique to add an 'actual' shadow as well:
h1 {
font-size: 6em;
font-weight: bold;
text-shadow: 1px 1px 0 #F00,
-1px -1px 0 #F00,
1px -1px 0 #F00,
-1px 1px 0 #F00,
3px 3px 5px #333;
}
<h1 style="margin:0">Hello World</h1>
Be careful though, because text-shadow isn't supported in IE9 and below either. I'd recommend only using it for non-essential styling: make sure the text is still just as readable when the shadow / faux outline isn't there.
Firefox 48 now supports text strokes (with the -webkit prefix), as well as some other webkit-specific properties (like -webkit-text-fill-color). Just be wary that the specification isn't really there, and it will probably change in the future.
Here's an example that now works in Firefox:
.outline {
-webkit-text-stroke: 1px red;
}
span:first-of-type {
display: block;
font-size: 24pt;
font-weight: bold;
}
<span class="outline">This text has a stroke.</span>
<span class="outline">(Even in Firefox)</span>
See the Mozilla website:
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke
Related
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 am trying to increase the width of a text.I am not trying to make it bold.I am trying to keep the inside of the text empty.My idea is to fill the text with a color,and ,onhover change the color.
Here is a picture of what i am trying to accomplish:
http://img.ctrlv.in/50eee77779a5b.jpg
The issue is that I cant find a way how to increase text width using css.(i found it via javascript,but then the text assumes properties of an image)(and hence onhover effect is not possible)(I found a way to increase font width using javascript in a w3schools tutorial here
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_text2)
I am looking for a html solution(not canvas)
I know there is a shortcut in CSS3/HTML 5 to achieve this effect,but not able to recollect/search sites where i saw the effect.
Any help would be appreciated
Thanks in advance
May not be perfect but not sure of a css selector that can increase letter width, you could try something like:
a:hover {
letter-spacing: 0.2em;
color: #07C;
}
This increases distance between letters, also use css rather than jquery for hover event, its easier!
As far as I can see, you actually want to stroke the text. The width of the font can stay the same so long as the stroke happens outside the boundaries of the text, right?
Well, CSS Tricks has an article which talks about stroking text using webkit-text-stroke and/or text-shadow. An example is given here.
So, you would end up with something like:
/* CSS from tutorial */
.stroke {
/* WebKit (Safari/Chrome) Only */
-webkit-text-stroke: 1px black;
/* If we weren't using text-shadow, we'd set a fallback color
and use this to set color instead
-webkit-text-fill-color: white; */
color: white;
text-shadow:
3px 3px 0 #000,
/* Simulated effect for Firefox and Opera
and nice enhancement for WebKit */
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
/* The colour changing bit - added by me */
.stroke:hover {
color:blue;
}
I am building a website and I am using the text-shadow function, however it doesnt work for IE.
Graphic:
text-shadow: 0.1em 0.1em 0.2em black;
Is there any solution or hack to over come this, or something that mimics the text-shadow function for IE.
For some versions of IE, Dropshadow filter may do what you need:
http://msdn.microsoft.com/en-us/library/ms532985%28v=vs.85%29.aspx
I was looking for a cross-browser text-stroke solution that works when overlaid on background images. think I have a solution for this that doesn't involve extra mark-up, js and works in IE7-9 (I haven't tested 6), and doesn't cause aliasing problems.
This is a combination of using CSS3 text-shadow, which has good support except IE, then using a combination of filters for IE. CSS3 text-stroke support is poor at the moment.
IE Filters:
The glow filter looks terrible, so I didn't use that.
David Hewitt's answer involved adding dropshadow filters in a combination of directions. ClearType is then removed unfortunately so we end up with badly aliased text.
I then combined some of the elements suggested on useragentman with the dropshadow filters.
Putting it together
This example would be black text with a white stroke. I'm using conditional HTML classes by the way to target IE (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/).
#myelement {
color: #000000;
text-shadow:
-1px -1px 0 #ffffff,
1px -1px 0 #ffffff,
-1px 1px 0 #ffffff,
1px 1px 0 #ffffff;
}
html.ie7 #myelement,
html.ie8 #myelement,
html.ie9 #myelement {
background-color: white;
filter: progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=-1);
zoom: 1;
}
The IE filter class also puts a shadow on any background images you have. For instance, I have an H1 tag that has a line as part of the background, when I put the IE text shadow filter on, the line in the background inherits that shadow.
I've been looking and investigating this issue also for some time now and would like to share a maybe contradictory finding while testing my site on IE10.
I have this html structure :
<p>Meer info op onze <a class="links" target="_self" href="/leden">ledenpagina</a></p>
combined with CSS :
p { display: inline-table;
color: #FFF;
text-shadow: 0px 1px 2px #111, 0px 1px 0px #111;
margin: 0px 20px; }
a.links {
text-decoration: underline;
color: #FFFF60;
font-size: 1.1em; }
If i look at the outcome of this in IE10, the achor text "ledenpagina" does receive the text-shadow style as defined in the parent (p tag).
The assumption this could have anything to do with a combined text-decoration:underline selector was false (tested by applying text-decoration also on the p tag)
Result can be witnessed here : http://tczelem.be (slide down the header slider tab)
So the text-decoration selector does seem to have some effect in IE10.
![enter image description here][2]
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;
If so, which PNG IE fix would you recommend?
If you do not necessarily need your CSS to validate, you might use this:
.box-shadow {
-moz-box-shadow: 2px 2px 3px #969696; /* FF 3.5+ */
-webkit-box-shadow: 2px 2px 3px #969696; /* Webkit = Safari + Chrome */
-khtml-box-shadow: 2px 2px 3px #969696; /* Konqueror */
box-shadow: 2px 2px 3px #969696; /* Opera */
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3); /* IE */
}
It uses the box-shadow CSS3 property where appropriate and for MSIE it uses filters. If you can trust your users have updated browser or use IE, you should be safe.
The code is not entirely from my head, I used http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ for reference.
If your drop shadow is partially transparent and can't use a .gif then yes that is really the only way to go. Firstly, I must say the obligatory %^&* IE 6. Second, I have had great luck with http://jquery.andreaseberhard.de/pngFix/ but I loves me some jquery so take this as just personal opinion and if you arn't already using jquery may not be the best for you.