mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-05 21:57:32 +02:00
Merge pull request #178 from phuoc-ng/layered-card
Pattern 97: Add layered card pattern
This commit is contained in:
phuoc-ng
GitHub
@@ -43,6 +43,7 @@ enum Pattern {
|
||||
InitialAvatar = 'Initial avatar',
|
||||
InputAddon = 'Input addon',
|
||||
KeyboardShortcut = 'Keyboard shortcut',
|
||||
LayeredCard = 'Layered card',
|
||||
LinedPaper = 'Lined paper',
|
||||
MediaObject = 'Media object',
|
||||
MegaMenu = 'Mega menu',
|
||||
|
||||
@@ -125,6 +125,7 @@ const ExplorePage = () => {
|
||||
<CoverCard pattern={Pattern.FullBackground} />
|
||||
<CoverCard pattern={Pattern.InitialAvatar} />
|
||||
<CoverCard pattern={Pattern.KeyboardShortcut} />
|
||||
<CoverCard pattern={Pattern.LayeredCard} />
|
||||
<CoverCard pattern={Pattern.LinedPaper} />
|
||||
<CoverCard pattern={Pattern.MediaObject} />
|
||||
<CoverCard pattern={Pattern.OverlayPlayButton} />
|
||||
|
||||
@@ -20,8 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
<meta name="description" content="Create a card with CSS flexbox" />
|
||||
<meta name="keywords" content="css card, css flexbox" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div class="card">
|
||||
<!-- Cover -->
|
||||
@@ -52,39 +51,38 @@ css={`
|
||||
flex: 1;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '8px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '16px',
|
||||
width: '256px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '8px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: '256px',
|
||||
}}
|
||||
>
|
||||
<Rectangle height={150} />
|
||||
<div style={{ flex: 1, padding: '16px' }}>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
|
||||
<div style={{ width: '128px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<Rectangle height={150} />
|
||||
<div style={{ flex: 1, padding: '16px' }}>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
|
||||
<div style={{ width: '128px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.CardLayout, Pattern.StackedCards, Pattern.ThreeDimensionsCard]} />
|
||||
<RelatedPatterns patterns={[Pattern.CardLayout, Pattern.LayeredCard, Pattern.StackedCards, Pattern.ThreeDimensionsCard]} />
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
52
client/patterns/layered-card/Cover.tsx
Normal file
52
client/patterns/layered-card/Cover.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
/**
|
||||
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
|
||||
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
|
||||
*/
|
||||
|
||||
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: '1.5rem',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
background: '#FFF',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '3rem',
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: '3rem',
|
||||
zIndex: 2,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
background: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '3rem',
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(calc(-50% + 0.5rem), calc(-50% + 0.5rem))',
|
||||
width: '3rem',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
79
client/patterns/layered-card/Details.tsx
Normal file
79
client/patterns/layered-card/Details.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
/**
|
||||
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
|
||||
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
|
||||
*/
|
||||
|
||||
import * as React from 'react';
|
||||
import { Helmet } from 'react-helmet';
|
||||
|
||||
import RelatedPatterns from '../../components/RelatedPatterns';
|
||||
import Pattern from '../../constants/Pattern';
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import './styles.css';
|
||||
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout pattern={Pattern.LayeredCard}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a layered card with CSS" />
|
||||
<meta name="keywords" content="css layered card" />
|
||||
</Helmet>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div class="layered-card">
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.layered-card {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.layered-card::before {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
content: '';
|
||||
|
||||
/* Position */
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
transform: translate(1rem, 1rem);
|
||||
|
||||
/* Size */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
/* Display under the main content */
|
||||
z-index: -1;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div className="layered-card">
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
background: '#FFF',
|
||||
height: '12rem',
|
||||
width: '12rem',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.Card, Pattern.StackedCards, Pattern.ThreeDimensionsCard]} />
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
26
client/patterns/layered-card/styles.css
Normal file
26
client/patterns/layered-card/styles.css
Normal file
@@ -0,0 +1,26 @@
|
||||
/**
|
||||
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
|
||||
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
|
||||
*/
|
||||
|
||||
.layered-card {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.layered-card::before {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
content: '';
|
||||
|
||||
/* Position */
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
transform: translate(1rem, 1rem);
|
||||
|
||||
/* Size */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
/* Display under the main content */
|
||||
z-index: -1;
|
||||
}
|
||||
@@ -18,8 +18,7 @@ const Details: React.FC<{}> = () => {
|
||||
<meta name="description" content="Create stacked cards with CSS" />
|
||||
<meta name="keywords" content="css card, css stacked cards, css transform rotate" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div class="container">
|
||||
<!-- Repeat if you want to have more cards -->
|
||||
@@ -56,54 +55,53 @@ css={`
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
backgroundColor: '#fff',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '250px',
|
||||
position: 'relative',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
{
|
||||
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>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.Card, Pattern.ThreeDimensionsCard]} />
|
||||
<RelatedPatterns patterns={[Pattern.Card, Pattern.LayeredCard, Pattern.ThreeDimensionsCard]} />
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -19,8 +19,7 @@ const Details: React.FC<{}> = () => {
|
||||
<meta name="description" content="Create a 3D card with CSS" />
|
||||
<meta name="keywords" content="css 3D card" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div class="three-dimensions-card">
|
||||
...
|
||||
@@ -69,30 +68,29 @@ css={`
|
||||
width: 100%;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div className="three-dimensions-card">
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '8rem',
|
||||
width: '16rem',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="three-dimensions-card">
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '8rem',
|
||||
width: '16rem',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.Card, Pattern.StackedCards]} />
|
||||
<RelatedPatterns patterns={[Pattern.Card, Pattern.LayeredCard, Pattern.StackedCards]} />
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -39,6 +39,7 @@
|
||||
<url><loc>https://csslayout.io/patterns/initial-avatar</loc></url>
|
||||
<url><loc>https://csslayout.io/patterns/input-addon</loc></url>
|
||||
<url><loc>https://csslayout.io/patterns/keyboard-shortcut</loc></url>
|
||||
<url><loc>https://csslayout.io/patterns/layered-card</loc></url>
|
||||
<url><loc>https://csslayout.io/patterns/lined-paper</loc></url>
|
||||
<url><loc>https://csslayout.io/patterns/media-object</loc></url>
|
||||
<url><loc>https://csslayout.io/patterns/mega-menu</loc></url>
|
||||
|
||||
Reference in New Issue
Block a user