From 870ae88df6c447899b43d29ef89a4dda4cb942e4 Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Mon, 19 Sep 2022 14:29:07 +0700 Subject: [PATCH] feat: Corner curved background pattern --- .../_includes/patterns/curved-background.njk | 3 + contents/curved-background.md | 38 +++++++++++ contents/index.njk | 6 ++ pages/curved-background/index.tsx | 63 ------------------- patterns/curved-background/Cover.tsx | 28 --------- styles/index.scss | 1 + styles/patterns/_curved-background.scss | 14 +++++ 7 files changed, 62 insertions(+), 91 deletions(-) create mode 100644 contents/_includes/patterns/curved-background.njk create mode 100644 contents/curved-background.md delete mode 100644 pages/curved-background/index.tsx delete mode 100644 patterns/curved-background/Cover.tsx create mode 100644 styles/patterns/_curved-background.scss diff --git a/contents/_includes/patterns/curved-background.njk b/contents/_includes/patterns/curved-background.njk new file mode 100644 index 0000000..ab6fdb7 --- /dev/null +++ b/contents/_includes/patterns/curved-background.njk @@ -0,0 +1,3 @@ +
+
+
\ No newline at end of file diff --git a/contents/curved-background.md b/contents/curved-background.md new file mode 100644 index 0000000..cf1e7b3 --- /dev/null +++ b/contents/curved-background.md @@ -0,0 +1,38 @@ +--- +layout: layouts/post.njk +title: Curved background +description: Create an element with curved background +keywords: css border radius, css curved background +--- + +## HTML + +```html +
+
+
+``` + +## CSS + +```css +.curved-background__curved { + /* Background color */ + background-color: rgba(0, 0, 0, 0.3); + + /* You can use gradient background color such as */ + /* background: linear-gradient(rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%); */ + + /* Curved corners */ + border-bottom-left-radius: 50% 40%; + border-bottom-right-radius: 50% 40%; + + /* Size */ + height: 50%; + width: 100%; +} +``` + +{% demo %} +{% include "patterns/curved-background.njk" %} +{% enddemo %} diff --git a/contents/index.njk b/contents/index.njk index d5bb996..ca60095 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -85,6 +85,12 @@ eleventyExcludeFromCollections: true
Corner ribbon
+
+ +
{% include "patterns/curved-background.njk" %}
+
Curved background
+ +
diff --git a/pages/curved-background/index.tsx b/pages/curved-background/index.tsx deleted file mode 100644 index c44b463..0000000 --- a/pages/curved-background/index.tsx +++ /dev/null @@ -1,63 +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={` - .container { - /* Background color */ - background-color: rgba(0, 0, 0, 0.3); - - /* You can use gradient background color such as - background: linear-gradient(rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%); */ - - /* Curved corners */ - border-bottom-left-radius: 50% 40%; - border-bottom-right-radius: 50% 40%; - } - `} - > -
-
-
- - - - - - ); -}; - -export default Details; diff --git a/patterns/curved-background/Cover.tsx b/patterns/curved-background/Cover.tsx deleted file mode 100644 index 5680c8b..0000000 --- a/patterns/curved-background/Cover.tsx +++ /dev/null @@ -1,28 +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 0341c65..a099612 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -23,6 +23,7 @@ @import './patterns/concave-corners'; @import './patterns/cookie-banner'; @import './patterns/corner-ribbon'; +@import './patterns/curved-background'; // Placeholders @import './placeholders/circle'; diff --git a/styles/patterns/_curved-background.scss b/styles/patterns/_curved-background.scss new file mode 100644 index 0000000..f2e12fc --- /dev/null +++ b/styles/patterns/_curved-background.scss @@ -0,0 +1,14 @@ +.curved-background { + border: 1px solid rgba(0,0,0,.3); + border-radius: 0.25rem; + height: 100%; + width: 100%; +} +.curved-background__curved { + background-color: rgba(0, 0, 0, 0.3); + border-bottom-left-radius: 50% 40%; + border-bottom-right-radius: 50% 40%; + + height: 50%; + width: 100%; +} \ No newline at end of file