mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-07 14:46:38 +02:00
Code Issues Releases Wiki Activity

feat: Stacked cards

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-19 23:07:49 +07:00
parent cac3718ae6
commit 7a94e81e9d
7 changed files with 107 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
contents/_includes/patterns/stacked-cards.njk Normal file
View File

@@ -0,0 +1,5 @@
<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>

6
contents/index.njk
View File

@@ -235,6 +235,12 @@ eleventyExcludeFromCollections: true
<div class="pattern__title">Separator</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/stacked-cards/">
<div class="pattern__cover">{% include "patterns/stacked-cards.njk" %}</div>
<div class="pattern__title">Stacked cards</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/video-background/">
<div class="pattern__cover">{% include "patterns/video-background.njk" %}</div>

55
contents/stacked-cards.md Normal file
View File

@@ -0,0 +1,55 @@
---
layout: layouts/post.njk
title: Stacked cards
description: Create stacked cards with CSS
keywords: css card, css stacked cards, css transform rotate
---
## 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);
}
```
{% demo %}
{% include "patterns/stacked-cards.njk" %}
{% enddemo %}

108
pages/stacked-cards/index.tsx
View File

@@ -1,108 +0,0 @@
import * as React from 'react';
import Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<PatternLayout pattern={Pattern.StackedCards}>
<Head>
<meta name="description" content="Create stacked cards with CSS" />
<meta name="og:description" content="Create stacked cards with CSS" />
<meta name="twitter:description" content="Create stacked cards with CSS" />
<meta name="keywords" content="css card, css stacked cards, css transform rotate" />
</Head>
<BrowserFrame
html={`
<div class="container">
<!-- Repeat if you want to have more cards -->
<div class="container__card"></div>
<!-- Main card's content -->
...
</div>
`}
css={`
.container {
/* Used to position the stacked cards */
position: relative;
}
.container__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 rgba(0, 0, 0, 0.3);
/* Rotate it. Change the number of degrees for the following cards */
transform: rotate(5deg);
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
backgroundColor: '#fff',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
height: '250px',
position: 'relative',
width: '200px',
}}
>
{Array(5)
.fill(0)
.map((_, index) => {
return (
<div
key={index}
style={{
backgroundColor: '#fff',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
height: '100%',
left: 0,
position: 'absolute',
top: 0,
transform: `rotate(${5 * (index + 1)}deg)`,
width: '100%',
zIndex: -1,
}}
/>
);
})}
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.Card, Pattern.LayeredCard, Pattern.ThreeDimensionsCard]} />
</PatternLayout>
);
};
export default Details;

61
patterns/stacked-cards/Cover.tsx
View File

@@ -1,61 +0,0 @@
import * as React from 'react';
import Frame from '../../placeholders/Frame';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
backgroundColor: '#fff',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
height: '75%',
position: 'relative',
width: '60%',
}}
>
<div
style={{
backgroundColor: '#fff',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
height: '100%',
left: 0,
position: 'absolute',
top: 0,
transform: 'rotate(15deg)',
width: '100%',
zIndex: -1,
}}
/>
<div
style={{
backgroundColor: '#fff',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
height: '100%',
left: 0,
position: 'absolute',
top: 0,
transform: 'rotate(30deg)',
width: '100%',
zIndex: -1,
}}
/>
</div>
</div>
</Frame>
);
};
export default Cover;

1
styles/index.scss
View File

@@ -48,6 +48,7 @@
@import './patterns/questions-and-answers';
@import './patterns/ribbon';
@import './patterns/separator';
@import './patterns/stacked-cards';
@import './patterns/triangle-buttons';
@import './patterns/video-background';
@import './patterns/voting';

40
styles/patterns/_stacked-cards.scss Normal file
View File

@@ -0,0 +1,40 @@
.stacked-cards {
/* Used to position the stacked cards */
position: relative;
/* Demo */
border: 1px solid #d1d5db;
border-radius: 0.25rem;
height: 6rem;
width: 6rem;
}
.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);
}