I'm trying to achieve a black, 1 pixel outline around a header written with white fonts, but I've just realised that gmail doesn't support this:
{
color: white;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
How can I resolve this with something supported?
The closest you can get without text shadow is the poorly supported text-stroke property:
-webkit-text-stroke: 1px black;
http://codepen.io/c0un7z3r0/pen/VKQmaz
I couldnt even get this working in firefox but chrome is fine. I'd consider using a image in this situation. Not ideal but I beleieve email html has more stringent controls (specifically white text being a big no-no).
http://caniuse.com/#feat=text-stroke
SOURCE: https://css-tricks.com/adding-stroke-to-web-text/
Related
I am looking for a way to use a text shadow on the h2 tag, and also have an underline on the words. The problem is, the text shadow is on the underline as well. How do I make it so that the underline doesnt have the text shadow?
*
css:
.pagetitle {
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
text-decoration: underline;
text-decoration-color: grey;
}
*
You'll need to separate the underline from the text. To do so you can generate the underline with background with linear-gradient or a pseudo-element (::before).
.pagetitle {
display: inline-block;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
background: linear-gradient(transparent calc(100% - 2px), grey calc(100% - 2px));
}
<h2 class="pagetitle">I'm the Page Title</h2>
you can try to use the border, resetting line-height to bring it closer to text.
.pagetitle {
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
text-decoration-color: grey;
color:green;
border-bottom:solid;
line-height:0.9em;
width:max-content;/* use display:table; if max-content is not supported */
}
h1 + h1 { margin:auto;}/*possibly*/
<h1 class="pagetitle">My page title underlined</h1>
<h1 class="pagetitle">My page title underlined & centered</h1>
A pseudo could also be used.
If you also wanted the underline to be cut off when letters go through it, then , here is a probable duplicate : Disable underline for lowercase characters: g q p j y?
You cannot control the underline shadow independently, but what you could do is use a border-bottom or one of the other tricks described in this article:
https://css-tricks.com/styling-underlines-web/
I'm having an issue with web programming when I combine text-shadow with text-stroke.
The shadow version of the same text gets cut on the sides, and that's not what I would expect it to do.
Does anyone know how to avoid this issue while still using both shadow and stroke at those rates?
I can actually see that out of Safari it doen't show the same effects.
Does anyone know of a good replacement of the stroke?
Here's the code of what I'm using.
p {
margin: 80px;
color: green;
text-shadow: 90px 0px red;
-webkit-text-stroke-width: 10px;
font-size: 3em;
}
<p>V</p>
<p>O</p>
Just keep on adding to this logic. Not sure if there is a max. Sorry about giving up on you earlier.
text-shadow: 1px 1px 0 #000, 2px 2px 0 #000, 3px 3px 0 #000, 4px 4px 0 #000;
I want to achieve this text style like so:
I want to wrap the text with color white like the image above I tried using
text-shadow: 0px 0px 5px #fff;
but it turns out that the shadow will get blurry. Is there any chance that I can do it using css (if so how)? or should I just convert it into image?
You can simulate it, doing like this:
CSS
span{
text-shadow: 2px 2px 0px #fff, -2px -2px 0px #fff, 2px -2px 0px #fff, -2px 2px 0px #fff;
}
DEMO HERE
The effect you seek is called stroke and sadly not possible (yet) with CSS in a cross browser compatible way.
Faking it with shadows will not work for a stroke thicker than 1 or 2 pixels, or require a ton of layered shadows, slowing down rendering. Other faking techniques are possible but not quite fantastic.
For now the best bet remains to use images for the rare occasions where this is useful.
Ran into this today and at least for Webkit browsers, there's a better solution. You can follow this old article using the code
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
and also try using text shadows with it. It worked well for me after some pixel-pushing. I have some bigger letters, so I ended up using a text shadow like this
text-shadow: 4px 4px 0px #010000, 2px 3px 0px #010000, 4px 5px 0px #010000, 4px 6px 0px #010000;
I hope that helps!
I am trying to create the following effect for use as the styling for the tag.
This is an example in Photoshop
Is there a way to do this with CSS or is there another way to do it?
The white part is semi-transparent, as is the text fill.
Thanks,
Ashley
Css text-shadow currently doesn't have an inset option. You can try emulating it with box shadow though. Try this link and hover the text.
You can use: (might need to be adjusted)
-moz-box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 10px #000000;
And for the white highlights:
text-shadow: 1px 1px white, -1px -1px #444
Again these would need to be adjusted, but should point you in the right direction.
I have a searchbox with auto-suggest that pops a div up underneath it with multiple search string suggestions (like google). Is it possible to have drop shadow on the auto-suggest box with CSS or will I need a script of some sort? I tried a background image but the number of suggests can vary from 1 to 10 or 15.
I'd prefer something that works in IE6+ and FF2+ if possible. Thanks!
This works for me on all my browsers:
.shadow {
-moz-box-shadow: 0 0 30px 5px #999;
-webkit-box-shadow: 0 0 30px 5px #999;
}
then just give any div the shadow class, no jQuery required.
CSS3 has a box-shadow property. Vendor prefixes are required at the moment for maximum browser compatibility.
div.box-shadow {
-webkit-box-shadow: 2px 2px 4px 1px #fff;
box-shadow: 2px 2px 4px 1px #fff;
}
There is a generator available at css3please.
.shadow {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
The most widely compatible way of doing this is likely going to be creating a second div under your auto-suggest box the same size as the box itself, nudged a few pixels down and to the right. You can use JS to create and position it, which shouldn't be terribly difficult if you're using a fairly modern framework.
you might want to try this. Seems to be pretty easy and works on IE6 and Moz atleast.
<div id ="show" style="background-color:Silver;width:100px;height:100px;visibility:visible;border-bottom:outset 1px black;border-right:outset 1px black;" ></div>
The general syntax is :
border-[postion]:[border-style] [border-width] [border-color] | inherit
The list of available [border-style]s are :
dashed
dotted
double
groove
hidden
inset
none
outset
ridge
solid
inherit
You can try using the PNG drop shadows. IE6 doesn't support it, however it will degrade nicely.
http://www.positioniseverything.net/articles/dropshadows.html