CSS card design examples
Overview of card designs
Title on top
The background image is shown at the original size.
To find out how something on a webpage has been made, we can right-click it and then click "inspect" or "inspect element".
Title on top
The text now has a background colour to make it more readable, and the background image set to cover the entire element.
Title floating on top of an image
Wide title on the side
Thin title on the side
Inset
We can also make sure the text does not overlap the border, by adding a margin of a similar size to the border thickness.
- We can add a list here
- Or we could have a paragraph of text
Cards don't always need a clear border
We can also use a design without borders.
Multiple shapes
It can also be fun to use multiple borders or multiple backgrounds.
Try hovering a mouse over here!
Hover over the picture!
The picture has the hover class:
.hover:hover { transform: scale(1.5, 1.5); z-index: 500; }
Explanation of how card designs work
The outer container
The outer container has this style:
display: inline-flex; flex-direction: row; flex-wrap: wrap; justify-content:left;
Let tags with big content grow to fit, without getting too close to the neighbors:
.wide { flex: 1; }
We can also add images
The card itself has this style:
border-radius: 25px;max-width: 520px;
padding: 20px;
margin: 20px;
flex-grow: 0;
Classes for the div that contains the small image
.small { max-width: 75px; max-height: 75px; padding: 10px; } .small * { max-width: 75px; max-height: 75px; }
Card style continued
- There is space here
- for list items,
- or for hyperlinks.
color: var(--code-text-color);
box-shadow: inset 3em 1em 0 0
var(--card-background-color);
/* For the contents of this card */
display: inline-flex;
Remaining classes
For the image attribution
.attribution { font-size: 50%; }