How can I manipulate text with shadows in CSS to achieve an effect like the “30 Free Vector Icons” text below?
try this :
HTML :
<div style="background:#ccccc;"><h1 class="myshadow">Cool text</h1></div>
CSS :
h1.myshadow{
color: #C8C8C8;
letter-spacing: 2px;
text-shadow: 1px 1px white, -1px -1px #444;
}
CSS property you need to use is text-shadow
More info : http://www.w3schools.com/cssref/css3_pr_text-shadow.asp
There is the text-shadow property, which is reasonably well-supported outside of Internet Explorer. IE’s Glow filter provides a kind of similar effect.
Safari and Chrome also have -webkit-text-stroke, but that’s not supported anywhere else.
Here some info about CSS3 shadows
Different methods are showed here to achieve box shadow and text shadows
http://www.webdesignshock.com/css3-drop-shadow
The following have text shadow examples
http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects
And to visually match your example, this demo is using the same colors and effets
http://line25.com/wp-content/uploads/2010/text-shadow/demo/index.html
Related
I am using this:
<span class='fa fa-fw fa-stop'></span>
But it shows a very big square. Does anyone know if it possible to make it show just the outline of the square?
Another solution is given here, which can be used for all font-awesome icons:
Is it possible to color the fontawesome icon colors?
The css looks like this:
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #666;
color: transparent;
Unfortunately not, the icons which are provided as outline only have an additional -o in the name e.g: fa-arrow-circle-o-left - the stop icon doesn't have that option.
You could use the fa-square-o which is: http://fortawesome.github.io/Font-Awesome/icon/square-o/ which would achieve what you need - but it's not specifically the stop icon but just outlined.
You could either use fa-square-o, or you could use fa-stop and using CSS color and border rules to achieve the effect for a box with no rounded corners.
Here is a link:
http://jsfiddle.net/5mcddx2q/
.fa {
color:rgba(0,0,0,0);
border:1px solid red;
}
Or you could search for an outlined box in another set of font icons that is not font-awesome, thereare a few on bootstrap.
The problem with the webkit-based solutions is that they'll only work in webkit browsers. A slightly more portable solution would be to set the color of the icon to the same as the background (or transparent) and use text-shadow to create an outline:
.fa-outline-dark-gray {
color: #fff;
text-shadow: -1px -1px 0 #999,
1px -1px 0 #999,
-1px 1px 0 #999,
1px 1px 0 #999;
}
It doesn't work in ie <10, but at least it's not restricted to webkit browsers.
For people coming across this in the future: I was solving a similar problem and came up with a tangential solution that may work depending on your scenario and the specific icon. I had a blue background and wanted a white checkmark outline, with the blue inside preserved. What I ended up doing was creating two checkmark icons- one that was white, and another that was blue but slightly smaller. I then used css to position the blue checkmark inside of the white one which achieved the desired effect. It may take some fiddling and it may not work for all use cases, but it worked for me in mine.
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);
so I'm trying to finish up my portfolio website and I'm stuck on this dreaded contact form.
So here's my webpage.. www.heatherkirk.net/contact.php
On Chrome and (I'm guessing Safari since those two are the similar it seems), the textarea box looks different than compared to other browsers. I'm just wondering how to get the darker color on top and the lighter color throughout on the Comments part for Chrome instead of just the black outline. If anyone could help me out, I'd be grateful!
Well, Chrome's property inspector (right click, Inspect Element) says your inputs have border: 2px inset, and your textarea has border: 1px solid. Try changing that?
Firefox's property inspector doesn't show any value for border at all for the textarea, though, so that (and looking through your stylesheet) leads me to think that you've applied border-radius, but haven't set a border for your textarea at all; it just happens that Firefox's default textarea has a 2px inset border, and Webkit's (Chrome/Safari) has a 1px black one.
Add a border: 2px inset to your textarea style, and that should suffice.
When you remove the border-radius the black outline disappears.
But if you need to keep the rounded corners, then just add border-width:0px to the textarea style.
Like the user above mentioned, when you just have border:solid 1px; the default color is black, adjust that a bit.
set border:0 none; to your textarea in css
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]