Merge pull request #115 from phuoc-ng/curved-bg

Add Curved background pattern

client/constants/Pattern.ts

@@ -18,6 +18,7 @@ enum Pattern {
     CloseButton = 'Close button',
     CookieBanner = 'Cookie banner',
     CornerRibbon = 'Corner ribbon',
+    CurvedBackground = 'Curved background',
     CustomCheckboxButton = 'Custom checkbox button',
     CustomRadioButton = 'Custom radio button',
     DiagonalSection = 'Diagonal section',

client/pages/ExplorePage.tsx

@@ -156,6 +156,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.CloseButton} />
                         <CoverCard pattern={Pattern.CookieBanner} />
                         <CoverCard pattern={Pattern.CornerRibbon} />
+                        <CoverCard pattern={Pattern.CurvedBackground} />
                         <CoverCard pattern={Pattern.DiagonalSection} />
                         <CoverCard pattern={Pattern.DockedAtCorner} />
                         <CoverCard pattern={Pattern.DotLeader} />

client/patterns/curved-background/Cover.tsx

@@ -0,0 +1,33 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    height: '100%',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                        borderBottomLeftRadius: '50% 40%',
+                        borderBottomRightRadius: '50% 40%',
+                        height: '50%',
+                        width: '100%',
+                    }}
+                />
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/curved-background/Details.tsx

@@ -0,0 +1,64 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import 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';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Curved background">
+            <Helmet>
+                <meta name="description" content="Create an element with curved background" />
+                <meta name="keywords" content="css border radius, css curved background" />
+            </Helmet>
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                height: '100%',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                    borderBottomLeftRadius: '50% 40%',
+                                    borderBottomRightRadius: '50% 40%',
+                                    height: '50%',
+                                    width: '100%',
+                                }}
+                            />
+                        </div>
+                    )}
+                    source={`
+<div style="
+    /* 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%;
+">
+    ...
+</div>
+`}
+                />
+            </div>
+
+            <RelatedPatterns patterns={[Pattern.DiagonalSection]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/patterns/diagonal-section/Details.tsx

@@ -6,6 +6,8 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -90,6 +92,8 @@ const Details: React.FC<{}> = () => {
 `}
                 />
             </div>
+
+            <RelatedPatterns patterns={[Pattern.CurvedBackground]} />
         </DetailsLayout>
     );
 };

public/sitemap.xml

@@ -14,6 +14,7 @@
     <url><loc>https://csslayout.io/patterns/close-button</loc></url>
     <url><loc>https://csslayout.io/patterns/cookie-banner</loc></url>
     <url><loc>https://csslayout.io/patterns/corner-ribbon</loc></url>
+    <url><loc>https://csslayout.io/patterns/curved-background</loc></url>
     <url><loc>https://csslayout.io/patterns/custom-checkbox-button</loc></url>
     <url><loc>https://csslayout.io/patterns/custom-radio-button</loc></url>
     <url><loc>https://csslayout.io/patterns/diagonal-section</loc></url>