[
{
"path": ".gitignore",
"content": ".DS_Store"
},
{
"path": "LICENSE",
"content": "MIT License\n\nCopyright (c) 2019 phuocng\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
{
"path": "README.md",
"content": "# CSS Layout\n\nAs 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.\n\nThat's why I've put together a collection of the most popular layouts and components that can be built with pure CSS.\n\nThese 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.\n\nThe 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.\n\n## About\n\nThis project is developed by _Nguyen Huu Phuoc_. I love building products and sharing knowledge.\n\nBe my friend on\n\n- [Twitter](https://twitter.com/nghuuphuoc)\n- [Github](https://github.com/phuocng)\n"
},
{
"path": "contents/accordion.mdx",
"content": "---\ncategory: Display\ncreated: '2019-12-04'\ndescription: Create an accordion with CSS flexbox\nkeywords: css accordion, css flexbox\nthumbnail: /assets/css-layout/thumbnails/accordion.png\ntitle: Accordion\n---\n\n## HTML\n\n```html index.html\n\n
\n```\n\n"
},
{
"path": "contents/carousel-slider.mdx",
"content": "---\ncategory: Navigation\ncreated: '2023-10-14'\ndescription: Create a carousel slider with CSS\nopenGraphCover: /og/css-layout/carousel-slider.png\nthumbnail: /assets/css-layout/thumbnails/carousel-slider.png\ntitle: Carousel slider\n---\n\nA carousel slider is a component that lets users browse a collection of items, usually images or cards, by sliding them horizontally or vertically. It's commonly used in websites and mobile apps to showcase products, features, or news articles.\n\nYou can find carousel sliders in all kinds of websites and apps, like e-commerce platforms, news portals, and social media sites. They offer an interactive and engaging way for users to navigate content without taking up too much screen space.\n\nOn top of that, carousel sliders can be customized with different transition effects, autoplay options, and navigation controls. This makes for an even better user experience.\n\nIn this post, we'll show you how to create a carousel slider with CSS.\n\n## HTML markup\n\nLet's talk about organizing the markup for a slider with five items. The slider consists of a `div` element with the class `slider__inner` that displays the list of items, each with a `slider__item` class.\n\n```html\n
\n
\n \n \n \n \n \n
\n
\n```\n\nFor simplicity, let's assume all slider items have the same dimensions as the slider container. The `.slider` class sets the dimensions of the slider container to a `width` and `height` of 100%, taking up all available space in its parent element. The `overflow` property is set to `hidden` to ensure that any content that overflows the slider container is not visible.\n\n```css\n.slider {\n overflow: hidden;\n position: relative;\n width: 100%;\n height: 20rem;\n}\n```\n\nMeanwhile, the `.slider__inner` class positions the list of items inside the slider container. It has an absolute position with `top` and `left` properties set to 0, placing it at the top left corner of its parent element (the slider container). The `width` and `height` are also set to 100%, filling up all available space inside its parent element.\n\n```css\n.slide__inner {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n```\n\nTo position the items inside the slider container, we use absolute positioning with `top`, `left`, `width`, and `height` properties set to 0 and 100% respectively, ensuring that each item takes up all available space inside the slider container.\n\n```css\n.slider__item {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n```\n\nNow, to achieve the sliding effect, we use the `translateX()` function of CSS `transform` property. This function moves an element horizontally by a given percentage or pixel value. In our case, we want to move each item to the right so that only one item is visible at a time.\n\n```html\n
1
\n
2
\n
3
\n
4
\n
5
\n```\n\nTo activate a specific item in the carousel slider, we shift the whole inner container to the left by a value that moves the target item into view. One way to achieve this is by setting the `transform` property of the `.slider__inner` element to `translateX(-300%)`. This will move the inner container three times its width to the left, which positions the fourth item at the beginning of the slider.\n\n```html\n
\n
1
\n
2
\n
3
\n
4
\n
5
\n
\n```\n\nBy adjusting this value, we can easily activate any other item in our carousel slider. This technique allows us to create an interactive and engaging carousel slider that users can navigate through with ease.\n\n## Adding navigation\n\nNow that we have placed the slider items in the right spot, it's time to add navigation so users can easily move between them.\n\nTo do this, we'll create an additional element with the `slider__navigation` CSS class. This element contains multiple dots that users can click to jump to the corresponding item.\n\nHere is the updated markup:\n\n```html\n
\n
\n \n
\n\n
\n \n \n \n \n
\n
\n```\n\nThe `slider__navigation` element has a position of `absolute`, which means it's positioned relative to the nearest positioned ancestor (in this case, the `.slider` element). We set `bottom: 1rem` to position it at the bottom of the slider container, and `left: 50%` is used to center it horizontally.\n\nTo center its content horizontally, we use `transform: translateX(-50%)`, which moves it left by half of its own width.\n\n```css\n.slider__navigation {\n position: absolute;\n bottom: 1rem;\n left: 50%;\n transform: translateX(-50%);\n}\n```\n\nThe navigation dots inside the `slider__navigation` are created using individual elements with a class of `slider__dot`. To space them out evenly, we use the CSS property `gap: 0.5rem`, which adds a gap between each item. The items are aligned along the horizontal axis using flexbox properties such as `display: flex`, `align-items: center`, and `justify-content: center`.\n\n```css\n.slider__navigation {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n}\n```\n\nThe `slider__dot` class is used to style the navigation dots inside the `slider__navigation` element. It has a background color of `rgb(203 213 225)` and a border radius of `50%`, which gives it a circular shape. It also has a `cursor` property set to `pointer`, which changes the mouse cursor when hovering over the element, indicating that it can be clicked. Finally, its dimensions are set to `height: 0.5rem` and `width: 0.5rem`, making it small enough to fit inside the navigation container but large enough to be clickable.\n\n```css\n.slider__dot {\n background-color: rgb(203 213 225);\n border-radius: 50%;\n cursor: pointer;\n\n height: 0.5rem;\n width: 0.5rem;\n}\n```\n\nTo indicate the currently active dot, we can add a separate class named `slider__dot--active` and apply it to the corresponding dot element. This class will have a different background color than the inactive dots, making it clear which item is currently active.\n\n```css\n.slider__dot--active {\n background-color: rgb(100 116 139);\n}\n```\n\nWhen an item is activated in the slider, we can remove the `slider__dot--active` class from all dots and then add it only to the dot that corresponds to the currently active item. This ensures that only one dot is highlighted at any given time.\n\n## Adding arrows for easy navigation\n\nIn addition to the navigation we created earlier, we can further enhance the user experience by adding two buttons that allow users to quickly move to the previous and next items.\n\nHere's the updated markup:\n\n```html\n
\n ...\n \n \n
\n```\n\nTo create these buttons, we use the `.slider__prev` and `.slider__next` classes. We set their position to absolute so that they're positioned relative to the slider container. We also set the top position to `50%` and use `transform: translateY(-50%)` to center them vertically inside the slider container.\n\nHere's how they are positioned:\n\n```css\n.slider__prev,\n.slider__next {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n\n height: 1rem;\n width: 0.5rem;\n}\n```\n\nTo add arrow navigation to the carousel slider, we can use CSS pseudo-elements `::before` and `::after`. These elements allow us to add content before or after an element's content, which in our case will be arrows.\n\nIf you're not familiar with how to create arrows using CSS, you can check out this [post](https://phuoc.ng/collection/css-layout/triangle-buttons/) for guidance.\n\nWith these CSS rules in place, you should now have fully functional arrow navigation for your carousel slider. \n\n## Demo\n\nLet's take a look at the final result. Check out the code to see how we shifted the whole inner element to activate the fourth item. It's important to note that this is purely for layout purposes only. Clicking on the dots or arrows won't navigate to the corresponding item. Check out this [post](https://phuoc.ng/collection/css-animation/navigate-to-a-specific-item-in-a-carousel-slider/) to learn how we can make it happen.\n\n\n```css styles.css\n.slider {\n overflow: hidden;\n position: relative;\n width: 100%;\n height: 20rem;\n}\n.slider__inner {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n.slider__item {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n\n /* Demo purpose */\n background: rgb(241 245 249);\n align-items: center;\n display: flex;\n justify-content: center;\n font-size: 2.5rem;\n font-weight: 500;\n}\n.slider__navigation {\n position: absolute;\n bottom: 1rem;\n left: 50%;\n transform: translateX(-50%);\n\n align-items: center;\n display: flex;\n justify-content: center;\n gap: 0.5rem;\n}\n.slider__dot {\n background: rgb(203 213 225);\n border-radius: 50%;\n cursor: pointer;\n\n height: 0.5rem;\n width: 0.5rem;\n}\n.slider__dot--active {\n background: rgb(100 116 139);\n}\n\n.slider__prev,\n.slider__next {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n height: 1rem;\n width: 0.5rem;\n}\n.slider__prev::before,\n.slider__next::before {\n cursor: pointer;\n content: '';\n position: absolute;\n border-style: solid;\n height: 0;\n width: 0;\n}\n.slider__prev::before {\n border-color: transparent rgb(148 163 184) transparent transparent;\n border-width: 0.5rem 0.5rem 0.5rem 0;\n}\n.slider__next::before {\n border-color: transparent transparent transparent rgb(148 163 184);\n border-width: 0.5rem 0 0.5rem 0.5rem;\n}\n.slider__prev {\n left: 0.5rem;\n}\n.slider__next {\n right: 0.5rem;\n}\n```\n\n```html index.html\n
\n
\n
1
\n
2
\n
3
\n
4
\n
5
\n
\n\n
\n \n \n \n \n \n
\n\n \n \n
\n```\n\n\n## See also\n\n- [Dot navigation](https://phuoc.ng/collection/css-layout/dot-navigation/)\n- [Fixed at side](https://phuoc.ng/collection/css-layout/fixed-at-side/)\n- [Navigate to a specific item in a carousel slider](https://phuoc.ng/collection/css-animation/navigate-to-a-specific-item-in-a-carousel-slider/)\n- [Triangle buttons](https://phuoc.ng/collection/css-layout/triangle-buttons/)\n"
},
{
"path": "contents/center-align-one-and-left-align-the-other.mdx",
"content": "---\ncategory: Display\ncreated: '2023-08-27'\ndescription: How to center align one element and left align the other\nkeywords: css flexbox, css grid\nopenGraphCover: /og/css-layout/center-align-one-left-align-other.png\nthumbnail: /assets/css-layout/thumbnails/center-align-one-left-align-other.png\ntitle: Center align one and left align the other\n---\n\nUsing a single row to display all elements is a common pattern in web design. These elements can be divided into different groups and arranged on the left, center, or right side of the row.\n\nYou've probably seen this pattern before, like in a toolbar where the main actions are grouped and displayed at the center. Meanwhile, less important buttons are located on the left side, like a button to toggle the sidebar.\n\nAnother example is the header of a web application, where the main title is displayed at the center, and a button to go back to the previous page is on the left side.\n\nIn this post, we'll learn how to create this kind of layout. To keep it simple, let's assume that the layout consists of only two elements.\n\n```html\n
\n \n \n
\n```\n\n## Using CSS flexbox\n\nInitially, our first idea might be to use flexbox to arrange the layout.\n\n```css\n.container {\n display: flex;\n justify-content: center;\n}\n```\n\nTo align the first element to the left and center the remaining items, we can use the margin property. Here's an example:\n\n```css\n.container__left {\n margin-right: auto;\n}\n.container__center {\n margin-right: auto;\n}\n```\n\nLet's take a look at what it looks like:\n\n\n```css demo.css hidden\n:root {\n --placeholder-size: 1rem;\n}\nbody {\n align-items: center;\n display: flex;\n justify-content: center;\n}\n.circle {\n background-color: rgb(203 213 225);\n border-radius: 9999px;\n height: var(--placeholder-size);\n width: var(--placeholder-size);\n margin-right: 0.125rem;\n}\n.square {\n background-color: rgb(203 213 225);\n border-radius: 0.25rem;\n height: var(--placeholder-size);\n width: var(--placeholder-size);\n margin: 0 0.125rem;\n}\n.container {\n border: 1px solid rgb(203 213 225);\n border-radius: 0.25rem;\n padding: 0.5rem;\n width: 16rem;\n}\n.container__left,\n.container__center {\n align-items: center;\n display: flex;\n justify-content: center;\n}\n```\n\n```css styles.css\n.container {\n display: flex;\n}\n.container__left {\n margin-right: auto;\n}\n.container__center {\n margin-right: auto;\n}\n```\n\n```html index.html\n
\n
\n \n \n \n
\n
\n \n \n \n \n
\n
\n```\n\n\nUnfortunately, our expectation doesn't match reality. The main element is centered only within the available space, not the entire container. Let's move on to the next section to find a solution to this issue.\n\n## Using CSS grid\n\nIn addition to CSS flexbox, CSS offers another powerful tool for creating layouts: CSS grid. We can use this technique to solve the issue we talked about earlier.\n\nLet's say we now have three elements in our layout instead of two, and we need to add an empty element on the right-hand side.\n\n```css\n.container {\n display: grid;\n grid-template-columns: 1fr repeat(1, auto) 1fr;\n}\n```\n\nLet's dive into some CSS talk. The first CSS declaration is simple: it replaces the `flex` value with `grid`, which tells the browser to create a grid layout.\n\nNow, the second CSS declaration might seem confusing, but it's actually quite easy to understand. The `1fr` means that the first and last columns should take up an equal amount of space. The `repeat(1, auto)` declaration means that there should be one column with a width of `auto`.\n\nSo, in simpler terms, this CSS declaration creates a layout with three columns. The first and last columns will have equal width, while the middle column will adjust its width to fit its content.\n\nLastly, we want the main element to start at the second column. So, we can set the `grid-column-start` property to 2.\n\n```css\n.container__center {\n grid-column-start: 2;\n}\n```\n\nNow, it's a breeze to move the first column to the left.\n\n```css\n.container__left {\n margin-right: auto;\n}\n```\n\nFinally, let's check out the demonstration to see the progress we've made so far!\n\n\n```css demo.css hidden\n:root {\n --placeholder-size: 1rem;\n}\nbody {\n align-items: center;\n display: flex;\n justify-content: center;\n}\n.circle {\n background-color: rgb(203 213 225);\n border-radius: 9999px;\n height: var(--placeholder-size);\n width: var(--placeholder-size);\n margin-right: 0.125rem;\n}\n.square {\n background-color: rgb(203 213 225);\n border-radius: 0.25rem;\n height: var(--placeholder-size);\n width: var(--placeholder-size);\n margin: 0 0.125rem;\n}\n.container {\n border: 1px solid rgb(203 213 225);\n border-radius: 0.25rem;\n padding: 0.5rem;\n width: 16rem;\n}\n.container__left,\n.container__center {\n align-items: center;\n display: flex;\n justify-content: center;\n}\n```\n\n```css styles.css\n.container {\n display: grid;\n grid-template-columns: 1fr repeat(1, auto) 1fr;\n}\n.container__left {\n margin-right: auto;\n}\n.container__center {\n grid-column-start: 2;\n}\n```\n\n```html index.html\n
\n
\n \n \n \n
\n
\n \n \n \n \n
\n
\n```\n\n\nReplacing the non-existing third column with the real one is a piece of cake. All you need to do is push it to the right using a single CSS declaration.\n\n```css\n.container__right {\n margin-left: auto;\n}\n```\n\n\n```css demo.css hidden\n:root {\n --placeholder-size: 1rem;\n}\nbody {\n align-items: center;\n display: flex;\n justify-content: center;\n}\n.circle {\n background-color: rgb(203 213 225);\n border-radius: 9999px;\n height: var(--placeholder-size);\n width: var(--placeholder-size);\n margin-right: 0.125rem;\n}\n.square {\n background-color: rgb(203 213 225);\n border-radius: 0.25rem;\n height: var(--placeholder-size);\n width: var(--placeholder-size);\n margin: 0 0.125rem;\n}\n.container {\n border: 1px solid rgb(203 213 225);\n border-radius: 0.25rem;\n padding: 0.5rem;\n width: 16rem;\n}\n.container__left,\n.container__center,\n.container__right {\n align-items: center;\n display: flex;\n justify-content: center;\n}\n```\n\n```css styles.css hidden\n.container {\n display: grid;\n grid-template-columns: 1fr repeat(1, auto) 1fr;\n}\n.container__left {\n margin-right: auto;\n}\n.container__center {\n grid-column-start: 2;\n}\n.container__right {\n margin-left: auto;\n}\n```\n\n```html index.html hidden\n
\n
\n \n \n \n
\n
\n \n \n \n \n
\n
\n \n \n
\n
\n```\n\n\n## Usages\n\nIn addition to the sample usages mentioned earlier, I've been using this technique to create a layout that centers the main content of the page while aligning the sidebar to the right side of the screen.\n\nHere's an example of what the layout looks like:\n\n\n```css demo.css hidden\n.container {\n border: 1px solid rgb(203 213 225);\n width: 100%;\n height: 16rem;\n}\n.container__main {\n align-items: center;\n display: flex;\n justify-content: center;\n\n background: rgb(203 213 225);\n width: 9rem;\n}\n.container__sidebar {\n align-items: center;\n display: flex;\n justify-content: center;\n\n background: rgb(226 232 240);\n width: 4rem;\n}\n@media (min-width: 600px) {\n .container__main {\n width: 15rem;\n }\n .container__sidebar {\n width: 8rem;\n }\n}\n```\n\n```css styles.css\n.container {\n display: grid;\n grid-template-columns: 1fr repeat(1, auto) 1fr;\n}\n.container__main {\n grid-column-start: 2;\n}\n.container__sidebar {\n margin-left: auto;\n}\n```\n\n```html index.html\n
\n
Main
\n
Sidebar
\n
\n```\n\n"
},
{
"path": "contents/centering.mdx",
"content": "---\ncategory: Display\ncreated: '2019-11-15'\ndescription: Center an element with CSS flexbox\nkeywords: css centering, css flexbox\nthumbnail: /assets/css-layout/thumbnails/centering.png\ntitle: Centering\n---\n\n## HTML\n\n```html index.html\n
\n```\n\n## CSS\n\n```css styles.css\n.circular-navigation {\n position: relative;\n}\n\n.circular-navigation__circle {\n /* Position */\n position: absolute;\n top: 0;\n\n /*\n 3rem is the distance from the item to the trigger element.\n Replace 0deg with 60deg, 180deg, 240deg, 300deg for another item\n in case you want to have a total of 6 menu items.\n The formulation is 360 / numberOfItems * indexOfItem\n */\n transform: rotate(0deg) translateX(-3rem);\n\n /* Must have the same size as the trigger element */\n height: 2rem;\n width: 2rem;\n}\n\n.circular-navigation__content {\n /*\n Rotate it to make it displayed vertically\n Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item\n in case you want to have a total of 6 menu items.\n The formulation is -(360 / numberOfItems * indexOfItem)\n */\n transform: rotate(-0deg);\n\n /* Center the content */\n align-items: center;\n display: flex;\n justify-content: center;\n\n /* Take full size */\n height: 100%;\n width: 100%;\n}\n```\n\n\n```css styles.css hidden\nbody {\n align-items: center;\n display: flex;\n justify-content: center;\n}\n.circular-navigation-container {\n /* Demo */\n align-items: center;\n display: flex;\n justify-content: center;\n\n height: 8rem;\n width: 8rem;\n}\n\n.circular-navigation {\n position: relative;\n height: 2rem;\n width: 2rem;\n}\n\n.circular-navigation__circle {\n /* Position */\n position: absolute;\n top: 0;\n\n /*\n 3rem is the distance from the item to the trigger element.\n Replace 0deg with 60deg, 180deg, 240deg, 300deg for another item\n in case you want to have a total of 6 menu items.\n The formulation is 360 / numberOfItems * indexOfItem\n */\n transform: rotate(var(--circular-navigation__circle-degree)) translateX(-3rem);\n\n /* Must have the same size as the trigger element */\n height: 2rem;\n width: 2rem;\n\n /* Demo */\n background-color: #d1d5db;\n border-radius: 9999px;\n}\n\n.circular-navigation__content {\n /*\n Rotate it to make it displayed vertically\n Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item\n in case you want to have a total of 6 menu items.\n The formulation is -(360 / numberOfItems * indexOfItem)\n */\n transform: rotate(var(--circular-navigation__content-degree));\n\n /* Center the content */\n align-items: center;\n display: flex;\n justify-content: center;\n\n /* Take full size */\n height: 100%;\n width: 100%;\n}\n\n.circular-navigation__circle--1 {\n --circular-navigation__circle-degree: 0deg;\n --circular-navigation__content-degree: -0deg;\n}\n.circular-navigation__circle--2 {\n --circular-navigation__circle-degree: 60deg;\n --circular-navigation__content-degree: -60deg;\n}\n.circular-navigation__circle--3 {\n --circular-navigation__circle-degree: 120deg;\n --circular-navigation__content-degree: -120deg;\n}\n.circular-navigation__circle--4 {\n --circular-navigation__circle-degree: 180deg;\n --circular-navigation__content-degree: -180deg;\n}\n.circular-navigation__circle--5 {\n --circular-navigation__circle-degree: 240deg;\n --circular-navigation__content-degree: -240deg;\n}\n.circular-navigation__circle--6 {\n --circular-navigation__circle-degree: 300deg;\n --circular-navigation__content-degree: -300deg;\n}\n```\n\n```html index.html hidden\n
\n
\n
\n
1
\n
\n
\n
2
\n
\n
\n
3
\n
\n
\n
4
\n
\n
\n
5
\n
\n
\n
6
\n
\n
\n
\n```\n\n"
},
{
"path": "contents/close-button.mdx",
"content": "---\ncategory: Display\ncreated: '2019-12-11'\ndescription: Create a close button with CSS flexbox\nkeywords: css close button, css flexbox\nthumbnail: /assets/css-layout/thumbnails/close-button.png\ntitle: Close button\n---\n\n## HTML\n\n```html index.html\n\n```\n\n## CSS\n\n```css styles.css\n.close-button {\n /* Reset */\n background-color: transparent;\n border-color: transparent;\n\n /* Cursor */\n cursor: pointer;\n\n /* Size */\n height: 3rem;\n width: 3rem;\n\n /* Used to position the inner */\n position: relative;\n}\n\n.close-button__line {\n /* Background color */\n background-color: #d1d5db;\n\n /* Position */\n position: absolute;\n\n /* Size */\n height: 1px;\n width: 100%;\n}\n\n.close-button__line--first {\n /* Position */\n left: 0px;\n top: 50%;\n transform: translate(0%, -50%) rotate(45deg);\n\n /* Size */\n height: 1px;\n width: 100%;\n}\n\n.close-button__line--second {\n /* Position */\n left: 50%;\n top: 0px;\n transform: translate(-50%, 0%) rotate(45deg);\n\n /* Size */\n height: 100%;\n width: 1px;\n}\n```\n\n\n```css styles.css hidden\nbody {\n align-items: center;\n display: flex;\n justify-content: center;\n}\n.close-button {\n /* Reset */\n background-color: transparent;\n border-color: transparent;\n\n /* Cursor */\n cursor: pointer;\n\n /* Size */\n height: 3rem;\n width: 3rem;\n\n /* Used to position the inner */\n position: relative;\n}\n\n.close-button__line {\n /* Background color */\n background-color: #d1d5db;\n\n /* Position */\n position: absolute;\n\n /* Size */\n height: 1px;\n width: 100%;\n}\n\n.close-button__line--first {\n /* Position */\n left: 0px;\n top: 50%;\n transform: translate(0%, -50%) rotate(45deg);\n\n /* Size */\n height: 1px;\n width: 100%;\n}\n\n.close-button__line--second {\n /* Position */\n left: 50%;\n top: 0px;\n transform: translate(-50%, 0%) rotate(45deg);\n\n /* Size */\n height: 100%;\n width: 1px;\n}\n```\n\n```html index.html hidden\n\n```\n\n"
},
{
"path": "contents/color-swatch.mdx",
"content": "---\ncategory: Display\ncreated: '2021-05-08'\ndescription: Create a color swatch with CSS flexbox\nkeywords: css color swatch, css flexbox\nthumbnail: /assets/css-layout/thumbnails/color-swatch.png\ntitle: Color swatch\n---\n\n## HTML\n\n```html index.html\n
\n```\n\n## CSS\n\n```css styles.css\n.diagonal-section {\n /* Used to position the diagonal area */\n position: relative;\n}\n\n.diagonal-section__diagonal {\n /* Absolute position */\n left: 0px;\n position: absolute;\n top: 0px;\n\n /* Take full size */\n height: 100%;\n width: 100%;\n\n /* Create diagonal sides */\n transform: skewY(-5deg);\n\n /* Background color */\n background-color: #d1d5db;\n\n /* Displayed under the main content */\n z-index: -1;\n}\n```\n\n\n```css styles.css hidden\nbody {\n height: 24rem;\n}\n.diagonal-section {\n /* Used to position the diagonal area */\n position: relative;\n\n height: 100%;\n width: 100%;\n}\n\n.diagonal-section__diagonal {\n /* Absolute position */\n left: 0px;\n position: absolute;\n top: 50%;\n\n /* Take full size */\n height: 2rem;\n width: 100%;\n\n /* Create diagonal sides */\n transform: translate(0, -50%) skewY(-15deg);\n\n /* Background color */\n background-color: #d1d5db;\n}\n```\n\n```html index.html hidden\n
\n \n
\n```\n\n"
},
{
"path": "contents/docked-at-corner.mdx",
"content": "---\ncategory: Display\ncreated: '2019-11-23'\ndescription: Dock an element at corner with CSS\nkeywords: css docked, css flexbox\nthumbnail: /assets/css-layout/thumbnails/docked-at-corner.png\ntitle: Docked at corner\n---\n\n## HTML\n\n```html index.html\n
\n```\n\n\n## See also\n\n- Discover how to animate a docked element using the [pulse animation](https://phuoc.ng/collection/css-animation/pulse-animation/)\n"
},
{
"path": "contents/dot-leader.mdx",
"content": "---\ncategory: Display\ncreated: '2019-11-27'\ndescription: Create dot leaders with CSS flexbox\nkeywords: css dot leader, css flexbox\nthumbnail: /assets/css-layout/thumbnails/dot-leader.png\ntitle: Dot leader\n---\n\n## HTML\n\n```html index.html\n
\n```\n\n\n## See also\n\n- [Carousel slider](https://phuoc.ng/collection/css-layout/carousel-slider/)\n"
},
{
"path": "contents/drawer.mdx",
"content": "---\ncategory: Navigation\ncreated: '2019-12-13'\ndescription: Create a drawer navigation with CSS\nkeywords: css drawer, css off-canvas\nthumbnail: /assets/css-layout/thumbnails/drawer.png\ntitle: Drawer\n---\n\nThis pattern is also known as off-canvas.\n\n## HTML\n\n```html index.html\n
\n```\n\n"
},
{
"path": "contents/drop-cap.mdx",
"content": "---\ncategory: Display\ncreated: '2019-11-29'\ndescription: Create a drop cap with CSS\nkeywords: css drop cap, css :first-letter\nthumbnail: /assets/css-layout/thumbnails/drop-cap.png\ntitle: Drop cap\n---\n\n## HTML\n\n```html index.html\n
\n 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.\n
\n```\n\n## CSS\n\n```css styles.css\n.dropdown {\n position: relative;\n}\n\n.dropdown__trigger {\n cursor: pointer;\n}\n\n/* Hide the dropdown's content by default */\n.dropdown__content {\n display: none;\n\n /* Position it right below the trigger element */\n left: 0;\n padding-top: 0.25rem;\n position: absolute;\n top: 100%;\n\n /* It should be on the top of other elements */\n background-color: #fff;\n z-index: 9999;\n}\n\n/* Show the content when hover on the container */\n.dropdown:hover .dropdown__content {\n display: block;\n}\n```\n\nYou can use a [triangle button](https://phuoc.ng/collection/css-layout/triangle-buttons/) to indicate that there is content under it.\n\nMove the mouse over the button to see the dropdown.\n\n\n```css placeholders.css hidden\n.lines {\n padding: 0.25rem 0;\n width: 100%;\n align-items: center;\n display: flex;\n justify-content: center;\n flex-direction: column;\n}\n.line {\n background: #d1d5db;\n height: 1px;\n margin-bottom: 0.25rem;\n}\n.line.line--20 {\n width: 20%;\n}\n.line.line--40 {\n width: 40%;\n}\n.line.line--60 {\n width: 60%;\n}\n.line.line--80 {\n width: 80%;\n}\n.line.line--100 {\n width: 100%;\n}\n.rectangle {\n background: #d1d5db;\n border-radius: 0.25rem;\n height: var(--rectangle-height);\n width: var(--rectangle-width);\n}\n.rectangle--hor.rectangle--20 {\n --rectangle-width: 20%;\n}\n.rectangle--hor.rectangle--40 {\n --rectangle-width: 40%;\n}\n.rectangle--hor.rectangle--60 {\n --rectangle-width: 60%;\n}\n.rectangle--hor.rectangle--80 {\n --rectangle-width: 80%;\n}\n.rectangle--hor.rectangle--100 {\n --rectangle-width: 100%;\n}\n.rectangle--hor.rectangle--sm {\n --rectangle-height: 0.5rem;\n}\n.rectangle--hor.rectangle--md {\n --rectangle-height: 2rem;\n}\n.rectangle--hor.rectangle--lg {\n --rectangle-height: 4rem;\n}\n.rectangle--ver.rectangle--20 {\n --rectangle-height: 20%;\n}\n.rectangle--ver.rectangle--40 {\n --rectangle-height: 40%;\n}\n.rectangle--ver.rectangle--60 {\n --rectangle-height: 60%;\n}\n.rectangle--ver.rectangle--80 {\n --rectangle-height: 80%;\n}\n.rectangle--ver.rectangle--100 {\n --rectangle-height: 100%;\n}\n.rectangle--ver.rectangle--sm {\n --rectangle-width: 0.5rem;\n}\n.rectangle--ver.rectangle--md {\n --rectangle-width: 2rem;\n}\n.rectangle--ver.rectangle--lg {\n --rectangle-width: 4rem;\n}\n.triangle {\n border-style: solid;\n height: 0;\n width: 0;\n}\n.triangle--t {\n border-color: transparent transparent #d1d5db transparent;\n border-width: 0 var(--triangle-size) var(--triangle-size) var(--triangle-size);\n}\n.triangle--r {\n border-color: transparent transparent transparent #d1d5db;\n border-width: var(--triangle-size) 0 var(--triangle-size) 1rem;\n}\n.triangle--b {\n border-color: #d1d5db transparent transparent transparent;\n border-width: var(--triangle-size) var(--triangle-size) 0 var(--triangle-size);\n}\n.triangle--l {\n border-color: transparent #d1d5db transparent transparent;\n border-width: var(--triangle-size) 1rem var(--triangle-size) 0;\n}\n.triangle--tr {\n border-color: transparent #d1d5db transparent transparent;\n border-width: 0 var(--triangle-size) var(--triangle-size) 0;\n}\n.triangle--br {\n border-color: transparent transparent #d1d5db transparent;\n border-width: 0 0 var(--triangle-size) var(--triangle-size);\n}\n.triangle--bl {\n border-color: transparent transparent transparent #d1d5db;\n border-width: var(--triangle-size) 0 0 var(--triangle-size);\n}\n.triangle--tl {\n border-color: #d1d5db transparent transparent transparent;\n border-width: var(--triangle-size) var(--triangle-size) 0 0;\n}\n.triangle--sm {\n --triangle-size: 0.5rem;\n}\n.triangle--md {\n --triangle-size: 2rem;\n}\n.triangle--lg {\n --triangle-size: 4rem;\n}\n```\n\n```css styles.css hidden\nbody {\n align-items: center;\n display: flex;\n justify-content: center;\n height: 24rem;\n}\n.dropdown {\n position: relative;\n\n /* Demo */\n width: 6rem;\n\n align-items: flex-start;\n display: flex;\n justify-content: center;\n}\n\n.dropdown__trigger {\n cursor: pointer;\n\n /* Demo */\n border: 1px solid #d1d5db;\n border-radius: 0.25rem;\n height: 2rem;\n width: 6rem;\n padding: 0.25rem 0.5rem;\n\n align-items: center;\n display: flex;\n justify-content: center;\n}\n\n/* Hide the dropdown's content by default */\n.dropdown__content {\n display: none;\n\n /* Position it right below the trigger element */\n left: 0;\n padding-top: 0.25rem;\n position: absolute;\n top: 100%;\n\n /* It should be on the top of other elements */\n background-color: #fff;\n z-index: 9999;\n}\n\n.dropdown__body {\n /* Demo */\n border: 1px solid #d1d5db;\n border-radius: 0.25rem;\n height: 6rem;\n width: 8rem;\n}\n\n/* Show the content when hover on the container */\n.dropdown:hover .dropdown__content {\n display: block;\n}\n```\n\n```html index.html hidden\n
\n
\n \n \n
\n
\n
\n
\n \n \n \n \n \n
\n
\n
\n
\n```\n\n"
},
{
"path": "contents/fading-long-section.mdx",
"content": "---\ncategory: Display\ncreated: '2020-01-10'\ndescription: Fading long section to indicate there is more content\nkeywords: css fading overflow, css linear gradient\nthumbnail: /assets/css-layout/thumbnails/fading-long-section.png\ntitle: Fading long section\n---\n\nThe pattern is often used to indicate there is more content.\n\n## HTML\n\n```html index.html\n
\n```\n\n"
},
{
"path": "contents/fixed-at-corner.mdx",
"content": "---\ncategory: Display\ncreated: '2019-11-17'\ndescription: Fix an element at corner with CSS\nkeywords: css fixed\nthumbnail: /assets/css-layout/thumbnails/fixed-at-corner.png\ntitle: Fixed at corner\n---\n\n## HTML\n\n```html index.html\n
\n```\n\n"
},
{
"path": "contents/fixed-at-side.mdx",
"content": "---\ncategory: Display\ncreated: '2019-12-21'\ndescription: Fix an element at the middle of side with CSS\nkeywords: css fixed\nthumbnail: /assets/css-layout/thumbnails/fixed-at-side.png\ntitle: Fixed at side\n---\n\n## HTML\n\n```html index.html\n\n
\n```\n\n\n## See also\n\n- [Carousel slider](https://phuoc.ng/collection/css-layout/carousel-slider/)\n"
},
{
"path": "contents/flipping-number.mdx",
"content": "---\ncategory: Display\ncreated: '2023-09-07'\ndescription: Create a flipping number in CSS\nkeywords: css flipping number, css flipping clock, css flipping counter\nopenGraphCover: /og/css-layout/flipping-number.png\nthumbnail: /assets/css-layout/thumbnails/flipping-number.png\ntitle: Flipping number\n---\n\nFlipping number layout is a popular display format used in digital clocks, countdown timers, and scoreboards. It uses multiple panels to show each digit of a number, and each panel can flip over to reveal the next number, giving the impression of an analog clock face.\n\nIn web design, flip numbers are a great way to create unique and eye-catching interfaces. They're perfect for displaying all kinds of information, such as scores, prices, or countdowns.\n\nIn this post, we'll learn how to create a flipping number using CSS. Get ready to impress your users with a stunning display!\n\n## Markup\n\nFirst things first, let's prepare the layout for our flipping number. It's a simple layout that involves two elements. The container element creates the top and bottom flipping effects, while the inner element is used to display the number.\n\n```html\n
\n
42
\n
\n```\n\n## Adding effects\n\nInstead of creating separate elements for the top and bottom backgrounds, we can simplify things by using pseudo-elements. The `::before` element can handle the top background, while the `::after` element can generate the bottom background.\n\nTo make this work, we need to position the pseudo-element absolutely within the container. We can do this by using the `position` property with different values:\n\n```css\n.flip {\n overflow: hidden;\n}\n.flip::before {\n content: '';\n position: absolute;\n}\n```\n\nIt's important to remember that the pseudo-element won't be visible without the `content` property. In our case, the `::before` element doesn't have any content, so we can simply set the `content` property to empty.\n\nNow, let's focus on the `::before` element, which will cover the first half of the container. We can use a combination of `top`, `left`, `height`, and `width` properties to indicate its position and dimensions:\n\n```css\n.flip::before {\n top: 0;\n left: 0;\n height: 50%;\n width: 100%;\n}\n```\n\nLastly, let's create a gradient for the top half using the `linear-gradient` function. This will allow us to set the `background` property in the following way:\n\n```css\n.flip::before {\n background: linear-gradient(to right bottom, rgb(71 85 105), rgb(15 23 42));\n}\n```\n\nIn the code above, we're passing several parameters to the `linear-gradient` function. The first parameter, `to right bottom`, sets the direction of the gradient. In this case, it means the gradient will start at the top left and end at the bottom right.\n\nThe second and third parameters are colors that determine the start and end points of the gradient. The first color, `rgb(71 85 105)`, is a darker shade representing the starting point. The second color, `rgb(15 23 42)`, is an even darker shade representing the ending point.\n\n\n```css demo.css hidden\nbody {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n```\n\n```css styles.css hidden\n.flip {\n display: inline-flex;\n padding: 1rem;\n position: relative;\n\n border-radius: 0.5rem;\n overflow: hidden;\n}\n.flip::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n height: 50%;\n width: 100%;\n background: linear-gradient(to right bottom, rgb(71 85 105), rgb(15 23 42));\n}\n.flip__number {\n color: #fff;\n font-size: 4rem;\n font-weight: 600;\n z-index: 1;\n}\n```\n\n```html index.html hidden\n
\n
42
\n
\n```\n\n\nWe can use the same steps for the bottom half, with only one difference: the position and background color. Since the bottom half is positioned at the bottom, it will reset the `bottom` and `left` properties to zero.\n\nHere's how the bottom half can be created using the `::after` pseudo-element.\n\n```css\n.flip::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n height: 50%;\n width: 100%;\n background: linear-gradient(to right bottom, rgb(100 116 139), rgb(15 23 42));\n}\n```\n\nFinally, to ensure that content is displayed on top of pseudo-elements, we need to set the `z-index` property.\n\n```css\n.flip__number {\n z-index: 1;\n}\n```\n\nCheck out the result below.\n\n\n```css demo.css hidden\nbody {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n```\n\n```css styles.css hidden\n.flip {\n display: inline-flex;\n padding: 1rem;\n position: relative;\n\n border-radius: 0.5rem;\n overflow: hidden;\n}\n.flip::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n height: 50%;\n width: 100%;\n background: linear-gradient(to right bottom, rgb(71 85 105), rgb(15 23 42));\n}\n.flip::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n height: 50%;\n width: 100%;\n background: linear-gradient(to right bottom, rgb(100 116 139), rgb(15 23 42));\n}\n.flip__number {\n color: #fff;\n font-size: 4rem;\n font-weight: 600;\n z-index: 1;\n}\n```\n\n```html index.html hidden\n
\n
42
\n
\n```\n\n\n## Adding a divider\n\nTo enhance the layout's visual appeal, we can insert a thin divider between the top and bottom halves. We can achieve this by adding a border at the bottom of the first half.\n\n```css\n.flip::before {\n border-bottom: 1px solid rgb(148 163 184);\n}\n```\n\nAs the border will occupy space, we need to slightly push up the first half to ensure both halves have the same height. We can use a negative value with the `translateY()` function to accomplish this.\n\n```css\n.flip::before {\n transform: translateY(-1px);\n}\n```\n\nIt's important to note that the value passed must match the border's thickness. Therefore, it's better to use a CSS variable to represent the number. This way, the code will still work even if you increase the border's thickness. Plus, it'll be easier for other engineers on your team to understand, making the code easier to maintain.\n\n```css\n:root {\n --divider-height: 1px;\n}\n.flip::before {\n border-bottom: var(--divider-height) solid rgb(148 163 184);\n transform: translateY(calc(-1 * var(--divider-height)));\n}\n```\n\nLet's take a look at the final result we've achieved so far.\n\n\n```css demo.css hidden\nbody {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n```\n\n```css styles.css\n:root {\n --divider-height: 1px;\n}\n.flip {\n display: inline-flex;\n padding: 1rem;\n position: relative;\n\n border-radius: 0.5rem;\n overflow: hidden;\n}\n.flip::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n height: 50%;\n width: 100%;\n background: linear-gradient(to right bottom, rgb(71 85 105), rgb(15 23 42));\n border-bottom: var(--divider-height) solid rgb(148 163 184);\n transform: translateY(calc(-1 * var(--divider-height)));\n}\n.flip::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n height: 50%;\n width: 100%;\n background: linear-gradient(to right bottom, rgb(100 116 139), rgb(15 23 42));\n}\n\n.flip__number {\n color: #fff;\n font-size: 4rem;\n font-weight: 600;\n z-index: 1;\n}\n```\n\n```html index.html\n
\n```\n\n## CSS\n\n```css styles.css\n.floating-label {\n border: 1px solid #d1d5db;\n border-radius: 0.25rem;\n position: relative;\n}\n\n.floating-label__input {\n border: none;\n padding: 0.5rem;\n height: 100%;\n}\n\n/*\nShow the label at desired position when the\nplaceholder of input isn't shown\n*/\n.floating-label__input:not(:placeholder-shown) + .floating-label__label {\n background: #fff;\n transform: translate(0, -200%);\n opacity: 1;\n}\n\n.floating-label__label {\n /* Position the label */\n left: 1rem;\n position: absolute;\n top: 100%;\n\n /* Hide it by default */\n opacity: 0;\n transition: all 200ms;\n\n padding: 0 0.5rem;\n}\n```\n\nType something in the input to see how the label is shown up.\n\n\n```css styles.css hidden\nbody {\n align-items: center;\n display: flex;\n justify-content: center;\n}\n\n.floating-label {\n border: 1px solid #d1d5db;\n border-radius: 0.25rem;\n position: relative;\n\n /* Demo */\n padding: 0px 1px;\n height: 2.5rem;\n}\n\n.floating-label__input {\n border: none;\n padding: 0.5rem;\n height: 100%;\n}\n\n/*\nShow the label at desired position when the\nplaceholder of input isn't shown\n*/\n.floating-label__input:not(:placeholder-shown) + .floating-label__label {\n background: #fff;\n transform: translate(0, -200%);\n opacity: 1;\n}\n\n.floating-label__label {\n /* Position the label */\n left: 1rem;\n position: absolute;\n top: 100%;\n\n /* Hide it by default */\n opacity: 0;\n transition: all 200ms;\n\n padding: 0 0.5rem;\n}\n```\n\n```html index.html hidden\n
\n \n \n
\n```\n\n\n## See also\n\n- Explore some ways to [animate a floating label](https://phuoc.ng/collection/css-animation/floating-label/).\n"
},
{
"path": "contents/folded-corner.mdx",
"content": "---\ncategory: Display\ncreated: '2023-09-06'\ndescription: Create a folded corner in CSS\nkeywords: css folded corner\nopenGraphCover: /og/css-layout/folded-corner.png\nthumbnail: /assets/css-layout/thumbnails/folded-corner.png\ntitle: Folded corner\n---\n\nThe folded corner layout is a popular design element in web design that adds creativity and uniqueness to a website. It creates the illusion of a folded corner on a webpage, giving it a tangible feel.\n\nUsing this technique can help highlight important information or sections on a page, making it easier for users to navigate a content-heavy website. It can also be used simply for aesthetic purposes, adding an interesting visual element to the page.\n\nIn this post, we will explore various ways to create a folded corner effect. So, get ready to learn some cool techniques!\n\n## Markup\n\nTo begin, let's create the markup for our layout. It's as simple as adding an HTML element.\n\n```html\n\n```\n\n## Using multiple backgrounds\n\nLet's take a moment to imagine an element with a folded corner. This element is made up of two layers: a rectangle with a curved corner and a triangle placed on top of it.\n\nTo create the first layer, we can use the `linear-gradient` function to define the background of the element.\n\n```css\nbackground: linear-gradient(-135deg, transparent 1.7677rem, rgb(226 232 240) 0)\n```\n\nIf you're not familiar with the `linear-gradient` function or the number `1.7677rem` in the sample code, don't worry. Here's what's going on:\n\n- The `linear-gradient` function creates a gradient background for an element. The `-135deg` specifies the direction of the gradient, which in this case is from the top-right corner to the bottom-left corner.\n- The first color stop in the gradient is `transparent`, which means there's no color at that point. The second color stop is `rgb(226 232 240)`, which is an RGB color value for that point in the gradient.\n- The `1.7677rem` and `0` values determine where these colors are positioned within the gradient. `transparent` will be visible for the first `1.7677rem` of the gradient, followed by `rgb(226 232 240)` for the rest.\n\nWondering how we calculated the `1.7677rem` value? It's actually pretty simple. Just imagine that the folded corner is a square with sides of 2.5rem. But because we rotate the first stop by 135 degrees, the side of the square becomes the diagonal.\n\nNow, a square whose diagonal is 2.5rem has a size of `2.5rem / Math.sqrt(2)`, which is `1.7677rem`. Easy, right?\n\nLet's take a look at how it creates a curved corner:\n\n\n```css demo.css hidden\nbody {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n```\n\n```css styles.css\n.box {\n height: 12rem;\n width: 16rem;\n\n background: linear-gradient(-135deg, transparent 1.7677rem, rgb(226 232 240) 0);\n}\n```\n\n```html index.html\n\n```\n\n\n### Creating the triangle\n\nThere are several ways to create a triangle, such as using different border colors. However, in this section, we will stick to using the `linear-gradient` function.\n\n```css\n.triangle {\n background: linear-gradient(to left bottom, transparent 50%, rgb(100 116 139) 0);\n}\n```\n\nIn this example, we use the `to left bottom` value to specify the direction of the gradient. It starts from the top-right corner and goes to the bottom-left corner.\n\nThe first color stop is `transparent`, which means that there is no color at that point. The second color stop is `rgb(100 116 139)`, which specifies an RGB color value for that point in the gradient.\n\nTo create a diagonal line across the box from the top-right to the bottom-left corner, we start with transparency at 50% of this line and then transition into our dark color for the remaining area.\n\nLet's take a look at how it generates a triangle shape:\n\n\n```css demo.css hidden\nbody {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n```\n\n```css styles.css\n.triangle {\n height: 2.5rem;\n width: 2.5rem;\n\n background: linear-gradient(to left bottom, transparent 50%, rgb(100 116 139) 0);\n}\n```\n\n```html index.html\n\n```\n\n\nNext, let's move the triangle to the top-right corner of the box element. To do this, we can simply adjust the position of the background.\n\n```css\n.box {\n background: linear-gradient(...) no-repeat 100% 0 / 2.5rem 2.5rem;\n}\n```\n\nLet's break down the declaration into its individual parts:\n\n- `no-repeat` is a keyword that tells the background image not to repeat.\n- `100% 0` sets the position of the background image to the top-right corner of the element.\n- `/ 2.5rem 2.5rem` specifies the size of the background image. The first value represents the width, and the second value represents the height. In this case, both values are set to `2.5rem`, which matches the size of our folded corner square.\n\nCheck out the box element with a triangle attached to the top-right corner. I added a simple dashed border so you can see the bounding of the box.\n\n\n```css demo.css hidden\nbody {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n```\n\n```css styles.css\n.box {\n height: 12rem;\n width: 16rem;\n border: 2px dashed rgb(226 232 240);\n\n background: linear-gradient(to left bottom, transparent 50%, rgb(100 116 139) 0) no-repeat 100% 0 / 2.5rem 2.5rem;\n}\n```\n\n```html index.html\n\n```\n\n\n### Combining backgrounds\n\nNow that you know how to use the linear gradient to create both layers, it's time to merge them and generate the folded corner.\n\nCSS allows us to use multiple declarations for the `background` properties by separating them with commas. Keep in mind that the order of these declarations is important and can affect the final result.\n\n```css\n.box {\n background:\n linear-gradient(to left bottom, transparent 50%, rgb(100 116 139) 0) no-repeat 100% 0 / 2.5rem 2.5rem,\n linear-gradient(-135deg, transparent 1.7677rem, rgb(226 232 240) 0);\n}\n```\n\nWithout further ado, let's take a look at the final result of the steps we've taken so far:\n\n\n```css demo.css hidden\nbody {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n```\n\n```css styles.css\n.box {\n height: 12rem;\n width: 16rem;\n\n background:\n linear-gradient(to left bottom, transparent 50%, rgb(100 116 139) 0) no-repeat 100% 0 / 2.5rem 2.5rem,\n linear-gradient(-135deg, transparent 1.7677rem, rgb(226 232 240) 0);\n}\n```\n\n```html index.html\n\n```\n\n\n## Using a pseudo-element\n\nIn the previous section, we used a cool approach to generate a folded corner using multiple backgrounds in a single `div` element. However, this approach has some downsides. For example, it's not easy to add more styles to the triangle, like a shadow.\n\nTo add more customization to the triangle, we can use the `:after` pseudo-element to represent it. Here are some basic styles to position the triangle:\n\n```css\n.box {\n position: relative;\n}\n.box::after {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n width: 2.5rem;\n height: 2.5rem;\n}\n```\n\nThe `position` property values of `absolute` and `relative` are applied to the box and the triangle, respectively. This ensures that the triangle is positioned absolutely within the box.\n\nAlthough the triangle doesn't contain any information, we still need to set the content property to an empty `''` for it to appear. The `top` and `right` properties position the triangle in the top-right corner, while the `width` and `height` properties determine its size.\n\nWe're using a separate element to represent the triangle. This makes it easy to style it however you want. Want to add a box shadow? No problem!\n\n\n```css demo.css hidden\nbody {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n```\n\n```css styles.css\n.box {\n height: 12rem;\n width: 16rem;\n\n background: linear-gradient(-135deg, transparent 1.7677rem, rgb(226 232 240) 0);\n position: relative;\n}\n.box::after {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n width: 2.5rem;\n height: 2.5rem;\n\n background: linear-gradient(to left bottom, transparent 50%, rgb(100 116 139) 0) no-repeat 100% 0;\n box-shadow: -0.4rem 0.4rem 0.4rem -0.2rem rgba(0 0 0 / 50);\n}\n```\n\n```html index.html\n\n```\n\n"
},
{
"path": "contents/folder-structure.mdx",
"content": "---\ncategory: Display\ncreated: '2021-04-03'\ndescription: Create a folder structure with CSS\nkeywords: css folder structure, css folder tree\nthumbnail: /assets/css-layout/thumbnails/folder-structure.png\ntitle: Folder structure\n---\n\n## HTML\n\n```html index.html\n
\n```\n\n"
},
{
"path": "contents/frame-corners.mdx",
"content": "---\ncategory: Display\ncreated: '2023-09-06'\ndescription: Create frame corners in CSS\nkeywords: css folded corner\nopenGraphCover: /og/css-layout/frame-corners.png\nthumbnail: /assets/css-layout/thumbnails/frame-corners.png\ntitle: Frame corners\n---\n\nThe frame corner layout pattern is a popular and effective technique in web design. It uses corner elements to frame content on a web page, adding depth and structure. This technique is often used with images and shapes.\n\nIn this post, we'll teach you how to create frame corners with CSS. Are you ready to dive in and learn?\n\n## Markup\n\nThe first step in preparing the layout is to structure it properly. This usually involves two elements: an inner element for displaying the content and an outer element that will display four frames at its corners.\n\nHere's an example of what the layout could look like:\n\n```html\n
\n \n
\n```\n\n## Adding overlays\n\nCreating a frame at the corners is a simple idea. We can use CSS to add overlay elements around the content area and position them using absolute positioning.\n\nHere's how to get started: define some CSS variables that can be reused later.\n\n```css\n:root {\n --frame-border-size: 0.25rem;\n --frame-height: 1rem;\n --frame-width: 1rem;\n}\n```\n\nThe `--frame-border-size` variable controls the thickness of the frame, while `--frame-height` and `--frame-width` determine its dimensions. To create a single frame for the outer element, we can use a solid border and adjust the `padding` property to set the space between the border and the box content.\n\n```css\n.box {\n border: var(--frame-border-size) solid rgb(30 41 59);\n padding: var(--frame-height) var(--frame-width);\n}\n```\n\n\n```css demo.css hidden\nbody {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n```\n\n```css styles.css hidden\n:root {\n --frame-border-size: 0.25rem;\n --frame-height: 1rem;\n --frame-width: 1rem;\n}\n.box {\n border: var(--frame-border-size) solid rgb(30 41 59);\n padding: var(--frame-height) var(--frame-width);\n height: 12rem;\n width: 16rem;\n}\n.box__inner {\n width: 100%;\n height: 100%;\n background: rgb(226 232 240);\n}\n```\n\n```html index.html hidden\n
\n \n
\n```\n\n\nIn order to hide the top and bottom borders of the box, there's a nifty trick we can use called the pseudo-element. Here's how it works:\n\nWe'll use the `::before` pseudo-element to create a vertical overlay that sits outside the box. To achieve this, we position the element absolutely within the box. We set the `position` property to both elements to make sure it stays in place.\n\n```css\n.box {\n position: relative;\n}\n.box::before {\n content: '';\n position: absolute;\n}\n```\n\nTo create the overlay effect, we need to set the `left` and `right` properties to be the same as the frame's width, and the `top` and `bottom` properties to be the same the thickness of the frame border. By using negative numbers for these properties, we push the overlay to the outside of the box, causing the top and bottom borders to overlap.\n\n```css\n.box::before {\n left: var(--frame-width);\n right: var(--frame-width);\n\n top: calc(-1 * var(--frame-border-size));\n bottom: calc(-1 * var(--frame-border-size));\n}\n```\n\n\n```css demo.css hidden\nbody {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n```\n\n```css styles.css hidden\n:root {\n --frame-border-size: 0.25rem;\n --frame-height: 1rem;\n --frame-width: 1rem;\n}\n.box {\n border: var(--frame-border-size) solid rgb(30 41 59);\n padding: var(--frame-height) var(--frame-width);\n height: 12rem;\n width: 16rem;\n position: relative;\n}\n.box::before {\n content: '';\n position: absolute;\n left: var(--frame-width);\n right: var(--frame-width);\n top: calc(-1 * var(--frame-border-size));\n bottom: calc(-1 * var(--frame-border-size));\n background: rgb(226 232 240);\n}\n```\n\n```html index.html hidden\n
\n \n
\n```\n\n\nFinally, to create the blank areas at the top and bottom, we make the top and bottom borders the same height as the frame. And voila! The top and bottom borders are hidden, and our box looks sleek and polished.\n\n```css\n.box::before {\n border-top: var(--frame-height) solid #fff;\n border-bottom: var(--frame-height) solid #fff;\n}\n```\n\n\n```css demo.css hidden\nbody {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n```\n\n```css styles.css hidden\n:root {\n --frame-border-size: 0.25rem;\n --frame-height: 1rem;\n --frame-width: 1rem;\n}\n.box {\n border: var(--frame-border-size) solid rgb(30 41 59);\n padding: var(--frame-height) var(--frame-width);\n height: 12rem;\n width: 16rem;\n position: relative;\n}\n.box::before {\n content: '';\n position: absolute;\n left: var(--frame-width);\n right: var(--frame-width);\n top: calc(-1 * var(--frame-border-size));\n bottom: calc(-1 * var(--frame-border-size));\n background: rgb(226 232 240);\n border-top: var(--frame-height) solid #fff;\n border-bottom: var(--frame-height) solid #fff;\n}\n```\n\n```html index.html hidden\n
\n \n
\n```\n\n\nWe can use the same approach and create the horizontal overlay element with the `::after` pesudo-element. Now, let's check out the final result of the steps we've followed together so far.\n\n\n```css demo.css hidden\nbody {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n```\n\n```css styles.css\n:root {\n --frame-border-size: 0.25rem;\n --frame-height: 1rem;\n --frame-width: 1rem;\n}\n.box {\n border: var(--frame-border-size) solid rgb(30 41 59);\n padding: var(--frame-height) var(--frame-width);\n height: 12rem;\n width: 16rem;\n position: relative;\n}\n.box__inner {\n height: 100%;\n width: 100%;\n background: rgb(226 232 240);\n}\n.box::before {\n content: '';\n position: absolute;\n left: var(--frame-width);\n right: var(--frame-width);\n top: calc(-1 * var(--frame-border-size));\n bottom: calc(-1 * var(--frame-border-size));\n border-top: var(--frame-height) solid #fff;\n border-bottom: var(--frame-height) solid #fff;\n}\n.box::after {\n content: '';\n position: absolute;\n top: var(--frame-height);\n bottom: var(--frame-height);\n left: calc(-1 * var(--frame-border-size));\n right: calc(-1 * var(--frame-border-size));\n border-left: var(--frame-width) solid #fff;\n border-right: var(--frame-width) solid #fff;\n}\n```\n\n```html index.html\n
\n \n
\n```\n\n"
},
{
"path": "contents/full-background.mdx",
"content": "---\ncategory: Display\ncreated: '2020-01-18'\ndescription: Create a full background element with CSS\nkeywords: css background size cover, css full background\nthumbnail: /assets/css-layout/thumbnails/full-background.png\ntitle: Full background\n---\n\n## HTML\n\n```html index.html\n
...
\n```\n\n## CSS\n\n```css styles.css\n.full-background {\n /* Center the content */\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n /* Take full size */\n height: 100vh;\n width: 100%;\n\n /* Background */\n background: url('/path/to/background.jpeg') center center / cover no-repeat;\n}\n```\n\n\n```css placeholders.css hidden\n.lines {\n padding: 0.25rem 0;\n width: 100%;\n align-items: center;\n display: flex;\n justify-content: center;\n flex-direction: column;\n}\n.line {\n background: #d1d5db;\n height: 1px;\n margin-bottom: 0.25rem;\n}\n.line.line--20 {\n width: 20%;\n}\n.line.line--40 {\n width: 40%;\n}\n.line.line--60 {\n width: 60%;\n}\n.line.line--80 {\n width: 80%;\n}\n.line.line--100 {\n width: 100%;\n}\n```\n\n```css styles.css hidden\nbody {\n height: 24rem;\n}\n\n.full-background {\n /* Center the content */\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n /* Take full size */\n height: 100%;\n width: 100%;\n\n background: url('/assets/css-layout/full-background.jpeg') center center / cover no-repeat;\n}\n```\n\n```html index.html hidden\n
\n
\n \n \n \n \n \n
\n
\n```\n\n"
},
{
"path": "contents/full-screen-menu.mdx",
"content": "---\ncategory: Navigation\ncreated: '2019-11-30'\ndescription: Create a full screen menu with CSS flexbox\nkeywords: css fixed, css flexbox, css menu\nthumbnail: /assets/css-layout/thumbnails/full-screen-menu.png\ntitle: Full screen menu\n---\n\n## HTML\n\n```html index.html\n
\n```\n\n"
},
{
"path": "contents/grid-lines-background.mdx",
"content": "---\ncategory: Display\ncreated: '2023-08-30'\ndescription: Create a grid lines background in CSS\nkeywords: grid lines background, linear gradient, radial gradient\nopenGraphCover: /og/css-layout/grid-lines-background.png\nthumbnail: /assets/css-layout/thumbnails/grid-lines-background.png\ntitle: Grid lines background\nupdated: '2023-11-22'\n---\n\nAdding a grid lines background in CSS is an awesome way to give your website some visual interest and structure. This post will show you two simple ways to achieve this.\n\n## Using background image\n\nTo create a grid pattern using CSS, you can use the `background-image` property. Start by creating a square image with two lines – one horizontal and one vertical – that intersect at the center of the square.\n\nThe image can be in either SVG or PNG format. Here's an example of a square image in SVG format:\n\n\n```html index.html\n\n```\n\n\nThe SVG consists of three rectangles. The first rectangle forms a white square with a size of 40 pixels. The second rectangle is 1 pixel wide and spans the full height to create a vertical line. The `x='50%'` attribute centers the line vertically.\n\nLikewise, the last rectangle is 1 pixel high and spans the full width to create a horizontal line. It's worth noting that the last two rectangles are filled with identical colors.\n\nNext, let's specify the `background-image` property for the element where you want the grid to show up. Simply use the `url()` function to link to your grid image file.\n\n```css\n.grid {\n background-image: url('/path/to/grid.svg');\n}\n```\n\nIf you want the browser to avoid sending additional request to load the background image, then you can embed it like this:\n\n```css\n.grid {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23fff' /%3E%3Crect x='50%' width='1' height='100%' fill='rgb(203 213 225)' /%3E%3Crect y='50%' width='100%' height='1' fill='rgb(203 213 225)' /%3E%3C/svg%3E%0A\");\n}\n```\n\nVoila! You now have a grid made up of horizontal and vertical lines that repeat seamlessly.\n\n\n```css styles.css\n.grid {\n height: 16rem;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23fff' /%3E%3Crect x='50%' width='1' height='100%' fill='rgb(203 213 225)' /%3E%3Crect y='50%' width='100%' height='1' fill='rgb(203 213 225)' /%3E%3C/svg%3E%0A\");\n}\n```\n\n```html index.html\n\n```\n\n\nBy default, an image will repeat both vertically and horizontally, with each repetition being the same size as the background, which is 40 pixels in this case.\n\nBut what if you want to change the size of the repeated image? No problem! You can use the `background-size` property to customize the dimensions. For example, if you set it to 20 pixels, you'll create smaller squares instead. Here's the code you need to make it happen.\n\n```css\n.grid {\n background-size: 20px;\n}\n```\n\n## Using linear gradients\n\nAnother way to create grid lines in CSS is with the `linear-gradient()` function.\n\nTo make a grid, first, select the element(s) you want to add a grid background to and set the `background-image` property. Then, use the `linear-gradient()` function to specify two colors that are similar or identical, separated by a transparent section of the same width as your desired line thickness.\n\n```css\n.grid {\n background-image: linear-gradient(to right, gray 1px, transparent 1px);\n}\n```\n\nThe code above creates gray vertical lines that are one pixel thick. You can adjust the line thickness by changing the value of `1px` in both parts of the gradient (i.e., `gray 2px`, `transparent 2px`, for two-pixel-thick lines).\n\nTo make horizontal lines, change `to right` to `to bottom`. If you want both horizontal and vertical lines, simply combine both gradients.\n\n```css\n.grid {\n background-image:\n linear-gradient(to right, gray 1px, transparent 1px),\n linear-gradient(to bottom, gray 1px, transparent 1px);\n}\n```\n\nFinally, don't forget to set the size of the squares using the `background-size` property.\n\nTo adjust the color and spacing of lines, simply change the value of `gray` to any other valid CSS color value, as shown in the example below.\n\n\n```css styles.css\n.grid {\n height: 16rem;\n background-image:\n linear-gradient(to right, rgb(203 213 225) 1px, transparent 1px),\n linear-gradient(to bottom, rgb(203 213 225) 1px, transparent 1px);\n background-size: 2.5rem 2.5rem;\n background-position: center center;\n}\n```\n\n```html index.html\n\n```\n\n\n## Grid dot background\n\nWe can use a similar approach to create a grid with a dot background, but this time we'll use the `radial-gradient` function to make circles with a radius of 2 pixels. Don't hesitate to adjust the background color and radius to suit your needs.\n\n\n```css styles.css\n.grid {\n height: 16rem;\n background-image: radial-gradient(circle, rgb(203 213 225) 2px, #fff 2px);\n background-size: 2.5rem 2.5rem;\n background-position: center center;\n}\n```\n\n```html index.html\n\n```\n\n\n## See also\n\n- [Snap a draggable element to a grid](https://phuoc.ng/collection/react-drag-drop/snap-a-draggable-element-to-a-grid/)\n"
},
{
"path": "contents/grid-without-double-borders.mdx",
"content": "---\ncategory: Layout\ncreated: '2023-08-27'\ndescription: How to create a CSS grid without double borders\nkeywords: css grid\nopenGraphCover: /og/css-layout/grid-without-double-borders.png\nthumbnail: /assets/css-layout/thumbnails/grid-without-double-borders.png\ntitle: Grid without double borders\n---\n\nCSS grids are an amazing tool for creating complex web page layouts. However, working with default styling can be a bit tricky, especially when it comes to borders. In this post, we'll show you how to create a CSS grid without double borders.\n\nFirst, let's create the grid itself. To do this, we'll use the `display: grid` property.\n\n```css\n.grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: repeat(3, 4rem);\n}\n```\n\nIn this example, we've made a 3x3 grid with three columns and three rows. Each row is 4rem tall, and each column takes up an equal fraction of the available space. This means that no matter what size screen you're using, the columns will be evenly spaced.\n\nNow that we've got the grid set up, we want to add borders to each cell. But here's the thing: CSS grids will automatically add double borders to adjacent cells. We'll be exploring some solutions to this issue in the next sections.\n\n## Collapsing the borders\n\nThe grid looks a lot like a table, and as with tables, we face the same issue. But don't worry, there's a solution we can use: the `border-collapse` property. Let me show you an example.\n\n```css\n.grid {\n border-collapse: collapse;\n}\n\n.grid__item {\n border: 1px solid rgb(203 213 225);\n}\n```\n\nIn this example, we've set the `border-collapse` property to `collapse`. This should collapse adjacent borders into a single border, and we've also added a 1 pixel border to each cell using the `.grid__item` class. However, the approach doesn't work as expected. Unfortunately, the borders are still duplicated visually, as you can see below.\n\n\n```css demo.css hidden\nbody {\n align-items: center;\n display: flex;\n justify-content: center;\n height: 16rem;\n}\n```\n\n```css styles.css\n.grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: repeat(3, 4rem);\n border-collapse: collapse;\n width: 12rem;\n}\n.grid__item {\n border: 1px solid rgb(203 213 225);\n}\n```\n\n```html index.html\n
\n \n \n \n \n \n \n \n
\n```\n\n\n## Pairing the borders\n\nThere's an easier way to apply borders to your cells. Instead of setting the border for all four sides, we can apply it to just two. This approach is more natural and straightforward.\n\n```css\n:root {\n --grid-border: 1px solid rgb(203 213 225);\n}\n.grid__item {\n border-right: var(--grid-border);\n border-bottom: var(--grid-border);\n}\n```\n\nThe grid will fill in the missing borders at the top and left sides.\n\n```css\n.grid {\n border-top: var(--grid-border);\n border-left: var(--grid-border);\n}\n```\n\nAnd there you have it! Check it out, it works just as we expected!\n\n> Did you notice in the sample code above, how I created a CSS variable to define the border? By using the variable in different places, we can avoid duplicating code everywhere. This is what we call **Don't Repeat Yourself** or **DRY**, and it's always a great practice to follow.\n\n\n```css demo.css hidden\nbody {\n align-items: center;\n display: flex;\n justify-content: center;\n height: 16rem;\n}\n```\n\n```css styles.css\n:root {\n --grid-border: 1px solid rgb(203 213 225);\n}\n.grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: repeat(3, 4rem);\n border-top: var(--grid-border);\n border-left: var(--grid-border);\n width: 12rem;\n}\n.grid__item {\n border-right: var(--grid-border);\n border-bottom: var(--grid-border);\n}\n```\n\n```html index.html\n
\n \n \n \n \n \n \n \n
\n```\n\n\n## Using the outline property\n\nAnother solution for styling elements is to use the CSS `outline` property. The outline creates a visual effect similar to a border, but it doesn't take up space on the target element.\n\n```css\n.grid__item {\n outline: 1px solid rgb(203 213 225);\n}\n```\n\nAlthough it's a step in the right direction, using the `outline` property alone doesn't completely solve the issue of double borders. We're still missing a small piece of the puzzle.\n\nBut don't worry, because CSS grid has a trick up its sleeve. The `grid-gap` property is here to save the day! This handy property creates space between rows and columns in a CSS grid layout. By specifying the size of the gap between each row and column, we gain more control over the spacing of elements within the grid.\n\n```css\n.grid {\n grid-gap: 1px;\n}\n```\n\nWe can solve the issue by creating a grid with a 1px gap between each row and column, just like the outline. Here's a visual representation of how it works.\n\n\n```css demo.css hidden\nbody {\n align-items: center;\n display: flex;\n justify-content: center;\n height: 16rem;\n}\n```\n\n```css styles.css\n.grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: repeat(3, 4rem);\n grid-gap: 1px;\n width: 12rem;\n}\n.grid__item {\n outline: 1px solid rgb(203 213 225);\n}\n```\n\n```html index.html\n
\n```\n\n"
},
{
"path": "contents/linear-gauge.mdx",
"content": "---\ncategory: Feedback\ncreated: '2023-11-20'\ndescription: Create a linear gauge\nopenGraphCover: /og/css-layout/linear-gauge.png\nthumbnail: /assets/css-layout/thumbnails/linear-gauge.png\ntitle: Linear gauge\n---\n\nA **linear gauge** is a handy tool for displaying numerical values within a specific range. It's like a bar with markings that represent the range of values and an indicator that points to the current value. Linear gauges are great for showing progress, performance, or other quantitative metrics quickly and easily. You can use them in dashboards, reports, or presentations to help people understand complex data at a glance. They're simple and intuitive, making them an effective way to communicate important information in a clear and concise manner.\n\nFor instance, think of a fitness app that tracks your daily step count. The app could display a linear gauge that shows your progress towards your daily goal, with markings indicating the range of steps from 0 to the goal amount. As you walk throughout the day, the indicator on the gauge would move in real-time to show how many steps you've taken so far. This visualization can motivate users to reach their step goal and monitor their progress over time. Linear gauges can also be used in other contexts, such as fundraising campaigns or sales targets, to track progress towards specific goals and keep stakeholders informed.\n\nLinear gauges are also used in real-life situations, like in modern cars with fuel economy gauges. These gauges display how efficiently the vehicle is using fuel, with markings indicating different levels of fuel efficiency. The indicator moves up or down based on how efficiently the car is being driven at any given moment, providing drivers with real-time feedback on their driving habits.\n\nThese are just a few examples of how linear gauges can be used to communicate important information quickly and effectively. In this post, we'll learn how to create a linear gauge.\n\n## Setting up the layout\n\nSetting up a layout for a simple linear gauge can be done with just one element that represents the progress.\n\n```html\n
\n \n
\n```\n\nIn order to position the progress indicator inside the gauge, we need to use absolute positioning. First, we set the `position` property of the gauge container to `relative`, so that any child elements with absolute positioning are positioned relative to it.\n\nNext, we set the position property of the progress indicator to `absolute`, and give it a `top` and `left` value of 0. This will position it at the top left corner of the gauge container. Finally, we set the `width` of the progress indicator to a percentage value based on the current value being displayed. This will cause it to stretch or shrink horizontally as needed.\n\n```css\n.gauge {\n position: relative;\n}\n\n.gauge__progress {\n position: absolute;\n top: 0;\n left: 0;\n width: 60%;\n height: 100%;\n}\n```\n\nSetting different background colors for the gauge and progress indicator can make it easier to distinguish between the two elements, improving the gauge's readability. By using contrasting colors, we can highlight the progress indicator and make it stand out against the gauge's background. This is especially helpful when displaying data with a wide range of values or when there are multiple gauges on a single page. Moreover, choosing visually appealing colors can enhance the gauge's overall look and feel, making it more engaging for viewers to interact with.\n\n```css\n.gauge {\n background: rgb(203 213 225);\n}\n.gauge__progress {\n background: rgb(99 102 241);\n}\n```\n\nHere's what the gauge looks like:\n\n\n```css demo.css hidden\nbody {\n align-items: center;\n display: flex;\n justify-content: center;\n}\n```\n\n```css styles.css\n.gauge {\n position: relative;\n width: 16rem;\n height: 0.5rem;\n background: rgb(203 213 225);\n}\n.gauge__progress {\n position: absolute;\n top: 0;\n left: 0;\n width: 60%;\n height: 100%;\n background: rgb(99 102 241);\n}\n```\n\n```html index.html\n
\n \n
\n```\n\n\n## Adding ticks to the linear gauge\n\nTo make your linear gauge more informative, it's important to include ticks. Ticks provide visual markers that indicate specific points on the gauge and help users understand where they are on the scale.\n\nIn this example, we add five ticks between 0 and 100 percent, representing key milestones along the way. This makes it easier for users to quickly gauge their progress and understand their current position.\n\n```html\n
\n \n \n \n \n \n
\n```\n\nTo add ticks to a gauge, we use absolute positioning and set the `left` property to a percentage value based on where we want the tick to appear. For example, to add a tick at the 25% mark, we set `left` to 25%. The tick is then positioned at that point on the gauge.\n\nWe can adjust the height of each tick using the `height` property and set the `width` to 1px to create a thin vertical line. By default, the tick color matches the gauge container, but we can customize it with CSS to create a more visually appealing and informative gauge.\n\nBy adding ticks to a gauge, we can provide viewers with additional information about the data being displayed. We can also use different colors or styles for each tick to make the gauge easier to read and interpret.\n\n```css\n.gauge__tick {\n position: absolute;\n top: 100%;\n height: 0.5rem;\n width: 1px;\n background: rgb(203 213 225);\n}\n```\n\nWe can make our gauge even more informative by adding smaller ticks, also known as minor ticks, to the axis. We can insert three minor ticks between each major tick by placing them at a percentage value that falls between two adjacent major ticks. This provides more detailed information on the range of values displayed and helps viewers understand the gauge better.\n\n```html\n
\n \n \n \n ...\n
\n```\n\nTo make it easier for viewers to distinguish between major and minor ticks, we can use a separate CSS class and adjust its height to make it smaller than the main ticks. This way, viewers can understand the ticks correctly and avoid any confusion.\n\n```css\n.gauge__tick--minor {\n height: 0.25rem;\n}\n```\n\nCheck out the demo below to see how even small changes can make a big difference with ticks.\n\n\n```css demo.css hidden\nbody {\n align-items: center;\n display: flex;\n justify-content: center;\n}\n```\n\n```css styles.css\n.gauge {\n position: relative;\n width: 16rem;\n height: 0.5rem;\n background: rgb(203 213 225);\n}\n.gauge__progress {\n position: absolute;\n top: 0;\n left: 0;\n width: 60%;\n height: 100%;\n background: rgb(99 102 241);\n}\n.gauge__tick {\n position: absolute;\n top: 100%;\n height: 0.5rem;\n width: 1px;\n background: rgb(203 213 225);\n}\n.gauge__tick--minor {\n height: 0.25rem;\n}\n```\n\n```html index.html\n
\n```\n\n\n## Enhancing the linear gauge with labels\n\nWe can make the linear gauge even more informative by adding labels to indicate specific values along the gauge. Labels can be used to show the current value of the progress indicator or to mark important milestones on the gauge.\n\nTo add a label, we simply create a new element inside the tick element, give it a class name, and set its content to the value we want to display. With this simple addition, our linear gauge becomes even more useful and visually appealing.\n\n```html\n
\n
\n
50
\n
\n ...\n
\n```\n\nIn this example, we've added a label to the gauge at the 50% mark. To position the label, we use absolute positioning and set its `left` property to 50%. This centers the label horizontally within the tick element. To center the label vertically, we use the `transform` property to move it up by a quarter of the tick's height. By combining these CSS properties, we can create labels that show data in real-time and give viewers more information about the values being displayed. We can also use different colors or styles for each label to make the gauge more visually appealing and easy to read.\n\n```css\n.gauge__label {\n position: absolute;\n left: 50%;\n transform: translate(-50%, 0.25rem);\n}\n```\n\nCustomizing the appearance of our labels can help make them more visually appealing for viewers. By adjusting properties like font size and color, we can create a polished and professional look for our linear gauge.\n\nBy combining ticks, labels, and other design elements, we can create a visualization that effectively communicates important information to viewers in an engaging and informative way.\n\n\n```css demo.css hidden\nbody {\n align-items: center;\n display: flex;\n justify-content: center;\n}\n```\n\n```css styles.css\n.gauge {\n position: relative;\n width: 16rem;\n height: 0.5rem;\n background: rgb(203 213 225);\n}\n.gauge__progress {\n position: absolute;\n top: 0;\n left: 0;\n width: 60%;\n height: 100%;\n background: rgb(99 102 241);\n}\n.gauge__tick {\n position: absolute;\n top: 100%;\n height: 0.5rem;\n width: 1px;\n background: rgb(203 213 225);\n}\n.gauge__tick--minor {\n height: 0.25rem;\n}\n.gauge__label {\n position: absolute;\n left: 50%;\n transform: translate(-50%, 0.5rem);\n}\n```\n\n```html index.html\n
\n \n
\n
0
\n
\n \n \n \n \n
\n
25
\n
\n \n \n \n \n
\n
50
\n
\n \n \n \n \n
\n
75
\n
\n \n \n \n \n
\n
100
\n
\n
\n```\n\n\nBy changing the position from `left` to `top`, we can easily create a horizontal gauge as follows:\n\n\n```css demo.css hidden\nbody {\n align-items: center;\n display: flex;\n justify-content: center;\n}\n```\n\n```css styles.css\n.gauge {\n position: relative;\n height: 16rem;\n width: 0.5rem;\n background: rgb(203 213 225);\n}\n.gauge__progress {\n position: absolute;\n top: 0;\n left: 0;\n height: 60%;\n width: 100%;\n background: rgb(99 102 241);\n}\n.gauge__tick {\n position: absolute;\n left: 100%;\n width: 0.5rem;\n height: 1px;\n background: rgb(203 213 225);\n}\n.gauge__tick--minor {\n width: 0.25rem;\n}\n.gauge__label {\n position: absolute;\n left: 50%;\n transform: translate(0.5rem, -50%);\n}\n```\n\n```html index.html\n
\n \n
\n
0
\n
\n \n \n \n \n
\n
25
\n
\n \n \n \n \n
\n
50
\n
\n \n \n \n \n
\n
75
\n
\n \n \n \n \n
\n
100
\n
\n
\n```\n\n\n## Conclusion\n\nCSS and HTML give us the power to create linear gauges that are not only informative but also visually appealing. By adding ticks and labels to our gauge, we can provide more context for viewers to easily interpret the data in real-time. Customizing the colors and styles of our gauge elements can create a more engaging user experience that encourages viewers to interact with the data. Overall, CSS and HTML offer a robust toolkit for creating effective linear gauges that communicate important information clearly and concisely.\n"
},
{
"path": "contents/lined-paper.mdx",
"content": "---\ncategory: Display\ncreated: '2020-01-17'\ndescription: Create lined paper with CSS\nkeywords: css linear gradient, css lined paper, css multiple horizontal lines\nthumbnail: /assets/css-layout/thumbnails/lined-paper.png\ntitle: Lined paper\n---\n\n## HTML\n\n```html index.html\n
...
\n```\n\n## CSS\n\n```css styles.css\n.lined-paper {\n /* Lined background */\n background-image: linear-gradient(#d1d5db 1px, transparent 0px);\n background-size: 100% 2em;\n\n /*\n Display the content on top of the lines.\n The line height must be the same as the background size defined above\n */\n background-position-y: 1.5rem;\n line-height: 2em;\n}\n```\n\n\n```css styles.css hidden\nbody {\n align-items: center;\n display: flex;\n justify-content: center;\n}\n.lined-paper {\n /* Lined background */\n background-image: linear-gradient(#d1d5db 1px, transparent 0px);\n background-size: 100% 2em;\n\n /*\n Display the content on top of the lines.\n The line height must be the same as the background size defined above\n */\n background-position-y: 1.5rem;\n line-height: 2em;\n\n /* Demo */\n overflow: hidden;\n}\n```\n\n```html index.html hidden\n
\n 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.\n
\n```\n\n## CSS\n\n```css styles.css\n.masonry-grid {\n /* It is split into 3 columns */\n column-count: 3;\n\n /* The space between columns */\n column-gap: 1rem;\n}\n\n.masonry-grid__item {\n /* Prevent a column from breaking into multiple columns */\n break-inside: avoid;\n}\n```\n\n\n```css placeholders.css hidden\n.rectangle {\n background: #d1d5db;\n border-radius: 0.25rem;\n height: var(--rectangle-height);\n width: var(--rectangle-width);\n}\n.rectangle--hor.rectangle--20 {\n --rectangle-width: 20%;\n}\n.rectangle--hor.rectangle--40 {\n --rectangle-width: 40%;\n}\n.rectangle--hor.rectangle--60 {\n --rectangle-width: 60%;\n}\n.rectangle--hor.rectangle--80 {\n --rectangle-width: 80%;\n}\n.rectangle--hor.rectangle--100 {\n --rectangle-width: 100%;\n}\n.rectangle--hor.rectangle--sm {\n --rectangle-height: 0.5rem;\n}\n.rectangle--hor.rectangle--md {\n --rectangle-height: 2rem;\n}\n.rectangle--hor.rectangle--lg {\n --rectangle-height: 4rem;\n}\n.rectangle--ver.rectangle--20 {\n --rectangle-height: 20%;\n}\n.rectangle--ver.rectangle--40 {\n --rectangle-height: 40%;\n}\n.rectangle--ver.rectangle--60 {\n --rectangle-height: 60%;\n}\n.rectangle--ver.rectangle--80 {\n --rectangle-height: 80%;\n}\n.rectangle--ver.rectangle--100 {\n --rectangle-height: 100%;\n}\n.rectangle--ver.rectangle--sm {\n --rectangle-width: 0.5rem;\n}\n.rectangle--ver.rectangle--md {\n --rectangle-width: 2rem;\n}\n.rectangle--ver.rectangle--lg {\n --rectangle-width: 4rem;\n}\n```\n\n```css styles.css hidden\nbody {\n height: 24rem;\n}\n\n.masonry-grid {\n /* It is split into 3 columns */\n column-count: 3;\n\n /* The space between columns */\n column-gap: 1rem;\n\n /* Demo */\n height: 100%;\n width: 100%;\n}\n\n.masonry-grid__item {\n /* Prevent a column from breaking into multiple columns */\n break-inside: avoid;\n\n /* Misc */\n margin-bottom: 1rem;\n}\n```\n\n```html index.html hidden\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n```\n\n"
},
{
"path": "contents/media-object.mdx",
"content": "---\ncategory: Display\ncreated: '2019-11-16'\ndescription: Create a media object with CSS flexbox\nkeywords: css flexbox, media object\nthumbnail: /assets/css-layout/thumbnails/media-object.png\ntitle: Media object\n---\n\n## HTML\n\n```html index.html\n
\n```\n\n"
},
{
"path": "contents/mega-menu.mdx",
"content": "---\ncategory: Navigation\ncreated: '2019-12-29'\ndescription: Create a mega menu with CSS\nkeywords: css mega menu\nthumbnail: /assets/css-layout/thumbnails/mega-menu.png\ntitle: Mega menu\n---\n\n## HTML\n\n```html index.html\n
\n \n
...
\n\n \n
\n \n
...
\n\n \n
...
\n
\n\n \n
...
\n
\n```\n\n## CSS\n\n```css styles.css\n.mega-menu {\n /* Used to position the mega menu */\n position: relative;\n}\n\n.mega-menu__trigger:hover .mega-menu__content {\n /* Show the mega menu when hovering the trigger item */\n display: block;\n}\n\n.mega-menu__content {\n /* Border */\n border: 1px solid #d1d5db;\n margin-top: -1px;\n\n /* Hidden by default */\n display: none;\n\n /* Absolute position */\n left: 0px;\n position: absolute;\n top: 100%;\n\n /* Take full width */\n width: 100%;\n\n /* Displayed on top of other elements */\n background: #fff;\n z-index: 9999;\n}\n```\n\n\n```css placeholders.css hidden\n.lines {\n padding: 0.25rem 0;\n width: 100%;\n align-items: center;\n display: flex;\n justify-content: center;\n flex-direction: column;\n}\n.line {\n background: #d1d5db;\n height: 1px;\n margin-bottom: 0.25rem;\n}\n.line.line--20 {\n width: 20%;\n}\n.line.line--40 {\n width: 40%;\n}\n.line.line--60 {\n width: 60%;\n}\n.line.line--80 {\n width: 80%;\n}\n.line.line--100 {\n width: 100%;\n}\n.rectangle {\n background: #d1d5db;\n border-radius: 0.25rem;\n height: var(--rectangle-height);\n width: var(--rectangle-width);\n}\n.rectangle--hor.rectangle--20 {\n --rectangle-width: 20%;\n}\n.rectangle--hor.rectangle--40 {\n --rectangle-width: 40%;\n}\n.rectangle--hor.rectangle--60 {\n --rectangle-width: 60%;\n}\n.rectangle--hor.rectangle--80 {\n --rectangle-width: 80%;\n}\n.rectangle--hor.rectangle--100 {\n --rectangle-width: 100%;\n}\n.rectangle--hor.rectangle--sm {\n --rectangle-height: 0.5rem;\n}\n.rectangle--hor.rectangle--md {\n --rectangle-height: 2rem;\n}\n.rectangle--hor.rectangle--lg {\n --rectangle-height: 4rem;\n}\n.rectangle--ver.rectangle--20 {\n --rectangle-height: 20%;\n}\n.rectangle--ver.rectangle--40 {\n --rectangle-height: 40%;\n}\n.rectangle--ver.rectangle--60 {\n --rectangle-height: 60%;\n}\n.rectangle--ver.rectangle--80 {\n --rectangle-height: 80%;\n}\n.rectangle--ver.rectangle--100 {\n --rectangle-height: 100%;\n}\n.rectangle--ver.rectangle--sm {\n --rectangle-width: 0.5rem;\n}\n.rectangle--ver.rectangle--md {\n --rectangle-width: 2rem;\n}\n.rectangle--ver.rectangle--lg {\n --rectangle-width: 4rem;\n}\n.triangle {\n border-style: solid;\n height: 0;\n width: 0;\n}\n.triangle--t {\n border-color: transparent transparent #d1d5db transparent;\n border-width: 0 var(--triangle-size) var(--triangle-size) var(--triangle-size);\n}\n.triangle--r {\n border-color: transparent transparent transparent #d1d5db;\n border-width: var(--triangle-size) 0 var(--triangle-size) 1rem;\n}\n.triangle--b {\n border-color: #d1d5db transparent transparent transparent;\n border-width: var(--triangle-size) var(--triangle-size) 0 var(--triangle-size);\n}\n.triangle--l {\n border-color: transparent #d1d5db transparent transparent;\n border-width: var(--triangle-size) 1rem var(--triangle-size) 0;\n}\n.triangle--tr {\n border-color: transparent #d1d5db transparent transparent;\n border-width: 0 var(--triangle-size) var(--triangle-size) 0;\n}\n.triangle--br {\n border-color: transparent transparent #d1d5db transparent;\n border-width: 0 0 var(--triangle-size) var(--triangle-size);\n}\n.triangle--bl {\n border-color: transparent transparent transparent #d1d5db;\n border-width: var(--triangle-size) 0 0 var(--triangle-size);\n}\n.triangle--tl {\n border-color: #d1d5db transparent transparent transparent;\n border-width: var(--triangle-size) var(--triangle-size) 0 0;\n}\n.triangle--sm {\n --triangle-size: 0.5rem;\n}\n.triangle--md {\n --triangle-size: 2rem;\n}\n.triangle--lg {\n --triangle-size: 4rem;\n}\n```\n\n```css styles.css hidden\n.mega-menu {\n align-items: center;\n display: flex;\n justify-content: center;\n\n position: relative;\n\n border: 1px solid #d1d5db;\n border-radius: 0.25rem;\n\n /* Demo */\n width: 100%;\n}\n\n.mega-menu__item {\n display: flex;\n align-items: center;\n\n height: 100%;\n flex: 1;\n\n padding: 0.25rem 0.5rem;\n}\n.mega-menu__item:not(:last-child) {\n border-right: 1px solid #d1d5db;\n}\n\n.mega-menu__trigger {\n cursor: pointer;\n\n /* Demo */\n height: 2rem;\n\n align-items: center;\n display: flex;\n justify-content: center;\n}\n\n.mega-menu__content {\n /* Border */\n border: 1px solid #d1d5db;\n /* margin-top: -1px; */\n\n /* Hidden by default */\n display: none;\n\n /* Position it right below the trigger element */\n left: 0;\n padding-top: 0.25rem;\n position: absolute;\n top: 100%;\n\n /* Take full width */\n width: 100%;\n\n /* It should be on the top of other elements */\n background-color: #fff;\n z-index: 9999;\n}\n\n/* Show the mega menu when hovering the trigger item */\n.mega-menu__trigger:hover .mega-menu__content {\n display: block;\n}\n```\n\n```html index.html hidden\n
\n
\n \n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n
\n
\n
\n
\n
\n \n
\n
\n```\n\n"
},
{
"path": "contents/menu.mdx",
"content": "---\ncategory: Navigation\ncreated: '2019-11-17'\ndescription: Create a menu with CSS flexbox\nkeywords: css flexbox, css menu\nthumbnail: /assets/css-layout/thumbnails/menu.png\ntitle: Menu\n---\n\n## HTML\n\n```html index.html\n
\n```\n\n"
},
{
"path": "contents/pie-chart.mdx",
"content": "---\ncategory: Feedback\ncreated: '2023-11-17'\ndescription: Create a pie chart\nopenGraphCover: /og/css-layout/pie-chart.png\nthumbnail: /assets/css-layout/thumbnails/pie-chart.png\ntitle: Pie chart\n---\n\nPie charts are a great way to visually represent data. They show data as parts of a whole, making it easy to compare and analyze. Pie charts are especially helpful when working with percentages or proportions that add up to 100%. They can also help identify trends, patterns, and outliers in the data. By using different colors and labeling each slice, you can create a clear and easy-to-understand representation of complex information.\n\nIn this post, we'll show you how to create a pie chart using pure HTML and CSS. It's a simple yet effective way to communicate important data points to your audience. Let's get started!\n\n## Setting up the layout\n\nGenerating a pie chart is a simple process. A pie chart is usually placed in a circle. To begin, we divide the circle into two equal halves.\n\n```html\n
\n \n \n
\n```\n\nTo create the chart, we rotate one half of the circle based on the percentage of progress being displayed, while the other half remains stationary as the chart's background. In the next section, we'll dive into the details of how to implement this idea.\n\n## Positioning halves\n\nTo create a circle shape for our container, we can use the `border-radius` property and set it to 50%. This will round all four corners and voila! We have a perfect circle. Don't forget to specify the `height` and `width` of the circle to determine its size. If both values are the same, our circle will be perfectly round and symmetrical.\n\n```css\n.circle {\n border-radius: 50%;\n height: 12rem;\n width: 12rem;\n}\n```\n\nBoth halves of the circle are positioned absolutely, so we need to change the `position` style to `relative`.\n\n```css\n.circle {\n position: relative;\n overflow: hidden;\n}\n```\n\nWhen creating a pie chart inside a circle, it's crucial to use the `overflow: hidden` property. This ensures that any parts of the pie chart that extend beyond the bounds of the circle are hidden from view, giving the chart a professional and polished look.\n\nTo position the two halves of the circle, we use `position: absolute` in CSS. This lets us place the elements anywhere we want within their parent container. Both halves should have a height of 50% and a width of 100%, so they each occupy half of the circle.\n\nTo ensure proper positioning, we also set `transform-origin: 50% 100%;`. This ensures that when we rotate one of the halves, it rotates around its bottom center point, which is exactly what we need to create a pie chart.\n\n```css\n.circle__half {\n position: absolute;\n top: 0;\n height: 50%;\n width: 100%;\n transform-origin: 50% 100%;\n}\n```\n\nTo give the first half of the circle a background color, we can apply a CSS style to it. This will make the portion of the chart that represents completed progress have a solid color.\n\n```css\n.circle__half--1 {\n background: rgb(99 102 241);\n}\n```\n\nBy using positioning properties, we can easily create a pie chart. We rotate one half of the circle based on the percentage of progress being displayed, while the other half remains stationary, acting as the chart's background.\n\nTo illustrate, let's say we want to display progress by rotating the second half of the circle. In the sample code below, we rotate it by 120 degrees:\n\n```css\n.circle__half--2 {\n transform: rotate(120deg);\n}\n```\n\nTo make the second half of the circle transparent, we need to set its `background` property to `inherit`. This is because we only want the first half of the circle to have a solid color while the second half should be see-through to show the underlying container. By setting `background: inherit`, we tell the browser to use the same background color as its parent element. This creates a smooth transition between our pie chart and its surrounding container.\n\n```css\n.circle__half--2 {\n background: inherit;\n}\n```\n\nTake a look at the demo below:\n\n\n```css demo.css hidden\nbody {\n align-items: center;\n display: flex;\n justify-content: center;\n}\n```\n\n```css styles.css\n.circle {\n background: rgb(203 213 225);\n border-radius: 50%;\n position: relative;\n overflow: hidden;\n height: 12rem;\n width: 12rem;\n}\n.circle__half {\n position: absolute;\n top: 0;\n height: 50%;\n width: 100%;\n transform-origin: 50% 100%;\n}\n.circle__half--1 {\n background: rgb(99 102 241);\n}\n.circle__half--2 {\n background: inherit;\n transform: rotate(120deg);\n}\n```\n\n```html index.html\n
\n \n \n
\n```\n\n\nKeep in mind that if you want to display a pie chart with a degree greater than 180, the second half must have the same background color as the first half.\n\n```css\n.circle__half--2 {\n background: rgb(99 102 241);\n transform: rotate(60deg);\n}\n```\n\nHere's an example of how to create a pie chart using 240 degrees.\n\n\n```css demo.css hidden\nbody {\n align-items: center;\n display: flex;\n justify-content: center;\n}\n```\n\n```css styles.css\n.circle {\n background: rgb(203 213 225);\n border-radius: 50%;\n position: relative;\n overflow: hidden;\n height: 12rem;\n width: 12rem;\n}\n.circle__half {\n position: absolute;\n top: 0;\n height: 50%;\n width: 100%;\n transform-origin: 50% 100%;\n}\n.circle__half--1 {\n background: rgb(99 102 241);\n}\n.circle__half--2 {\n background: rgb(99 102 241);\n transform: rotate(60deg);\n}\n```\n\n```html index.html\n
\n \n \n
\n```\n\n\n## Conclusion\n\nPie charts are an excellent way to visually represent data. They help viewers quickly and easily understand how different parts relate to the whole. With pure HTML and CSS, creating a pie chart is simple and customizable.\n\nIn this post, we'll cover the basics of creating a pie chart in CSS. You'll learn how to position the circle halves using absolute positioning and `transform-origin`. We'll also discuss setting background colors for each half and rotating one half based on the progress percentage.\n\nBy using these techniques, you can create beautiful and informative pie charts that will impress your audience. Remember to keep it simple, avoid cluttering your chart with too much information, and label each slice clearly. Use colors sparingly to ensure viewers can easily understand what they're looking at.\n"
},
{
"path": "contents/popover-arrow.mdx",
"content": "---\ncategory: Feedback\ncreated: '2019-12-03'\ndescription: Create a popover arrow with CSS\nkeywords: css arrow, css\nthumbnail: /assets/css-layout/thumbnails/popover-arrow.png\ntitle: Popover arrow\n---\n\n## HTML\n\n```html index.html\n
\n```\n\n## CSS\n\n```css styles.css\n:root {\n --radial-progress-bar-size: 8rem;\n --radial-progress-bar-border-width: 0.75rem;\n}\n\n.radial-progress-bar {\n position: relative;\n height: var(--radial-progress-bar-size);\n width: var(--radial-progress-bar-size);\n}\n\n.radial-progress-bar__percentages {\n /* Center the content */\n align-items: center;\n display: flex;\n justify-content: center;\n\n /* Rounded border */\n border: var(--radial-progress-bar-border-width) solid #d1d5db;\n border-radius: 9999px;\n\n /* Size */\n height: 100%;\n width: 100%;\n}\n\n.radial-progress-bar__curve {\n /* Position */\n left: 0;\n position: absolute;\n top: 0;\n\n /* Take full size */\n height: 100%;\n width: 100%;\n\n /* If percentages is less than 50 */\n /* clip: rect(\n 0px,\n var(--radial-progress-bar-size),\n var(--radial-progress-bar-size),\n calc(var(--radial-progress-bar-size) * 0.5),\n 0px\n ); */\n\n /* If percentages is greater than or equals to 50 */\n clip: rect(auto, auto, auto, auto);\n}\n\n.radial-progress-bar__half {\n /* Take full size */\n height: 100%;\n position: absolute;\n width: 100%;\n\n /*\n Background color of curve.\n The border width should be the same as the area showing the percentages\n */\n border: var(--radial-progress-bar-border-width) solid #3b82f6;\n border-radius: 9999px;\n}\n\n.radial-progress-bar__half--first {\n /* Position */\n clip: rect(0px, calc(var(--radial-progress-bar-size) * 0.5), var(--radial-progress-bar-size), 0px);\n\n /* Number of percentages * 360 / 100 */\n transform: rotate(270deg);\n}\n\n.radial-progress-bar__half--second {\n /* Position */\n clip: rect(0px, calc(var(--radial-progress-bar-size) * 0.5), var(--radial-progress-bar-size), 0px);\n\n /* If percentages is less than 50 */\n /* transform: rotate(0deg); */\n\n /* If percentages is greater than or equals to 50 */\n transform: rotate(180deg);\n}\n```\n\n\n```css styles.css hidden\n:root {\n --radial-progress-bar-size: 8rem;\n --radial-progress-bar-border-width: 0.75rem;\n}\n\nbody {\n align-items: center;\n display: flex;\n justify-content: center;\n}\n\n.radial-progress-bar {\n position: relative;\n height: var(--radial-progress-bar-size);\n width: var(--radial-progress-bar-size);\n}\n\n.radial-progress-bar__percentages {\n /* Center the content */\n align-items: center;\n display: flex;\n justify-content: center;\n\n /* Rounded border */\n border: var(--radial-progress-bar-border-width) solid #d1d5db;\n border-radius: 9999px;\n\n /* Size */\n height: 100%;\n width: 100%;\n}\n\n.radial-progress-bar__curve {\n /* Position */\n left: 0;\n position: absolute;\n top: 0;\n\n /* Take full size */\n height: 100%;\n width: 100%;\n\n /* If percentages is less than 50 */\n // clip: rect(0px, var(--radial-progress-bar-size), var(--radial-progress-bar-size), calc(var(--radial-progress-bar-size) * 0.5), 0px);\n\n /* If percentages is greater than or equals to 50 */\n clip: rect(auto, auto, auto, auto);\n}\n\n.radial-progress-bar__half {\n /* Take full size */\n height: 100%;\n position: absolute;\n width: 100%;\n\n /*\n Background color of curve.\n The border width should be the same as the area showing the percentages\n */\n border: var(--radial-progress-bar-border-width) solid #3b82f6;\n border-radius: 9999px;\n}\n\n.radial-progress-bar__half--first {\n /* Position */\n clip: rect(0px, calc(var(--radial-progress-bar-size) * 0.5), var(--radial-progress-bar-size), 0px);\n\n /* Number of percentages * 360 / 100 */\n transform: rotate(270deg);\n}\n\n.radial-progress-bar__half--second {\n /* Position */\n clip: rect(0px, calc(var(--radial-progress-bar-size) * 0.5), var(--radial-progress-bar-size), 0px);\n\n /* If percentages is less than 50 */\n // transform: rotate(0deg);\n\n /* If percentages is greater than or equals to 50 */\n transform: rotate(180deg);\n}\n```\n\n```html index.html hidden\n
\n
\n 75%\n
\n
\n \n \n
\n
\n```\n\n"
},
{
"path": "contents/radio-button-group.mdx",
"content": "---\ncategory: Input\ncreated: '2019-12-01'\ndescription: Create a radio button group with CSS flexbox\nkeywords: css flexbox, css radio button\nthumbnail: /assets/css-layout/thumbnails/radio-button-group.png\ntitle: Radio button group\n---\n\n## HTML\n\n```html index.html\n
\n \n \n\n \n \n\n \n ...\n
\n```\n\n## CSS\n\n```css styles.css\n.radio-button-group {\n display: flex;\n\n /* Border */\n border: 1px solid #d1d5db;\n border-radius: 0.25rem;\n height: 2rem;\n}\n\n.radio-button-group__label {\n /* Center the content */\n align-items: center;\n display: inline-flex;\n\n border-right: 1px solid #d1d5db;\n padding: 0.5rem;\n\n /* For not selected radio */\n background-color: transparent;\n color: #ccc;\n}\n\n.radio-button-group__label:last-child {\n /* Remove the right border from the last label */\n border-right-color: transparent;\n}\n\n.radio-button-group__label--selected {\n /* For selected radio */\n background-color: #3b82f6;\n color: #fff;\n\n margin-top: -1px;\n margin-bottom: -1px;\n}\n\n.radio-button-group__input {\n /* Hide it */\n display: none;\n}\n```\n\n\n```css styles.css hidden\nbody {\n align-items: center;\n display: flex;\n justify-content: center;\n}\n\n.radio-button-group {\n display: flex;\n\n /* Border */\n border: 1px solid #d1d5db;\n border-radius: 0.25rem;\n height: 2rem;\n}\n\n.radio-button-group__label {\n /* Center the content */\n align-items: center;\n display: inline-flex;\n\n border-right: 1px solid #d1d5db;\n padding: 0.5rem;\n\n /* For not selected radio */\n background-color: transparent;\n color: #ccc;\n}\n\n.radio-button-group__label:last-child {\n /* Remove the right border from the last label */\n border-right-color: transparent;\n}\n\n.radio-button-group__label--selected {\n /* For selected radio */\n background-color: #3b82f6;\n color: #fff;\n\n margin-top: -1px;\n margin-bottom: -1px;\n}\n\n.radio-button-group__input {\n /* Hide it */\n display: none;\n}\n```\n\n```html index.html hidden\n
\n \n \n \n \n
\n```\n\n"
},
{
"path": "contents/radio-switch.mdx",
"content": "---\ncategory: Input\ncreated: '2019-11-24'\ndescription: Create a radio switch with CSS flexbox\nkeywords: css flexbox, css radio switch, css switch\nthumbnail: /assets/css-layout/thumbnails/radio-switch.png\ntitle: Radio switch\n---\n\n## HTML\n\n```html index.html\n
\n```\n\n"
},
{
"path": "contents/rating.mdx",
"content": "---\ncategory: Input\ncreated: '2019-11-26'\ndescription: Create a star rating with CSS flexbox\nkeywords: css flexbox, css star rating\nthumbnail: /assets/css-layout/thumbnails/rating.png\ntitle: Rating\n---\n\n## HTML\n\n```html index.html\n
\n \n \n \n \n \n
\n```\n\n## CSS\n\n```css styles.css\n.rating {\n /* Center the content */\n align-items: center;\n display: flex;\n justify-content: center;\n\n flex-direction: row-reverse;\n}\n\n.rating__star:hover,\n.rating__star:hover ~ .rating__star {\n color: transparent;\n}\n\n/*\nMake all previous stars selected when hover on a star\nNote that we use \\`flex-direction: row-reverse\\` on the container\n*/\n.rating__star:hover:before,\n.rating__star:hover ~ .rating__star:before {\n color: #eab308;\n content: '★';\n left: 0;\n position: absolute;\n}\n\n.rating__star {\n font-size: 1.5rem;\n\n /* Reset styles for button */\n background-color: transparent;\n border: transparent;\n margin: 0 2px;\n padding: 0;\n\n /* Used to position the hover state */\n position: relative;\n}\n```\n\n\n```css styles.css hidden\nbody {\n align-items: center;\n display: flex;\n justify-content: center;\n}\n\n.rating {\n /* Center the content */\n align-items: center;\n display: flex;\n justify-content: center;\n\n flex-direction: row-reverse;\n}\n\n.rating__star:hover,\n.rating__star:hover ~ .rating__star {\n color: transparent;\n}\n\n/*\nMake all previous stars selected when hover on a star\nNote that we use \\`flex-direction: row-reverse\\` on the container\n*/\n.rating__star:hover:before,\n.rating__star:hover ~ .rating__star:before {\n color: #eab308;\n content: '★';\n left: 0;\n position: absolute;\n}\n\n.rating__star {\n font-size: 1.5rem;\n\n /* Reset styles for button */\n background-color: transparent;\n border: transparent;\n margin: 0 2px;\n padding: 0;\n\n /* Used to position the hover state */\n position: relative;\n}\n```\n\n```html index.html hidden\n
\n```\n\n"
},
{
"path": "contents/speech-bubble.mdx",
"content": "---\ncategory: Display\ncreated: '2023-08-31'\ndescription: Create a speech bubble in CSS\nkeywords: css speech bubble\nopenGraphCover: /og/css-layout/speech-bubble.png\nthumbnail: /assets/css-layout/thumbnails/speech-bubble.png\ntitle: Speech bubble\n---\n\nSpeech bubbles are a popular and effective way to show dialogue or thoughts in a visual way. You've probably seen them in comics, cartoons, ads, and social media posts. They add humor, emotion, and personality to a design while also giving context to the viewer. Plus, speech bubble layouts can make text-heavy designs more engaging by breaking them up.\n\nIn this post, we'll learn how to make a speech bubble layout using CSS. Let's get started!\n\n## Markup\n\nYou only need to provide one element to add the speed bubble effect.\n\n```html\n
\n \n
\n```\n\n## Adding a triangle\n\nTo create a speech bubble, we can display a triangle at the bottom-left corner of the container. Rather than adding an external element to the container, we can create the triangle using the `::before` pseudo-element. Here's an example to help you visualize it:\n\n```css\n.speech-bubble {\n position: relative;\n}\n.speech-bubble::before {\n content: '';\n\n position: absolute;\n bottom: 0;\n left: -1rem;\n\n border-width: 1rem;\n border-style: solid;\n border-color:\n transparent transparent rgb(226 232 240) transparent;\n}\n```\n\nFirst, we set the `position` property of the container to `relative`. This allowed us to position the triangle using absolute positioning.\n\nBut the real magic comes from the `::before` pseudo-element. We used the `content` property to add an empty string to this element. That may seem weird, but it's necessary because pseudo-elements require content to be displayed. To position the triangle where we wanted it, we used the `bottom` and `left` properties. By setting the `left` property to a negative value, we moved half of the triangle outside of the container.\n\nFinally, we created the triangle shape by setting the `border-color` property to transparent for the top, left, and right borders. This made the perfect triangle we were looking for.\n\nIf you want to change the direction or position of the triangle, it's easy to do by following this [post](https://phuoc.ng/collection/css-layout/triangle-buttons/).\n\nLet's take a moment to review the progress we've made with these steps.\n\n\n```css demo.css hidden\n.playground__root {\n align-items: center;\n display: flex;\n justify-content: center;\n height: 16rem;\n}\n```\n\n```css\n:root {\n --speech-bubble-background: rgb(226 232 240);\n --speech-bubble-arrow-size: 1rem;\n}\n.speech-bubble {\n position: relative;\n\n background: var(--speech-bubble-background);\n border-radius: 0.25rem;\n height: 4rem;\n width: 12rem;\n}\n.speech-bubble::before {\n content: '';\n\n position: absolute;\n bottom: 0;\n left: calc(-1 * var(--speech-bubble-arrow-size));\n\n border-width: var(--speech-bubble-arrow-size);\n border-style: solid;\n border-color: transparent transparent\n var(--speech-bubble-background) transparent;\n}\n```\n\n```html\n\n```\n\n\n## Using two pseudo-elements\n\nIn the previous section, we used the `::before` pseudo-element to create a triangle. Now, let's take it a step further and create two circles using the `::before` and `::after` pseudo-elements.\n\nTake a look at the demo below to see how it looks:\n\n\n```css demo.css hidden\n.playground__root {\n align-items: center;\n display: flex;\n justify-content: center;\n height: 16rem;\n}\n```\n\n```css\n:root {\n --speech-bubble-background: rgb(226 232 240);\n}\n.speech-bubble {\n position: relative;\n\n background: var(--speech-bubble-background);\n border-radius: 9999px;\n height: 4rem;\n width: 12rem;\n}\n.speech-bubble::before,\n.speech-bubble::after {\n content: '';\n\n position: absolute;\n bottom: 0;\n left: 0;\n\n border-radius: 9999px;\n background: var(--speech-bubble-background);\n}\n.speech-bubble::before {\n height: 1.5rem;\n width: 1.5rem;\n transform: translate(-0.5rem, 0.5rem);\n}\n.speech-bubble::after {\n height: 0.75rem;\n width: 0.75rem;\n transform: translate(-1rem, 1rem);\n}\n```\n\n```html\n\n```\n\n\nTo achieve this, we position both pseudo-elements absolutely at the bottom-left corner of the container, just like in the previous example.\n\n```css\n.speech-bubble::before,\n.speech-bubble::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n}\n```\n\nHowever, each of them is positioned differently by using the `transform` property. Let's take a closer look at the `transform` declaration for the `::before` pseudo-element. The first and second numbers move the element along the horizontal (X) and vertical (Y) axis, respectively.\n\n```css\n.speech-bubble::before {\n transform: translate(-0.5rem, 0.5rem);\n}\n```\n\n## See also\n\n- [Popover arrow](https://phuoc.ng/collection/css-layout/popover-arrow/)\n- [Typing indicator](https://phuoc.ng/collection/css-animation/typing-indicator/)\n- [Triangle buttons](https://phuoc.ng/collection/css-layout/triangle-buttons/)\n"
},
{
"path": "contents/spin-button.mdx",
"content": "---\ncategory: Input\ncreated: '2019-11-25'\ndescription: Create a spin button with CSS flexbox\nkeywords: css flexbox, css spin button\nthumbnail: /assets/css-layout/thumbnails/spin-button.png\ntitle: Spin button\n---\n\n## HTML\n\n```html index.html\n