CODEWITHSUNDEEP
htmltypographycss
Sam Baldwin
Sam Baldwin

Reputation: 433

How to prevent text-shadow from overlapping text on previous line

Is it possible to prevent text-shadow from overlapping text within the same element (e.g. a h1)? Please see an exaggerated example image below – in my use case I would like the text to be very bright white, but instead the shadow is overlapping it and causing murky grey areas.

Example of nasty text-shadow overlap

I made a reduced test case here to demonstrate: http://codepen.io/approach/pen/LgaIe

Note : I deliberately used a small line-height to highlight this issue

Upvotes: 16

Views: 2808

Answers (5)

Andrew Tibbetts
Andrew Tibbetts

Reputation: 3062

Use a pseudo element.

http://codepen.io/andrewtibbetts/pen/OXzvOd

First, get the content repeated into an attribute on the element:

<div class="text-shadow" data-content="This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow.">This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow.</div>

Next, the css:

.text-shadow {
    position: relative;
    text-shadow: 0 -.5em 1em black;
    color: transparent;

    &:after {
        content: attr(data-content);
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        text-shadow: none;
    }
}

Upvotes: 6

apaul
apaul

Reputation: 16170

You could consider putting another layer of text above the shadowed text:

Basic Working Example

<div class="cover">
     <h1><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit eveniet eos deleniti provident ab nam laborum at voluptatem est iste ratione quis error perspiciatis debitis.</a></h1>

</div>

.cover{
 position:absolute; 
 top:0;
}
.cover h1 a{
 color: white;
}

Or to save a little time and typing:

jQuery Working Example

$(function () {
    $('.wrapper').children().clone().css({
        position: 'absolute'
    }).prependTo('body');
});

Upvotes: 5

Rafael Cavalcante
Rafael Cavalcante

Reputation: 417

As far as I know, you can't.

Try to use a smaller shadow or make the text line-height larger.

Upvotes: 2

Kariem Muhammed
Kariem Muhammed

Reputation: 479

i think you have to make your line-height bigger, say line-height: 1.3em;

Upvotes: -1

CRABOLO
CRABOLO

Reputation: 8793

You can try something like this : 

h1 { 
   text-shadow: 0 0 2px white, 0 0 10px grey, 0 0 4px black; 
}

you can have unlimited number of text shadows. so by putting a white one first, it may help clear out the grey /black. Adjust the pixels and such, to get it working how you want.

Upvotes: 1

Related Questions