mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-30 17:19:51 +02:00
Code Issues Releases Wiki Activity

feat: Update contents

Browse Source
This commit is contained in:
Phuoc Nguyen
2023-08-19 19:27:15 +07:00
parent f7af6da9e4
commit 71d51b358a
318 changed files with 15536 additions and 6884 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
contents/stacked-cards.mdx Normal file
View File

@@ -0,0 +1,112 @@
---
category: Display
created: '2019-12-25'
description: Create stacked cards with CSS
keywords: css card, css stacked cards, css transform rotate
thumbnail: /assets/css-layout/thumbnails/stacked-cards.png
title: Stacked cards
---
## HTML
```html
<div class="stacked-cards">
<!-- Repeat if you want to have more cards -->
<div class="stacked-cards__card"></div>
<!-- Main card's content -->
...
</div>
```
## CSS
```css
.stacked-cards {
/* Used to position the stacked cards */
position: relative;
border: 1px solid #d1d5db;
border-radius: 0.25rem;
}
.stacked-cards__card {
/* Absolute position */
left: 0px;
position: absolute;
top: 0px;
/* Take full size */
height: 100%;
width: 100%;
/* Displayed under the container */
z-index: 1;
/* Background and border colors */
background-color: rgb(255, 255, 255);
border: 1px solid #d1d5db;
/* Rotate it. Change the number of degrees for the following cards */
transform: rotate(5deg);
}
```
<Playground>
```css styles.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
}
.stacked-cards {
/* Used to position the stacked cards */
position: relative;
/* Demo */
border: 1px solid #d1d5db;
border-radius: 0.25rem;
height: 16rem;
width: 16rem;
}
.stacked-cards__card {
/* Absolute position */
left: 0px;
position: absolute;
top: 0px;
/* Take full size */
height: 100%;
width: 100%;
/* Displayed under the container */
z-index: 1;
/* Background and border colors */
background-color: rgb(255, 255, 255);
border: 1px solid #d1d5db;
}
.stacked-cards__card--1st {
/* Rotate it. Change the number of degrees for the following cards */
transform: rotate(5deg);
}
.stacked-cards__card--2nd {
/* Rotate it. Change the number of degrees for the following cards */
transform: rotate(10deg);
}
.stacked-cards__card--3rd {
/* Rotate it. Change the number of degrees for the following cards */
transform: rotate(15deg);
}
```
```html index.html hidden
<div class="stacked-cards">
<div class="stacked-cards__card stacked-cards__card--1st"></div>
<div class="stacked-cards__card stacked-cards__card--2nd"></div>
<div class="stacked-cards__card stacked-cards__card--3rd"></div>
</div>
```
</Playground>