diff --git a/contents/_includes/patterns/three-dimensions-card.njk b/contents/_includes/patterns/three-dimensions-card.njk new file mode 100644 index 0000000..d465980 --- /dev/null +++ b/contents/_includes/patterns/three-dimensions-card.njk @@ -0,0 +1,2 @@ +
+
\ No newline at end of file diff --git a/contents/index.njk b/contents/index.njk index 8d80778..28b81b7 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -265,6 +265,12 @@ eleventyExcludeFromCollections: true
Teardrop
+
+ +
{% include "patterns/three-dimensions-card.njk" %}
+
Three dimensions card
+ +
{% include "patterns/video-background.njk" %}
diff --git a/contents/three-dimensions-card.md b/contents/three-dimensions-card.md new file mode 100644 index 0000000..721a52e --- /dev/null +++ b/contents/three-dimensions-card.md @@ -0,0 +1,64 @@ +--- +layout: layouts/post.njk +title: Three dimensions card +description: Create a 3D card with CSS +keywords: css 3D card +--- + +## HTML + +```html +
+ ... +
+``` + +## CSS + +```css +:root { + --three-dimensions-card-left-side-width: 1rem; +} + +.three-dimensions-card { + position: relative; +} + +/* The left side */ +.three-dimensions-card::before { + background: #d1d5db; + content: ''; + + /* Position */ + top: var(--three-dimensions-card-left-side-width); + left: 0px; + position: absolute; + transform: translate(-100%, 0) skewY(-45deg); + transform-origin: left top; + + /* Size */ + height: 100%; + width: var(--three-dimensions-card-left-side-width); +} + +/* The bottom side */ +.three-dimensions-card::after { + background: #d1d5db; + content: ''; + + /* Position */ + bottom: 0px; + left: 0px; + position: absolute; + transform: translate(0, 100%) skewX(-45deg); + transform-origin: left top; + + /* Size */ + height: var(--three-dimensions-card-left-side-width); + width: 100%; +} +``` + +{% demo %} +{% include "patterns/three-dimensions-card.njk" %} +{% enddemo %} diff --git a/pages/three-dimensions-card/index.tsx b/pages/three-dimensions-card/index.tsx deleted file mode 100644 index c569776..0000000 --- a/pages/three-dimensions-card/index.tsx +++ /dev/null @@ -1,96 +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 ( - - - - - - - - - ... -
-`} - css={` - :root { - --three-dimensions-card-left-side-width: 1rem; - } - - .three-dimensions-card { - position: relative; - } - - /* The left side */ - .three-dimensions-card::before { - background: rgba(0, 0, 0, 0.3); - content: ''; - - /* Position */ - top: var(--three-dimensions-card-left-side-width); - left: 0px; - position: absolute; - transform: translate(-100%, 0) skewY(-45deg); - transform-origin: left top; - - /* Size */ - height: 100%; - width: var(--three-dimensions-card-left-side-width); - } - - /* The bottom side */ - .three-dimensions-card::after { - background: rgba(0, 0, 0, 0.3); - content: ''; - - /* Position */ - bottom: 0px; - left: 0px; - position: absolute; - transform: translate(0, 100%) skewX(-45deg); - transform-origin: left top; - - /* Size */ - height: var(--three-dimensions-card-left-side-width); - width: 100%; - } - `} - > -
-
-
-
-
- - - - - - ); -}; - -export default Details; diff --git a/patterns/three-dimensions-card/Cover.tsx b/patterns/three-dimensions-card/Cover.tsx deleted file mode 100644 index 456be97..0000000 --- a/patterns/three-dimensions-card/Cover.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
-
-
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index 84ac6a2..8702e86 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -53,6 +53,7 @@ @import './patterns/statistic'; @import './patterns/status-light'; @import './patterns/teardrop'; +@import './patterns/three-dimensions-card'; @import './patterns/triangle-buttons'; @import './patterns/video-background'; @import './patterns/voting'; diff --git a/styles/patterns/_three-dimensions-card.scss b/styles/patterns/_three-dimensions-card.scss new file mode 100644 index 0000000..d237c1d --- /dev/null +++ b/styles/patterns/_three-dimensions-card.scss @@ -0,0 +1,46 @@ +:root { + --three-dimensions-card-left-side-width: 1rem; +} + +.three-dimensions-card { + position: relative; + + /* Demo */ + border: 1px solid #d1d5db; + height: 6rem; + width: 6rem; +} + +/* The left side */ +.three-dimensions-card::before { + background: #d1d5db; + content: ''; + + /* Position */ + top: var(--three-dimensions-card-left-side-width); + left: 0px; + position: absolute; + transform: translate(-100%, 0) skewY(-45deg); + transform-origin: left top; + + /* Size */ + height: 100%; + width: var(--three-dimensions-card-left-side-width); +} + +/* The bottom side */ +.three-dimensions-card::after { + background: #d1d5db; + content: ''; + + /* Position */ + bottom: 0px; + left: 0px; + position: absolute; + transform: translate(0, 100%) skewX(-45deg); + transform-origin: left top; + + /* Size */ + height: var(--three-dimensions-card-left-side-width); + width: 100%; +} \ No newline at end of file