Hunter Becton

Posted on Aug 11, 2019

Code a Skewed Card Design Using CSS 2D Transforms

#css #beginners #design

Introduction

CSS 2D transforms allow you to modify an element by its shape, size, and position. There are currently 9 methods you can use with the transform property:

translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()

Today we'll be using skewX(), skewY(), scale(), and rotate() to create the following card design:

Note: you can also use skew(x,y) as a shorthand for skewX() and skewY().

Here's a step-by-step video below that you can watch if you'd prefer to follow along that way. Otherwise, each step is outlined below the video. Let's dive in!

Get Started

Development Environment

We're going to be using VS Code as the code editor with the HTML5 Boilerplate and Live Server extensions installed. Also follow the quick documentation here to launch VS Code projects from the command line using a Mac in case you don't have that setup.

Create the Project

Let's use the VS Code command line to create a project. Open VS Code and select Terminal > New Terminal. A terminal window will open at the bottom of VS Code. If you're new or need a refresher on terminal commands check out this Mac Terminal Cheat Sheet.

Head to the directory you'd like to create the project in using the cd (change directory) command followed by the directory's location. You can get an idea of what's available by typing ls (list) in the command line first. I will head to the Desktop by typing cd Desktop/ and pressing return. If you need to go back a directory you can type cd .. in the terminal.

Note: you can begin typing and then press Tab to autocomplete.

We'll start creating the project by using the mkdir (make directory) command followed by the name of our project. We'll do mkdir slanted-card. Once that directory is made we need to go into it by typing cd slanted-card/ and pressing return.

Inside the slanted-card directory we will create another directory for the images by typing mkdir images and pressing return. Then we'll create two files using the touch command: touch index.html styles.css. Now type ls in the command line to list everything in the slanted-card directory. You should see images index.html styles.css printed.

Next, type code . to open the project in a new VS Code window.

Note: you'll need to setup this code shortcut on a Mac using the launch projects from VS Code documentation.

The last thing we need to do before we start writing the HTML is to import the logo into the images folder. You can download the logo I used here (3 more variations provided), but feel free to use your own. I recommend using SVGs of 20-25 pixels in height.

Write the HTML

Open the index.html file in VS Code and start typing html and html-boilerplate should appear in the dropdown menu. Select this and press return and the HTML5 Boilerplate extension will insert boilerplate code to start your project. Feel free to fill out the title and description metadata, but it's not necessary for the design. However, it is important to import the styles.css file in the <link rel="stylesheet" href="styles.css"> tag.

Get rid of everything between the opening and closing <body> tags that was inserted from the boilerplate extension. Inside the body tags write the following:

There's not much going on here with the HTML, but I do want to point out that we're setting the source to the .customer__picture img to a direct Unsplash image URL.

In order to get the direct URL first head to Unsplash and find an image you want to use. Then right-click on the image and select Open Image in New Tab.

At the top of the browser towards the end of the URL you will see a string that starts with w= followed by a number. You can change this number to the image width you want and press return to get the new image. Copy the entire URL and use it as the src for the .customer__picture img.

Let's get the project launched via Live Server. Right-click on the index.html file in the VS Code Explorer and select Open with Live Server. A new browser window will open and you'll see the HTML you just wrote! 🤘

Write the CSS

In the beginning of this section we'll focus on the CSS for the general card design. At the end we'll create the skewed card effect using CSS 2D transforms.

Import Google Fonts

Head here to grab the Lato typeface from Google Fonts. In order to gain access to the Lato font we need to @import it at the top of the styles.css file. Here's how to get the code you need from Google Fonts:

Now just paste that code at the top of your CSS file.

Note: be sure to only import the fonts and weights you need. The Load Time metric helps ensure your project isn't importing too many fonts.

Add Resets and Body Styles

We'll start by adding simple CSS resets and body styles:

Note: the body styles are only necessary to center the card in the browser.

Add Card Styles

Let's add the styles for the basic card design:

Your design should now look like this:

Add CSS Transform Styles

We'll first add a skewX() and skewY() transform to the .shape style:

transform: skewX(-5deg) skewY(-5deg);

Note: you can also you the shorthand skew(x,y)

Now the entire card will be skewed, including the image, logo, and text. In order to reverse the skew effect on these elements we will add a transform to them as well, but we'll add the opposite value. For example, if we set the skew to -5 on the card we will set a skew of 5 on each element we want to revert.

Let's start by adding a transform skew to the .customer__picture img:

transform: skewX(5deg) skewY(5deg);

You'll notice now that the edge of the image is now visible. To fix this we'll add the scale method to the image and scale it by 15%:

transform: skewX(5deg) skewY(5deg) scale(1.15)

The next element we need to fix is the .text class. So, we'll add the following:

transform: skewX(5deg) skewY(5deg);

The last thing we need to use transform on is the shape shadow. We want the shadow to be skewed by the same amount as the .shape class, but currently the skew on the .shape class is not affecting the shadow because the shadow is not a child of the .shape class.

To fix this we'll add the following to the .shape__shadow class:

transform: skewX(-5deg) skewY(-5deg);

Now the shadow will be invisible because it's behind the shape. So we'll add a rotate method to the transform in order to make the shadow rotated and visible:

transform: skewX(-5deg) skewY(-5deg) rotate(-20deg);

And that's it! Now your final CSS should like like this:

Continue Learning

If you made it this far, thank you! You can keep up with all my content on by subscribing to the Skillthrive Youtube channel. I have a number of courses on there that you can start watching for free, including a 3.5 hour course on how to build a blog from scratch using React, Gatsby, and Contentful.