CSS Funstuff - Cards

Hey everyone!

I'm always amazed at the things you can do with CSS if you really put your mind to it! I'm sure many of you are too, judging from the responses I've seen to even my first posts in the series. So, once again, I'm back with another example of CSS Funstuff: Cards!

Here's the Deal:

Cards are used in UI design as a container for other elements, whether text, images, buttons, etc. Typically, creating a card is as simple as creating a generalized box, such as adding a border or shadow to an HTML container element.

Before we go further, if you're following this article as a tutorial, you may want to apply the standard CSS Funstuff styling to your document. To do this, simple copy and paste the following CSS styles:

:root {
  background-color: rgb(35, 35, 35);
  color: rgb(235, 235, 235);
  font-family: sans-serif;
  letter-spacing: .075rem;
  line-height: 2.735rem;
  padding: 5rem;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Example 1:

Let's create a simple article element, with some filler text:

<article class="card">
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Quae dicta repellat quidem eum sint a, iusto labore unde,
    atque ab porro voluptas tempore quo? Culpa maxime
    aspernatur nisi hic eius!
</article>

We'll also give it a simple card style, using CSS:

.card {
  border-radius: 8px;
  box-shadow: 0 9px 18px rgba(5, 5, 5, .35);
  padding: 3.5rem;
  transition: 1s;
}

This should give us something that looks like this:

Now we have a simple card! But no tricks! Bummer, right? Of course, we want to change the background colour, border styles, or other such properties, we can. But if say, we want to rotate the card while keeping the text in place, we simply can't do that.

...or can't we?

Stacking the deck!

Fortunately, there is another way! Most, if not all, container level HTML elements can use what are known as pseudo-elements. With the right combination of certain pseudo-elements and some snazzy CSS styles, you do exactly what we couldn't do earlier, and more!

Example 2:

For this alternate example, we'll add another class, .card-alt, and add a new rule: position: relative;.

.card-alt {
  padding: 3.5rem;
  position: relative;
}

This new rule will be important for the next step. We'll be using the pseudo-element ::after, positioned absolutely. In order for this to work, we need the parent element, the article with the class .card-alt to be position relatively, so that any children within it can be positioned relative to the parent.

Next, we'll set the ::after pseudo-element to using the following styles:

.card-alt::after {
  background-color: rgba(255, 0, 0, 0);
  border-radius: 8px;
  box-shadow: 0 9px 18px transparent;
  content: '';
  inset: 0;
  position: absolute;
  transition: 1s;
  z-index: -1;
}

.card-alt:hover:after {
  background-color: rgba(235, 0, 135, .175);
  border-radius: 18px;
  box-shadow: 0 9px 18px rgba(5, 5, 5, .35);
  content: '';
  filter: hue-rotate(135deg);
  inset: 0;
  position: absolute;
  transform: scale(.975) rotate(3.75deg);
}

What this does is:

1. Create a card using the pseudo-element ::after as the card outline and background.
2. Rotate and scale the card background when hovered, and change the background color.

Note: The rule z-index: -1; is necessary to set the pseudo-element to be underneath the parent element.

Final result:

But wait! There's more!

As I always do with CSS Funstuff, I've put together some further examples that you can use. You can grab these examples for free over on my Gumroad page.