├── .gitignore
├── LICENSE
├── README.md
└── contents
├── accordion.mdx
├── arrow-buttons.mdx
├── avatar-list.mdx
├── avatar.mdx
├── badge.mdx
├── box-selector.mdx
├── breadcrumb.mdx
├── button-with-icon.mdx
├── calendar.mdx
├── card-layout.mdx
├── card.mdx
├── carousel-slider.mdx
├── center-align-one-and-left-align-the-other.mdx
├── centering.mdx
├── chip.mdx
├── circular-navigation.mdx
├── close-button.mdx
├── color-swatch.mdx
├── concave-corners.mdx
├── cookie-banner.mdx
├── corner-ribbon.mdx
├── curved-background.mdx
├── custom-checkbox-button.mdx
├── custom-radio-button.mdx
├── diagonal-section.mdx
├── docked-at-corner.mdx
├── dot-leader.mdx
├── dot-navigation.mdx
├── drawer.mdx
├── drop-area.mdx
├── drop-cap.mdx
├── dropdown.mdx
├── fading-long-section.mdx
├── feature-comparison.mdx
├── feature-list.mdx
├── fixed-at-corner.mdx
├── fixed-at-side.mdx
├── flipping-number.mdx
├── floating-label.mdx
├── folded-corner.mdx
├── folder-structure.mdx
├── frame-corners.mdx
├── full-background.mdx
├── full-screen-menu.mdx
├── grid-lines-background.mdx
├── grid-without-double-borders.mdx
├── holy-grail.mdx
├── indeterminate-progress-bar.mdx
├── initial-avatar.mdx
├── input-addon.mdx
├── inverted-corners.mdx
├── keyboard-shortcut.mdx
├── layered-card.mdx
├── linear-gauge.mdx
├── lined-paper.mdx
├── masonry-grid.mdx
├── media-object.mdx
├── mega-menu.mdx
├── menu.mdx
├── modal.mdx
├── nested-dropdowns.mdx
├── notification.mdx
├── overlay-play-button.mdx
├── pagination.mdx
├── pie-chart.mdx
├── popover-arrow.mdx
├── presence-indicator.mdx
├── previous-next-buttons.mdx
├── price-tag.mdx
├── pricing-table.mdx
├── progress-bar.mdx
├── property-list.mdx
├── questions-and-answers.mdx
├── radial-progress-bar.mdx
├── radio-button-group.mdx
├── radio-switch.mdx
├── rating.mdx
├── resizable-element.mdx
├── ribbon.mdx
├── same-height-columns.mdx
├── search-box.mdx
├── separator.mdx
├── sidebar.mdx
├── simple-grid.mdx
├── slider.mdx
├── speech-bubble.mdx
├── spin-button.mdx
├── spinner.mdx
├── split-navigation.mdx
├── split-screen.mdx
├── stacked-cards.mdx
├── stamp-border.mdx
├── statistic.mdx
├── status-light.mdx
├── stepper-input.mdx
├── sticky-footer.mdx
├── sticky-header.mdx
├── sticky-sections.mdx
├── sticky-table-column.mdx
├── sticky-table-headers.mdx
├── switch.mdx
├── tab.mdx
├── teardrop.mdx
├── three-dimensions-card.mdx
├── timeline.mdx
├── toggle-password-visibility.mdx
├── tooltip.mdx
├── tree-diagram.mdx
├── triangle-buttons.mdx
├── upload-button.mdx
├── validation-icon.mdx
├── video-background.mdx
├── voting.mdx
├── watermark.mdx
├── wizard.mdx
├── zebra-like-background.mdx
└── zigzag-timeline.mdx
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 phuocng
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # CSS Layout
2 |
3 | As a front-end engineer, I deal with a lot of layouts and components. While there are plenty of CSS frameworks out there that provide these, I don't always want to include them all in my project.
4 |
5 | That's why I've put together a collection of the most popular layouts and components that can be built with pure CSS.
6 |
7 | These layouts and components are powered by modern CSS features like flexbox and grid, and can be easily customized to fit your specific needs. By combining them, you can create any possible layout you need.
8 |
9 | The best part? This collection has zero dependencies, no frameworks, and no CSS hacks. These are real use cases that can save you time and effort in your projects.
10 |
11 | ## About
12 |
13 | This project is developed by _Nguyen Huu Phuoc_. I love building products and sharing knowledge.
14 |
15 | Be my friend on
16 |
17 | - [Twitter](https://twitter.com/nghuuphuoc)
18 | - [Github](https://github.com/phuocng)
19 |
--------------------------------------------------------------------------------
/contents/arrow-buttons.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2020-01-21'
4 | description: Create arrow buttons with CSS
5 | keywords: css arrow buttons
6 | thumbnail: /assets/css-layout/thumbnails/arrow-buttons.png
7 | title: Arrow buttons
8 | updated: '2021-04-01'
9 | ---
10 |
11 | ## HTML
12 |
13 | ```html index.html
14 |
15 |
16 |
17 |
18 |
19 |
20 | ...
21 |
22 |
23 |
24 |
25 |
26 | ...
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 | ...
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 | ...
48 |
49 | ```
50 |
51 | ## CSS
52 |
53 | ```css styles.css
54 | .arrow-button {
55 | /* Transparent background */
56 | background-color: transparent;
57 |
58 | /* Size */
59 | height: 12px;
60 | width: 12px;
61 | }
62 |
63 | .arrow-button--t {
64 | /* Edges */
65 | border-left: 1px solid #d1d5db;
66 | border-top: 1px solid #d1d5db;
67 | transform: translateY(25%) rotate(45deg);
68 | }
69 |
70 | .arrow-button--r {
71 | /* Edges */
72 | border-right: 1px solid #d1d5db;
73 | border-top: 1px solid #d1d5db;
74 | transform: translateX(-25%) rotate(45deg);
75 | }
76 |
77 | .arrow-button--b {
78 | /* Edges */
79 | border-bottom: 1px solid #d1d5db;
80 | border-right: 1px solid #d1d5db;
81 | transform: translateY(-25%) rotate(45deg);
82 | }
83 |
84 | .arrow-button--l {
85 | /* Edges */
86 | border-bottom: 1px solid #d1d5db;
87 | border-left: 1px solid #d1d5db;
88 | transform: translateX(25%) rotate(45deg);
89 | }
90 | ```
91 |
92 |
93 | ```css styles.css hidden
94 | .arrow-buttons {
95 | position: relative;
96 | height: 100%;
97 | width: 100%;
98 | }
99 | .arrow-button {
100 | /* Transparent background */
101 | background-color: transparent;
102 |
103 | /* Size */
104 | height: 12px;
105 | width: 12px;
106 | }
107 |
108 | .arrow-button--t {
109 | /* Edges */
110 | border-left: 1px solid #d1d5db;
111 | border-top: 1px solid #d1d5db;
112 | transform: translateY(25%) rotate(45deg);
113 | }
114 |
115 | .arrow-button--r {
116 | /* Edges */
117 | border-right: 1px solid #d1d5db;
118 | border-top: 1px solid #d1d5db;
119 | transform: translateX(-25%) rotate(45deg);
120 | }
121 |
122 | .arrow-button--b {
123 | /* Edges */
124 | border-bottom: 1px solid #d1d5db;
125 | border-right: 1px solid #d1d5db;
126 | transform: translateY(-25%) rotate(45deg);
127 | }
128 |
129 | .arrow-button--l {
130 | /* Edges */
131 | border-bottom: 1px solid #d1d5db;
132 | border-left: 1px solid #d1d5db;
133 | transform: translateX(25%) rotate(45deg);
134 | }
135 |
136 | /* Demo */
137 | .arrow-buttons__corner {
138 | position: absolute;
139 | }
140 | .arrow-buttons__corner--t {
141 | left: 50%;
142 | top: 0;
143 | transform: translate(-50%, 0%);
144 | }
145 | .arrow-buttons__corner--r {
146 | right: 0;
147 | top: 50%;
148 | transform: translate(0%, -50%);
149 | }
150 | .arrow-buttons__corner--b {
151 | bottom: 0;
152 | left: 50%;
153 | transform: translate(-50%, 0%);
154 | }
155 | .arrow-buttons__corner--l {
156 | left: 0;
157 | top: 50%;
158 | transform: translate(0%, -50%);
159 | }
160 | ```
161 |
162 | ```html index.html hidden
163 |
177 | ```
178 |
179 |
--------------------------------------------------------------------------------
/contents/avatar-list.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2019-11-29'
4 | description: Create an avatar list with CSS flexbox
5 | keywords: css avatar, css flexbox
6 | thumbnail: /assets/css-layout/thumbnails/avatar-list.png
7 | title: Avatar list
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
16 |
17 |
18 | ...
19 |
20 |
21 |
22 |
23 | ...
24 |
54 | ```css styles.css hidden
55 | body {
56 | align-items: center;
57 | display: flex;
58 | justify-content: center;
59 | }
60 | .avatars {
61 | display: flex;
62 | justify-content: center;
63 |
64 | height: 2rem;
65 | width: 100%;
66 | }
67 | .avatars__item {
68 | margin-left: -0.25rem;
69 | }
70 | .avatars__image {
71 | background-color: #d1d5db;
72 | box-shadow: 0 0 0 0.25rem #fff;
73 | color: #fff;
74 | font-size: 0.75rem;
75 |
76 | /* Rounded border */
77 | border-radius: 50%;
78 |
79 | /* Center the content */
80 | align-items: center;
81 | display: flex;
82 | justify-content: center;
83 |
84 | /* Size */
85 | height: 2rem;
86 | width: 2rem;
87 | }
88 | ```
89 |
90 | ```html index.html hidden
91 |
102 | ```
103 |
104 |
--------------------------------------------------------------------------------
/contents/avatar.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2019-12-04'
4 | description: Create an avatar component with CSS flexbox
5 | keywords: css avatar, css flexbox
6 | thumbnail: /assets/css-layout/thumbnails/avatar.png
7 | title: Avatar
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
16 |
44 | ```css styles.css hidden
45 | body {
46 | align-items: center;
47 | display: flex;
48 | justify-content: center;
49 | }
50 | .avatar {
51 | height: 4rem;
52 | width: 4rem;
53 |
54 | background-color: #d1d5db;
55 | /* Rounded border */
56 | border-radius: 50%;
57 |
58 | /* Center the content */
59 | align-items: center;
60 | display: flex;
61 | justify-content: center;
62 | }
63 | .avatar__image {
64 | height: 50%;
65 | width: 50%;
66 | }
67 | ```
68 |
69 | ```html index.html hidden
70 |
77 | ```
78 |
79 |
--------------------------------------------------------------------------------
/contents/badge.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2019-11-16'
4 | description: Create a badge component with CSS flexbox
5 | keywords: css badge, css flexbox
6 | thumbnail: /assets/css-layout/thumbnails/badge.png
7 | title: Badge
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 | ...
14 | ```
15 |
16 | ## CSS
17 |
18 | ```css styles.css
19 | .badge {
20 | /* Center the content */
21 | align-items: center;
22 | display: flex;
23 | justify-content: center;
24 |
25 | /* Colors */
26 | background-color: #d1d5db;
27 | color: #fff;
28 |
29 | /* Rounded border */
30 | border-radius: 9999px;
31 | height: 3rem;
32 | width: 3rem;
33 | }
34 | ```
35 |
36 |
37 | ```css styles.css hidden
38 | body {
39 | align-items: center;
40 | display: flex;
41 | justify-content: center;
42 | }
43 | .badge {
44 | /* Center the content */
45 | align-items: center;
46 | display: flex;
47 | justify-content: center;
48 |
49 | /* Colors */
50 | background-color: #d1d5db;
51 | color: #fff;
52 |
53 | /* Rounded border */
54 | border-radius: 9999px;
55 | height: 3rem;
56 | width: 3rem;
57 | }
58 | ```
59 |
60 | ```html index.html hidden
61 | 9+
62 | ```
63 |
64 |
--------------------------------------------------------------------------------
/contents/breadcrumb.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Navigation
3 | created: '2019-11-17'
4 | description: Create a breadcrumb with CSS flexbox
5 | keywords: css breadcrumb, css flexbox
6 | thumbnail: /assets/css-layout/thumbnails/breadcrumb.png
7 | title: Breadcrumb
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
...
16 |
17 |
18 | ...
19 |
50 | ```css styles.css hidden
51 | body {
52 | align-items: center;
53 | display: flex;
54 | justify-content: center;
55 | }
56 |
57 | .breadcrumb {
58 | /* Content is centered vertically */
59 | align-items: center;
60 | display: flex;
61 | }
62 |
63 | .breadcrumb__item {
64 | margin: 0 0.5rem;
65 | position: relative;
66 | }
67 |
68 | .breadcrumb__item:not(:last-child)::after {
69 | /* Absolute position */
70 | position: absolute;
71 | right: 0;
72 | top: 0;
73 | transform: translate(0.5rem, 0px);
74 |
75 | content: '/';
76 | }
77 | ```
78 |
79 | ```html index.html hidden
80 |
81 |
A
82 |
B
83 |
C
84 |
D
85 |
88 |
--------------------------------------------------------------------------------
/contents/button-with-icon.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Input
3 | created: '2019-11-17'
4 | description: Create an icon button with CSS flexbox
5 | keywords: css flexbox, css icon button
6 | thumbnail: /assets/css-layout/thumbnails/button-with-icon.png
7 | title: Button with icon
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 | ...
16 |
17 |
18 | ...
19 |
20 | ```
21 |
22 | ## CSS
23 |
24 | ```css styles.css
25 | .button-with-icon {
26 | /* Center the content */
27 | align-items: center;
28 | display: flex;
29 | flex-direction: row;
30 | justify-content: center;
31 | }
32 |
33 | .button-with-icon__label {
34 | margin-left: 0.5rem;
35 | }
36 | ```
37 |
38 |
39 | ```css placeholders.css hidden
40 | .circle {
41 | background: #d1d5db;
42 | border-radius: 9999px;
43 | height: var(--circle-size);
44 | width: var(--circle-size);
45 | }
46 | .circle--sm {
47 | --circle-size: 0.5rem;
48 | }
49 | .circle--md {
50 | --circle-size: 1.5rem;
51 | }
52 | .circle--lg {
53 | --circle-size: 4rem;
54 | }
55 | .lines {
56 | padding: 0.25rem 0;
57 | width: 100%;
58 | align-items: center;
59 | display: flex;
60 | justify-content: center;
61 | flex-direction: column;
62 | }
63 | .line {
64 | background: #d1d5db;
65 | height: 1px;
66 | margin-bottom: 0.25rem;
67 | }
68 | .line.line--20 {
69 | width: 20%;
70 | }
71 | .line.line--40 {
72 | width: 40%;
73 | }
74 | .line.line--60 {
75 | width: 60%;
76 | }
77 | .line.line--80 {
78 | width: 80%;
79 | }
80 | .line.line--100 {
81 | width: 100%;
82 | }
83 | ```
84 |
85 | ```css styles.css hidden
86 | body {
87 | align-items: center;
88 | display: flex;
89 | justify-content: center;
90 | }
91 | .button-with-icon {
92 | /* Center the content */
93 | align-items: center;
94 | display: flex;
95 | flex-direction: row;
96 | justify-content: center;
97 |
98 | /* Demo */
99 | background: #fff;
100 | border: 1px solid #d1d5db;
101 | border-radius: 0.25rem;
102 | width: 8rem;
103 | }
104 |
105 | .button-with-icon__label {
106 | flex: 1;
107 | margin-left: 0.5rem;
108 | }
109 | ```
110 |
111 | ```html index.html hidden
112 |
113 |
114 |
120 |
121 | ```
122 |
123 |
--------------------------------------------------------------------------------
/contents/card-layout.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Layout
3 | created: '2019-12-25'
4 | description: Create a card layout with CSS flexbox
5 | keywords: css card layout, css flexbox, css layout
6 | thumbnail: /assets/css-layout/thumbnails/card-layout.png
7 | title: Card layout
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
...
16 |
17 |
18 | ...
19 |
45 | ```css placeholders.css hidden
46 | .rectangle {
47 | background: #d1d5db;
48 | border-radius: 0.25rem;
49 | height: var(--rectangle-height);
50 | width: var(--rectangle-width);
51 | }
52 | .rectangle--hor.rectangle--20 {
53 | --rectangle-width: 20%;
54 | }
55 | .rectangle--hor.rectangle--40 {
56 | --rectangle-width: 40%;
57 | }
58 | .rectangle--hor.rectangle--60 {
59 | --rectangle-width: 60%;
60 | }
61 | .rectangle--hor.rectangle--80 {
62 | --rectangle-width: 80%;
63 | }
64 | .rectangle--hor.rectangle--100 {
65 | --rectangle-width: 100%;
66 | }
67 | .rectangle--hor.rectangle--sm {
68 | --rectangle-height: 0.5rem;
69 | }
70 | .rectangle--hor.rectangle--md {
71 | --rectangle-height: 2rem;
72 | }
73 | .rectangle--hor.rectangle--lg {
74 | --rectangle-height: 4rem;
75 | }
76 | .rectangle--ver.rectangle--20 {
77 | --rectangle-height: 20%;
78 | }
79 | .rectangle--ver.rectangle--40 {
80 | --rectangle-height: 40%;
81 | }
82 | .rectangle--ver.rectangle--60 {
83 | --rectangle-height: 60%;
84 | }
85 | .rectangle--ver.rectangle--80 {
86 | --rectangle-height: 80%;
87 | }
88 | .rectangle--ver.rectangle--100 {
89 | --rectangle-height: 100%;
90 | }
91 | .rectangle--ver.rectangle--sm {
92 | --rectangle-width: 0.5rem;
93 | }
94 | .rectangle--ver.rectangle--md {
95 | --rectangle-width: 2rem;
96 | }
97 | .rectangle--ver.rectangle--lg {
98 | --rectangle-width: 4rem;
99 | }
100 | ```
101 |
102 | ```css styles.css hidden
103 | body {
104 | height: 24rem;
105 | }
106 |
107 | .card-layout {
108 | display: flex;
109 |
110 | /* Put a card in the next row when previous cards take all width */
111 | flex-wrap: wrap;
112 |
113 | margin-left: -0.25rem;
114 | margin-right: -0.25rem;
115 | }
116 |
117 | .card-layout__item {
118 | /* There will be 3 cards per row */
119 | flex-basis: 33.33333%;
120 |
121 | padding-left: 0.25rem;
122 | padding-right: 0.25rem;
123 |
124 | /* Demo */
125 | margin: 0.25rem 0;
126 | }
127 | ```
128 |
129 | ```html index.html hidden
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
145 |
--------------------------------------------------------------------------------
/contents/card.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2019-11-17'
4 | description: Create a card with CSS flexbox
5 | keywords: css card, css flexbox
6 | thumbnail: /assets/css-layout/thumbnails/card.png
7 | title: Card
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
...
16 |
17 |
18 |
...
19 | ...
20 |
43 | ```css placeholders.css hidden
44 | .lines {
45 | padding: 0.25rem 0;
46 | width: 100%;
47 | align-items: center;
48 | display: flex;
49 | justify-content: center;
50 | flex-direction: column;
51 | }
52 | .line {
53 | background: #d1d5db;
54 | height: 1px;
55 | margin-bottom: 0.25rem;
56 | }
57 | .line.line--20 {
58 | width: 20%;
59 | }
60 | .line.line--40 {
61 | width: 40%;
62 | }
63 | .line.line--60 {
64 | width: 60%;
65 | }
66 | .line.line--80 {
67 | width: 80%;
68 | }
69 | .line.line--100 {
70 | width: 100%;
71 | }
72 | ```
73 |
74 | ```css styles.css hidden
75 | body {
76 | align-items: center;
77 | display: flex;
78 | justify-content: center;
79 | }
80 | .card {
81 | display: flex;
82 | flex-direction: column;
83 | width: 16rem;
84 | height: 100%;
85 | border: 1px solid #d1d5db;
86 | border-radius: 0.25rem;
87 | }
88 | .card__cover {
89 | background: #d1d5db;
90 | border-radius: 0.25rem;
91 | height: 40%;
92 | width: 100%;
93 | }
94 | .card__content {
95 | /* Take available height */
96 | flex: 1;
97 | padding: 0.5rem;
98 | }
99 | ```
100 |
101 | ```html index.html hidden
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
117 |
--------------------------------------------------------------------------------
/contents/centering.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2019-11-15'
4 | description: Center an element with CSS flexbox
5 | keywords: css centering, css flexbox
6 | thumbnail: /assets/css-layout/thumbnails/centering.png
7 | title: Centering
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 | ...
14 | ```
15 |
16 | ## CSS
17 |
18 | ```css styles.css
19 | .centering {
20 | align-items: center;
21 | display: flex;
22 | justify-content: center;
23 | }
24 | ```
25 |
26 |
27 | ```css placeholders.css hidden
28 | .circle {
29 | background: #d1d5db;
30 | border-radius: 9999px;
31 | height: var(--circle-size);
32 | width: var(--circle-size);
33 | }
34 | .circle--sm {
35 | --circle-size: 0.5rem;
36 | }
37 | .circle--md {
38 | --circle-size: 1.5rem;
39 | }
40 | .circle--lg {
41 | --circle-size: 4rem;
42 | }
43 | .lines {
44 | padding: 0.25rem 0;
45 | width: 100%;
46 | align-items: center;
47 | display: flex;
48 | justify-content: center;
49 | flex-direction: column;
50 | }
51 | .line {
52 | background: #d1d5db;
53 | height: 1px;
54 | margin-bottom: 0.25rem;
55 | }
56 | .line.line--20 {
57 | width: 20%;
58 | }
59 | .line.line--40 {
60 | width: 40%;
61 | }
62 | .line.line--60 {
63 | width: 60%;
64 | }
65 | .line.line--80 {
66 | width: 80%;
67 | }
68 | .line.line--100 {
69 | width: 100%;
70 | }
71 | ```
72 |
73 | ```css styles.css hidden
74 | body {
75 | align-items: center;
76 | display: flex;
77 | justify-content: center;
78 | }
79 | .centering {
80 | align-items: center;
81 | display: flex;
82 | justify-content: center;
83 |
84 | /* Demo */
85 | flex-direction: column;
86 | width: 16rem;
87 | }
88 | ```
89 |
90 | ```html index.html hidden
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
103 |
--------------------------------------------------------------------------------
/contents/chip.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Input
3 | created: '2019-12-21'
4 | description: Create a chip component with CSS flexbox
5 | keywords: css chip, css flexbox, css tag
6 | thumbnail: /assets/css-layout/thumbnails/chip.png
7 | title: Chip
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
...
16 |
17 |
18 |
19 |
20 |
21 |
22 |
104 | ```css styles.css hidden
105 | body {
106 | align-items: center;
107 | display: flex;
108 | justify-content: center;
109 | }
110 |
111 | .chip {
112 | /* Center the content */
113 | align-items: center;
114 | display: inline-flex;
115 | justify-content: center;
116 |
117 | /* Background color */
118 | background-color: #d1d5db;
119 |
120 | /* Rounded border */
121 | border-radius: 9999px;
122 |
123 | /* Spacing */
124 | padding: 0.25rem 0.5rem;
125 | }
126 |
127 | .chip__content {
128 | margin-right: 0.25rem;
129 | }
130 |
131 | .chip__button {
132 | /* Reset */
133 | background-color: transparent;
134 | border-color: transparent;
135 |
136 | /* Cursor */
137 | cursor: pointer;
138 |
139 | /* Size */
140 | height: 1rem;
141 | width: 1rem;
142 |
143 | /* Used to position the inner */
144 | position: relative;
145 | }
146 |
147 | .chip__button-line {
148 | /* Background color */
149 | background-color: #9ca3af;
150 |
151 | /* Position */
152 | position: absolute;
153 |
154 | /* Size */
155 | height: 1px;
156 | width: 100%;
157 | }
158 |
159 | .chip__button-line--first {
160 | /* Position */
161 | left: 0px;
162 | top: 50%;
163 | transform: translate(0%, -50%) rotate(45deg);
164 |
165 | /* Size */
166 | height: 1px;
167 | width: 100%;
168 | }
169 |
170 | .chip__button-line--second {
171 | /* Position */
172 | left: 50%;
173 | top: 0px;
174 | transform: translate(-50%, 0%) rotate(45deg);
175 |
176 | /* Size */
177 | height: 100%;
178 | width: 1px;
179 | }
180 | ```
181 |
182 | ```html index.html hidden
183 |
184 |
CSS
185 |
186 |
187 |
188 |
189 |
192 |
--------------------------------------------------------------------------------
/contents/close-button.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2019-12-11'
4 | description: Create a close button with CSS flexbox
5 | keywords: css close button, css flexbox
6 | thumbnail: /assets/css-layout/thumbnails/close-button.png
7 | title: Close button
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
16 |
17 | ```
18 |
19 | ## CSS
20 |
21 | ```css styles.css
22 | .close-button {
23 | /* Reset */
24 | background-color: transparent;
25 | border-color: transparent;
26 |
27 | /* Cursor */
28 | cursor: pointer;
29 |
30 | /* Size */
31 | height: 3rem;
32 | width: 3rem;
33 |
34 | /* Used to position the inner */
35 | position: relative;
36 | }
37 |
38 | .close-button__line {
39 | /* Background color */
40 | background-color: #d1d5db;
41 |
42 | /* Position */
43 | position: absolute;
44 |
45 | /* Size */
46 | height: 1px;
47 | width: 100%;
48 | }
49 |
50 | .close-button__line--first {
51 | /* Position */
52 | left: 0px;
53 | top: 50%;
54 | transform: translate(0%, -50%) rotate(45deg);
55 |
56 | /* Size */
57 | height: 1px;
58 | width: 100%;
59 | }
60 |
61 | .close-button__line--second {
62 | /* Position */
63 | left: 50%;
64 | top: 0px;
65 | transform: translate(-50%, 0%) rotate(45deg);
66 |
67 | /* Size */
68 | height: 100%;
69 | width: 1px;
70 | }
71 | ```
72 |
73 |
74 | ```css styles.css hidden
75 | body {
76 | align-items: center;
77 | display: flex;
78 | justify-content: center;
79 | }
80 | .close-button {
81 | /* Reset */
82 | background-color: transparent;
83 | border-color: transparent;
84 |
85 | /* Cursor */
86 | cursor: pointer;
87 |
88 | /* Size */
89 | height: 3rem;
90 | width: 3rem;
91 |
92 | /* Used to position the inner */
93 | position: relative;
94 | }
95 |
96 | .close-button__line {
97 | /* Background color */
98 | background-color: #d1d5db;
99 |
100 | /* Position */
101 | position: absolute;
102 |
103 | /* Size */
104 | height: 1px;
105 | width: 100%;
106 | }
107 |
108 | .close-button__line--first {
109 | /* Position */
110 | left: 0px;
111 | top: 50%;
112 | transform: translate(0%, -50%) rotate(45deg);
113 |
114 | /* Size */
115 | height: 1px;
116 | width: 100%;
117 | }
118 |
119 | .close-button__line--second {
120 | /* Position */
121 | left: 50%;
122 | top: 0px;
123 | transform: translate(-50%, 0%) rotate(45deg);
124 |
125 | /* Size */
126 | height: 100%;
127 | width: 1px;
128 | }
129 | ```
130 |
131 | ```html index.html hidden
132 |
133 |
134 |
135 |
136 | ```
137 |
138 |
--------------------------------------------------------------------------------
/contents/color-swatch.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2021-05-08'
4 | description: Create a color swatch with CSS flexbox
5 | keywords: css color swatch, css flexbox
6 | thumbnail: /assets/css-layout/thumbnails/color-swatch.png
7 | title: Color swatch
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
16 |
17 | ...
18 |
41 | ```css styles.css hidden
42 | body {
43 | align-items: center;
44 | display: flex;
45 | justify-content: center;
46 | }
47 | .swatch {
48 | /* Wrap the items */
49 | align-items: center;
50 | display: flex;
51 | justify-content: center;
52 | flex-wrap: wrap;
53 | }
54 | .swatch__item {
55 | /* Rounded border */
56 | border-radius: 9999px;
57 | height: 1.5rem;
58 | width: 1.5rem;
59 |
60 | /* Space between items */
61 | margin: 0.5rem;
62 | }
63 | .swatch__item--1st {
64 | background-color: rgba(0, 0, 0, 0.1);
65 | }
66 | .swatch__item--2nd {
67 | background-color: rgba(0, 0, 0, 0.2);
68 | }
69 | .swatch__item--3rd {
70 | background-color: #d1d5db;
71 | }
72 | .swatch__item--4th {
73 | background-color: rgba(0, 0, 0, 0.4);
74 | }
75 | .swatch__item--5th {
76 | background-color: rgba(0, 0, 0, 0.5);
77 | }
78 | .swatch__item--6th {
79 | background-color: rgba(0, 0, 0, 0.6);
80 | }
81 | ```
82 |
83 | ```html index.html hidden
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
94 |
--------------------------------------------------------------------------------
/contents/concave-corners.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2021-05-09'
4 | description: Create concave corners with CSS
5 | keywords: css border radius, css concave border radius, css concave corners
6 | thumbnail: /assets/css-layout/thumbnails/concave-corners.png
7 | title: Concave corners
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | ...
28 |
89 | ```css styles.css hidden
90 | body {
91 | height: 24rem;
92 | }
93 | .concave-corners {
94 | background-color: #d1d5db;
95 |
96 | /* Used to position the corners */
97 | position: relative;
98 |
99 | /* Misc */
100 | height: 100%;
101 | width: 100%;
102 | }
103 | .concave-corners__corner {
104 | /* Absolute position */
105 | position: absolute;
106 |
107 | /* Size */
108 | height: 1rem;
109 | width: 1rem;
110 |
111 | background: #fff;
112 | }
113 |
114 | .concave-corners__corner--tl {
115 | /* Position */
116 | left: 0;
117 | top: 0;
118 |
119 | /* Border radius */
120 | border-radius: 0 0 1rem 0;
121 | }
122 |
123 | .concave-corners__corner--tr {
124 | /* Position */
125 | right: 0;
126 | top: 0;
127 |
128 | /* Border radius */
129 | border-radius: 0 0 0 1rem;
130 | }
131 |
132 | .concave-corners__corner--bl {
133 | /* Position */
134 | bottom: 0;
135 | left: 0;
136 |
137 | /* Border radius */
138 | border-radius: 0 1rem 0 0;
139 | }
140 |
141 | .concave-corners__corner--br {
142 | /* Position */
143 | bottom: 0;
144 | right: 0;
145 |
146 | /* Border radius */
147 | border-radius: 1rem 0 0 0;
148 | }
149 | ```
150 |
151 | ```html index.html hidden
152 |
153 |
154 |
155 |
156 |
157 |
160 |
--------------------------------------------------------------------------------
/contents/cookie-banner.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2019-11-30'
4 | description: Create a cookie banner with CSS flexbox
5 | keywords: css cookie banner, css flexbox
6 | thumbnail: /assets/css-layout/thumbnails/cookie-banner.png
7 | title: Cookie banner
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
...
16 |
17 |
18 | ...
19 |
45 | ```css placeholders.css hidden
46 | .lines {
47 | padding: 0.25rem 0;
48 | width: 100%;
49 | align-items: center;
50 | display: flex;
51 | justify-content: center;
52 | flex-direction: column;
53 | }
54 | .line {
55 | background: #d1d5db;
56 | height: 1px;
57 | margin-bottom: 0.25rem;
58 | }
59 | .line.line--20 {
60 | width: 20%;
61 | }
62 | .line.line--40 {
63 | width: 40%;
64 | }
65 | .line.line--60 {
66 | width: 60%;
67 | }
68 | .line.line--80 {
69 | width: 80%;
70 | }
71 | .line.line--100 {
72 | width: 100%;
73 | }
74 | ```
75 |
76 | ```css styles.css hidden
77 | body {
78 | height: 24rem;
79 | }
80 | .cookie-banner {
81 | border: 1px solid #d1d5db;
82 | border-radius: 0.25rem;
83 |
84 | height: 100%;
85 | width: 100%;
86 |
87 | align-items: end;
88 | display: flex;
89 | }
90 |
91 | .cookie-banner__content {
92 | border-top: 1px solid #d1d5db;
93 | /* Take available width */
94 | flex: 1;
95 | padding: 0 0.5rem;
96 | }
97 | ```
98 |
99 | ```html index.html hidden
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
113 |
--------------------------------------------------------------------------------
/contents/corner-ribbon.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2019-12-01'
4 | description: Create a corner ribbon with CSS flexbox
5 | keywords: css flexbox, css ribbon
6 | thumbnail: /assets/css-layout/thumbnails/corner-ribbon.png
7 | title: Corner ribbon
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
20 | ```
21 |
22 | ## CSS
23 |
24 | ```css styles.css
25 | .corner-ribbon {
26 | position: relative;
27 | }
28 |
29 | .corner-ribbon__inner {
30 | /* Displayed at the top left corner */
31 | left: 0px;
32 | position: absolute;
33 | top: 0px;
34 |
35 | /* Size */
36 | height: 4rem;
37 | width: 4rem;
38 |
39 | /* Hide the part of its children which is displayed outside */
40 | overflow: hidden;
41 | }
42 |
43 | .corner-ribbon__ribbon {
44 | /* Position */
45 | left: 1rem;
46 | position: absolute;
47 | top: 1rem;
48 |
49 | /* Size */
50 | height: 1.5rem;
51 | width: 5.656rem;
52 |
53 | /* Displayed diagonally */
54 | transform: translate(-38px, -8px) rotate(-45deg);
55 |
56 | /* Background color */
57 | background-color: #d1d5db;
58 |
59 | /* Centerize the text content */
60 | text-align: center;
61 | }
62 | ```
63 |
64 |
65 | ```css styles.css hidden
66 | body {
67 | height: 24rem;
68 | }
69 | .corner-ribbon {
70 | position: relative;
71 | border: 1px solid #d1d5db;
72 | border-radius: 0.25rem;
73 | height: 100%;
74 | width: 100%;
75 | }
76 |
77 | .corner-ribbon__inner {
78 | /* Displayed at the top left corner */
79 | left: 0px;
80 | position: absolute;
81 | top: 0px;
82 |
83 | /* Size */
84 | height: 4rem;
85 | width: 4rem;
86 |
87 | /* Hide the part of its children which is displayed outside */
88 | overflow: hidden;
89 | }
90 |
91 | .corner-ribbon__ribbon {
92 | /* Position */
93 | left: 1rem;
94 | position: absolute;
95 | top: 1rem;
96 |
97 | /* Size */
98 | height: 1.5rem;
99 | width: 5.656rem;
100 |
101 | /* Displayed diagonally */
102 | transform: translate(-38px, -8px) rotate(-45deg);
103 |
104 | /* Background color */
105 | background-color: #d1d5db;
106 |
107 | /* Centerize the text content */
108 | text-align: center;
109 | }
110 | ```
111 |
112 | ```html index.html hidden
113 |
119 | ```
120 |
121 |
--------------------------------------------------------------------------------
/contents/curved-background.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2020-01-17'
4 | description: Create an element with curved background
5 | keywords: css border radius, css curved background
6 | thumbnail: /assets/css-layout/thumbnails/curved-background.png
7 | title: Curved background
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
16 | ```
17 |
18 | ## CSS
19 |
20 | ```css styles.css
21 | .curved-background__curved {
22 | /* Background color */
23 | background-color: #d1d5db;
24 |
25 | /* You can use gradient background color such as */
26 | /* background: linear-gradient(rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%); */
27 |
28 | /* Curved corners */
29 | border-bottom-left-radius: 50% 40%;
30 | border-bottom-right-radius: 50% 40%;
31 |
32 | /* Size */
33 | height: 50%;
34 | width: 100%;
35 | }
36 | ```
37 |
38 |
39 | ```css styles.css hidden
40 | body {
41 | height: 24rem;
42 | }
43 | .curved-background {
44 | border: 1px solid #d1d5db;
45 | border-radius: 0.25rem;
46 | height: 100%;
47 | width: 100%;
48 | }
49 | .curved-background__curved {
50 | background-color: #d1d5db;
51 | border-bottom-left-radius: 50% 40%;
52 | border-bottom-right-radius: 50% 40%;
53 |
54 | height: 8rem;
55 | width: 100%;
56 | }
57 | ```
58 |
59 | ```html index.html hidden
60 |
63 | ```
64 |
65 |
--------------------------------------------------------------------------------
/contents/diagonal-section.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2019-12-25'
4 | description: Create a diagonal section with CSS
5 | keywords: css diagonal section, css transform skew
6 | thumbnail: /assets/css-layout/thumbnails/diagonal-section.png
7 | title: Diagonal section
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
16 |
17 |
18 | ...
19 |
52 | ```css styles.css hidden
53 | body {
54 | height: 24rem;
55 | }
56 | .diagonal-section {
57 | /* Used to position the diagonal area */
58 | position: relative;
59 |
60 | height: 100%;
61 | width: 100%;
62 | }
63 |
64 | .diagonal-section__diagonal {
65 | /* Absolute position */
66 | left: 0px;
67 | position: absolute;
68 | top: 50%;
69 |
70 | /* Take full size */
71 | height: 2rem;
72 | width: 100%;
73 |
74 | /* Create diagonal sides */
75 | transform: translate(0, -50%) skewY(-15deg);
76 |
77 | /* Background color */
78 | background-color: #d1d5db;
79 | }
80 | ```
81 |
82 | ```html index.html hidden
83 |
86 | ```
87 |
88 |
--------------------------------------------------------------------------------
/contents/docked-at-corner.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2019-11-23'
4 | description: Dock an element at corner with CSS
5 | keywords: css docked, css flexbox
6 | thumbnail: /assets/css-layout/thumbnails/docked-at-corner.png
7 | title: Docked at corner
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
17 | ```
18 |
19 | ## CSS
20 |
21 | ```css styles.css
22 | .docked-at-corner {
23 | position: relative;
24 | }
25 | .docked-at-corner__docker {
26 | position: absolute;
27 | right: 0;
28 | top: 0;
29 | transform: translate(50%, -50%);
30 |
31 | /* Center the content */
32 | align-items: center;
33 | display: flex;
34 | justify-content: center;
35 | }
36 | ```
37 |
38 |
39 | ```css styles.css hidden
40 | body {
41 | align-items: center;
42 | display: flex;
43 | height: 24rem;
44 | justify-content: center;
45 | }
46 |
47 | .docked-at-corner {
48 | position: relative;
49 | height: 16rem;
50 | width: 20rem;
51 | border: 1px solid #d1d5db;
52 | border-radius: 0.25rem;
53 | }
54 | .docked-at-corner__docker {
55 | background-color: #22c55e;
56 | border-radius: 9999px;
57 |
58 | position: absolute;
59 | right: 0;
60 | top: 0;
61 | transform: translate(50%, -50%);
62 |
63 | /* Center the content */
64 | align-items: center;
65 | display: flex;
66 | justify-content: center;
67 |
68 | /* Size */
69 | height: 1rem;
70 | width: 1rem;
71 | }
72 | ```
73 |
74 | ```html index.html hidden
75 |
78 | ```
79 |
80 |
81 | ## See also
82 |
83 | - Discover how to animate a docked element using the [pulse animation](https://phuoc.ng/collection/css-animation/pulse-animation/)
84 |
--------------------------------------------------------------------------------
/contents/dot-leader.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2019-11-27'
4 | description: Create dot leaders with CSS flexbox
5 | keywords: css dot leader, css flexbox
6 | thumbnail: /assets/css-layout/thumbnails/dot-leader.png
7 | title: Dot leader
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
...
16 |
17 |
18 |
19 |
20 |
21 |
...
22 |
48 | ```css placeholders.css hidden
49 | .circle {
50 | background: #d1d5db;
51 | border-radius: 9999px;
52 | height: var(--circle-size);
53 | width: var(--circle-size);
54 | }
55 | .circle--sm {
56 | --circle-size: 0.5rem;
57 | }
58 | .circle--md {
59 | --circle-size: 1.5rem;
60 | }
61 | .circle--lg {
62 | --circle-size: 4rem;
63 | }
64 | .rectangle {
65 | background: #d1d5db;
66 | border-radius: 0.25rem;
67 | height: var(--rectangle-height);
68 | width: var(--rectangle-width);
69 | }
70 | .rectangle--hor.rectangle--20 {
71 | --rectangle-width: 20%;
72 | }
73 | .rectangle--hor.rectangle--40 {
74 | --rectangle-width: 40%;
75 | }
76 | .rectangle--hor.rectangle--60 {
77 | --rectangle-width: 60%;
78 | }
79 | .rectangle--hor.rectangle--80 {
80 | --rectangle-width: 80%;
81 | }
82 | .rectangle--hor.rectangle--100 {
83 | --rectangle-width: 100%;
84 | }
85 | .rectangle--hor.rectangle--sm {
86 | --rectangle-height: 0.5rem;
87 | }
88 | .rectangle--hor.rectangle--md {
89 | --rectangle-height: 2rem;
90 | }
91 | .rectangle--hor.rectangle--lg {
92 | --rectangle-height: 4rem;
93 | }
94 | .rectangle--ver.rectangle--20 {
95 | --rectangle-height: 20%;
96 | }
97 | .rectangle--ver.rectangle--40 {
98 | --rectangle-height: 40%;
99 | }
100 | .rectangle--ver.rectangle--60 {
101 | --rectangle-height: 60%;
102 | }
103 | .rectangle--ver.rectangle--80 {
104 | --rectangle-height: 80%;
105 | }
106 | .rectangle--ver.rectangle--100 {
107 | --rectangle-height: 100%;
108 | }
109 | .rectangle--ver.rectangle--sm {
110 | --rectangle-width: 0.5rem;
111 | }
112 | .rectangle--ver.rectangle--md {
113 | --rectangle-width: 2rem;
114 | }
115 | .rectangle--ver.rectangle--lg {
116 | --rectangle-width: 4rem;
117 | }
118 | ```
119 |
120 | ```css styles.css hidden
121 | body {
122 | align-items: center;
123 | display: flex;
124 | justify-content: center;
125 | }
126 | .dot-leader {
127 | width: 16rem;
128 | /* Center the content */
129 | align-items: center;
130 | display: flex;
131 | justify-content: center;
132 | margin: 1rem 0;
133 | }
134 |
135 | .dot-leader__dots {
136 | /* Bottom border */
137 | border-bottom: 1px dotted #d1d5db;
138 |
139 | /* Take remaining width */
140 | flex: 1;
141 |
142 | /* Spacing */
143 | margin: 0 0.25rem;
144 | }
145 | ```
146 |
147 | ```html index.html hidden
148 |
153 |
154 |
159 |
160 |
165 |
166 |
171 |
172 |
177 | ```
178 |
179 |
--------------------------------------------------------------------------------
/contents/dot-navigation.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Navigation
3 | created: '2019-11-22'
4 | description: Create dot navigation with CSS flexbox
5 | keywords: css dot navigation, css flexbox
6 | thumbnail: /assets/css-layout/thumbnails/dot-navigation.png
7 | title: Dot navigation
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
16 |
17 | ...
18 |
57 | ```css styles.css hidden
58 | body {
59 | align-items: center;
60 | display: flex;
61 | justify-content: center;
62 | }
63 |
64 | .dot-navigation {
65 | /* Center the content */
66 | align-items: center;
67 | display: flex;
68 | justify-content: center;
69 |
70 | /* Reset styles */
71 | list-style-type: none;
72 | margin: 0;
73 | padding: 0;
74 | }
75 |
76 | .dot-navigation__item {
77 | /* Rounded border */
78 | border-radius: 9999px;
79 | height: 0.75rem;
80 | width: 0.75rem;
81 |
82 | /* Inactive dot */
83 | background-color: transparent;
84 | border: 1px solid #d1d5db;
85 |
86 | /* OPTIONAL: Spacing between dots */
87 | margin: 0 0.25rem;
88 | }
89 |
90 | .dot-navigation__item--active {
91 | background-color: #d1d5db;
92 | }
93 | ```
94 |
95 | ```html index.html hidden
96 |
97 |
98 |
99 |
100 |
101 |
102 |
105 |
106 | ## See also
107 |
108 | - [Carousel slider](https://phuoc.ng/collection/css-layout/carousel-slider/)
109 |
--------------------------------------------------------------------------------
/contents/drawer.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Navigation
3 | created: '2019-12-13'
4 | description: Create a drawer navigation with CSS
5 | keywords: css drawer, css off-canvas
6 | thumbnail: /assets/css-layout/thumbnails/drawer.png
7 | title: Drawer
8 | ---
9 |
10 | This pattern is also known as off-canvas.
11 |
12 | ## HTML
13 |
14 | ```html index.html
15 |
16 |
17 |
18 |
19 |
20 |
21 |
66 | ```css placeholders.css hidden
67 | .lines {
68 | padding: 0.25rem 0;
69 | width: 100%;
70 | align-items: center;
71 | display: flex;
72 | justify-content: center;
73 | flex-direction: column;
74 | }
75 | .line {
76 | background: #d1d5db;
77 | height: 1px;
78 | margin-bottom: 0.25rem;
79 | }
80 | .line.line--20 {
81 | width: 20%;
82 | }
83 | .line.line--40 {
84 | width: 40%;
85 | }
86 | .line.line--60 {
87 | width: 60%;
88 | }
89 | .line.line--80 {
90 | width: 80%;
91 | }
92 | .line.line--100 {
93 | width: 100%;
94 | }
95 | ```
96 |
97 | ```css styles.css hidden
98 | body {
99 | height: 24rem;
100 | }
101 |
102 | .drawer {
103 | /* Demo */
104 | border: 1px solid #d1d5db;
105 | border-radius: 0.25rem;
106 | height: 100%;
107 | width: 100%;
108 |
109 | display: flex;
110 | }
111 |
112 | .drawer__sidebar {
113 | /* Demo */
114 | border-right: 1px solid #d1d5db;
115 | width: 25%;
116 | }
117 |
118 | .drawer__overlay {
119 | /* Demo */
120 | background: #4b5563;
121 | flex: 1;
122 | }
123 | ```
124 |
125 | ```html index.html hidden
126 |
138 | ```
139 |
140 |
--------------------------------------------------------------------------------
/contents/drop-area.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2019-11-27'
4 | description: Create a dropping area with CSS flexbox
5 | keywords: css dropping area, css flexbox
6 | thumbnail: /assets/css-layout/thumbnails/drop-area.png
7 | title: Drop area
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 | ...
14 | ```
15 |
16 | ## CSS
17 |
18 | ```css styles.css
19 | .drop-area {
20 | /* Center the content */
21 | align-items: center;
22 | display: flex;
23 | justify-content: center;
24 |
25 | /* Border */
26 | border: 0.25rem dashed #d1d5db;
27 | border-radius: 0.25rem;
28 | }
29 | ```
30 |
31 |
32 | ```css placeholders.css hidden
33 | .lines {
34 | padding: 0.25rem 0;
35 | width: 100%;
36 | align-items: center;
37 | display: flex;
38 | justify-content: center;
39 | flex-direction: column;
40 | }
41 | .line {
42 | background: #d1d5db;
43 | height: 1px;
44 | margin-bottom: 0.25rem;
45 | }
46 | .line.line--20 {
47 | width: 20%;
48 | }
49 | .line.line--40 {
50 | width: 40%;
51 | }
52 | .line.line--60 {
53 | width: 60%;
54 | }
55 | .line.line--80 {
56 | width: 80%;
57 | }
58 | .line.line--100 {
59 | width: 100%;
60 | }
61 | ```
62 |
63 | ```css styles.css hidden
64 | body {
65 | height: 24rem;
66 | }
67 |
68 | .drop-area {
69 | padding: 0.5rem;
70 | height: 100%;
71 | width: 100%;
72 |
73 | /* Center the content */
74 | align-items: center;
75 | display: flex;
76 | justify-content: center;
77 |
78 | /* Border */
79 | border: 0.25rem dashed #d1d5db;
80 | border-radius: 0.25rem;
81 | }
82 | ```
83 |
84 | ```html index.html hidden
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
96 |
--------------------------------------------------------------------------------
/contents/drop-cap.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2019-11-29'
4 | description: Create a drop cap with CSS
5 | keywords: css drop cap, css :first-letter
6 | thumbnail: /assets/css-layout/thumbnails/drop-cap.png
7 | title: Drop cap
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 | ...
14 | ```
15 |
16 | ## CSS
17 |
18 | ```css styles.css
19 | .drop-cap:first-letter {
20 | /* Display at the left */
21 | float: left;
22 | line-height: 1;
23 |
24 | /* Spacing */
25 | margin: 0 0.5rem 0 0;
26 | padding: 0 0.5rem;
27 |
28 | /* Optional */
29 | border: 2px solid #d1d5db;
30 | font-size: 2rem;
31 | font-weight: 700;
32 | }
33 | ```
34 |
35 |
36 | ```css styles.css hidden
37 | body {
38 | align-items: center;
39 | display: flex;
40 | justify-content: center;
41 | }
42 | .drop-cap {
43 | overflow: hidden;
44 | }
45 | .drop-cap:first-letter {
46 | border: 2px solid #d1d5db;
47 |
48 | /* Display at the left */
49 | float: left;
50 | line-height: 1;
51 |
52 | /* Spacing */
53 | margin: 0 0.5rem 0 0;
54 | padding: 0 0.5rem;
55 |
56 | /* Optional */
57 | font-size: 2rem;
58 | font-weight: 700;
59 | }
60 | ```
61 |
62 | ```html index.html hidden
63 |
64 | CSS is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
65 |
66 | ```
67 |
68 |
--------------------------------------------------------------------------------
/contents/feature-list.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2019-11-21'
4 | description: Create a feature list with CSS flexbox
5 | keywords: css feature list, css flexbox
6 | thumbnail: /assets/css-layout/thumbnails/feature-list.png
7 | title: Feature list
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
16 |
...
17 |
18 |
19 |
...
20 |
52 | ```css placeholders.css hidden
53 | .circle {
54 | background: #d1d5db;
55 | border-radius: 9999px;
56 | height: var(--circle-size);
57 | width: var(--circle-size);
58 | }
59 | .circle--sm {
60 | --circle-size: 0.5rem;
61 | }
62 | .circle--md {
63 | --circle-size: 1.5rem;
64 | }
65 | .circle--lg {
66 | --circle-size: 4rem;
67 | }
68 | .lines {
69 | padding: 0.25rem 0;
70 | width: 100%;
71 | align-items: center;
72 | display: flex;
73 | justify-content: center;
74 | flex-direction: column;
75 | }
76 | .line {
77 | background: #d1d5db;
78 | height: 1px;
79 | margin-bottom: 0.25rem;
80 | }
81 | .line.line--20 {
82 | width: 20%;
83 | }
84 | .line.line--40 {
85 | width: 40%;
86 | }
87 | .line.line--60 {
88 | width: 60%;
89 | }
90 | .line.line--80 {
91 | width: 80%;
92 | }
93 | .line.line--100 {
94 | width: 100%;
95 | }
96 | ```
97 |
98 | ```css styles.css hidden
99 | body {
100 | align-items: center;
101 | display: flex;
102 | justify-content: center;
103 | }
104 | .feature-list {
105 | display: flex;
106 |
107 | /* OPTIONAL: Spacing between items */
108 | margin: 0.5rem 0;
109 | width: 16rem;
110 | }
111 |
112 | .feature-list--reverse {
113 | flex-direction: row-reverse;
114 | }
115 |
116 | .feature-list__image {
117 | width: 2rem;
118 | }
119 |
120 | .feature-list__desc {
121 | /* Take the remaining width */
122 | flex: 1;
123 | }
124 | ```
125 |
126 | ```html index.html hidden
127 |
128 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
142 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
157 |
--------------------------------------------------------------------------------
/contents/fixed-at-corner.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2019-11-17'
4 | description: Fix an element at corner with CSS
5 | keywords: css fixed
6 | thumbnail: /assets/css-layout/thumbnails/fixed-at-corner.png
7 | title: Fixed at corner
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
...
16 |
17 |
18 |
...
19 |
20 |
21 |
...
22 |
23 |
24 |
...
25 |
61 | ```css placeholders.css hidden
62 | .triangle {
63 | border-style: solid;
64 | height: 0;
65 | width: 0;
66 | }
67 | .triangle--t {
68 | border-color: transparent transparent #d1d5db transparent;
69 | border-width: 0 var(--triangle-size) var(--triangle-size) var(--triangle-size);
70 | }
71 | .triangle--r {
72 | border-color: transparent transparent transparent #d1d5db;
73 | border-width: var(--triangle-size) 0 var(--triangle-size) 1rem;
74 | }
75 | .triangle--b {
76 | border-color: #d1d5db transparent transparent transparent;
77 | border-width: var(--triangle-size) var(--triangle-size) 0 var(--triangle-size);
78 | }
79 | .triangle--l {
80 | border-color: transparent #d1d5db transparent transparent;
81 | border-width: var(--triangle-size) 1rem var(--triangle-size) 0;
82 | }
83 | .triangle--tr {
84 | border-color: transparent #d1d5db transparent transparent;
85 | border-width: 0 var(--triangle-size) var(--triangle-size) 0;
86 | }
87 | .triangle--br {
88 | border-color: transparent transparent #d1d5db transparent;
89 | border-width: 0 0 var(--triangle-size) var(--triangle-size);
90 | }
91 | .triangle--bl {
92 | border-color: transparent transparent transparent #d1d5db;
93 | border-width: var(--triangle-size) 0 0 var(--triangle-size);
94 | }
95 | .triangle--tl {
96 | border-color: #d1d5db transparent transparent transparent;
97 | border-width: var(--triangle-size) var(--triangle-size) 0 0;
98 | }
99 | .triangle--sm {
100 | --triangle-size: 0.5rem;
101 | }
102 | .triangle--md {
103 | --triangle-size: 2rem;
104 | }
105 | .triangle--lg {
106 | --triangle-size: 4rem;
107 | }
108 | ```
109 |
110 | ```css styles.css hidden
111 | body {
112 | height: 24rem;
113 | }
114 | .fixed-at-corner {
115 | width: 100%;
116 | height: 100%;
117 | border: 1px solid #d1d5db;
118 | border-radius: 0.25rem;
119 |
120 | position: relative;
121 | }
122 |
123 | .fixed-at-corner__corner {
124 | position: absolute;
125 | }
126 |
127 | .fixed-at-corner__corner--tl {
128 | left: 0;
129 | top: 0;
130 | }
131 |
132 | .fixed-at-corner__corner--tr {
133 | top: 0;
134 | right: 0;
135 | }
136 |
137 | .fixed-at-corner__corner--br {
138 | bottom: 0;
139 | right: 0;
140 | }
141 |
142 | .fixed-at-corner__corner--bl {
143 | bottom: 0;
144 | left: 0;
145 | }
146 | ```
147 |
148 | ```html index.html hidden
149 |
150 |
153 |
156 |
159 |
162 |
165 |
--------------------------------------------------------------------------------
/contents/fixed-at-side.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2019-12-21'
4 | description: Fix an element at the middle of side with CSS
5 | keywords: css fixed
6 | thumbnail: /assets/css-layout/thumbnails/fixed-at-side.png
7 | title: Fixed at side
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 | ...
15 |
16 |
17 | ...
18 | ```
19 |
20 | ## CSS
21 |
22 | ```css styles.css
23 | .fixed-at-side {
24 | position: fixed;
25 | top: 50%;
26 | transform: translate(0px, -50%);
27 | }
28 | .fixed-at-side--l {
29 | left: 0;
30 | }
31 | .fixed-at-side--r {
32 | right: 0;
33 | }
34 | ```
35 |
36 |
37 | ```css placeholders.css hidden
38 | .rectangle {
39 | background: #d1d5db;
40 | border-radius: 0.25rem;
41 | height: var(--rectangle-height);
42 | width: var(--rectangle-width);
43 | }
44 | .rectangle--hor.rectangle--20 {
45 | --rectangle-width: 20%;
46 | }
47 | .rectangle--hor.rectangle--40 {
48 | --rectangle-width: 40%;
49 | }
50 | .rectangle--hor.rectangle--60 {
51 | --rectangle-width: 60%;
52 | }
53 | .rectangle--hor.rectangle--80 {
54 | --rectangle-width: 80%;
55 | }
56 | .rectangle--hor.rectangle--100 {
57 | --rectangle-width: 100%;
58 | }
59 | .rectangle--hor.rectangle--sm {
60 | --rectangle-height: 0.5rem;
61 | }
62 | .rectangle--hor.rectangle--md {
63 | --rectangle-height: 2rem;
64 | }
65 | .rectangle--hor.rectangle--lg {
66 | --rectangle-height: 4rem;
67 | }
68 | .rectangle--ver.rectangle--20 {
69 | --rectangle-height: 20%;
70 | }
71 | .rectangle--ver.rectangle--40 {
72 | --rectangle-height: 40%;
73 | }
74 | .rectangle--ver.rectangle--60 {
75 | --rectangle-height: 60%;
76 | }
77 | .rectangle--ver.rectangle--80 {
78 | --rectangle-height: 80%;
79 | }
80 | .rectangle--ver.rectangle--100 {
81 | --rectangle-height: 100%;
82 | }
83 | .rectangle--ver.rectangle--sm {
84 | --rectangle-width: 0.5rem;
85 | }
86 | .rectangle--ver.rectangle--md {
87 | --rectangle-width: 2rem;
88 | }
89 | .rectangle--ver.rectangle--lg {
90 | --rectangle-width: 4rem;
91 | }
92 | ```
93 |
94 | ```css styles.css hidden
95 | body {
96 | height: 24rem;
97 | }
98 |
99 | .fixed-at-side {
100 | width: 100%;
101 | height: 100%;
102 | border: 1px solid #d1d5db;
103 | border-radius: 0.25rem;
104 |
105 | position: relative;
106 | }
107 |
108 | .fixed-at-side__side {
109 | height: 40%;
110 | position: absolute;
111 | top: 50%;
112 | transform: translate(0px, -50%);
113 | }
114 | .fixed-at-side__side--l {
115 | left: 0;
116 | }
117 | .fixed-at-side__side--r {
118 | right: 0;
119 | }
120 | ```
121 |
122 | ```html index.html hidden
123 |
127 | ```
128 |
129 |
130 | ## See also
131 |
132 | - [Carousel slider](https://phuoc.ng/collection/css-layout/carousel-slider/)
133 |
--------------------------------------------------------------------------------
/contents/floating-label.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Input
3 | created: '2019-11-28'
4 | description: Create a floating label with CSS
5 | keywords: css floating label, placeholder shown
6 | thumbnail: /assets/css-layout/thumbnails/floating-label.png
7 | title: Floating label
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 | Placeholder
19 |
20 | ```
21 |
22 | ## CSS
23 |
24 | ```css styles.css
25 | .floating-label {
26 | border: 1px solid #d1d5db;
27 | border-radius: 0.25rem;
28 | position: relative;
29 | }
30 |
31 | .floating-label__input {
32 | border: none;
33 | padding: 0.5rem;
34 | height: 100%;
35 | }
36 |
37 | /*
38 | Show the label at desired position when the
39 | placeholder of input isn't shown
40 | */
41 | .floating-label__input:not(:placeholder-shown) + .floating-label__label {
42 | background: #fff;
43 | transform: translate(0, -200%);
44 | opacity: 1;
45 | }
46 |
47 | .floating-label__label {
48 | /* Position the label */
49 | left: 1rem;
50 | position: absolute;
51 | top: 100%;
52 |
53 | /* Hide it by default */
54 | opacity: 0;
55 | transition: all 200ms;
56 |
57 | padding: 0 0.5rem;
58 | }
59 | ```
60 |
61 | Type something in the input to see how the label is shown up.
62 |
63 |
64 | ```css styles.css hidden
65 | body {
66 | align-items: center;
67 | display: flex;
68 | justify-content: center;
69 | }
70 |
71 | .floating-label {
72 | border: 1px solid #d1d5db;
73 | border-radius: 0.25rem;
74 | position: relative;
75 |
76 | /* Demo */
77 | padding: 0px 1px;
78 | height: 2.5rem;
79 | }
80 |
81 | .floating-label__input {
82 | border: none;
83 | padding: 0.5rem;
84 | height: 100%;
85 | }
86 |
87 | /*
88 | Show the label at desired position when the
89 | placeholder of input isn't shown
90 | */
91 | .floating-label__input:not(:placeholder-shown) + .floating-label__label {
92 | background: #fff;
93 | transform: translate(0, -200%);
94 | opacity: 1;
95 | }
96 |
97 | .floating-label__label {
98 | /* Position the label */
99 | left: 1rem;
100 | position: absolute;
101 | top: 100%;
102 |
103 | /* Hide it by default */
104 | opacity: 0;
105 | transition: all 200ms;
106 |
107 | padding: 0 0.5rem;
108 | }
109 | ```
110 |
111 | ```html index.html hidden
112 |
113 | Placeholder
115 |
116 | ```
117 |
118 |
119 | ## See also
120 |
121 | - Explore some ways to [animate a floating label](https://phuoc.ng/collection/css-animation/floating-label/).
122 |
--------------------------------------------------------------------------------
/contents/full-background.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2020-01-18'
4 | description: Create a full background element with CSS
5 | keywords: css background size cover, css full background
6 | thumbnail: /assets/css-layout/thumbnails/full-background.png
7 | title: Full background
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 | ...
14 | ```
15 |
16 | ## CSS
17 |
18 | ```css styles.css
19 | .full-background {
20 | /* Center the content */
21 | align-items: center;
22 | display: flex;
23 | flex-direction: column;
24 | justify-content: center;
25 |
26 | /* Take full size */
27 | height: 100vh;
28 | width: 100%;
29 |
30 | /* Background */
31 | background: url('/path/to/background.jpeg') center center / cover no-repeat;
32 | }
33 | ```
34 |
35 |
36 | ```css placeholders.css hidden
37 | .lines {
38 | padding: 0.25rem 0;
39 | width: 100%;
40 | align-items: center;
41 | display: flex;
42 | justify-content: center;
43 | flex-direction: column;
44 | }
45 | .line {
46 | background: #d1d5db;
47 | height: 1px;
48 | margin-bottom: 0.25rem;
49 | }
50 | .line.line--20 {
51 | width: 20%;
52 | }
53 | .line.line--40 {
54 | width: 40%;
55 | }
56 | .line.line--60 {
57 | width: 60%;
58 | }
59 | .line.line--80 {
60 | width: 80%;
61 | }
62 | .line.line--100 {
63 | width: 100%;
64 | }
65 | ```
66 |
67 | ```css styles.css hidden
68 | body {
69 | height: 24rem;
70 | }
71 |
72 | .full-background {
73 | /* Center the content */
74 | align-items: center;
75 | display: flex;
76 | flex-direction: column;
77 | justify-content: center;
78 |
79 | /* Take full size */
80 | height: 100%;
81 | width: 100%;
82 |
83 | background: url('/assets/css-layout/full-background.jpeg') center center / cover no-repeat;
84 | }
85 | ```
86 |
87 | ```html index.html hidden
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
99 |
--------------------------------------------------------------------------------
/contents/full-screen-menu.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Navigation
3 | created: '2019-11-30'
4 | description: Create a full screen menu with CSS flexbox
5 | keywords: css fixed, css flexbox, css menu
6 | thumbnail: /assets/css-layout/thumbnails/full-screen-menu.png
7 | title: Full screen menu
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
22 | ```
23 |
24 | ## CSS
25 |
26 | ```css styles.css
27 | .full-screen-menu {
28 | /* Full screen overlay */
29 | height: 100%;
30 | left: 0;
31 | position: fixed;
32 | top: 0;
33 | width: 100%;
34 |
35 | /* Center the content */
36 | align-items: center;
37 | display: flex;
38 | justify-content: center;
39 | }
40 |
41 | .full-screen-menu__close {
42 | /* Shown at top left corner */
43 | left: 1rem;
44 | position: absolute;
45 | top: 1rem;
46 | }
47 | ```
48 |
49 | You can use the [close button](https://phuoc.ng/collection/css-layout/close-button/) to create a button for closing the menu.
50 |
51 |
52 | ```css placeholders.css hidden
53 | .lines {
54 | padding: 0.25rem 0;
55 | width: 100%;
56 | align-items: center;
57 | display: flex;
58 | justify-content: center;
59 | flex-direction: column;
60 | }
61 | .line {
62 | background: #d1d5db;
63 | height: 1px;
64 | margin-bottom: 0.25rem;
65 | }
66 | .line.line--20 {
67 | width: 20%;
68 | }
69 | .line.line--40 {
70 | width: 40%;
71 | }
72 | .line.line--60 {
73 | width: 60%;
74 | }
75 | .line.line--80 {
76 | width: 80%;
77 | }
78 | .line.line--100 {
79 | width: 100%;
80 | }
81 | ```
82 |
83 | ```css styles.css hidden
84 | body {
85 | height: 24rem;
86 | }
87 |
88 | .full-screen-menu {
89 | /* Take full size */
90 | height: 100%;
91 | width: 100%;
92 |
93 | /* Center the content */
94 | align-items: center;
95 | display: flex;
96 | justify-content: center;
97 |
98 | position: relative;
99 |
100 | background: #374151;
101 | }
102 |
103 | .full-screen-menu__close {
104 | left: 0.5rem;
105 | position: absolute;
106 | top: 0.5rem;
107 |
108 | /* Reset */
109 | background-color: transparent;
110 | border-color: transparent;
111 |
112 | /* Cursor */
113 | cursor: pointer;
114 |
115 | /* Size */
116 | height: 1rem;
117 | width: 1rem;
118 | }
119 |
120 | .full-screen-menu__close::before,
121 | .full-screen-menu__close::after {
122 | content: '';
123 | /* Background color */
124 | background-color: #d1d5db;
125 |
126 | /* Position */
127 | position: absolute;
128 |
129 | /* Size */
130 | height: 1px;
131 | width: 100%;
132 | }
133 |
134 | .full-screen-menu__close::before {
135 | /* Position */
136 | left: 0px;
137 | top: 50%;
138 | transform: translate(0%, -50%) rotate(45deg);
139 |
140 | /* Size */
141 | height: 1px;
142 | width: 100%;
143 | }
144 |
145 | .full-screen-menu__close::after {
146 | /* Position */
147 | left: 50%;
148 | top: 0px;
149 | transform: translate(-50%, 0%) rotate(45deg);
150 |
151 | /* Size */
152 | height: 100%;
153 | width: 1px;
154 | }
155 | ```
156 |
157 | ```html index.html hidden
158 |
168 | ```
169 |
170 |
--------------------------------------------------------------------------------
/contents/indeterminate-progress-bar.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Feedback
3 | created: '2022-10-02'
4 | description: Create an indeterminate progress bar with CSS
5 | keywords: css indeterminate progress bar, css progress bar
6 | thumbnail: /assets/css-layout/thumbnails/indeterminate-progress-bar.png
7 | title: Indeterminate progress bar
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
16 | ```
17 |
18 | ## CSS
19 |
20 | ```css styles.css
21 | .indeterminate-progress-bar {
22 | /* Color */
23 | background-color: #d1d5db;
24 |
25 | /* Rounded border */
26 | border-radius: 9999px;
27 |
28 | /* Size */
29 | height: 0.5rem;
30 |
31 | position: relative;
32 | overflow: hidden;
33 | }
34 |
35 | .indeterminate-progress-bar__progress {
36 | /* Color */
37 | background-color: #3b82f6;
38 |
39 | /* Rounded border */
40 | border-radius: 9999px;
41 |
42 | /* Absolute position */
43 | position: absolute;
44 | bottom: 0;
45 | top: 0;
46 | width: 50%;
47 |
48 | /* Move the bar infinitely */
49 | animation-duration: 2s;
50 | animation-iteration-count: infinite;
51 | animation-name: indeterminate-progress-bar;
52 | }
53 |
54 | @keyframes indeterminate-progress-bar {
55 | from {
56 | left: -50%;
57 | }
58 | to {
59 | left: 100%;
60 | }
61 | }
62 | ```
63 |
64 |
65 | ```css styles.css hidden
66 | body {
67 | align-items: center;
68 | display: flex;
69 | justify-content: center;
70 | }
71 |
72 | .indeterminate-progress-bar {
73 | /* Color */
74 | background-color: #d1d5db;
75 |
76 | /* Rounded border */
77 | border-radius: 9999px;
78 |
79 | width: 16rem;
80 | height: 0.5rem;
81 |
82 | position: relative;
83 | overflow: hidden;
84 | }
85 |
86 | .indeterminate-progress-bar__progress {
87 | /* Color */
88 | background-color: #3b82f6;
89 |
90 | /* Rounded border */
91 | border-radius: 9999px;
92 |
93 | position: absolute;
94 | bottom: 0;
95 | top: 0;
96 | width: 50%;
97 |
98 | animation-duration: 2s;
99 | animation-iteration-count: infinite;
100 | animation-name: indeterminate-progress-bar;
101 | }
102 |
103 | @keyframes indeterminate-progress-bar {
104 | from {
105 | left: -50%;
106 | }
107 | to {
108 | left: 100%;
109 | }
110 | }
111 | ```
112 |
113 | ```html index.html hidden
114 |
117 | ```
118 |
119 |
120 | ## See also
121 |
122 | - [Progress bar](https://phuoc.ng/collection/css-layout/progress-bar/)
123 | - [Spinner](https://phuoc.ng/collection/css-layout/spinner/)
124 |
--------------------------------------------------------------------------------
/contents/initial-avatar.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2019-12-04'
4 | description: Create an initial avatar with CSS
5 | keywords: css avatar
6 | thumbnail: /assets/css-layout/thumbnails/initial-avatar.png
7 | title: Initial avatar
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 | ...
14 | ```
15 |
16 | ## CSS
17 |
18 | ```css styles.css
19 | .initial-avatar {
20 | /* Center the content */
21 | align-items: center;
22 | display: flex;
23 | justify-content: center;
24 |
25 | /* Colors */
26 | background-color: #d1d5db;
27 | color: #fff;
28 |
29 | /* Rounded border */
30 | border-radius: 50%;
31 | height: 3rem;
32 | width: 3rem;
33 | }
34 | ```
35 |
36 |
37 | ```css styles.css hidden
38 | body {
39 | align-items: center;
40 | display: flex;
41 | justify-content: center;
42 | }
43 | .initial-avatar {
44 | /* Center the content */
45 | align-items: center;
46 | display: flex;
47 | justify-content: center;
48 |
49 | /* Colors */
50 | background-color: #d1d5db;
51 | color: #fff;
52 |
53 | /* Rounded border */
54 | border-radius: 50%;
55 | height: 3rem;
56 | width: 3rem;
57 | }
58 | ```
59 |
60 | ```html index.html hidden
61 |
62 | PN
63 |
64 | ```
65 |
66 |
--------------------------------------------------------------------------------
/contents/input-addon.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Input
3 | created: '2019-11-16'
4 | description: Create an input add-on with CSS flexbox
5 | keywords: css flexbox, css input add-on
6 | thumbnail: /assets/css-layout/thumbnails/input-addon.png
7 | title: Input addon
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
21 |
22 |
23 |
30 |
31 |
32 |
42 | ```
43 |
44 | ## CSS
45 |
46 | ```css styles.css
47 | .input-addon {
48 | border: 1px solid #d1d5db;
49 | border-radius: 0.25rem;
50 | display: flex;
51 | }
52 |
53 | .input-addon__input {
54 | border: none;
55 |
56 | /* Take the remaining width */
57 | flex: 1;
58 | }
59 |
60 | .input-addon__addon {
61 | /* Center the content */
62 | align-items: center;
63 | display: flex;
64 | justify-content: center;
65 | }
66 |
67 | .input-addon__addon--prepended {
68 | border-right: 1px solid #d1d5db;
69 | }
70 | .input-addon__addon--appended {
71 | border-left: 1px solid #d1d5db;
72 | }
73 | ```
74 |
75 |
76 | ```css placeholders.css hidden
77 | .circle {
78 | background: #d1d5db;
79 | border-radius: 9999px;
80 | height: var(--circle-size);
81 | width: var(--circle-size);
82 | }
83 | .circle--sm {
84 | --circle-size: 0.5rem;
85 | }
86 | .circle--md {
87 | --circle-size: 1.5rem;
88 | }
89 | .circle--lg {
90 | --circle-size: 4rem;
91 | }
92 | ```
93 |
94 | ```css styles.css hidden
95 | body {
96 | align-items: center;
97 | display: flex;
98 | justify-content: center;
99 | }
100 |
101 | .input-addon {
102 | border: 1px solid #d1d5db;
103 | border-radius: 0.25rem;
104 | display: flex;
105 |
106 | /* Demo */
107 | margin-bottom: 0.5rem;
108 | width: 16rem;
109 | }
110 |
111 | .input-addon__input {
112 | border: none;
113 | /* Take the remaining width */
114 | flex: 1;
115 |
116 | /* Demo */
117 | padding: 0.25rem;
118 | margin: 0 0.25rem;
119 | width: 5rem;
120 | }
121 |
122 | .input-addon__addon {
123 | /* Center the content */
124 | align-items: center;
125 | display: flex;
126 | justify-content: center;
127 |
128 | /* Demo */
129 | padding: 0.25rem;
130 | }
131 |
132 | .input-addon__addon--prepended {
133 | border-right: 1px solid #d1d5db;
134 | }
135 | .input-addon__addon--appended {
136 | border-left: 1px solid #d1d5db;
137 | }
138 | ```
139 |
140 | ```html index.html hidden
141 |
145 |
146 |
150 | ```
151 |
152 |
--------------------------------------------------------------------------------
/contents/inverted-corners.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2021-05-09'
4 | description: Create inverted corners with CSS
5 | keywords: css border radius, css inverted border radius, css inverted corners
6 | thumbnail: /assets/css-layout/thumbnails/inverted-corners.png
7 | title: Inverted corners
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 | ...
14 | ```
15 |
16 | ## CSS
17 |
18 | ```css styles.css
19 | :root {
20 | --inverted-corners-background: #d1d5db;
21 | --inverted-corners-size: 2rem;
22 | }
23 |
24 | .inverted-corners {
25 | background-color: var(--inverted-corners-background);
26 |
27 | /* Used to position the corner */
28 | position: relative;
29 | }
30 |
31 | .inverted-corners::before {
32 | content: '';
33 |
34 | /* Absolute position */
35 | bottom: calc(-2 * var(--inverted-corners-size));
36 | left: 0;
37 | position: absolute;
38 |
39 | /* Size */
40 | height: calc(2 * var(--inverted-corners-size));
41 | width: var(--inverted-corners-size);
42 |
43 | /* Border */
44 | background-color: transparent;
45 | border-top-left-radius: var(--inverted-corners-size);
46 | box-shadow: var(--inverted-corners-background) 0px calc(-1 * var(--inverted-corners-size)) 0px 0px;
47 | }
48 | ```
49 |
50 |
51 | ```css styles.css hidden
52 | :root {
53 | --inverted-corners-background: #d1d5db;
54 | --inverted-corners-size: 2rem;
55 | }
56 |
57 | body {
58 | height: 24rem;
59 | }
60 |
61 | .inverted-corners {
62 | background-color: var(--inverted-corners-background);
63 |
64 | /* Used to position the corner */
65 | position: relative;
66 |
67 | /* Demo */
68 | height: 2rem;
69 | width: 100%;
70 | }
71 |
72 | .inverted-corners::before {
73 | content: '';
74 |
75 | /* Absolute position */
76 | bottom: calc(-2 * var(--inverted-corners-size));
77 | left: 0;
78 | position: absolute;
79 |
80 | /* Size */
81 | height: calc(2 * var(--inverted-corners-size));
82 | width: var(--inverted-corners-size);
83 |
84 | /* Border */
85 | background-color: transparent;
86 | border-top-left-radius: var(--inverted-corners-size);
87 | box-shadow: var(--inverted-corners-background) 0px calc(-1 * var(--inverted-corners-size)) 0px 0px;
88 | }
89 | ```
90 |
91 | ```html index.html hidden
92 |
93 |
94 | ```
95 |
96 |
--------------------------------------------------------------------------------
/contents/keyboard-shortcut.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2019-12-16'
4 | description: Create a keyboard shortcut with CSS
5 | keywords: kbd tag, keyboard shortcut
6 | thumbnail: /assets/css-layout/thumbnails/keyboard-shortcut.png
7 | title: Keyboard shortcut
8 | ---
9 |
10 | We use the native `kbd` tag to display the keyboard shortcut.
11 |
12 | ## HTML
13 |
14 | ```html index.html
15 | ...
16 | ```
17 |
18 | ## CSS
19 |
20 | ```css styles.css
21 | .keyboard-shortcut {
22 | /* Background and color */
23 | background-color: rgba(0, 0, 0, 0.1);
24 | border-radius: 0.25rem;
25 | color: rgba(0, 0, 0, 0.7);
26 |
27 | /* Bottom shadow */
28 | box-shadow: #d1d5db 0px -4px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px;
29 |
30 | /* Spacing */
31 | padding: 0.25rem 0.5rem;
32 | }
33 | ```
34 |
35 |
36 | ```css styles.css hidden
37 | body {
38 | align-items: center;
39 | display: flex;
40 | justify-content: center;
41 | }
42 | .keyboard-shortcut {
43 | /* Background and color */
44 | background-color: rgba(0, 0, 0, 0.1);
45 | border-radius: 0.25rem;
46 | color: rgba(0, 0, 0, 0.7);
47 |
48 | /* Bottom shadow */
49 | box-shadow: #d1d5db 0px -4px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px;
50 |
51 | /* Spacing */
52 | padding: 0.25rem 0.5rem;
53 | }
54 | ```
55 |
56 | ```html index.html hidden
57 | ⌘ + C
58 | ```
59 |
60 |
--------------------------------------------------------------------------------
/contents/layered-card.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2021-04-04'
4 | description: Create a layered card with CSS
5 | keywords: css layered card
6 | thumbnail: /assets/css-layout/thumbnails/layered-card.png
7 | title: Layered card
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
16 | ```
17 |
18 | ## CSS
19 |
20 | ```css styles.css
21 | .layered-card {
22 | position: relative;
23 |
24 | /* Demo */
25 | height: 6rem;
26 | width: 6rem;
27 | }
28 |
29 | .layered-card::before {
30 | background: #d1d5db;
31 | content: '';
32 |
33 | /* Position */
34 | top: 0;
35 | left: 0;
36 | position: absolute;
37 | transform: translate(1rem, 1rem);
38 |
39 | /* Size */
40 | height: 100%;
41 | width: 100%;
42 |
43 | /* Display under the main content */
44 | z-index: 0;
45 | }
46 |
47 | .layered-card__content {
48 | /* Position */
49 | left: 0;
50 | position: absolute;
51 | top: 0;
52 |
53 | /* Size */
54 | height: 100%;
55 | width: 100%;
56 |
57 | z-index: 1;
58 |
59 | background: #fff;
60 | }
61 | ```
62 |
63 |
64 | ```css styles.css hidden
65 | body {
66 | align-items: center;
67 | display: flex;
68 | justify-content: center;
69 | }
70 | .layered-card {
71 | position: relative;
72 |
73 | /* Demo */
74 | height: 6rem;
75 | width: 6rem;
76 | }
77 |
78 | .layered-card::before {
79 | background: #d1d5db;
80 | content: '';
81 |
82 | /* Position */
83 | top: 0;
84 | left: 0;
85 | position: absolute;
86 | transform: translate(1rem, 1rem);
87 |
88 | /* Size */
89 | height: 100%;
90 | width: 100%;
91 |
92 | /* Display under the main content */
93 | z-index: 0;
94 | }
95 |
96 | .layered-card__content {
97 | left: 0;
98 | position: absolute;
99 | top: 0;
100 |
101 | /* Size */
102 | height: 100%;
103 | width: 100%;
104 | z-index: 1;
105 |
106 | border: 1px solid #d1d5db;
107 | background: #fff;
108 | }
109 | ```
110 |
111 | ```html index.html hidden
112 |
115 | ```
116 |
117 |
--------------------------------------------------------------------------------
/contents/lined-paper.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2020-01-17'
4 | description: Create lined paper with CSS
5 | keywords: css linear gradient, css lined paper, css multiple horizontal lines
6 | thumbnail: /assets/css-layout/thumbnails/lined-paper.png
7 | title: Lined paper
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 | ...
14 | ```
15 |
16 | ## CSS
17 |
18 | ```css styles.css
19 | .lined-paper {
20 | /* Lined background */
21 | background-image: linear-gradient(#d1d5db 1px, transparent 0px);
22 | background-size: 100% 2em;
23 |
24 | /*
25 | Display the content on top of the lines.
26 | The line height must be the same as the background size defined above
27 | */
28 | background-position-y: 1.5rem;
29 | line-height: 2em;
30 | }
31 | ```
32 |
33 |
34 | ```css styles.css hidden
35 | body {
36 | align-items: center;
37 | display: flex;
38 | justify-content: center;
39 | }
40 | .lined-paper {
41 | /* Lined background */
42 | background-image: linear-gradient(#d1d5db 1px, transparent 0px);
43 | background-size: 100% 2em;
44 |
45 | /*
46 | Display the content on top of the lines.
47 | The line height must be the same as the background size defined above
48 | */
49 | background-position-y: 1.5rem;
50 | line-height: 2em;
51 |
52 | /* Demo */
53 | overflow: hidden;
54 | }
55 | ```
56 |
57 | ```html index.html hidden
58 |
59 | Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
60 |
61 | ```
62 |
63 |
--------------------------------------------------------------------------------
/contents/masonry-grid.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Layout
3 | created: '2021-04-28'
4 | description: Create a masonry grid with CSS
5 | keywords: css column-count, css column-gap, css masonry, css masonry grid
6 | thumbnail: /assets/css-layout/thumbnails/masonry-grid.png
7 | title: Masonry grid
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
...
16 |
17 |
18 |
39 | ```css placeholders.css hidden
40 | .rectangle {
41 | background: #d1d5db;
42 | border-radius: 0.25rem;
43 | height: var(--rectangle-height);
44 | width: var(--rectangle-width);
45 | }
46 | .rectangle--hor.rectangle--20 {
47 | --rectangle-width: 20%;
48 | }
49 | .rectangle--hor.rectangle--40 {
50 | --rectangle-width: 40%;
51 | }
52 | .rectangle--hor.rectangle--60 {
53 | --rectangle-width: 60%;
54 | }
55 | .rectangle--hor.rectangle--80 {
56 | --rectangle-width: 80%;
57 | }
58 | .rectangle--hor.rectangle--100 {
59 | --rectangle-width: 100%;
60 | }
61 | .rectangle--hor.rectangle--sm {
62 | --rectangle-height: 0.5rem;
63 | }
64 | .rectangle--hor.rectangle--md {
65 | --rectangle-height: 2rem;
66 | }
67 | .rectangle--hor.rectangle--lg {
68 | --rectangle-height: 4rem;
69 | }
70 | .rectangle--ver.rectangle--20 {
71 | --rectangle-height: 20%;
72 | }
73 | .rectangle--ver.rectangle--40 {
74 | --rectangle-height: 40%;
75 | }
76 | .rectangle--ver.rectangle--60 {
77 | --rectangle-height: 60%;
78 | }
79 | .rectangle--ver.rectangle--80 {
80 | --rectangle-height: 80%;
81 | }
82 | .rectangle--ver.rectangle--100 {
83 | --rectangle-height: 100%;
84 | }
85 | .rectangle--ver.rectangle--sm {
86 | --rectangle-width: 0.5rem;
87 | }
88 | .rectangle--ver.rectangle--md {
89 | --rectangle-width: 2rem;
90 | }
91 | .rectangle--ver.rectangle--lg {
92 | --rectangle-width: 4rem;
93 | }
94 | ```
95 |
96 | ```css styles.css hidden
97 | body {
98 | height: 24rem;
99 | }
100 |
101 | .masonry-grid {
102 | /* It is split into 3 columns */
103 | column-count: 3;
104 |
105 | /* The space between columns */
106 | column-gap: 1rem;
107 |
108 | /* Demo */
109 | height: 100%;
110 | width: 100%;
111 | }
112 |
113 | .masonry-grid__item {
114 | /* Prevent a column from breaking into multiple columns */
115 | break-inside: avoid;
116 |
117 | /* Misc */
118 | margin-bottom: 1rem;
119 | }
120 | ```
121 |
122 | ```html index.html hidden
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
138 |
--------------------------------------------------------------------------------
/contents/media-object.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2019-11-16'
4 | description: Create a media object with CSS flexbox
5 | keywords: css flexbox, media object
6 | thumbnail: /assets/css-layout/thumbnails/media-object.png
7 | title: Media object
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
19 | ```
20 |
21 | ## CSS
22 |
23 | ```css styles.css
24 | .media-object {
25 | /* Align sub-items to top */
26 | align-items: start;
27 | display: flex;
28 | }
29 |
30 | .media-object__media {
31 | margin-right: 0.5rem;
32 | }
33 |
34 | .media-object__content {
35 | /* Take the remaining width */
36 | flex: 1;
37 | }
38 | ```
39 |
40 |
41 | ```css placeholders.css hidden
42 | .lines {
43 | padding: 0.25rem 0;
44 | width: 100%;
45 | align-items: center;
46 | display: flex;
47 | justify-content: center;
48 | flex-direction: column;
49 | }
50 | .line {
51 | background: #d1d5db;
52 | height: 1px;
53 | margin-bottom: 0.25rem;
54 | }
55 | .line.line--20 {
56 | width: 20%;
57 | }
58 | .line.line--40 {
59 | width: 40%;
60 | }
61 | .line.line--60 {
62 | width: 60%;
63 | }
64 | .line.line--80 {
65 | width: 80%;
66 | }
67 | .line.line--100 {
68 | width: 100%;
69 | }
70 | .square {
71 | background: #d1d5db;
72 | height: var(--square-size);
73 | width: var(--square-size);
74 | }
75 | .square--sm {
76 | --square-size: 0.5rem;
77 | }
78 | .square--md {
79 | --square-size: 2rem;
80 | }
81 | .square--lg {
82 | --square-size: 4rem;
83 | }
84 | ```
85 |
86 | ```css styles.css hidden
87 | body {
88 | align-items: center;
89 | display: flex;
90 | justify-content: center;
91 | }
92 | .media-object {
93 | /* Align sub-items to top */
94 | align-items: start;
95 | display: flex;
96 |
97 | /* Demo */
98 | width: 16rem;
99 | }
100 |
101 | .media-object__media {
102 | margin-right: 0.5rem;
103 | }
104 |
105 | .media-object__content {
106 | /* Take the remaining width */
107 | flex: 1;
108 | }
109 | ```
110 |
111 | ```html index.html hidden
112 |
142 | ```
143 |
144 |
--------------------------------------------------------------------------------
/contents/menu.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Navigation
3 | created: '2019-11-17'
4 | description: Create a menu with CSS flexbox
5 | keywords: css flexbox, css menu
6 | thumbnail: /assets/css-layout/thumbnails/menu.png
7 | title: Menu
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
40 | ```
41 |
42 | ## CSS
43 |
44 | ```css styles.css
45 | .menu {
46 | display: flex;
47 | flex-direction: column;
48 |
49 | /* Border */
50 | border: 1px solid #d1d5db;
51 | border-radius: 0.25rem;
52 | }
53 |
54 | .menu__item {
55 | /* Center the content horizontally */
56 | align-items: center;
57 | display: flex;
58 | }
59 |
60 | .menu__hotkey {
61 | /* Push the hot key to the right */
62 | margin-left: auto;
63 | }
64 |
65 | .menu__divider {
66 | border-bottom: 1px solid #d1d5db;
67 | height: 1px;
68 | }
69 | ```
70 |
71 |
72 | ```css placeholders.css hidden
73 | .rectangle {
74 | background: #d1d5db;
75 | border-radius: 0.25rem;
76 | height: var(--rectangle-height);
77 | width: var(--rectangle-width);
78 | }
79 | .rectangle--hor.rectangle--20 {
80 | --rectangle-width: 20%;
81 | }
82 | .rectangle--hor.rectangle--40 {
83 | --rectangle-width: 40%;
84 | }
85 | .rectangle--hor.rectangle--60 {
86 | --rectangle-width: 60%;
87 | }
88 | .rectangle--hor.rectangle--80 {
89 | --rectangle-width: 80%;
90 | }
91 | .rectangle--hor.rectangle--100 {
92 | --rectangle-width: 100%;
93 | }
94 | .rectangle--hor.rectangle--sm {
95 | --rectangle-height: 0.5rem;
96 | }
97 | .rectangle--hor.rectangle--md {
98 | --rectangle-height: 2rem;
99 | }
100 | .rectangle--hor.rectangle--lg {
101 | --rectangle-height: 4rem;
102 | }
103 | .rectangle--ver.rectangle--20 {
104 | --rectangle-height: 20%;
105 | }
106 | .rectangle--ver.rectangle--40 {
107 | --rectangle-height: 40%;
108 | }
109 | .rectangle--ver.rectangle--60 {
110 | --rectangle-height: 60%;
111 | }
112 | .rectangle--ver.rectangle--80 {
113 | --rectangle-height: 80%;
114 | }
115 | .rectangle--ver.rectangle--100 {
116 | --rectangle-height: 100%;
117 | }
118 | .rectangle--ver.rectangle--sm {
119 | --rectangle-width: 0.5rem;
120 | }
121 | .rectangle--ver.rectangle--md {
122 | --rectangle-width: 2rem;
123 | }
124 | .rectangle--ver.rectangle--lg {
125 | --rectangle-width: 4rem;
126 | }
127 | ```
128 |
129 | ```css styles.css hidden
130 | body {
131 | align-items: center;
132 | display: flex;
133 | justify-content: center;
134 | }
135 |
136 | .menu {
137 | display: flex;
138 | flex-direction: column;
139 |
140 | /* Border */
141 | border: 1px solid #d1d5db;
142 | border-radius: 0.25rem;
143 |
144 | /* Demo */
145 | width: 16rem;
146 | }
147 |
148 | .menu__item {
149 | /* Center the content horizontally */
150 | align-items: center;
151 | display: flex;
152 |
153 | height: 2rem;
154 | padding: 0.25rem;
155 | }
156 | .menu__item:hover {
157 | background: #e5e7eb;
158 | }
159 |
160 | .menu__hotkey {
161 | /* Push the hot key to the right */
162 | margin-left: auto;
163 | }
164 |
165 | .menu__divider {
166 | border-bottom: 1px solid #d1d5db;
167 | height: 1px;
168 | }
169 | ```
170 |
171 | ```html index.html hidden
172 |
186 | ```
187 |
188 |
--------------------------------------------------------------------------------
/contents/overlay-play-button.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2019-11-30'
4 | description: Create an overlay play button with CSS flexbox
5 | keywords: css flexbox
6 | thumbnail: /assets/css-layout/thumbnails/overlay-play-button.png
7 | title: Overlay play button
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
23 | ```
24 |
25 | ## CSS
26 |
27 | ```css styles.css
28 | .overlay-play-button {
29 | /* Used to position the overlay */
30 | position: relative;
31 | }
32 |
33 | .overlay-play-button__overlay {
34 | /* Position */
35 | left: 0;
36 | position: absolute;
37 | top: 0;
38 |
39 | /* Take full size */
40 | height: 100%;
41 | width: 100%;
42 |
43 | /* Center the content */
44 | align-items: center;
45 | display: flex;
46 | justify-content: center;
47 |
48 | /* Add a dark background */
49 | background-color: rgba(0, 0, 0, 0.25);
50 | }
51 |
52 | .overlay-play-button__play {
53 | border: 0.25rem solid #fff;
54 | border-radius: 9999px;
55 | height: 3rem;
56 | width: 3rem;
57 |
58 | /* Center the content */
59 | align-items: center;
60 | display: flex;
61 | justify-content: center;
62 | }
63 | ```
64 |
65 |
66 | ```css placeholders.css hidden
67 | .triangle {
68 | border-style: solid;
69 | height: 0;
70 | width: 0;
71 | }
72 | .triangle--t {
73 | border-color: transparent transparent #d1d5db transparent;
74 | border-width: 0 var(--triangle-size) var(--triangle-size) var(--triangle-size);
75 | }
76 | .triangle--r {
77 | border-color: transparent transparent transparent #d1d5db;
78 | border-width: var(--triangle-size) 0 var(--triangle-size) 1rem;
79 | }
80 | .triangle--b {
81 | border-color: #d1d5db transparent transparent transparent;
82 | border-width: var(--triangle-size) var(--triangle-size) 0 var(--triangle-size);
83 | }
84 | .triangle--l {
85 | border-color: transparent #d1d5db transparent transparent;
86 | border-width: var(--triangle-size) 1rem var(--triangle-size) 0;
87 | }
88 | .triangle--tr {
89 | border-color: transparent #d1d5db transparent transparent;
90 | border-width: 0 var(--triangle-size) var(--triangle-size) 0;
91 | }
92 | .triangle--br {
93 | border-color: transparent transparent #d1d5db transparent;
94 | border-width: 0 0 var(--triangle-size) var(--triangle-size);
95 | }
96 | .triangle--bl {
97 | border-color: transparent transparent transparent #d1d5db;
98 | border-width: var(--triangle-size) 0 0 var(--triangle-size);
99 | }
100 | .triangle--tl {
101 | border-color: #d1d5db transparent transparent transparent;
102 | border-width: var(--triangle-size) var(--triangle-size) 0 0;
103 | }
104 | .triangle--sm {
105 | --triangle-size: 0.5rem;
106 | }
107 | .triangle--md {
108 | --triangle-size: 2rem;
109 | }
110 | .triangle--lg {
111 | --triangle-size: 4rem;
112 | }
113 | ```
114 |
115 | ```css styles.css hidden
116 | body {
117 | height: 24rem;
118 | }
119 | .overlay-play-button {
120 | /* Used to position the overlay */
121 | position: relative;
122 |
123 | /* Demo */
124 | height: 100%;
125 | width: 100%;
126 | }
127 |
128 | .overlay-play-button__overlay {
129 | /* Position */
130 | left: 0;
131 | position: absolute;
132 | top: 0;
133 |
134 | /* Take full size */
135 | height: 100%;
136 | width: 100%;
137 |
138 | /* Center the content */
139 | align-items: center;
140 | display: flex;
141 | justify-content: center;
142 |
143 | /* Add a dark background */
144 | background-color: #4b5563;
145 | }
146 |
147 | .overlay-play-button__play {
148 | border: 0.25rem solid #fff;
149 | border-radius: 9999px;
150 | height: 3rem;
151 | width: 3rem;
152 |
153 | align-items: center;
154 | display: flex;
155 | justify-content: center;
156 | }
157 | ```
158 |
159 | ```html index.html hidden
160 |
167 | ```
168 |
169 |
--------------------------------------------------------------------------------
/contents/pagination.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Navigation
3 | created: '2019-11-17'
4 | description: Create a pagination with CSS flexbox
5 | keywords: css flexbox, css pagination
6 | thumbnail: /assets/css-layout/thumbnails/pagination.png
7 | title: Pagination
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
20 | ```
21 |
22 | ## CSS
23 |
24 | ```css styles.css
25 | .pagination {
26 | display: flex;
27 |
28 | /* Border */
29 | border: 1px solid #d1d5db;
30 | border-radius: 4px;
31 | }
32 |
33 | .pagination__item {
34 | /* Center the content */
35 | align-items: center;
36 | display: flex;
37 | justify-content: center;
38 | }
39 |
40 | .pagination__item:not(:last-child) {
41 | /* Right border */
42 | border-right: 1px solid #d1d5db;
43 | }
44 |
45 | .pagination__item--active {
46 | background-color: #d1d5db;
47 | }
48 | ```
49 |
50 |
51 | ```css styles.css hidden
52 | body {
53 | align-items: center;
54 | display: flex;
55 | justify-content: center;
56 | }
57 |
58 | .pagination {
59 | display: flex;
60 |
61 | /* Border */
62 | border: 1px solid #d1d5db;
63 | border-radius: 4px;
64 | }
65 |
66 | .pagination__item {
67 | /* Center the content */
68 | align-items: center;
69 | display: flex;
70 | justify-content: center;
71 |
72 | padding: 0.25rem 0.5rem;
73 | }
74 |
75 | .pagination__item:not(:last-child) {
76 | /* Right border */
77 | border-right: 1px solid #d1d5db;
78 | }
79 |
80 | .pagination__item--active {
81 | background-color: #d1d5db;
82 | }
83 | ```
84 |
85 | ```html index.html hidden
86 |
92 | ```
93 |
94 |
--------------------------------------------------------------------------------
/contents/presence-indicator.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Feedback
3 | created: '2019-11-29'
4 | description: Create a presence indicator with CSS
5 | keywords: css indicator
6 | thumbnail: /assets/css-layout/thumbnails/presence-indicator.png
7 | title: Presence indicator
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 | ...
16 |
17 |
18 |
19 |
47 | ```css styles.css hidden
48 | body {
49 | align-items: center;
50 | display: flex;
51 | justify-content: center;
52 | }
53 |
54 | .presence-indicator {
55 | position: relative;
56 |
57 | /* Demo */
58 | background-color: #d1d5db;
59 | border-radius: 9999px;
60 | height: 6rem;
61 | width: 6rem;
62 | }
63 |
64 | .presence-indicator__indicator {
65 | /* Shown at the bottom right corner */
66 | bottom: 0;
67 | position: absolute;
68 | right: 0;
69 | transform: translate(50%, 50%);
70 |
71 | /* Rounded border */
72 | border-radius: 9999px;
73 | height: 1rem;
74 | width: 1rem;
75 |
76 | /* Background color */
77 | background-color: #22c55e;
78 | }
79 | ```
80 |
81 | ```html index.html hidden
82 |
85 | ```
86 |
87 |
--------------------------------------------------------------------------------
/contents/previous-next-buttons.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Navigation
3 | created: '2019-11-17'
4 | description: Create previous and next buttons with CSS flexbox
5 | keywords: css flexbox, css pagination
6 | thumbnail: /assets/css-layout/thumbnails/previous-next-buttons.png
7 | title: Previous next buttons
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
24 | ```
25 |
26 | ## CSS
27 |
28 | ```css styles.css
29 | .previous-next-buttons {
30 | align-items: center;
31 | display: flex;
32 | justify-content: space-between;
33 | }
34 | ```
35 |
36 | You can use the [arrow buttons](https://phuoc.ng/collection/css-layout/arrow-buttons/) to create the previous and next buttons.
37 |
38 |
39 | ```css styles.css hidden
40 | body {
41 | align-items: center;
42 | display: flex;
43 | justify-content: center;
44 | }
45 |
46 | .previous-next-buttons {
47 | align-items: center;
48 | display: flex;
49 | justify-content: space-between;
50 |
51 | /* Demo */
52 | width: 16rem;
53 | }
54 |
55 | .previous-next-buttons__nav {
56 | position: relative;
57 |
58 | /* Demo */
59 | border: 1px solid #d1d5db;
60 | border-radius: 0.25rem;
61 | padding: 0.25rem 0.5rem;
62 |
63 | align-items: center;
64 | display: flex;
65 | justify-content: center;
66 |
67 | height: 2rem;
68 | width: 3rem;
69 | }
70 |
71 | .previous-next-buttons__button {
72 | /* Transparent background */
73 | background-color: transparent;
74 |
75 | /* Size */
76 | height: 0.5rem;
77 | width: 0.5rem;
78 | }
79 |
80 | .previous-next-buttons__button--r {
81 | /* Edges */
82 | border-right: 1px solid #d1d5db;
83 | border-top: 1px solid #d1d5db;
84 | transform: translateX(-25%) rotate(45deg);
85 | }
86 |
87 | .previous-next-buttons__button--l {
88 | /* Edges */
89 | border-bottom: 1px solid #d1d5db;
90 | border-left: 1px solid #d1d5db;
91 | transform: translateX(25%) rotate(45deg);
92 | }
93 | ```
94 |
95 | ```html index.html hidden
96 |
104 | ```
105 |
106 |
--------------------------------------------------------------------------------
/contents/price-tag.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2021-04-03'
4 | description: Create a price tag with CSS
5 | keywords: css price tag
6 | thumbnail: /assets/css-layout/thumbnails/price-tag.png
7 | title: Price tag
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 | ...
14 | ```
15 |
16 | ## CSS
17 |
18 | ```css styles.css
19 | :root {
20 | --price-tag-background: #d1d5db;
21 | --price-tag-height: 2rem;
22 | }
23 |
24 | .price-tag {
25 | background: var(--price-tag-background);
26 | color: #fff;
27 |
28 | /* Center the price */
29 | align-items: center;
30 | display: flex;
31 | justify-content: center;
32 |
33 | /* Used to position the triangle */
34 | position: relative;
35 |
36 | /* Size */
37 | height: var(--price-tag-height);
38 |
39 | /* Spacing */
40 | padding: 0.25rem 0.5rem;
41 | }
42 |
43 | /* The triangle */
44 | .price-tag::before {
45 | content: '';
46 |
47 | border-color: transparent var(--price-tag-background) transparent transparent;
48 | border-style: solid;
49 | border-width: calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2) 0rem;
50 |
51 | /* Position */
52 | left: 0px;
53 | position: absolute;
54 | top: 0px;
55 | transform: translate(-100%, 0px);
56 | }
57 |
58 | /* The dot */
59 | .price-tag::after {
60 | content: '';
61 |
62 | /* Make it like a cirle */
63 | background: #fff;
64 | border-radius: 9999rem;
65 |
66 | /* Position */
67 | left: 0;
68 | position: absolute;
69 | top: 50%;
70 | transform: translate(-0.5rem, -50%);
71 |
72 | /* Size */
73 | height: 0.5rem;
74 | width: 0.5rem;
75 | }
76 | ```
77 |
78 |
79 | ```css styles.css hidden
80 | :root {
81 | --price-tag-background: #d1d5db;
82 | --price-tag-height: 2rem;
83 | }
84 |
85 | body {
86 | align-items: center;
87 | display: flex;
88 | justify-content: center;
89 | }
90 |
91 | .price-tag {
92 | background: var(--price-tag-background);
93 | color: #fff;
94 |
95 | /* Center the price */
96 | align-items: center;
97 | display: flex;
98 | justify-content: center;
99 |
100 | /* Used to position the triangle */
101 | position: relative;
102 |
103 | /* Size */
104 | height: var(--price-tag-height);
105 |
106 | /* Spacing */
107 | padding: 0.25rem 0.5rem;
108 | }
109 |
110 | /* The triangle */
111 | .price-tag::before {
112 | content: '';
113 |
114 | border-color: transparent var(--price-tag-background) transparent transparent;
115 | border-style: solid;
116 | border-width: calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2)
117 | 0rem;
118 |
119 | /* Position */
120 | left: 0px;
121 | position: absolute;
122 | top: 0px;
123 | transform: translate(-100%, 0px);
124 | }
125 |
126 | /* The dot */
127 | .price-tag::after {
128 | content: '';
129 |
130 | /* Make it like a cirle */
131 | background: #fff;
132 | border-radius: 9999rem;
133 |
134 | /* Position */
135 | left: 0;
136 | position: absolute;
137 | top: 50%;
138 | transform: translate(-0.5rem, -50%);
139 |
140 | /* Size */
141 | height: 0.5rem;
142 | width: 0.5rem;
143 | }
144 | ```
145 |
146 | ```html index.html hidden
147 | 99.99$
148 | ```
149 |
150 |
--------------------------------------------------------------------------------
/contents/progress-bar.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Feedback
3 | created: '2019-11-17'
4 | description: Create a progress bar with CSS flexbox
5 | keywords: css flexbox, css progress bar
6 | thumbnail: /assets/css-layout/thumbnails/progress-bar.png
7 | title: Progress bar
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
16 |
17 | 40%
18 |
19 |
50 | ```css styles.css hidden
51 | body {
52 | align-items: center;
53 | display: flex;
54 | justify-content: center;
55 | }
56 |
57 | .progress-bar {
58 | /* Colors */
59 | background-color: #d1d5db;
60 |
61 | /* Rounded border */
62 | border-radius: 9999px;
63 | padding: 0.25rem;
64 |
65 | /* Demo */
66 | width: 16rem;
67 | }
68 |
69 | .progress-bar__progress {
70 | /* Center the content */
71 | align-items: center;
72 | display: flex;
73 | justify-content: center;
74 |
75 | /* Colors */
76 | background-color: #3b82f6;
77 | color: #fff;
78 |
79 | /* Rounded border */
80 | border-radius: 9999px;
81 |
82 | width: 40%;
83 | }
84 | ```
85 |
86 | ```html index.html hidden
87 |
90 | ```
91 |
92 |
93 | ## See also
94 |
95 | - [Indeterminate progress bar](https://phuoc.ng/collection/css-layout/indeterminate-progress-bar/)
96 |
--------------------------------------------------------------------------------
/contents/property-list.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2019-11-25'
4 | description: Create a property list with CSS flexbox
5 | keywords: css flexbox, property list
6 | thumbnail: /assets/css-layout/thumbnails/property-list.png
7 | title: Property list
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
16 | ...
17 |
18 |
19 | ...
20 |
21 |
22 |
23 | ...
24 | ```
25 |
26 | ## CSS
27 |
28 | ```css styles.css
29 | .property-list {
30 | /* Content is center horizontally */
31 | align-items: center;
32 | display: flex;
33 |
34 | border-bottom: 1px solid #d1d5db;
35 |
36 | /* Spacing */
37 | margin: 0;
38 | padding: 0.25rem 0;
39 | }
40 | .property-list__key {
41 | /* Take the available width */
42 | flex: 1;
43 | }
44 | .property-list__value {
45 | margin-left: 0.5rem;
46 | }
47 | ```
48 |
49 |
50 | ```css placeholders.css hidden
51 | .circle {
52 | background: #d1d5db;
53 | border-radius: 9999px;
54 | height: var(--circle-size);
55 | width: var(--circle-size);
56 | }
57 | .circle--sm {
58 | --circle-size: 0.5rem;
59 | }
60 | .circle--md {
61 | --circle-size: 1.5rem;
62 | }
63 | .circle--lg {
64 | --circle-size: 4rem;
65 | }
66 | .rectangle {
67 | background: #d1d5db;
68 | border-radius: 0.25rem;
69 | height: var(--rectangle-height);
70 | width: var(--rectangle-width);
71 | }
72 | .rectangle--hor.rectangle--20 {
73 | --rectangle-width: 20%;
74 | }
75 | .rectangle--hor.rectangle--40 {
76 | --rectangle-width: 40%;
77 | }
78 | .rectangle--hor.rectangle--60 {
79 | --rectangle-width: 60%;
80 | }
81 | .rectangle--hor.rectangle--80 {
82 | --rectangle-width: 80%;
83 | }
84 | .rectangle--hor.rectangle--100 {
85 | --rectangle-width: 100%;
86 | }
87 | .rectangle--hor.rectangle--sm {
88 | --rectangle-height: 0.5rem;
89 | }
90 | .rectangle--hor.rectangle--md {
91 | --rectangle-height: 2rem;
92 | }
93 | .rectangle--hor.rectangle--lg {
94 | --rectangle-height: 4rem;
95 | }
96 | .rectangle--ver.rectangle--20 {
97 | --rectangle-height: 20%;
98 | }
99 | .rectangle--ver.rectangle--40 {
100 | --rectangle-height: 40%;
101 | }
102 | .rectangle--ver.rectangle--60 {
103 | --rectangle-height: 60%;
104 | }
105 | .rectangle--ver.rectangle--80 {
106 | --rectangle-height: 80%;
107 | }
108 | .rectangle--ver.rectangle--100 {
109 | --rectangle-height: 100%;
110 | }
111 | .rectangle--ver.rectangle--sm {
112 | --rectangle-width: 0.5rem;
113 | }
114 | .rectangle--ver.rectangle--md {
115 | --rectangle-width: 2rem;
116 | }
117 | .rectangle--ver.rectangle--lg {
118 | --rectangle-width: 4rem;
119 | }
120 | ```
121 |
122 | ```css styles.css hidden
123 | body {
124 | align-items: center;
125 | display: flex;
126 | justify-content: center;
127 | }
128 | .property-list {
129 | /* Content is center horizontally */
130 | align-items: center;
131 | display: flex;
132 |
133 | border-bottom: 1px solid #d1d5db;
134 |
135 | /* Spacing */
136 | margin: 0;
137 | padding: 0.5rem 0;
138 |
139 | width: 16rem;
140 | }
141 | .property-list__key {
142 | /* Take the remaining width */
143 | flex: 1;
144 | }
145 | .property-list__value {
146 | margin-left: 0.5rem;
147 | }
148 | ```
149 |
150 | ```html index.html hidden
151 |
152 |
155 |
156 |
157 |
160 |
161 |
162 |
165 |
166 |
167 |
170 | ```
171 |
172 |
--------------------------------------------------------------------------------
/contents/radio-button-group.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Input
3 | created: '2019-12-01'
4 | description: Create a radio button group with CSS flexbox
5 | keywords: css flexbox, css radio button
6 | thumbnail: /assets/css-layout/thumbnails/radio-button-group.png
7 | title: Radio button group
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
16 |
17 |
22 |
23 |
24 | ...
25 |
26 |
27 | ...
28 |
29 | ```
30 |
31 | ## CSS
32 |
33 | ```css styles.css
34 | .radio-button-group {
35 | display: flex;
36 |
37 | /* Border */
38 | border: 1px solid #d1d5db;
39 | border-radius: 0.25rem;
40 | height: 2rem;
41 | }
42 |
43 | .radio-button-group__label {
44 | /* Center the content */
45 | align-items: center;
46 | display: inline-flex;
47 |
48 | border-right: 1px solid #d1d5db;
49 | padding: 0.5rem;
50 |
51 | /* For not selected radio */
52 | background-color: transparent;
53 | color: #ccc;
54 | }
55 |
56 | .radio-button-group__label:last-child {
57 | /* Remove the right border from the last label */
58 | border-right-color: transparent;
59 | }
60 |
61 | .radio-button-group__label--selected {
62 | /* For selected radio */
63 | background-color: #3b82f6;
64 | color: #fff;
65 |
66 | margin-top: -1px;
67 | margin-bottom: -1px;
68 | }
69 |
70 | .radio-button-group__input {
71 | /* Hide it */
72 | display: none;
73 | }
74 | ```
75 |
76 |
77 | ```css styles.css hidden
78 | body {
79 | align-items: center;
80 | display: flex;
81 | justify-content: center;
82 | }
83 |
84 | .radio-button-group {
85 | display: flex;
86 |
87 | /* Border */
88 | border: 1px solid #d1d5db;
89 | border-radius: 0.25rem;
90 | height: 2rem;
91 | }
92 |
93 | .radio-button-group__label {
94 | /* Center the content */
95 | align-items: center;
96 | display: inline-flex;
97 |
98 | border-right: 1px solid #d1d5db;
99 | padding: 0.5rem;
100 |
101 | /* For not selected radio */
102 | background-color: transparent;
103 | color: #ccc;
104 | }
105 |
106 | .radio-button-group__label:last-child {
107 | /* Remove the right border from the last label */
108 | border-right-color: transparent;
109 | }
110 |
111 | .radio-button-group__label--selected {
112 | /* For selected radio */
113 | background-color: #3b82f6;
114 | color: #fff;
115 |
116 | margin-top: -1px;
117 | margin-bottom: -1px;
118 | }
119 |
120 | .radio-button-group__input {
121 | /* Hide it */
122 | display: none;
123 | }
124 | ```
125 |
126 | ```html index.html hidden
127 |
128 |
129 |
131 |
132 |
134 |
135 |
137 |
138 |
140 |
141 | ```
142 |
143 |
--------------------------------------------------------------------------------
/contents/radio-switch.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Input
3 | created: '2019-11-24'
4 | description: Create a radio switch with CSS flexbox
5 | keywords: css flexbox, css radio switch, css switch
6 | thumbnail: /assets/css-layout/thumbnails/radio-switch.png
7 | title: Radio switch
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
16 |
21 |
22 |
23 | ...
24 |
25 | ```
26 |
27 | ## CSS
28 |
29 | ```css styles.css
30 | .radio-switch {
31 | background-color: #d1d5db;
32 | border-radius: 9999px;
33 | display: inline-flex;
34 | padding: 0.25rem;
35 | }
36 |
37 | .radio-switch__label {
38 | border-radius: 9999px;
39 | cursor: pointer;
40 | padding: 0.25rem 0.5rem;
41 | }
42 |
43 | .radio-switch__label--selected {
44 | /* For selected radio only */
45 | background-color: #3b82f6;
46 | color: #fff;
47 | }
48 |
49 | .radio-switch__input {
50 | display: none;
51 | }
52 | ```
53 |
54 |
55 | ```css styles.css hidden
56 | body {
57 | align-items: center;
58 | display: flex;
59 | justify-content: center;
60 | }
61 |
62 | .radio-switch {
63 | background-color: #d1d5db;
64 | border-radius: 9999px;
65 | display: inline-flex;
66 | padding: 0.25rem;
67 | }
68 |
69 | .radio-switch__label {
70 | border-radius: 9999px;
71 | cursor: pointer;
72 | padding: 0.25rem 0.5rem;
73 | }
74 |
75 | .radio-switch__label--selected {
76 | /* For selected radio only */
77 | background-color: #3b82f6;
78 | color: #fff;
79 | }
80 |
81 | .radio-switch__input {
82 | display: none;
83 | }
84 | ```
85 |
86 | ```html index.html hidden
87 |
88 |
89 |
91 |
92 |
94 |
95 | ```
96 |
97 |
--------------------------------------------------------------------------------
/contents/rating.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Input
3 | created: '2019-11-26'
4 | description: Create a star rating with CSS flexbox
5 | keywords: css flexbox, css star rating
6 | thumbnail: /assets/css-layout/thumbnails/rating.png
7 | title: Rating
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 | ☆
15 | ☆
16 | ☆
17 | ☆
18 | ★
19 |
20 | ```
21 |
22 | ## CSS
23 |
24 | ```css styles.css
25 | .rating {
26 | /* Center the content */
27 | align-items: center;
28 | display: flex;
29 | justify-content: center;
30 |
31 | flex-direction: row-reverse;
32 | }
33 |
34 | .rating__star:hover,
35 | .rating__star:hover ~ .rating__star {
36 | color: transparent;
37 | }
38 |
39 | /*
40 | Make all previous stars selected when hover on a star
41 | Note that we use \`flex-direction: row-reverse\` on the container
42 | */
43 | .rating__star:hover:before,
44 | .rating__star:hover ~ .rating__star:before {
45 | color: #eab308;
46 | content: '★';
47 | left: 0;
48 | position: absolute;
49 | }
50 |
51 | .rating__star {
52 | font-size: 1.5rem;
53 |
54 | /* Reset styles for button */
55 | background-color: transparent;
56 | border: transparent;
57 | margin: 0 2px;
58 | padding: 0;
59 |
60 | /* Used to position the hover state */
61 | position: relative;
62 | }
63 | ```
64 |
65 |
66 | ```css styles.css hidden
67 | body {
68 | align-items: center;
69 | display: flex;
70 | justify-content: center;
71 | }
72 |
73 | .rating {
74 | /* Center the content */
75 | align-items: center;
76 | display: flex;
77 | justify-content: center;
78 |
79 | flex-direction: row-reverse;
80 | }
81 |
82 | .rating__star:hover,
83 | .rating__star:hover ~ .rating__star {
84 | color: transparent;
85 | }
86 |
87 | /*
88 | Make all previous stars selected when hover on a star
89 | Note that we use \`flex-direction: row-reverse\` on the container
90 | */
91 | .rating__star:hover:before,
92 | .rating__star:hover ~ .rating__star:before {
93 | color: #eab308;
94 | content: '★';
95 | left: 0;
96 | position: absolute;
97 | }
98 |
99 | .rating__star {
100 | font-size: 1.5rem;
101 |
102 | /* Reset styles for button */
103 | background-color: transparent;
104 | border: transparent;
105 | margin: 0 2px;
106 | padding: 0;
107 |
108 | /* Used to position the hover state */
109 | position: relative;
110 | }
111 | ```
112 |
113 | ```html index.html hidden
114 |
115 | ☆
116 | ☆
117 | ☆
118 | ☆
119 | ★
120 |
121 | ```
122 |
123 |
--------------------------------------------------------------------------------
/contents/ribbon.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2019-12-01'
4 | description: Create a ribbon with CSS
5 | keywords: css ribbon
6 | thumbnail: /assets/css-layout/thumbnails/ribbon.png
7 | title: Ribbon
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
99 | ```css styles.css hidden
100 | body {
101 | align-items: center;
102 | display: flex;
103 | justify-content: center;
104 | }
105 | .ribbon {
106 | /* Center the content */
107 | align-items: center;
108 | display: flex;
109 | justify-content: center;
110 |
111 | /* Size */
112 | height: 2rem;
113 | width: 4rem; /* For demo */
114 |
115 | /* Use to position the corners */
116 | position: relative;
117 | }
118 |
119 | .ribbon__content {
120 | /* Background color */
121 | background-color: #9ca3af;
122 | z-index: 1;
123 |
124 | height: 100%;
125 | width: 100%;
126 | }
127 | .ribbon__side {
128 | bottom: -0.5rem;
129 | position: absolute;
130 |
131 | /* Background */
132 | border: 1rem solid #d1d5db;
133 | }
134 |
135 | .ribbon__side--l {
136 | /* Position */
137 | left: -1.5rem;
138 | border-color: #d1d5db #d1d5db #d1d5db transparent;
139 | }
140 |
141 | .ribbon__side--r {
142 | /* Position */
143 | right: -1.5rem;
144 | border-color: #d1d5db transparent #d1d5db #d1d5db;
145 | }
146 |
147 | .ribbon__triangle {
148 | position: absolute;
149 | top: 100%;
150 |
151 | border: 0.5rem solid transparent;
152 | border-bottom-width: 0;
153 | border-top-color: #6b7280;
154 | z-index: 1;
155 | }
156 |
157 | .ribbon__triangle--l {
158 | border-right-width: 0;
159 | left: 0;
160 | }
161 |
162 | .ribbon__triangle--r {
163 | border-left-width: 0;
164 | right: 0;
165 | }
166 | ```
167 |
168 | ```html index.html hidden
169 |
170 |
171 |
172 |
173 |
174 |
175 |
178 |
--------------------------------------------------------------------------------
/contents/search-box.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Input
3 | created: '2019-11-22'
4 | description: Create a search box with CSS flexbox
5 | keywords: css flexbox, css search box
6 | thumbnail: /assets/css-layout/thumbnails/search-box.png
7 | title: Search box
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
20 | ```
21 |
22 | ## CSS
23 |
24 | ```css styles.css
25 | .search-box {
26 | display: flex;
27 |
28 | /* If you want to place the icon before the text input */
29 | flex-direction: row-reverse;
30 |
31 | /* Border */
32 | border: 1px solid #d1d5db;
33 | }
34 |
35 | .search-box__input {
36 | border-color: transparent;
37 | /* Take available width */
38 | flex: 1;
39 | }
40 | ```
41 |
42 |
43 | ```css placeholders.css hidden
44 | .circle {
45 | background: #d1d5db;
46 | border-radius: 9999px;
47 | height: var(--circle-size);
48 | width: var(--circle-size);
49 | }
50 | .circle--sm {
51 | --circle-size: 0.5rem;
52 | }
53 | .circle--md {
54 | --circle-size: 1.5rem;
55 | }
56 | .circle--lg {
57 | --circle-size: 4rem;
58 | }
59 | ```
60 |
61 | ```css styles.css hidden
62 | body {
63 | align-items: center;
64 | display: flex;
65 | justify-content: center;
66 | }
67 |
68 | .search-box {
69 | border: 1px solid #d1d5db;
70 | border-radius: 0.25rem;
71 |
72 | display: flex;
73 | align-items: center;
74 |
75 | /* Demo */
76 | padding: 0.25rem;
77 | width: 16rem;
78 | }
79 |
80 | .search-box__input {
81 | border-color: transparent;
82 |
83 | /* Take available width */
84 | flex: 1;
85 |
86 | height: 2rem;
87 | margin-right: 0.25rem;
88 |
89 | /* Demo */
90 | width: 6rem;
91 | }
92 | ```
93 |
94 | ```html index.html hidden
95 |
99 | ```
100 |
101 |
--------------------------------------------------------------------------------
/contents/separator.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2019-11-21'
4 | description: Create a separator with CSS flexbox
5 | keywords: css divider, css flexbox, css separator
6 | thumbnail: /assets/css-layout/thumbnails/separator.png
7 | title: Separator
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
...
16 |
17 |
18 |
19 |
59 | ```css placeholders.css hidden
60 | .rectangle {
61 | background: #d1d5db;
62 | border-radius: 0.25rem;
63 | height: var(--rectangle-height);
64 | width: var(--rectangle-width);
65 | }
66 | .rectangle--hor.rectangle--20 {
67 | --rectangle-width: 20%;
68 | }
69 | .rectangle--hor.rectangle--40 {
70 | --rectangle-width: 40%;
71 | }
72 | .rectangle--hor.rectangle--60 {
73 | --rectangle-width: 60%;
74 | }
75 | .rectangle--hor.rectangle--80 {
76 | --rectangle-width: 80%;
77 | }
78 | .rectangle--hor.rectangle--100 {
79 | --rectangle-width: 100%;
80 | }
81 | .rectangle--hor.rectangle--sm {
82 | --rectangle-height: 0.5rem;
83 | }
84 | .rectangle--hor.rectangle--md {
85 | --rectangle-height: 2rem;
86 | }
87 | .rectangle--hor.rectangle--lg {
88 | --rectangle-height: 4rem;
89 | }
90 | .rectangle--ver.rectangle--20 {
91 | --rectangle-height: 20%;
92 | }
93 | .rectangle--ver.rectangle--40 {
94 | --rectangle-height: 40%;
95 | }
96 | .rectangle--ver.rectangle--60 {
97 | --rectangle-height: 60%;
98 | }
99 | .rectangle--ver.rectangle--80 {
100 | --rectangle-height: 80%;
101 | }
102 | .rectangle--ver.rectangle--100 {
103 | --rectangle-height: 100%;
104 | }
105 | .rectangle--ver.rectangle--sm {
106 | --rectangle-width: 0.5rem;
107 | }
108 | .rectangle--ver.rectangle--md {
109 | --rectangle-width: 2rem;
110 | }
111 | .rectangle--ver.rectangle--lg {
112 | --rectangle-width: 4rem;
113 | }
114 | ```
115 |
116 | ```css styles.css hidden
117 | body {
118 | align-items: center;
119 | display: flex;
120 | justify-content: center;
121 | }
122 |
123 | .separator {
124 | /* Content is centered horizontally */
125 | align-items: center;
126 | display: flex;
127 |
128 | /* Used to set the position of text */
129 | position: relative;
130 |
131 | /* Demo */
132 | width: 20rem;
133 | }
134 |
135 | .separator__content {
136 | /* We won't see the separator line */
137 | background: #fff;
138 |
139 | /* Displayed at the center of separator */
140 | left: 50%;
141 | position: absolute;
142 | top: 50%;
143 | transform: translate(-50%, -50%);
144 |
145 | /* Spacing */
146 | padding: 0 0.25rem;
147 |
148 | /* Demo */
149 | width: 60%;
150 | }
151 |
152 | .separator__separator {
153 | border-bottom: 1px solid #d1d5db;
154 | height: 1px;
155 | width: 100%;
156 | }
157 | ```
158 |
159 | ```html index.html hidden
160 |
164 | ```
165 |
166 |
--------------------------------------------------------------------------------
/contents/sidebar.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Layout
3 | created: '2019-11-16'
4 | description: Create a sidebar with CSS flexbox
5 | keywords: css flexbox, css layout, css sidebar
6 | thumbnail: /assets/css-layout/thumbnails/sidebar.png
7 | title: Sidebar
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
20 | ```
21 |
22 | ## CSS
23 |
24 | ```css styles.css
25 | .sidebar {
26 | display: flex;
27 | }
28 |
29 | .sidebar__sidebar {
30 | width: 30%;
31 | }
32 |
33 | .sidebar__main {
34 | /* Take the remaining width */
35 | flex: 1;
36 |
37 | /* Make it scrollable */
38 | overflow: auto;
39 | }
40 | ```
41 |
42 |
43 | ```css placeholders.css hidden
44 | .lines {
45 | padding: 0.25rem 0;
46 | width: 100%;
47 | align-items: center;
48 | display: flex;
49 | justify-content: center;
50 | flex-direction: column;
51 | }
52 | .line {
53 | background: #d1d5db;
54 | height: 1px;
55 | margin-bottom: 0.25rem;
56 | }
57 | .line.line--20 {
58 | width: 20%;
59 | }
60 | .line.line--40 {
61 | width: 40%;
62 | }
63 | .line.line--60 {
64 | width: 60%;
65 | }
66 | .line.line--80 {
67 | width: 80%;
68 | }
69 | .line.line--100 {
70 | width: 100%;
71 | }
72 | ```
73 |
74 | ```css styles.css hidden
75 | body {
76 | height: 24rem;
77 | }
78 |
79 | .sidebar {
80 | display: flex;
81 |
82 | /* Demo */
83 | border: 1px solid #d1d5db;
84 | border-radius: 0.25rem;
85 | height: 100%;
86 | width: 100%;
87 | }
88 |
89 | .sidebar__sidebar {
90 | border-right: 1px solid #d1d5db;
91 | width: 30%;
92 |
93 | /* Demo */
94 | display: flex;
95 | flex-direction: column;
96 | justify-content: flex-end;
97 | }
98 |
99 | .sidebar__main {
100 | /* Take the remaining width */
101 | flex: 1;
102 |
103 | /* Make it scrollable */
104 | overflow: auto;
105 | }
106 | ```
107 |
108 | ```html index.html hidden
109 |
129 | ```
130 |
131 |
--------------------------------------------------------------------------------
/contents/slider.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Input
3 | created: '2019-11-17'
4 | description: Create a slider with CSS flexbox
5 | keywords: css flexbox, css slider
6 | thumbnail: /assets/css-layout/thumbnails/slider.png
7 | title: Slider
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
68 | ```css styles.css hidden
69 | body {
70 | align-items: center;
71 | display: flex;
72 | justify-content: center;
73 | }
74 |
75 | .slider {
76 | /* Content is centered horizontally */
77 | align-items: center;
78 | display: flex;
79 |
80 | /* Size */
81 | height: 2rem;
82 |
83 | /* Demo */
84 | width: 16rem;
85 | }
86 |
87 | .slider__left {
88 | height: 2px;
89 |
90 | /* Colors */
91 | background-color: #d1d5db;
92 | }
93 |
94 | .slider__circle {
95 | /* Size */
96 | height: 2rem;
97 | width: 2rem;
98 |
99 | /* Rounded border */
100 | border-radius: 9999px;
101 |
102 | /* Colors */
103 | background-color: #3b82f6;
104 | }
105 |
106 | .slider__right {
107 | /* Take the remaining width */
108 | flex: 1;
109 | height: 2px;
110 |
111 | /* Colors */
112 | background-color: #d1d5db;
113 | }
114 | ```
115 |
116 | ```html index.html hidden
117 |
122 | ```
123 |
124 |
--------------------------------------------------------------------------------
/contents/spinner.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Feedback
3 | created: '2022-10-03'
4 | description: Create a loading spinner with CSS
5 | keywords: css loading spinner, css spinner
6 | thumbnail: /assets/css-layout/thumbnails/spinner.png
7 | title: Spinner
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 | ```
15 |
16 | ## CSS
17 |
18 | ```css styles.css
19 | .spinner {
20 | /* Size */
21 | height: 4rem;
22 | width: 4rem;
23 |
24 | /* Create a curve at the top */
25 | border: 4px solid #d1d5db;
26 | border-top-color: #3b82f6;
27 | border-radius: 50%;
28 |
29 | animation: spinner 800ms linear infinite;
30 | }
31 |
32 | @keyframes spinner {
33 | from {
34 | transform: rotate(0deg);
35 | }
36 | to {
37 | transform: rotate(360deg);
38 | }
39 | }
40 | ```
41 |
42 |
43 | ```css styles.css hidden
44 | body {
45 | align-items: center;
46 | display: flex;
47 | justify-content: center;
48 | }
49 |
50 | .spinner {
51 | height: 4rem;
52 | width: 4rem;
53 |
54 | border: 4px solid #d1d5db;
55 | border-top-color: #3b82f6;
56 | border-radius: 50%;
57 |
58 | animation: spinner 800ms linear infinite;
59 | }
60 |
61 | @keyframes spinner {
62 | from {
63 | transform: rotate(0deg);
64 | }
65 | to {
66 | transform: rotate(360deg);
67 | }
68 | }
69 | ```
70 |
71 | ```html index.html hidden
72 |
73 | ```
74 |
75 |
76 | ## See also
77 |
78 | - [Indeterminate progress bar](https://phuoc.ng/collection/css-layout/indeterminate-progress-bar/)
79 |
--------------------------------------------------------------------------------
/contents/split-navigation.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Navigation
3 | created: '2019-11-22'
4 | description: Create a split navigation with CSS flexbox
5 | keywords: css flexbox, css menu, css navigation, css split navigation
6 | thumbnail: /assets/css-layout/thumbnails/split-navigation.png
7 | title: Split navigation
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
16 | ...
17 |
18 |
19 |
20 |
21 | ...
22 |
23 |
24 | ```
25 |
26 | ## CSS
27 |
28 | ```css styles.css
29 | .split-navigation {
30 | /* Content is centered horizontally */
31 | align-items: center;
32 | display: flex;
33 |
34 | /* Reset styles */
35 | list-style-type: none;
36 | margin: 0;
37 | padding: 0 0 0.5rem 0;
38 | }
39 |
40 | .split-navigation__item {
41 | margin-right: 0.25rem;
42 |
43 | /* Demo */
44 | width: 1.25rem;
45 | }
46 |
47 | .split-navigation__item--right {
48 | /* Sticks to the right */
49 | margin-left: auto;
50 | margin-right: 0;
51 | }
52 | ```
53 |
54 |
55 | ```css placeholders.css hidden
56 | .rectangle {
57 | background: #d1d5db;
58 | border-radius: 0.25rem;
59 | height: var(--rectangle-height);
60 | width: var(--rectangle-width);
61 | }
62 | .rectangle--hor.rectangle--20 {
63 | --rectangle-width: 20%;
64 | }
65 | .rectangle--hor.rectangle--40 {
66 | --rectangle-width: 40%;
67 | }
68 | .rectangle--hor.rectangle--60 {
69 | --rectangle-width: 60%;
70 | }
71 | .rectangle--hor.rectangle--80 {
72 | --rectangle-width: 80%;
73 | }
74 | .rectangle--hor.rectangle--100 {
75 | --rectangle-width: 100%;
76 | }
77 | .rectangle--hor.rectangle--sm {
78 | --rectangle-height: 0.5rem;
79 | }
80 | .rectangle--hor.rectangle--md {
81 | --rectangle-height: 2rem;
82 | }
83 | .rectangle--hor.rectangle--lg {
84 | --rectangle-height: 4rem;
85 | }
86 | .rectangle--ver.rectangle--20 {
87 | --rectangle-height: 20%;
88 | }
89 | .rectangle--ver.rectangle--40 {
90 | --rectangle-height: 40%;
91 | }
92 | .rectangle--ver.rectangle--60 {
93 | --rectangle-height: 60%;
94 | }
95 | .rectangle--ver.rectangle--80 {
96 | --rectangle-height: 80%;
97 | }
98 | .rectangle--ver.rectangle--100 {
99 | --rectangle-height: 100%;
100 | }
101 | .rectangle--ver.rectangle--sm {
102 | --rectangle-width: 0.5rem;
103 | }
104 | .rectangle--ver.rectangle--md {
105 | --rectangle-width: 2rem;
106 | }
107 | .rectangle--ver.rectangle--lg {
108 | --rectangle-width: 4rem;
109 | }
110 | ```
111 |
112 | ```css styles.css hidden
113 | body {
114 | align-items: center;
115 | display: flex;
116 | justify-content: center;
117 | }
118 |
119 | .split-navigation {
120 | /* Content is centered horizontally */
121 | align-items: center;
122 | display: flex;
123 |
124 | /* Reset styles */
125 | list-style-type: none;
126 | margin: 0;
127 | padding: 0 0 0.5rem 0;
128 |
129 | /* Demo */
130 | border-bottom: 1px solid #d1d5db;
131 | width: 16rem;
132 | }
133 |
134 | .split-navigation__item {
135 | margin-right: 0.25rem;
136 |
137 | /* Demo */
138 | width: 1.25rem;
139 | }
140 |
141 | .split-navigation__item--right {
142 | /* Sticks to the right */
143 | margin-left: auto;
144 | margin-right: 0;
145 | }
146 | ```
147 |
148 | ```html index.html hidden
149 |
150 |
155 | ```
156 |
157 |
--------------------------------------------------------------------------------
/contents/split-screen.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Layout
3 | created: '2019-11-17'
4 | description: Create a split screen with CSS flexbox
5 | keywords: css flexbox, css layout, css split screen
6 | thumbnail: /assets/css-layout/thumbnails/split-screen.png
7 | title: Split screen
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
...
16 |
17 |
18 |
...
19 |
35 | ```css placeholders.css hidden
36 | .circle {
37 | background: #d1d5db;
38 | border-radius: 9999px;
39 | height: var(--circle-size);
40 | width: var(--circle-size);
41 | }
42 | .circle--sm {
43 | --circle-size: 0.5rem;
44 | }
45 | .circle--md {
46 | --circle-size: 1.5rem;
47 | }
48 | .circle--lg {
49 | --circle-size: 4rem;
50 | }
51 | .lines {
52 | padding: 0.25rem 0;
53 | width: 100%;
54 | align-items: center;
55 | display: flex;
56 | justify-content: center;
57 | flex-direction: column;
58 | }
59 | .line {
60 | background: #d1d5db;
61 | height: 1px;
62 | margin-bottom: 0.25rem;
63 | }
64 | .line.line--20 {
65 | width: 20%;
66 | }
67 | .line.line--40 {
68 | width: 40%;
69 | }
70 | .line.line--60 {
71 | width: 60%;
72 | }
73 | .line.line--80 {
74 | width: 80%;
75 | }
76 | .line.line--100 {
77 | width: 100%;
78 | }
79 | ```
80 |
81 | ```css styles.css hidden
82 | body {
83 | height: 24rem;
84 | }
85 |
86 | .split-screen {
87 | display: flex;
88 |
89 | /* Demo */
90 | border: 1px solid #d1d5db;
91 | border-radius: 0.25rem;
92 | height: 100%;
93 | width: 100%;
94 | }
95 |
96 | .split-screen__half {
97 | flex: 1;
98 |
99 | /* Demo */
100 | align-items: center;
101 | display: flex;
102 | justify-content: center;
103 | }
104 |
105 | .split-screen__half:first-child {
106 | border-right: 1px solid #d1d5db;
107 | }
108 | ```
109 |
110 | ```html index.html hidden
111 |
112 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
127 |
--------------------------------------------------------------------------------
/contents/stacked-cards.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2019-12-25'
4 | description: Create stacked cards with CSS
5 | keywords: css card, css stacked cards, css transform rotate
6 | thumbnail: /assets/css-layout/thumbnails/stacked-cards.png
7 | title: Stacked cards
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
16 |
17 |
18 | ...
19 |
56 | ```css styles.css hidden
57 | body {
58 | align-items: center;
59 | display: flex;
60 | justify-content: center;
61 | }
62 |
63 | .stacked-cards {
64 | /* Used to position the stacked cards */
65 | position: relative;
66 |
67 | /* Demo */
68 | border: 1px solid #d1d5db;
69 | border-radius: 0.25rem;
70 | height: 16rem;
71 | width: 16rem;
72 | }
73 |
74 | .stacked-cards__card {
75 | /* Absolute position */
76 | left: 0px;
77 | position: absolute;
78 | top: 0px;
79 |
80 | /* Take full size */
81 | height: 100%;
82 | width: 100%;
83 |
84 | /* Displayed under the container */
85 | z-index: 1;
86 |
87 | /* Background and border colors */
88 | background-color: rgb(255, 255, 255);
89 | border: 1px solid #d1d5db;
90 | }
91 | .stacked-cards__card--1st {
92 | /* Rotate it. Change the number of degrees for the following cards */
93 | transform: rotate(5deg);
94 | }
95 | .stacked-cards__card--2nd {
96 | /* Rotate it. Change the number of degrees for the following cards */
97 | transform: rotate(10deg);
98 | }
99 | .stacked-cards__card--3rd {
100 | /* Rotate it. Change the number of degrees for the following cards */
101 | transform: rotate(15deg);
102 | }
103 | ```
104 |
105 | ```html index.html hidden
106 |
111 | ```
112 |
113 |
--------------------------------------------------------------------------------
/contents/stamp-border.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2020-01-16'
4 | description: Create stamp border with CSS
5 | keywords: css radial gradient, css stamp border
6 | thumbnail: /assets/css-layout/thumbnails/stamp-border.png
7 | title: Stamp border
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
16 | ```
17 |
18 | ## CSS
19 |
20 | ```css styles.css
21 | .stamp-border {
22 | /* Background */
23 | background-color: #d1d5db;
24 | background-image: radial-gradient(#fff 50%, transparent 50%);
25 | background-position: -0.25rem -0.25rem;
26 | background-repeat: repeat;
27 | background-size: 0.5rem 0.5rem;
28 |
29 | /* Spacing */
30 | padding: 0.25rem;
31 | }
32 |
33 | .stamp-border__content {
34 | /* Background */
35 | background-color: #d1d5db;
36 |
37 | height: 100%;
38 | width: 100%;
39 | }
40 | ```
41 |
42 |
43 | ```css styles.css hidden
44 | body {
45 | height: 24rem;
46 | }
47 | .stamp-border {
48 | /* Background */
49 | background-color: #d1d5db;
50 | background-image: radial-gradient(#fff 50%, transparent 50%);
51 | background-position: -0.25rem -0.25rem;
52 | background-repeat: repeat;
53 | background-size: 0.5rem 0.5rem;
54 |
55 | /* Spacing */
56 | padding: 0.25rem;
57 |
58 | /* Demo */
59 | height: 100%;
60 | width: 100%;
61 | }
62 |
63 | .stamp-border__content {
64 | /* Background */
65 | background-color: #d1d5db;
66 |
67 | height: 100%;
68 | width: 100%;
69 | }
70 | ```
71 |
72 | ```html index.html hidden
73 |
76 | ```
77 |
78 |
--------------------------------------------------------------------------------
/contents/statistic.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2019-12-30'
4 | description: Create a statistic component with CSS flexbox
5 | keywords: css flexbox, css statistic
6 | thumbnail: /assets/css-layout/thumbnails/statistic.png
7 | title: Statistic
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
...
16 |
17 |
18 |
...
19 |
49 | ```css styles.css hidden
50 | body {
51 | align-items: center;
52 | display: flex;
53 | justify-content: center;
54 | }
55 | .statistic {
56 | /* Center the content */
57 | align-items: center;
58 | display: inline-flex;
59 | flex-direction: column;
60 | }
61 |
62 | .statistic__value {
63 | /* Big font size */
64 | font-size: 3rem;
65 | font-weight: 500;
66 | }
67 |
68 | .statistic__label {
69 | /* Smaller font size */
70 | font-size: 1rem;
71 | font-weight: 700;
72 |
73 | /* Uppercase the label */
74 | text-transform: uppercase;
75 | }
76 | ```
77 |
78 | ```html index.html hidden
79 |
80 |
81 | 9k+
82 |
83 |
84 | stars
85 |
86 |
89 |
--------------------------------------------------------------------------------
/contents/status-light.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2020-01-12'
4 | description: Create a status light with CSS flexbox
5 | keywords: css flexbox, css status light
6 | thumbnail: /assets/css-layout/thumbnails/status-light.png
7 | title: Status light
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
16 |
17 |
18 |
...
19 |
53 | ```css placeholders.css hidden
54 | .rectangle {
55 | background: #d1d5db;
56 | border-radius: 0.25rem;
57 | height: var(--rectangle-height);
58 | width: var(--rectangle-width);
59 | }
60 | .rectangle--hor.rectangle--20 {
61 | --rectangle-width: 20%;
62 | }
63 | .rectangle--hor.rectangle--40 {
64 | --rectangle-width: 40%;
65 | }
66 | .rectangle--hor.rectangle--60 {
67 | --rectangle-width: 60%;
68 | }
69 | .rectangle--hor.rectangle--80 {
70 | --rectangle-width: 80%;
71 | }
72 | .rectangle--hor.rectangle--100 {
73 | --rectangle-width: 100%;
74 | }
75 | .rectangle--hor.rectangle--sm {
76 | --rectangle-height: 0.5rem;
77 | }
78 | .rectangle--hor.rectangle--md {
79 | --rectangle-height: 2rem;
80 | }
81 | .rectangle--hor.rectangle--lg {
82 | --rectangle-height: 4rem;
83 | }
84 | .rectangle--ver.rectangle--20 {
85 | --rectangle-height: 20%;
86 | }
87 | .rectangle--ver.rectangle--40 {
88 | --rectangle-height: 40%;
89 | }
90 | .rectangle--ver.rectangle--60 {
91 | --rectangle-height: 60%;
92 | }
93 | .rectangle--ver.rectangle--80 {
94 | --rectangle-height: 80%;
95 | }
96 | .rectangle--ver.rectangle--100 {
97 | --rectangle-height: 100%;
98 | }
99 | .rectangle--ver.rectangle--sm {
100 | --rectangle-width: 0.5rem;
101 | }
102 | .rectangle--ver.rectangle--md {
103 | --rectangle-width: 2rem;
104 | }
105 | .rectangle--ver.rectangle--lg {
106 | --rectangle-width: 4rem;
107 | }
108 | ```
109 |
110 | ```css styles.css hidden
111 | body {
112 | align-items: center;
113 | display: flex;
114 | justify-content: center;
115 | }
116 |
117 | .status-light {
118 | /* Center the content */
119 | align-items: center;
120 | display: flex;
121 |
122 | /* Demo */
123 | width: 8rem;
124 | }
125 |
126 | .status-light__status {
127 | /* Background color */
128 | background-color: #16a34a;
129 |
130 | /* Rounded border */
131 | border-radius: 9999px;
132 |
133 | /* Size */
134 | height: 0.5rem;
135 | width: 0.5rem;
136 |
137 | /* Spacing */
138 | margin-right: 0.5rem;
139 | }
140 |
141 | .status-light__content {
142 | /* Take available width */
143 | flex: 1;
144 | }
145 | ```
146 |
147 | ```html index.html hidden
148 |
154 | ```
155 |
156 |
--------------------------------------------------------------------------------
/contents/stepper-input.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Input
3 | created: '2019-11-16'
4 | description: Create a stepper input with CSS flexbox
5 | keywords: css flexbox, css stepper input
6 | thumbnail: /assets/css-layout/thumbnails/stepper-input.png
7 | title: Stepper input
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
25 | ```
26 |
27 | ## CSS
28 |
29 | ```css styles.css
30 | .stepper-input {
31 | display: flex;
32 |
33 | /* Border */
34 | border: 1px solid #d1d5db;
35 | border-radius: 0.25rem;
36 |
37 | /* Size */
38 | height: 2rem;
39 | }
40 |
41 | .stepper-input__button {
42 | /* Reset */
43 | background: #d1d5db;
44 | border: none;
45 |
46 | /* Center the content */
47 | align-items: center;
48 | display: flex;
49 | justify-content: center;
50 |
51 | /* Size */
52 | width: 2rem;
53 | }
54 |
55 | .stepper-input__content {
56 | flex: 1;
57 | }
58 |
59 | .stepper-input__input {
60 | /* Reset */
61 | border: none;
62 |
63 | /* Take full size of its container */
64 | height: 100%;
65 | width: 100%;
66 | }
67 | ```
68 |
69 |
70 | ```css styles.css hidden
71 | body {
72 | align-items: center;
73 | display: flex;
74 | justify-content: center;
75 | }
76 |
77 | .stepper-input {
78 | display: flex;
79 |
80 | /* Border */
81 | border: 1px solid #d1d5db;
82 | border-radius: 0.25rem;
83 |
84 | /* Size */
85 | height: 2rem;
86 | width: 16rem;
87 | }
88 |
89 | .stepper-input__button {
90 | /* Reset */
91 | background: #d1d5db;
92 | border: none;
93 |
94 | /* Center the content */
95 | align-items: center;
96 | display: flex;
97 | justify-content: center;
98 |
99 | /* Size */
100 | width: 2rem;
101 | }
102 |
103 | .stepper-input__content {
104 | flex: 1;
105 | }
106 |
107 | .stepper-input__input {
108 | /* Reset */
109 | border: none;
110 |
111 | /* Take full size of its container */
112 | height: 100%;
113 | width: 100%;
114 | }
115 | ```
116 |
117 | ```html index.html hidden
118 |
125 | ```
126 |
127 |
--------------------------------------------------------------------------------
/contents/sticky-footer.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Layout
3 | created: '2019-11-15'
4 | description: Create a sticky footer with CSS flexbox
5 | keywords: css flexbox, css layout, css sticky, css sticky footer
6 | thumbnail: /assets/css-layout/thumbnails/sticky-footer.png
7 | title: Sticky footer
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
18 | ```
19 |
20 | ## CSS
21 |
22 | ```css styles.css
23 | .sticky-footer {
24 | display: flex;
25 | flex-direction: column;
26 | height: 100%;
27 | }
28 |
29 | .sticky-footer__header,
30 | .sticky-footer__footer {
31 | flex-shrink: 0;
32 | }
33 |
34 | .sticky-footer__main {
35 | flex-grow: 1;
36 | }
37 | ```
38 |
39 | The footer always sticks to the bottom if the main content is short.
40 |
41 |
42 | ```css placeholders.css hidden
43 | .lines {
44 | padding: 0.25rem 0;
45 | width: 100%;
46 | align-items: center;
47 | display: flex;
48 | justify-content: center;
49 | flex-direction: column;
50 | }
51 | .line {
52 | background: #d1d5db;
53 | height: 1px;
54 | margin-bottom: 0.25rem;
55 | }
56 | .line.line--20 {
57 | width: 20%;
58 | }
59 | .line.line--40 {
60 | width: 40%;
61 | }
62 | .line.line--60 {
63 | width: 60%;
64 | }
65 | .line.line--80 {
66 | width: 80%;
67 | }
68 | .line.line--100 {
69 | width: 100%;
70 | }
71 | .rectangle {
72 | background: #d1d5db;
73 | border-radius: 0.25rem;
74 | height: var(--rectangle-height);
75 | width: var(--rectangle-width);
76 | }
77 | .rectangle--hor.rectangle--20 {
78 | --rectangle-width: 20%;
79 | }
80 | .rectangle--hor.rectangle--40 {
81 | --rectangle-width: 40%;
82 | }
83 | .rectangle--hor.rectangle--60 {
84 | --rectangle-width: 60%;
85 | }
86 | .rectangle--hor.rectangle--80 {
87 | --rectangle-width: 80%;
88 | }
89 | .rectangle--hor.rectangle--100 {
90 | --rectangle-width: 100%;
91 | }
92 | .rectangle--hor.rectangle--sm {
93 | --rectangle-height: 0.5rem;
94 | }
95 | .rectangle--hor.rectangle--md {
96 | --rectangle-height: 2rem;
97 | }
98 | .rectangle--hor.rectangle--lg {
99 | --rectangle-height: 4rem;
100 | }
101 | .rectangle--ver.rectangle--20 {
102 | --rectangle-height: 20%;
103 | }
104 | .rectangle--ver.rectangle--40 {
105 | --rectangle-height: 40%;
106 | }
107 | .rectangle--ver.rectangle--60 {
108 | --rectangle-height: 60%;
109 | }
110 | .rectangle--ver.rectangle--80 {
111 | --rectangle-height: 80%;
112 | }
113 | .rectangle--ver.rectangle--100 {
114 | --rectangle-height: 100%;
115 | }
116 | .rectangle--ver.rectangle--sm {
117 | --rectangle-width: 0.5rem;
118 | }
119 | .rectangle--ver.rectangle--md {
120 | --rectangle-width: 2rem;
121 | }
122 | .rectangle--ver.rectangle--lg {
123 | --rectangle-width: 4rem;
124 | }
125 | ```
126 |
127 | ```css styles.css hidden
128 | body {
129 | height: 24rem;
130 | }
131 |
132 | .sticky-footer {
133 | display: flex;
134 | flex-direction: column;
135 | height: 100%;
136 |
137 | /* Demo */
138 | border: 1px solid #d1d5db;
139 | border-radius: 0.25rem;
140 | width: 100%;
141 | }
142 |
143 | .sticky-footer__header,
144 | .sticky-footer__footer {
145 | flex-shrink: 0;
146 |
147 | /* Demo */
148 | padding: 0.25rem;
149 | }
150 |
151 | .sticky-footer__main {
152 | flex-grow: 1;
153 |
154 | /* Demo */
155 | border-top: 1px solid #d1d5db;
156 | border-bottom: 1px solid #d1d5db;
157 | padding: 0.25rem;
158 | }
159 | ```
160 |
161 | ```html index.html hidden
162 |
179 | ```
180 |
181 |
--------------------------------------------------------------------------------
/contents/sticky-header.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Layout
3 | created: '2019-11-15'
4 | description: Create a sticky header with CSS
5 | keywords: css layout, css position sticky, css sticky header
6 | thumbnail: /assets/css-layout/thumbnails/sticky-header.png
7 | title: Sticky header
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 | ...
16 |
17 | ```
18 |
19 | ## CSS
20 |
21 | ```css styles.css
22 | .sticky-header__header {
23 | /* Stick to the top */
24 | position: sticky;
25 | top: 0;
26 | }
27 | ```
28 |
29 |
30 | ```css placeholders.css hidden
31 | .lines {
32 | padding: 0.25rem 0;
33 | width: 100%;
34 | align-items: center;
35 | display: flex;
36 | justify-content: center;
37 | flex-direction: column;
38 | }
39 | .line {
40 | background: #d1d5db;
41 | height: 1px;
42 | margin-bottom: 0.25rem;
43 | }
44 | .line.line--20 {
45 | width: 20%;
46 | }
47 | .line.line--40 {
48 | width: 40%;
49 | }
50 | .line.line--60 {
51 | width: 60%;
52 | }
53 | .line.line--80 {
54 | width: 80%;
55 | }
56 | .line.line--100 {
57 | width: 100%;
58 | }
59 | .rectangle {
60 | background: #d1d5db;
61 | border-radius: 0.25rem;
62 | height: var(--rectangle-height);
63 | width: var(--rectangle-width);
64 | }
65 | .rectangle--hor.rectangle--20 {
66 | --rectangle-width: 20%;
67 | }
68 | .rectangle--hor.rectangle--40 {
69 | --rectangle-width: 40%;
70 | }
71 | .rectangle--hor.rectangle--60 {
72 | --rectangle-width: 60%;
73 | }
74 | .rectangle--hor.rectangle--80 {
75 | --rectangle-width: 80%;
76 | }
77 | .rectangle--hor.rectangle--100 {
78 | --rectangle-width: 100%;
79 | }
80 | .rectangle--hor.rectangle--sm {
81 | --rectangle-height: 0.5rem;
82 | }
83 | .rectangle--hor.rectangle--md {
84 | --rectangle-height: 2rem;
85 | }
86 | .rectangle--hor.rectangle--lg {
87 | --rectangle-height: 4rem;
88 | }
89 | .rectangle--ver.rectangle--20 {
90 | --rectangle-height: 20%;
91 | }
92 | .rectangle--ver.rectangle--40 {
93 | --rectangle-height: 40%;
94 | }
95 | .rectangle--ver.rectangle--60 {
96 | --rectangle-height: 60%;
97 | }
98 | .rectangle--ver.rectangle--80 {
99 | --rectangle-height: 80%;
100 | }
101 | .rectangle--ver.rectangle--100 {
102 | --rectangle-height: 100%;
103 | }
104 | .rectangle--ver.rectangle--sm {
105 | --rectangle-width: 0.5rem;
106 | }
107 | .rectangle--ver.rectangle--md {
108 | --rectangle-width: 2rem;
109 | }
110 | .rectangle--ver.rectangle--lg {
111 | --rectangle-width: 4rem;
112 | }
113 | ```
114 |
115 | ```css styles.css hidden
116 | body {
117 | height: 24rem;
118 | }
119 |
120 | .sticky-header {
121 | /* Demo */
122 | border: 1px solid #d1d5db;
123 | border-radius: 0.25rem;
124 | height: 100%;
125 | width: 100%;
126 | }
127 |
128 | .sticky-header__header {
129 | /* Stick to the top */
130 | position: sticky;
131 | top: 0;
132 |
133 | /* Demo */
134 | padding: 0.25rem;
135 | border-bottom: 1px solid #d1d5db;
136 | }
137 | ```
138 |
139 | ```html index.html hidden
140 |
152 | ```
153 |
154 |
--------------------------------------------------------------------------------
/contents/sticky-sections.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Layout
3 | created: '2019-12-19'
4 | description: Create sticky sections with CSS
5 | keywords: css layout, css sticky, css sticky sections
6 | thumbnail: /assets/css-layout/thumbnails/sticky-sections.png
7 | title: Sticky sections
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
16 |
17 | ...
18 |
19 | ```
20 |
21 | ## CSS
22 |
23 | ```css styles.css
24 | .sticky-sections {
25 | height: 100%;
26 | overflow: scroll;
27 | }
28 |
29 | .sticky-sections__section {
30 | /* Take full size */
31 | height: 100%;
32 | width: 100%;
33 |
34 | /* Stick to the top */
35 | position: sticky;
36 | top: 0;
37 | }
38 | ```
39 |
40 |
41 | ```css styles.css hidden
42 | .sticky-sections {
43 | height: 24rem;
44 |
45 | /* Demo */
46 | width: 100%;
47 | }
48 |
49 | .sticky-sections__section {
50 | /* Take full size */
51 | height: 25%;
52 | width: 100%;
53 |
54 | /* Stick to the top */
55 | position: sticky;
56 | top: 0;
57 | }
58 |
59 | /* Demo */
60 | .sticky-sections__section:nth-child(1) {
61 | background-color: #e5e7eb;
62 | }
63 | .sticky-sections__section:nth-child(2) {
64 | background-color: #d1d5db;
65 | }
66 | .sticky-sections__section:nth-child(3) {
67 | background-color: #9ca3af;
68 | }
69 | .sticky-sections__section:nth-child(4) {
70 | background-color: #6b7280;
71 | }
72 | ```
73 |
74 | ```html index.html hidden
75 |
76 |
77 |
78 |
79 |
80 |
81 | ```
82 |
83 |
--------------------------------------------------------------------------------
/contents/switch.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Input
3 | created: '2019-11-17'
4 | description: Create a switch with CSS flexbox
5 | keywords: css custom checkbox, css flexbox, css switch, css switcher
6 | thumbnail: /assets/css-layout/thumbnails/switch.png
7 | title: Switch
8 | ---
9 |
10 | The checkbox is placed inside a label. So when clicking on the label, the checkbox will be checked even though it's hidden.
11 |
12 | ## HTML
13 |
14 | ```html index.html
15 |
16 |
20 |
21 |
22 |
23 |
27 |
28 | ```
29 |
30 | ## CSS
31 |
32 | ```css styles.css
33 | .switch {
34 | display: flex;
35 |
36 | /* Rounded border */
37 | border-radius: 9999px;
38 |
39 | /* Size */
40 | height: 2rem;
41 | width: 4rem;
42 |
43 | /* Demo */
44 | margin-bottom: 0.5rem;
45 | }
46 |
47 | .switch__input {
48 | /* Hide the input */
49 | display: none;
50 | }
51 |
52 | .switch__circle {
53 | /* Rounded border */
54 | border-radius: 9999px;
55 |
56 | /* Size */
57 | width: 2rem;
58 |
59 | background-color: #fff;
60 | }
61 | ```
62 |
63 | The switch comes with two variants:
64 |
65 | ```css
66 | /* ON status */
67 | .switch--on {
68 | background-color: #357edd;
69 | border: 1px solid #357edd;
70 |
71 | /* Push the circle to the right */
72 | justify-content: flex-end;
73 | }
74 |
75 | /* OFF status */
76 | .switch--off {
77 | background-color: #d1d5db;
78 | border: 1px solid #d1d5db;
79 | }
80 | .switch--off .switch__circle {
81 | border: 1px solid #d1d5db;
82 | }
83 | ```
84 |
85 |
86 | ```css styles.css hidden
87 | body {
88 | align-items: center;
89 | display: flex;
90 | justify-content: center;
91 | }
92 |
93 | .switch {
94 | display: flex;
95 |
96 | /* Rounded border */
97 | border-radius: 9999px;
98 |
99 | /* Size */
100 | height: 2rem;
101 | width: 4rem;
102 |
103 | /* Demo */
104 | margin-bottom: 0.5rem;
105 | }
106 |
107 | .switch__input {
108 | /* Hide the input */
109 | display: none;
110 | }
111 |
112 | .switch__circle {
113 | /* Rounded border */
114 | border-radius: 9999px;
115 |
116 | /* Size */
117 | width: 2rem;
118 |
119 | background-color: #fff;
120 | }
121 |
122 | /* ON status */
123 | .switch--on {
124 | background-color: #357edd;
125 | border: 1px solid #357edd;
126 |
127 | /* Push the circle to the right */
128 | justify-content: flex-end;
129 | }
130 |
131 | /* OFF status */
132 | .switch--off {
133 | background-color: #d1d5db;
134 | border: 1px solid #d1d5db;
135 | }
136 | .switch--off .switch__circle {
137 | border: 1px solid #d1d5db;
138 | }
139 | ```
140 |
141 | ```html index.html hidden
142 |
143 |
145 |
146 |
147 |
149 |
150 | ```
151 |
152 |
--------------------------------------------------------------------------------
/contents/tab.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Navigation
3 | created: '2019-11-22'
4 | description: Create tabs with CSS flexbox
5 | keywords: css flexbox, css navigation, css tab
6 | thumbnail: /assets/css-layout/thumbnails/tab.png
7 | title: Tab
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
...
16 |
17 |
18 |
...
19 |
56 | ```css placeholders.css hidden
57 | .circle {
58 | background: #d1d5db;
59 | border-radius: 9999px;
60 | height: var(--circle-size);
61 | width: var(--circle-size);
62 | }
63 | .circle--sm {
64 | --circle-size: 0.5rem;
65 | }
66 | .circle--md {
67 | --circle-size: 1.5rem;
68 | }
69 | .circle--lg {
70 | --circle-size: 4rem;
71 | }
72 | ```
73 |
74 | ```css styles.css hidden
75 | body {
76 | align-items: center;
77 | display: flex;
78 | justify-content: center;
79 | }
80 | .tab {
81 | /* Center the content */
82 | align-items: center;
83 | display: flex;
84 | justify-content: center;
85 | }
86 |
87 | .tab__item {
88 | border-top-left-radius: 0.25rem;
89 | border-top-right-radius: 0.25rem;
90 | padding: 0.5rem 1rem;
91 | }
92 |
93 | .tab__item--active {
94 | /* Border */
95 | border: 1px solid #d1d5db;
96 | /* Hide the bottom border */
97 | border-bottom-color: transparent;
98 |
99 | /* Border radius */
100 | border-top-left-radius: 2px;
101 | border-top-right-radius: 2px;
102 | }
103 |
104 | .tab__item--inactive {
105 | /* Has only the bottom border */
106 | border-bottom: 1px solid #d1d5db;
107 | }
108 | ```
109 |
110 | ```html index.html hidden
111 |
122 | ```
123 |
124 |
--------------------------------------------------------------------------------
/contents/teardrop.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2019-12-30'
4 | description: Create a teardrop with CSS
5 | keywords: css border radius, css teardrop, css water drop shape, css water droplet
6 | thumbnail: /assets/css-layout/thumbnails/teardrop.png
7 | title: Teardrop
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
17 | ```
18 |
19 | ## CSS
20 |
21 | ```css styles.css
22 | .teardrop {
23 | /* Center the content */
24 | align-items: center;
25 | display: flex;
26 | justify-content: center;
27 |
28 | /* Border */
29 | border: 2px solid #d1d5db;
30 | border-radius: 0px 50% 50% 50%;
31 |
32 | /* Angle at the top */
33 | transform: rotate(45deg);
34 |
35 | /* Size */
36 | height: 4rem;
37 | width: 4rem;
38 | }
39 |
40 | .teardrop__content {
41 | transform: rotate(-45deg);
42 | }
43 | ```
44 |
45 |
46 | ```css styles.css hidden
47 | body {
48 | align-items: center;
49 | display: flex;
50 | justify-content: center;
51 | }
52 |
53 | .teardrop {
54 | /* Center the content */
55 | align-items: center;
56 | display: flex;
57 | justify-content: center;
58 |
59 | /* Border */
60 | border: 2px solid #d1d5db;
61 | border-radius: 0px 50% 50% 50%;
62 |
63 | /* Angle at the top */
64 | transform: rotate(45deg);
65 |
66 | /* Size */
67 | height: 4rem;
68 | width: 4rem;
69 | }
70 |
71 | .teardrop__content {
72 | transform: rotate(-45deg);
73 | }
74 | ```
75 |
76 | ```html index.html hidden
77 |
80 | ```
81 |
82 |
--------------------------------------------------------------------------------
/contents/three-dimensions-card.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2021-04-04'
4 | description: Create a 3D card with CSS
5 | keywords: css 3D card
6 | thumbnail: /assets/css-layout/thumbnails/three-dimensions-card.png
7 | title: Three dimensions card
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 | ...
14 | ```
15 |
16 | ## CSS
17 |
18 | ```css styles.css
19 | :root {
20 | --three-dimensions-card-left-side-width: 1rem;
21 | }
22 |
23 | .three-dimensions-card {
24 | position: relative;
25 | }
26 |
27 | /* The left side */
28 | .three-dimensions-card::before {
29 | background: #d1d5db;
30 | content: '';
31 |
32 | /* Position */
33 | top: var(--three-dimensions-card-left-side-width);
34 | left: 0px;
35 | position: absolute;
36 | transform: translate(-100%, 0) skewY(-45deg);
37 | transform-origin: left top;
38 |
39 | /* Size */
40 | height: 100%;
41 | width: var(--three-dimensions-card-left-side-width);
42 | }
43 |
44 | /* The bottom side */
45 | .three-dimensions-card::after {
46 | background: #d1d5db;
47 | content: '';
48 |
49 | /* Position */
50 | bottom: 0px;
51 | left: 0px;
52 | position: absolute;
53 | transform: translate(0, 100%) skewX(-45deg);
54 | transform-origin: left top;
55 |
56 | /* Size */
57 | height: var(--three-dimensions-card-left-side-width);
58 | width: 100%;
59 | }
60 | ```
61 |
62 |
63 | ```css styles.css hidden
64 | :root {
65 | --three-dimensions-card-left-side-width: 1rem;
66 | }
67 |
68 | body {
69 | align-items: center;
70 | display: flex;
71 | justify-content: center;
72 | }
73 |
74 | .three-dimensions-card {
75 | position: relative;
76 |
77 | /* Demo */
78 | border: 1px solid #d1d5db;
79 | height: 6rem;
80 | width: 6rem;
81 | }
82 |
83 | /* The left side */
84 | .three-dimensions-card::before {
85 | background: #d1d5db;
86 | content: '';
87 |
88 | /* Position */
89 | top: var(--three-dimensions-card-left-side-width);
90 | left: 0px;
91 | position: absolute;
92 | transform: translate(-100%, 0) skewY(-45deg);
93 | transform-origin: left top;
94 |
95 | /* Size */
96 | height: 100%;
97 | width: var(--three-dimensions-card-left-side-width);
98 | }
99 |
100 | /* The bottom side */
101 | .three-dimensions-card::after {
102 | background: #d1d5db;
103 | content: '';
104 |
105 | /* Position */
106 | bottom: 0px;
107 | left: 0px;
108 | position: absolute;
109 | transform: translate(0, 100%) skewX(-45deg);
110 | transform-origin: left top;
111 |
112 | /* Size */
113 | height: var(--three-dimensions-card-left-side-width);
114 | width: 100%;
115 | }
116 | ```
117 |
118 | ```html index.html hidden
119 |
120 | ```
121 |
122 |
--------------------------------------------------------------------------------
/contents/toggle-password-visibility.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Input
3 | created: '2019-11-23'
4 | description: Create a toggle password visibility with CSS flexbox
5 | keywords: css flexbox, toggle password visibility
6 | thumbnail: /assets/css-layout/thumbnails/toggle-password-visibility.png
7 | title: Toggle password visibility
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 | ...
19 |
20 | ```
21 |
22 | ## CSS
23 |
24 | ```css styles.css
25 | .toggle-password-visibility {
26 | display: flex;
27 |
28 | /* Border */
29 | border: 1px solid #d1d5db;
30 | border-radius: 0.25rem;
31 | padding: 0.25rem;
32 | }
33 |
34 | .toggle-password-visibility__input {
35 | border-color: transparent;
36 |
37 | /* Take available width */
38 | flex: 1;
39 | }
40 |
41 | .toggle-password-visibility__toggle {
42 | /* Reset */
43 | background: #fff;
44 | border-color: transparent;
45 |
46 | /* Center the content */
47 | display: flex;
48 | align-items: center;
49 | justify-content: center;
50 | }
51 | ```
52 |
53 | In reality, the `click` event handler of the button needs to update the `type` attribute of the input to `text` or `password`:
54 |
55 | ```js
56 | document.querySelector('.toggle-password-visibility__toggle').addEventListener('click', (e) => {
57 | const input = e.target.previousElementSibling;
58 | const type = input.getAttribute('type');
59 | input.setAttribute('type', type === 'text' ? 'password' : 'text');
60 | });
61 | ```
62 |
63 |
64 | ```css styles.css hidden
65 | body {
66 | align-items: center;
67 | display: flex;
68 | justify-content: center;
69 | }
70 |
71 | .toggle-password-visibility {
72 | display: flex;
73 |
74 | /* Border */
75 | border: 1px solid #d1d5db;
76 | border-radius: 0.25rem;
77 | padding: 0.25rem;
78 |
79 | /* Demo */
80 | height: 2.5rem;
81 | }
82 |
83 | .toggle-password-visibility__input {
84 | border-color: transparent;
85 | /* Take available width */
86 | flex: 1;
87 |
88 | /* Demo */
89 | width: 16rem;
90 | }
91 |
92 | .toggle-password-visibility__toggle {
93 | /* Reset */
94 | background: #fff;
95 | border-color: transparent;
96 |
97 | /* Center the content */
98 | display: flex;
99 | align-items: center;
100 | justify-content: center;
101 | }
102 |
103 | .toggle-password-visibility__svg {
104 | fill: none;
105 | height: 1.5rem;
106 | stroke: #d1d5db;
107 | stroke-linecap: round;
108 | stroke-linejoin: round;
109 | stroke-width: 1;
110 | width: 1.5rem;
111 | }
112 | ```
113 |
114 | ```html index.html hidden
115 |
116 |
117 |
118 |
119 |
121 |
122 |
125 |
--------------------------------------------------------------------------------
/contents/upload-button.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Input
3 | created: '2019-11-29'
4 | description: Create an upload button with CSS flexbox
5 | keywords: css file input, css flexbox, css upload button
6 | thumbnail: /assets/css-layout/thumbnails/upload-button.png
7 | title: Upload button
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
23 | ```
24 |
25 | ## CSS
26 |
27 | ```css styles.css
28 | .upload-button {
29 | /* Used to position the input */
30 | position: relative;
31 |
32 | /* Center the content */
33 | align-items: center;
34 | display: flex;
35 |
36 | /* Border */
37 | border: 1px solid #d1d5db;
38 | border-radius: 0.25rem;
39 | padding: 0.25rem 0.5rem;
40 | }
41 |
42 | .upload-button__input {
43 | /* Take the full size */
44 | height: 100%;
45 | left: 0;
46 | position: absolute;
47 | top: 0;
48 | width: 100%;
49 |
50 | /* Make it transparent */
51 | opacity: 0;
52 | }
53 |
54 | .upload-button__icon {
55 | margin-right: 0.5rem;
56 | }
57 | ```
58 |
59 |
60 | ```css placeholders.css hidden
61 | .lines {
62 | padding: 0.25rem 0;
63 | width: 100%;
64 | align-items: center;
65 | display: flex;
66 | justify-content: center;
67 | flex-direction: column;
68 | }
69 | .line {
70 | background: #d1d5db;
71 | height: 1px;
72 | margin-bottom: 0.25rem;
73 | }
74 | .line.line--20 {
75 | width: 20%;
76 | }
77 | .line.line--40 {
78 | width: 40%;
79 | }
80 | .line.line--60 {
81 | width: 60%;
82 | }
83 | .line.line--80 {
84 | width: 80%;
85 | }
86 | .line.line--100 {
87 | width: 100%;
88 | }
89 | ```
90 |
91 | ```css styles.css hidden
92 | body {
93 | align-items: center;
94 | display: flex;
95 | justify-content: center;
96 | }
97 |
98 | .upload-button {
99 | /* Used to position the input */
100 | position: relative;
101 |
102 | /* Center the content */
103 | align-items: center;
104 | display: flex;
105 |
106 | /* Border */
107 | border: 1px solid #d1d5db;
108 | border-radius: 0.25rem;
109 | padding: 0.25rem 0.5rem;
110 |
111 | /* Demo */
112 | width: 8rem;
113 | }
114 |
115 | .upload-button__input {
116 | /* Take the full size */
117 | height: 100%;
118 | left: 0;
119 | position: absolute;
120 | top: 0;
121 | width: 100%;
122 |
123 | /* Make it transparent */
124 | opacity: 0;
125 | }
126 |
127 | .upload-button__icon {
128 | margin-right: 0.5rem;
129 | }
130 | .upload-button__svg {
131 | fill: none;
132 | height: 1.5rem;
133 | stroke: #d1d5db;
134 | stroke-linecap: round;
135 | stroke-linejoin: round;
136 | stroke-width: 1;
137 | width: 1.5rem;
138 | }
139 | ```
140 |
141 | ```html index.html hidden
142 |
156 | ```
157 |
158 |
--------------------------------------------------------------------------------
/contents/validation-icon.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Feedback
3 | created: '2019-12-12'
4 | description: Add validation icons to input with CSS
5 | keywords: css validation icon
6 | thumbnail: /assets/css-layout/thumbnails/validation-icon.png
7 | title: Validation icon
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
19 |
20 | ...
21 |
22 |
23 | ```
24 |
25 | ## CSS
26 |
27 | ```css styles.css
28 | .validation-icon {
29 | /* Used to position the validation icon */
30 | position: relative;
31 | }
32 |
33 | .validation-icon__input {
34 | /* Border */
35 | border: 1px solid #d1d5db;
36 | border-radius: 0.25rem;
37 |
38 | /* Take the full width */
39 | width: 100%;
40 | height: 2rem;
41 |
42 | /* Don't overlap the icon */
43 | padding-right: 1.5rem;
44 | }
45 |
46 | .validation-icon__icon {
47 | /* Positioned at the right side */
48 | position: absolute;
49 | right: 0.5rem;
50 | top: 50%;
51 | transform: translate(0, -50%);
52 |
53 | z-index: 10;
54 | }
55 | ```
56 |
57 |
58 | ```css styles.css hidden
59 | body {
60 | align-items: center;
61 | display: flex;
62 | justify-content: center;
63 | }
64 |
65 | .validation-icon {
66 | /* Used to position the validation icon */
67 | position: relative;
68 |
69 | /* Demo */
70 | width: 16rem;
71 | }
72 |
73 | .validation-icon__input {
74 | /* Border */
75 | border: 1px solid #d1d5db;
76 | border-radius: 0.25rem;
77 |
78 | /* Take the full width */
79 | width: 100%;
80 | height: 2rem;
81 |
82 | /* Don't overlap the icon */
83 | padding-right: 1.5rem;
84 | }
85 |
86 | .validation-icon__icon {
87 | /* Positioned at the right side */
88 | position: absolute;
89 | right: 0.5rem;
90 | top: 50%;
91 | transform: translate(0, -50%);
92 |
93 | z-index: 10;
94 | }
95 |
96 | .validation-icon__svg {
97 | fill: none;
98 | height: 1rem;
99 | width: 1rem;
100 | stroke: #22c55e;
101 | stroke-linecap: round;
102 | stroke-linejoin: round;
103 | stroke-width: 2;
104 | }
105 | ```
106 |
107 | ```html index.html hidden
108 |
109 |
110 |
111 |
112 |
114 |
115 |
118 |
--------------------------------------------------------------------------------
/contents/video-background.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2019-12-16'
4 | description: Add video background with CSS flexbox
5 | keywords: css flexbox, object fit cover
6 | thumbnail: /assets/css-layout/thumbnails/video-background.png
7 | title: Video background
8 | ---
9 |
10 | In this pattern, the video is displayed in the background.
11 |
12 | ## HTML
13 |
14 | ```html index.html
15 |
16 |
17 |
18 | ...
19 |
20 |
21 |
22 |
...
23 |
75 | ```css placeholders.css hidden
76 | .lines {
77 | padding: 0.25rem 0;
78 | width: 100%;
79 | align-items: center;
80 | display: flex;
81 | justify-content: center;
82 | flex-direction: column;
83 | }
84 | .line {
85 | background: #d1d5db;
86 | height: 1px;
87 | margin-bottom: 0.25rem;
88 | }
89 | .line.line--20 {
90 | width: 20%;
91 | }
92 | .line.line--40 {
93 | width: 40%;
94 | }
95 | .line.line--60 {
96 | width: 60%;
97 | }
98 | .line.line--80 {
99 | width: 80%;
100 | }
101 | .line.line--100 {
102 | width: 100%;
103 | }
104 | ```
105 |
106 | ```css styles.css hidden
107 | body {
108 | height: 24rem;
109 | }
110 |
111 | .video-background {
112 | /* Used to position the video and content */
113 | position: relative;
114 |
115 | height: 100%;
116 | width: 100%;
117 | }
118 |
119 | .video-background__inner {
120 | /* Positioned at the top left corner */
121 | left: 0px;
122 | position: absolute;
123 | top: 0px;
124 |
125 | /* Take full size */
126 | height: 100%;
127 | width: 100%;
128 |
129 | /* Hide the scrollbar */
130 | overflow: hidden;
131 | }
132 |
133 | .video-background__video {
134 | object-fit: cover;
135 |
136 | /* Take full width */
137 | height: 100%;
138 | max-width: 100%;
139 | }
140 |
141 | .video-background__content {
142 | /* Positioned at the top left corner */
143 | left: 0px;
144 | position: absolute;
145 | top: 0px;
146 |
147 | /* Take full size */
148 | height: 100%;
149 | width: 100%;
150 |
151 | /* Center the content */
152 | align-items: center;
153 | display: flex;
154 | flex-direction: column;
155 | justify-content: center;
156 | }
157 | ```
158 |
159 | ```html index.html hidden
160 |
161 |
162 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
176 |
--------------------------------------------------------------------------------
/contents/voting.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2021-04-01'
4 | description: Create a voting control with CSS flexbox
5 | keywords: css flexbox, css triangle buttons, css voting control
6 | thumbnail: /assets/css-layout/thumbnails/voting.png
7 | title: Voting
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
...
21 |
22 |
23 |
24 |
25 |
26 |
91 | ```css styles.css hidden
92 | body {
93 | align-items: center;
94 | display: flex;
95 | justify-content: center;
96 | }
97 |
98 | .voting {
99 | border: 1px solid #d1d5db;
100 | border-radius: 0.25rem;
101 | display: flex;
102 | flex-direction: column;
103 | height: 8rem;
104 | }
105 |
106 | .voting__button {
107 | /* Reset */
108 | background: none;
109 | border: none;
110 | cursor: pointer;
111 |
112 | /* Center the content */
113 | align-items: center;
114 | display: flex;
115 | justify-content: center;
116 |
117 | /* Size */
118 | height: 1rem;
119 |
120 | /* Position the triangle */
121 | position: relative;
122 | }
123 |
124 | .voting__triangle {
125 | border-style: solid;
126 |
127 | /* Size */
128 | height: 0;
129 | width: 0;
130 | }
131 |
132 | .voting__triangle--up {
133 | border-color: transparent transparent #d1d5db;
134 | border-width: 0 0.5rem 0.5rem;
135 | }
136 |
137 | .voting__triangle--down {
138 | border-color: #d1d5db transparent transparent;
139 | border-width: 0.5rem 0.5rem 0px;
140 | }
141 |
142 | .voting__number {
143 | /* Take the available height */
144 | flex: 1;
145 |
146 | /* Center the number */
147 | align-items: center;
148 | display: flex;
149 | justify-content: center;
150 |
151 | /* Spacing */
152 | padding: 0.25rem;
153 | }
154 | ```
155 |
156 | ```html index.html hidden
157 |
158 |
159 |
160 |
161 |
999
162 |
163 |
164 |
165 |
168 |
--------------------------------------------------------------------------------
/contents/watermark.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: Display
3 | created: '2020-01-18'
4 | description: Create a watermark with CSS
5 | keywords: css watermark
6 | thumbnail: /assets/css-layout/thumbnails/watermark.png
7 | title: Watermark
8 | ---
9 |
10 | ## HTML
11 |
12 | ```html index.html
13 |
14 |
15 |
19 |
20 |
21 | ...
22 |
67 | ```css placeholders.css hidden
68 | .lines {
69 | padding: 0.25rem 0;
70 | width: 100%;
71 | align-items: center;
72 | display: flex;
73 | justify-content: center;
74 | flex-direction: column;
75 | }
76 | .line {
77 | background: #d1d5db;
78 | height: 1px;
79 | margin-bottom: 0.25rem;
80 | }
81 | .line.line--20 {
82 | width: 20%;
83 | }
84 | .line.line--40 {
85 | width: 40%;
86 | }
87 | .line.line--60 {
88 | width: 60%;
89 | }
90 | .line.line--80 {
91 | width: 80%;
92 | }
93 | .line.line--100 {
94 | width: 100%;
95 | }
96 | ```
97 |
98 | ```css styles.css hidden
99 | body {
100 | height: 24rem;
101 | }
102 |
103 | .watermark {
104 | position: relative;
105 |
106 | /* Demo */
107 | height: 100%;
108 | width: 100%;
109 | align-items: center;
110 | display: flex;
111 | flex-direction: column;
112 | justify-content: center;
113 | }
114 |
115 | .watermark__inner {
116 | /* Center the content */
117 | align-items: center;
118 | display: flex;
119 | justify-content: center;
120 |
121 | /* Absolute position */
122 | left: 0px;
123 | position: absolute;
124 | top: 0px;
125 |
126 | /* Take full size */
127 | height: 100%;
128 | width: 100%;
129 | }
130 |
131 | .watermark__body {
132 | /* Text color */
133 | color: rgba(0, 0, 0, 0.2);
134 |
135 | /* Text styles */
136 | font-size: 2rem;
137 | font-weight: bold;
138 | text-transform: uppercase;
139 |
140 | /* Rotate the text */
141 | transform: rotate(-45deg);
142 |
143 | /* Disable the selection */
144 | user-select: none;
145 | }
146 | ```
147 |
148 | ```html index.html hidden
149 |
150 |
151 |
152 | Draft
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
165 |
--------------------------------------------------------------------------------