Book Image

Web Design Blueprints

Book Image

Web Design Blueprints

Overview of this book

The book delivers simple instructions on how to design and build modern Web using the latest trends in web development. You will learn how to design responsive websites, created with modern Flat User Interface design patterns, build deep-scrolling websites with parallax 3D effects, and roll-your-own single-page applications. Finally, you'll work through an awesome chapter that combines them all. Each chapter features actual lines of code that you can apply right away.
Table of Contents (12 chapters)
Web Design Blueprints
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

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 1px 3px blur. Finally, fa-fire, which is the rocket's flame, should also be at a fixed position 12px from the bottom and 12px from the left. Also give it a text shadow to make it look more fiery. I'll put the code in the example and skip describing...