SitePoint specializes in publishing fun, practical, and easy-to-understand content for web professionals. Visit http://www.sitepoint.com/ to access our blogs, books, newsletters, articles, and community forums. Youll find a stack of information on JavaScript, PHP, design, and more.
Preface
CSS has grown from a language for formatting documents into a robust language for designing web applications. Its syntax is easy to learn, making CSS a great entry point for those new to programming. Indeed, its often the second language that developers learn, right behind HTML.
As CSS's feature set and abilities have grown, so has its depth. In this collection of books, we'll be exploring some of the amazing things that developers can do with CSS today; tasks that in the past might only have been achievable with some pretty complex JavaScript, if at all. This collection contains:
- Modern CSS, which explores topics like variable fonts and transforms, and shows how they might be used in the real world
- CSS Grid Layout: 5 Practical Projects, which shows five complete projects that utilize the Grid Layout Layout module
- CSS Tools & Skills which looks at essential CSS tools and skills for modern front-end developers
Conventions Used
Code Samples
Code in this book is displayed using a fixed-width font, like so:
A Perfect Summer's Day
It was a lovely day for a walk in the park.The birds were singing and the kids were all back at school.
Where existing code is required for context, rather than repeat all of it, will be displayed:
function animate() { new_variable = "Hello";}
Some lines of code should be entered on one line, but weve had to wrap them because of page constraints. An indicates a line break that exists for formatting purposes only, and should be ignored:
URL.open("http://www.sitepoint.com/responsive-web-design-real-user-testing/?responsive1");
Youll notice that weve used certain layout styles throughout this book to signify different types of information. Look out for the following items.
Tips, Notes, and Warnings
Hey, You!
Tips provide helpful little pointers.
Ahem, Excuse Me ...
Notes are useful asides that are relatedbut not criticalto the topic at hand. Think of them as extra tidbits of information.
Make Sure You Always ...
... pay attention to these important points.
Watch Out!
Warnings highlight any gotchas that are likely to trip you up along the way.
Chapter 1: Using CSS Transforms in the Real World
by Ilya Bodrov-Krukowski
In this article, well learn how CSS transforms can be used in the real world to solve various tasks and achieve interesting results. Specifically, youll learn how to adjust elements vertically, create nice-looking arrows, build loading animations and create flip animations.
Transformations of HTML elements became a CSS3 standard in 2012 and were available in some browsers before then. Transformations allow you to transform elements on a web page as explained in our 101 article on CSS transforms. You can rotate, scale, or skew your elements easily with just one line of code, which was difficult before. Both 2D and 3D transformations are available.
As for browser support, 2D transforms are supported by all major browsers including Internet Explorer, which has had support since version 9. As for 3D transformations, IE has only partial support since version 10.
Ahem, Excuse Me ...
This article wont focus on the basics of transformations. If you dont feel very confident with transformations, I recommend reading about 2D and 3D transforms first.
Vertically Aligning Children
Any web designer knows how tedious it can be to vertically align elements. This task may sound very simple to a person whos not familiar with CSS, but in reality theres a jumble of techniques that are carefully preserved between generations of developers. Some suggest using display: inline
with vertical-align: middle
, some vote for display: table
and accompanying styles, whereas true old school coders are still designing their sites with tables (just joking, dont do that!). Also, its possible to solve this task with Flexbox or Grids, but for smaller components, transforms may be a simpler option.
Vertical alignment can be more complex when element heights are variable. However, CSS transformations provide one way to solve the problem. Lets see a very simple example with two nested div
s:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
Nothing complex: just two nested blocks with a Lorem Ipsum text of different length.
Lets set width, height, and border for the parent, as well as some spacing to make it look nicer:
.parent { height: 300px; width: 600px; padding: 0 1em; margin: 1em; border: 1px solid red;}
Also, enlarge the children font size a bit:
.child { font-size: 1.2rem;}
As a result, youll see something like this:
And now your customer says: Please align the text vertically so that it appears in the middle of these red boxes. Nooo! But fear not: were armed with transformations! The first step is to position our children relatively and move them 50% to the bottom: