I'm trying to add an outline to text using the CSS text-shadow property here.
The problem is that the shadow corners don't always meet. If you look below, you can see the problem on the upper right corner of the Y.
It doesn't look too bad with this font but with some fonts that my code uses it makes a big difference.
Is there a way to have the text completely surrounded by the box-shadow, especialy in the cornerns?
.shadowOutline {
font: normal 200pt Arial;color: #fff;
text-shadow:
-1px 1px #ff0000,
-1px -1px #ff0000,
1px 1px #ff0000,
1px -1px #ff0000,
-2px 2px #ff0000,
-2px -2px #ff0000,
2px 2px #ff0000,
2px -2px #ff0000;
-webkit-font-smoothing: antialiased;
}
<div class="shadowOutline">My</div>
You can do it with svg ,and you have a perfect resault
text{font-size:100px;
fill: none;
stroke: red;
stroke-width:2px;
stroke-linejoin: round;
}
<svg height="120" width="480">
<text x="0" y="90" >I love SVG!</text>
</svg>
or you can use it directly with inline css like this :
<svg height="100" width="480">
<text x="0" y="80" fill="white" stroke="red" style="font-size:100px;stroke-width:2px;">I love SVG!</text>
</svg>
I managed to get it a little better using :
.shadowOutline {
font: normal 200pt Arial;color: #fff;
text-shadow:
-2px -2px 0 #ff0000,
2px -2px 0 #ff0000,
-2px 2px 0 #ff0000,
2px 2px 0 #ff0000,
2px 0px 0 #ff0000,
-2px 0px 0 #ff0000,
0px 2px 0 #ff0000,
0px -2px 0 #ff0000;
-webkit-font-smoothing: antialiased;
}
<div class="shadowOutline">My</div>
The point is to offset the text-shadow in all directions :
left
right
top
bottom
But also
top-left
top-right
bottom-left
bottom-right
Keep in mind, that for values greater than one pixel you'll have to fill the gaps of sharp corner shadows. See for example letter "X" with (attempt of) ten pixels thick outline, first made by eight, second by twenty four shadows:
See this example
span {
font: normal 200pt Arial;
color: #fff;
letter-spacing: 20px
}
.eight-shadows {
text-shadow:
-10px -10px 0 #f00,
00px -10px 0 #f00,
10px -10px 0 #f00,
10px 00px 0 #f00,
10px 10px 0 #f00,
00px 10px 0 #f00,
-10px 10px 0 #f00,
-10px 00px 0 #f00;
}
.twenty-four-shadows {
text-shadow:
-10px -10px 0 #f00,
00px -10px 0 #f00,
10px -10px 0 #f00,
10px 00px 0 #f00,
10px 10px 0 #f00,
00px 10px 0 #f00,
-10px 10px 0 #f00,
-10px 00px 0 #f00,
-05px -10px 0 #f00,
00px -10px 0 #f00,
05px -10px 0 #f00,
05px 00px 0 #f00,
05px 10px 0 #f00,
00px 10px 0 #f00,
-05px 10px 0 #f00,
-05px 00px 0 #f00,
-10px -05px 0 #f00,
00px -05px 0 #f00,
10px -05px 0 #f00,
10px 00px 0 #f00,
10px 05px 0 #f00,
00px 05px 0 #f00,
-10px 05px 0 #f00,
-10px 00px 0 #f00
}
<span class="eight-shadows">X</span>
<span class="twenty-four-shadows">X</span>
(In fact the middle "horizontal" shadows chunk could be omitted for this sample, because it contains no sharp vertical corner, but I left it there for clarity.)
To get "solid" 10px corner outlines you'd have to use 288 (= 4×9×8) shadows, and even then the result will be vertical or horizontal lines near the sharp corners instead of sharp ones.
If you're okay wit a little more "blur" to your outline, using the third, optional property on text-shadow could help close those gaps you're seeing on the "Y".
From the MDN article for text-shadow:
Values
<color>
Optional. Can be specified either before or after the offset
values. If the color is not specified, a UA-chosen color will be used.
Note: If you want to ensure consistency across browsers, explicitly
specify a color.
<offset-x> <offset-y> Required. These length values
specify the shadow's offset from the text. <offset-x> specifies the
horizontal distance; a negative value places the shadow to the left of
the text. <offset-y> specifies the vertical distance; a negative value
places the shadow above the text. If both values are 0, then the
shadow is placed behind the text (and may generate a blur effect when
is set). To find out what units you can use, see
.
<blur-radius> Optional. This is a value. If not
specified, it defaults to 0. The higher this value, the bigger the
blur; the shadow becomes wider and lighter.
.shadowOutline {
font: normal 200pt Arial;color: #fff;
text-shadow:
-1px 1px 4px #ff0000,
-1px -1px 4px #ff0000,
1px 1px 4px #ff0000,
1px -1px 4px #ff0000,
-2px 2px 4px #ff0000,
-2px -2px 4px #ff0000,
2px 2px 4px #ff0000,
2px -2px 4px #ff0000;
-webkit-font-smoothing: antialiased;
}
<div class="shadowOutline">My</div>
Headsup: for this purpose you can use -webkit-text-stroke (preferably in combination with -webkit-text-fill-color and it will work in current Firefox (49+) as well:
.shadowOutline {
font: normal 200pt Arial;
color: red;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 2px red;
}
<div class="shadowOutline">My</div>
Capable browsers will render outline around transparent letters, others opaque (red) letter, so this is somewhat more reliable than white text on white background in browsers without text-shadow support.
Got a problem with the css shadows.
I can't figure out how to get rid of the top shadow here: http://i.imgur.com/5FX62Fx.png
What I got:
box-shadow: 0 -3px 4px -6px #777, 0 3px 4px 6px #ccc;
How do I do that? I want it to be on the left, right and bottom side.
try this is:
div
{
width:300px;
height:100px;
background-color:white;
box-shadow:0px 0px 5px #888888;
}
try like so:
box-shadow: 3px 3px 3px #777, -3px 3px 3px #777;
(adjust hex colours to match your needs)
Example - http://jsbin.com/ebemol/1
Looks like you need to position the vertical shadow property:
box-shadow: 0 5px 4px -6px #777
-3px would indicates that the shadow starts -3px from where the shadow would start normally, I have changed it to an arbitrary value, 5px so it starts further down.
http://jsfiddle.net/9Dgtj/
You can see from the JS Fiddle I have provided that adjusting the vertical shadow (5px) moves the shadow down.
In a Gridview I'm adding a row CSS class depending on certain criteria. This class adds an inset box shadow to the border of the row, and it works fine in FireFox. In IE it adds the row shadow, but it adds it at the cell level so the cell borders on the left and right of a cell is highlighted as well. This shows each cell border with the insert glow when I only want the row highlighted.
Chrome acts like IE, but with out the inset box shadow. It only colors the border.
As I said, it looks good in FF. Any ideas on how to correct this in IE ... and Chrome, where the box shadow only colors the border, but I can live with that.
Css Class
.rowGlow
{
border-collapse:separate;
border-color:#ff0000;
box-shadow:inset 0 0 3px 1px #ff0000;
-moz-box-shadow:inset 0 0 3px 2px #ff0000;
-webkit-box-shadow:inset 0 0 3px 2px #ff0000;
}
Row Tag
<tr class="rowGlow" style="color:#333333;background-color:#F7F6F3;">
jQuery to add css class to row, depending on a hidden value in the row
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {if (args.get_error() == undefined) {alertTest();}}
function alertTest() {
$(document).ready(function () {
$('tr').each(function () {
if ($(this).find('input[type=hidden]').val() == 'False') {
var du = <%= DateUpdates() %>;
if(du){$(this).addClass('rowGlow');}
}
});
});
}
alertTest();
This is what I ended up with. Updated jQuery to this to add two additional CSS class', one for the first TD and one for the last TD:
$(this).addClass('rowGlow').find('td:first-child').addClass('firstCell');
$(this).find('td:last-child').addClass('lastCell');
.rowGlow
{
-webkit-box-shadow:inset 0 -3px 3px -1px #ff0000,inset 0px 3px 3px -1px #ff0000;
-moz-box-shadow: inset 0 -2px 3px -1px #ff0000,inset 0px 2px 3px -1px #ff0000;
box-shadow: inset 0 -3px 3px -1px #ff0011,inset 0px 3px 3px -1px #ff0000;
}
.firstCell
{
-webkit-box-shadow: inset 3px 0px 3px -2px #ff0000;
-moz-box-shadow: inset 3px 0px 3px -2px #ff0000;
box-shadow: inset 3px 0px 3px -2px #ff0000;
}
.lastCell
{
-webkit-box-shadow: inset -3px 0px 3px -2px #ff0000;
-moz-box-shadow: inset -3px 0px 3px -2px #ff0000;
box-shadow: inset -3px 0px 3px -2px #ff0000;
}
<!-- For IE8 and lower I have this conditional -->
<!--[if lt IE 9]>
<style type="text/css">
.rowGlow {
background-color: #F9ACAA !important;
/* color: #000!important; */
}
</style>
<![endif]-->
What about trying to style the :first-child and :last-child TD in the row to be something different.
Here is the link on the stack. You will, however, have to alter your jQuery to accomodate the individual td cells, which will be a little bit more work.
I want to style all of the images on my website to have box-shadows and padding of 10px, so that text isn't smooshed up against them. However, when I assign any padding to "img" with CSS, the box-shadow is drawn at the edge of the padding, leaving a 10px blank space around the image.
#content img {
-moz-box-shadow: 0 0 5px 2px #282a2d;
-webkit-box-shadow: 0 0 5px 2px #282a2d;
padding:10px
}
This particular image is floated left within the paragraph. here is an example of my problem -
Any ideas?
EDIT: I do not want the padding. I just want the box-shadow, and then space, so that text doesn't mash up right next to the box-shadow. Turns out what I wanted was margin, not padding. Silly mistake.
use margin in addition to padding
#content img {
box-shadow: 0 0 5px 2px #282a2d;
padding: 10px;
margin-right: 10px;
}
Give the background of the same color
#content img {
-moz-box-shadow: 0 0 5px 2px #282a2d;
-webkit-box-shadow: 0 0 5px 2px #282a2d;
background: #282a2d;
padding:10px;
}
Demo
UPDATE:
As mentioned in comment, OP seems to be OK without padding too. So, I will just complete my answer.
#content img {
-moz-box-shadow: 0 0 5px 2px #282a2d;
-webkit-box-shadow: 0 0 5px 2px #282a2d;
margin:10px
}
#zellio's answer didn't work for me, so I solved it by adding two elements.
<div class="with-padding>
<div class=with-shadow>
...
</div>
</div>
.with-padding {
padding = 10px;
}
.with-shadow {
box-shadow: 0 0 5px 2px #282a2d;
}
I would like to reproduce the border color made by firebug when you try to inspect the DOM element in a web page.
It looks like the border around the text "Link2" of the following image.
The border around the text "Link" is what I did. The code is visible from this link.
jsfiddle.
Can someone help me to write the css code to reproduce the border of Link2?
Thanks
You'll need to use box-shadows, like this:
http://jsfiddle.net/GolezTrol/AEDsY/
.cl3 {
-webkit-box-shadow: 0 0 3px 3px lightblue;
-moz-box-shadow: 0 0 3px 3px lightblue;
box-shadow: 0 0 3px 3px lightblue;
}
That effect is achieved using the box-shadow css property.
To get as much support as possible, use -moz-box-shadow, -webkit-box-shadow and box-shadow.
To get your desired effect, use:
-moz-box-shadow: 0 0 5px 2px blue;
-webkit-box-shadow: 0 0 5px 2px blue;
box-shadow: 0 0 5px 2px blue;
You would use something like this:
-webkit-box-shadow: 0px 0px 3px blue; /* Saf3-4 */
-moz-box-shadow: 0px 0px 3px blue; /* FF3.5 - 3.6 */
box-shadow: 0px 0px 3px blue; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
Check out http://css3please.com/ - it's a great resource for playing with new CSS properties.