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

Add watermark pattern

Browse Source
This commit is contained in:
Phuoc Nguyen
2020-01-18 15:11:29 +07:00
parent e32e3b528f
commit 254db1ab99
5 changed files with 173 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/constants/Pattern.ts
View File

@@ -90,6 +90,7 @@ enum Pattern {
UploadButton = 'Upload button',
ValidationIcon = 'Validation icon',
VideoBackground = 'Video background',
Watermark = 'Watermark',
Wizard = 'Wizard',
}

1
client/pages/ExplorePage.tsx
View File

@@ -186,6 +186,7 @@ const ExplorePage = () => {
<CoverCard pattern={Pattern.Teardrop} />
<CoverCard pattern={Pattern.Timeline} />
<CoverCard pattern={Pattern.VideoBackground} />
<CoverCard pattern={Pattern.Watermark} />
</div>
</section>

38
client/patterns/watermark/Cover.tsx Normal file
View File

@@ -0,0 +1,38 @@
/**
* 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={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
color: 'rgba(0, 0, 0, 0.3)',
fontWeight: 'bold',
textTransform: 'uppercase',
transform: 'rotate(-45deg)',
}}
>
Draft
</div>
</div>
</Frame>
);
};
export default Cover;

132
client/patterns/watermark/Details.tsx Normal file
View File

@@ -0,0 +1,132 @@
/**
* 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 DetailsLayout from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Watermark">
<Helmet>
<meta name="description" content="Create a watermask with CSS" />
<meta name="keywords" content="css watermask" />
</Helmet>
<div style={{ padding: '64px 32px' }}>
<BrowserFrame
content={(
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
padding: '16px',
position: 'relative',
width: '300px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
left: 0,
position: 'absolute',
top: 0,
width: '100%',
}}
>
<div
style={{
color: 'rgba(0, 0, 0, 0.2)',
fontSize: '3rem',
fontWeight: 'bold',
textTransform: 'uppercase',
transform: 'rotate(-45deg)',
userSelect: 'none',
}}
>
Draft
</div>
</div>
<div style={{ marginBottom: '8px' }}>
<Block numberOfBlocks={20} />
</div>
<div style={{ marginBottom: '8px' }}>
<Block numberOfBlocks={15} />
</div>
<div style={{ marginBottom: '8px' }}>
<Block numberOfBlocks={10} />
</div>
</div>
</div>
)}
source={`
<div style="
/* Used to position the watermark */
position: relative;
">
<!-- Watermark container -->
<div style="
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Absolute position */
left: 0px;
position: absolute;
top: 0px;
/* Take full size */
height: 100%;
width: 100%;
">
<!-- The watermark -->
<div style="
/* Text color */
color: rgba(0, 0, 0, 0.2);
/* Text styles */
font-size: 3rem;
font-weight: bold;
text-transform: uppercase;
/* Rotate the text */
transform: rotate(-45deg);
/* Disable the selection */
user-select: none;
">
Draft
</div>
</div>
<!-- Other content -->
...
</div>
`}
/>
</div>
</DetailsLayout>
);
};
export default Details;

1
public/sitemap.xml
View File

@@ -86,5 +86,6 @@
<url><loc>https://csslayout.io/patterns/upload-button</loc></url>
<url><loc>https://csslayout.io/patterns/validation-icon</loc></url>
<url><loc>https://csslayout.io/patterns/video-background</loc></url>
<url><loc>https://csslayout.io/patterns/watermark</loc></url>
<url><loc>https://csslayout.io/patterns/wizard</loc></url>
</urlset>