Mixin: Emboss & Letterpress

Supplemental 86 views
0
0 Flares 0 Flares ×

It won’t take you long browsing Dribbble to realize that 90% of shadows and highlights are the same type: semi-transparent one-pixel lines placed above and below an element to give the illusion it’s embossed in its parent. Here’s what I mean:

Check out the cool border effect!

Here’s a simple mixin to make creating that kind of effect a breeze:

@mixin box-emboss($opacity, $opacity2){
    box-shadow:white($opacity) 0 1px 0, inset black($opacity2) 0 1px 0;
}

Now all you need to do to achieve the effect above is:

.box{
    @include box-emboss(0.8, 0.05);
}

Similarly, another common effect is the “letterpress” style, where the same “embossing” effect is applied to text. The thin white line not only simulates letterpress printing, but also makes the text more readable by providing a sharper separation between the letters and their background:

Check out the subtle text effect!

Here’s the mixin to do that:

@mixin letterpress($opacity){
    text-shadow:white($opacity) 0 1px 0;
}

For Reference:

Useful Sass Mixins

Provided by: Sacha Greif
Tagged with:
Posted in Sass

Discuss:

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

No Trackbacks.

Login

Register | Lost your password?
0 Flares Twitter 0 Facebook 0 Google+ 0 0 Flares ×