CSS Funstuff - Cards
Tags: css, ui, design, ux
Published: 2023-11-29 16:08:42

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

```css
: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:

```html
<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:

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


![Card Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9tij5vli82zsb4lr452o.png)

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](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) 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;`.

```css
.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:

```css
.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:

{% youtube jeAqMnSGxI0 %}

## 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](https://rolandixor.gumroad.com/l/erhdt) for free over on my Gumroad page.