I've noticed something odd about the way Chrome and Edge render text-shadows on hyperlinks.
For example, I have a situation where I apply two text-shadows to several paragraph elements. One of these paragraphs is only a standard hyperlink with text-decoration: underline;. Here's the HTML and CSS:
<p class="header__text">
See the 2021 edition ...
</p>
.header__text {
color: #fff;
text-shadow: 2px 2px 2px #000, 1px 1px 24px #000;
padding-left: 16px;
padding-right: 16px;
}
a {
color: #c62828;
}
This renders the way I would expect in Safari and Firefox (Mac and PC), with the shadow completely underneath the text and the underline.
But in Chrome (Mac and PC) and Edge, the text-shadow falls under the text, but over the hyperlink's underline.
I don't understand why the shadow behaves like this in those two browsers. Is this just a bug? Is there some Blink-specific property I should override to stop this behavior?
From my reading the underline should be the first to be drawn. That is underneath what comes next which seems to be text-shadow if my reading is correct.
From https://drafts.csswg.org/css-text-decor/#painting-order the painting order is:
As in [CSS2], text decorations are drawn immediately over/under the text they decorate, in the
following order (bottommost first):
shadows (text-shadow)
underlines (text-decoration)
overlines (text-decoration)
text
emphasis marks (text-emphasis)
line-through (text-decoration)
That is, it seems as though the shadows should be overlaid by the underline but that Chrome (Edge) do not follow this.
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
I have the following style:
background-color: #C9C5BC;
color: #FFF;
font-size: 10px;
font-weight: bold;
padding: 0 3px;
text-transform: uppercase;
cursor:pointer
the HTML element is
<span class="name-indicator">NameIndicator1</span>
IT looks like this is Firefox (desired)
and in Chrome it looks like this (wrong)
The problem is that in chrome there is no white space between the span elements and it is caused by the fact that in FF the height is 13px and in Chrome it's 15px, when setting the font size in chrome to 7px I achieved the right effect.
How can I fix this to be the same on both browsers? I want to keep the font-size to be 10px
EDIT:
I've created a fiddle please take a look at both FF and Chrome
I noticed that the codes in the stackoverflow answers look similar to your provided image (2nd one). If you put this CSS line-height: 21px on the container .wmd-preview p, then a separation appears between the codes. So your problem could be solved by adding line-height to the container of those span.
To have better chance of achieving same results across many browsers use css-reset at the beginning of your page. This little piece of css will make sure that all elements have same default values in all browsers. You can get one from here.
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]
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