Craig Buckler - The Advanced CSS Collection

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

Code in this book is displayed using a fixed-width font, like so:

Where existing code is required for context, rather than repeat all of it, will be displayed:

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:

Youll notice that weve used certain layout styles throughout this book to signify different types of information. Look out for the following items.

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.

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 divs:

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:

Also, enlarge the children font size a bit:

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: