O'Reilly logo

Web Design Blueprints by Benjamin LaGrone

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

Styling the objects with CSS

Next, let's work on building our rocket. The Font Awesome rocket is cockeyed, so we need to transform it with a rotate(315deg) attribute, fix its position on the screen, and start it 40% from the left. The rocket element has two child fa-rocket I elements inside it and an fa-fire I element.

Style the first child with a fixed position, starting at 3% from the bottom and 40% from the left, and give it a text-shadow value of 1px 1px #666 (for a 3D effect). The rocket's second child will also have a fixed position, 3.2% from the bottom and 39.8% from the left.

Here, we also want to add a 3D effect with a grey background color of #333, a background-clip attribute on the text, and a text shadow of rgb(255,255,255,0.8) at -1px ...

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