O'Reilly logo

Inkscape 0.48 Illustrator's Cookbook by Mihaela Jurković, Rigel Di Scala

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating a button to use with the CSS Sliding Doors technique

In this recipe we will create an image of a button that can be used with the popular CSS "Sliding Doors" technique, so that it automatically resizes with the text. The button will have a partially transparent shadow so the usual solution of using a very wide button image won't help because the elements styled with the image overlap and the shadow is visibly stronger in that area. This is solved by making the image twice as wide as we expect our widest button text will occupy, and making half of it completely transparent. We will also see how to export images with sharp edges suppressing the antialiasing with snapping to pixel grid.

How to do it...

The following steps will demonstrate ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required