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

Add concave corners pattern

Browse Source
This commit is contained in:
Phuoc Nguyen
2021-05-09 17:31:09 +07:00
parent 0a305e2d5c
commit e61936c781
10 changed files with 299 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/constants/Pattern.ts
View File

@@ -18,6 +18,7 @@ enum Pattern {
CircularNavigation = 'Circular navigation',
CloseButton = 'Close button',
ColorSwatch = 'Color swatch',
ConcaveCorners = 'Concave corners',
CookieBanner = 'Cookie banner',
CornerRibbon = 'Corner ribbon',
CurvedBackground = 'Curved background',

1
client/pages/ExplorePage.tsx
View File

@@ -120,6 +120,7 @@ const ExplorePage = () => {
<CoverCard pattern={Pattern.Centering} />
<CoverCard pattern={Pattern.CloseButton} />
<CoverCard pattern={Pattern.ColorSwatch} />
<CoverCard pattern={Pattern.ConcaveCorners} />
<CoverCard pattern={Pattern.CookieBanner} />
<CoverCard pattern={Pattern.CornerRibbon} />
<CoverCard pattern={Pattern.CurvedBackground} />

76
client/patterns/concave-corners/Cover.tsx Normal file
View File

@@ -0,0 +1,76 @@
/** * 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={{
height: '100%',
padding: '1rem',
}}
>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, .3)',
height: '100%',
position: 'relative',
width: '100%',
}}
>
<div
style={{
background: 'var(--current-background-color, #FFF)',
borderRadius: '0 0 1rem 0',
height: '1rem',
left: 0,
position: 'absolute',
top: 0,
width: '1rem',
}}
/>
<div
style={{
background: 'var(--current-background-color, #FFF)',
borderRadius: '0 0 0 1rem',
height: '1rem',
position: 'absolute',
right: 0,
top: 0,
width: '1rem',
}}
/>
<div
style={{
background: 'var(--current-background-color, #FFF)',
borderRadius: '0 1rem 0 0',
bottom: 0,
height: '1rem',
left: 0,
position: 'absolute',
width: '1rem',
}}
/>
<div
style={{
background: 'var(--current-background-color, #FFF)',
borderRadius: '1rem 0 0 0',
bottom: 0,
height: '1rem',
position: 'absolute',
right: 0,
width: '1rem',
}}
/>
</div>
</div>
</Frame>
);
};
export default Cover;

139
client/patterns/concave-corners/Details.tsx Normal file
View File

@@ -0,0 +1,139 @@
/**
* 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 './concave-corners.css';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.ConcaveCorners}>
<Helmet>
<meta name="description" content="Create concave corners with CSS" />
<meta name="og:description" content="Create concave corners with CSS" />
<meta name="twitter:description" content="Create concave corners with CSS" />
<meta name="keywords" content="css border radius, css concave border radius, css concave corners" />
</Helmet>
<BrowserFrame
html={`
<div class="concave-corners">
<!-- The top-left corner -->
<div class="concave-corners__corner concave-corners__corner--tl"></div>
<!-- The top-right corner -->
<div class="concave-corners__corner concave-corners__corner--tr"></div>
<!-- The bottom-left corner -->
<div class="concave-corners__corner concave-corners__corner--bl"></div>
<!-- The bottom-right corner -->
<div class="concave-corners__corner concave-corners__corner--br"></div>
<!-- Content -->
...
</div>
`}
css={`
:root {
--concave-corners-background: rgba(0, 0, 0, .3);
--concave-corners-size: 1rem;
}
.concave-corners {
background-color: var(--concave-corners-background);
/* Used to position the corners */
position: relative;
/* Misc */
height: 100%;
}
.concave-corners__corner {
/* Absolute position */
position: absolute;
/* Size */
height: var(--concave-corners-size);
width: var(--concave-corners-size);
background: #FFF;
}
.concave-corners__corner--tl {
/* Position */
left: 0;
top: 0;
/* Border radius */
border-radius: 0 0 var(--concave-corners-size) 0;
}
.concave-corners__corner--tr {
/* Position */
right: 0;
top: 0;
/* Border radius */
border-radius: 0 0 0 var(--concave-corners-size);
}
.concave-corners__corner--bl {
/* Position */
bottom: 0;
left: 0;
/* Border radius */
border-radius: 0 var(--concave-corners-size) 0 0;
}
.concave-corners__corner--br {
/* Position */
bottom: 0;
right: 0;
/* Border radius */
border-radius: var(--concave-corners-size) 0 0 0;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '1rem',
}}
>
<div
style={{
height: '8rem',
width: '16rem',
}}
>
<div className='concave-corners'>
<div className='concave-corners__corner concave-corners__corner--tl' />
<div className='concave-corners__corner concave-corners__corner--tr' />
<div className='concave-corners__corner concave-corners__corner--bl' />
<div className='concave-corners__corner concave-corners__corner--br' />
</div>
</div>
</div>
</BrowserFrame>
<RelatedPatterns patterns={[Pattern.InvertedCorners]} />
</DetailsLayout>
);
};
export default Details;

66
client/patterns/concave-corners/concave-corners.css Normal file
View File

@@ -0,0 +1,66 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
:root {
--concave-corners-background: rgba(0, 0, 0, .3);
--concave-corners-size: 1rem;
}
.concave-corners {
background-color: var(--concave-corners-background);
/* Used to position the corners */
position: relative;
/* Misc */
height: 100%;
}
.concave-corners__corner {
/* Absolute position */
position: absolute;
/* Size */
height: var(--concave-corners-size);
width: var(--concave-corners-size);
background: #FFF;
}
.concave-corners__corner--tl {
/* Position */
left: 0;
top: 0;
/* Border radius */
border-radius: 0 0 var(--concave-corners-size) 0;
}
.concave-corners__corner--tr {
/* Position */
right: 0;
top: 0;
/* Border radius */
border-radius: 0 0 0 var(--concave-corners-size);
}
.concave-corners__corner--bl {
/* Position */
bottom: 0;
left: 0;
/* Border radius */
border-radius: 0 var(--concave-corners-size) 0 0;
}
.concave-corners__corner--br {
/* Position */
bottom: 0;
right: 0;
/* Border radius */
border-radius: var(--concave-corners-size) 0 0 0;
}

3
client/patterns/inverted-corners/Details.tsx
View File

@@ -7,6 +7,7 @@ import * as React from 'react';
import { Helmet } from 'react-helmet';
import Heading from '../../components/Heading';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -94,6 +95,8 @@ css={`
<div className='inverted-corners inverted-corners--speech'>Speech Bubble</div>
</div>
</section>
<RelatedPatterns patterns={[Pattern.ConcaveCorners]} />
</DetailsLayout>
);
};

8
client/placeholders/BrowserFrame.tsx
View File

@@ -16,8 +16,12 @@ interface BrowserFrameProps {
const BrowserFrame: React.FC<BrowserFrameProps> = ({ children, css, html }) => {
return (
<>
<SampleCode fullHeight={true} lang="html" code={html} />
<SampleCode fullHeight={true} lang="css" code={css} />
<div className="demo__html">
<SampleCode fullHeight={true} lang="html" code={html} />
</div>
<div className="demo__css">
<SampleCode fullHeight={true} lang="css" code={css} />
</div>
<div className="demo__live">
{children}
</div>

4
client/placeholders/browserFrame.css
View File

@@ -7,4 +7,8 @@
border: 1px solid rgba(0, 0, 0, 0.2);
height: 32rem;
overflow: auto;
}
.demo__html {
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}

BIN
public/assets/patterns/concave-corners.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

3
public/sitemap.xml
View File

@@ -16,6 +16,8 @@
<url><loc>https://csslayout.io/patterns/chip</loc></url>
<url><loc>https://csslayout.io/patterns/circular-navigation</loc></url>
<url><loc>https://csslayout.io/patterns/close-button</loc></url>
<url><loc>https://csslayout.io/patterns/color-swatch</loc></url>
<url><loc>https://csslayout.io/patterns/concave-corners</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>
@@ -41,6 +43,7 @@
<url><loc>https://csslayout.io/patterns/holy-grail</loc></url>
<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/inverted-corners</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>