CINXE.COM
CSS Articles - 30 seconds of code
<!DOCTYPE html><html lang="en"> <head><title>CSS Articles - 30 seconds of code</title><meta name="description" content="An article collection of interactive CSS3 examples, covering layouts, styling, animation and user interactions."><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="utf-8"><meta property="og:title" content="CSS Articles - 30 seconds of code"><meta property="og:description" content="An article collection of interactive CSS3 examples, covering layouts, styling, animation and user interactions."><meta property="og:type" content="website"><meta property="og:image" content="https://www.30secondsofcode.org/assets/splash/camera-600.webp"><meta name="twitter:card" content="summary_large_image"><script type="application/ld+json">{"@context":"https://schema.org","@type":"ItemList","url":"https://www.30secondsofcode.org/css/p/1","mainEntityOfPage":{"@type":"WebPage","@id":"https://www.30secondsofcode.org/css/p/1"},"name":"CSS Articles","numberOfItems":24,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://www.30secondsofcode.org/css/s/horizontal-vertical-gallery","name":"Image gallery with horizontal or vertical scroll"},{"@type":"ListItem","position":2,"url":"https://www.30secondsofcode.org/css/s/custom-checkbox-radio","name":"Styling checkboxes and radio buttons"},{"@type":"ListItem","position":3,"url":"https://www.30secondsofcode.org/css/s/circular-progress-bar","name":"How can I create a circular progress bar using only CSS?"},{"@type":"ListItem","position":4,"url":"https://www.30secondsofcode.org/css/s/card-hover-effects","name":"Card hover effects"},{"@type":"ListItem","position":5,"url":"https://www.30secondsofcode.org/css/s/alternating-text","name":"Alternating text animations"},{"@type":"ListItem","position":6,"url":"https://www.30secondsofcode.org/css/s/mouse-cursor-gradient-tracking","name":"Mouse cursor gradient tracking"},{"@type":"ListItem","position":7,"url":"https://www.30secondsofcode.org/css/s/image-overlay-hover","name":"Image overlay on hover"},{"@type":"ListItem","position":8,"url":"https://www.30secondsofcode.org/css/s/squiggle-link-hover-effect","name":"Squiggle link hover effect"},{"@type":"ListItem","position":9,"url":"https://www.30secondsofcode.org/css/s/image-hover-menu","name":"Show menu on image hover"},{"@type":"ListItem","position":10,"url":"https://www.30secondsofcode.org/css/s/hover-additional-content","name":"Reveal additional content on hover"},{"@type":"ListItem","position":11,"url":"https://www.30secondsofcode.org/css/s/staggered-animation","name":"Staggered list animation"},{"@type":"ListItem","position":12,"url":"https://www.30secondsofcode.org/css/s/typewriter-effect","name":"Typewriter effect"},{"@type":"ListItem","position":13,"url":"https://www.30secondsofcode.org/css/s/loaders","name":"Animated CSS loaders"},{"@type":"ListItem","position":14,"url":"https://www.30secondsofcode.org/css/s/floating-or-sticky-list-titles","name":"List with floating or sticky section headings"},{"@type":"ListItem","position":15,"url":"https://www.30secondsofcode.org/css/s/code-reviews","name":"How do you review CSS code in Pull Requests?"},{"@type":"ListItem","position":16,"url":"https://www.30secondsofcode.org/css/s/10-css-background-patterns","name":"10 beautiful CSS background patterns"},{"@type":"ListItem","position":17,"url":"https://www.30secondsofcode.org/css/s/scroll-progress-bar","name":"Scroll progress bar"},{"@type":"ListItem","position":18,"url":"https://www.30secondsofcode.org/css/s/reset","name":"CSS Reset"},{"@type":"ListItem","position":19,"url":"https://www.30secondsofcode.org/css/s/input-with-prefix","name":"Input with prefix"},{"@type":"ListItem","position":20,"url":"https://www.30secondsofcode.org/css/s/image-text-overlay","name":"Image with text overlay"},{"@type":"ListItem","position":21,"url":"https://www.30secondsofcode.org/css/s/image-hover-rotate","name":"Image rotate on hover"},{"@type":"ListItem","position":22,"url":"https://www.30secondsofcode.org/css/s/card-image-cutout","name":"Card with image cutout"},{"@type":"ListItem","position":23,"url":"https://www.30secondsofcode.org/css/s/toggle-switch","name":"Create a toggle switch using HTML & CSS"},{"@type":"ListItem","position":24,"url":"https://www.30secondsofcode.org/css/s/content-aware-height-transition","name":"Content-aware height transition"}]}</script><link rel="sitemap" href="/sitemap.xml" type="application/xml"><link rel="alternate" href="/feed" type="application/rss+xml" title="30secondsofcode.org"><link rel="preload" type="font/woff2" href="/assets/Inter.var.woff2" as="font" crossorigin><link rel="preload" type="font/woff2" href="/assets/RobotoMono-Regular.woff2" as="font" crossorigin><link rel="icon" href="/assets/icons/favicon-32x32.png?v=30swp20231218115417" type="image/png"><link rel="stylesheet" href="/assets/print.css?v=30swp20231218115417" media="print"><link rel="manifest" href="/manifest.webmanifest" crossorigin><meta name="theme-color" content="#07071c"><link rel="icon" sizes="192x192" href="/assets/icons/icon-192x192.png?v=30swp20231218115417"><link rel="apple-touch-icon" href="/assets/icons/icon-180x180.png?v=30swp20231218115417"><link rel="canonical" href="https://www.30secondsofcode.org/css/p/1"><script>(function(){const timestamp = "195d9201296"; })();</script><style>@charset "UTF-8";@layer framework{@font-face{font-family:Inter;font-weight:100 1000;font-display:swap;src:local("Inter Var"),local("Inter Variable"),local("Inter-Variable"),url(/assets/Inter.var.woff2) format("woff2 supports variations"),url(/assets/Inter.var.woff2) format("woff2-variations")}@font-face{font-family:Roboto Mono;font-style:normal;font-weight:400;font-display:swap;src:local("Roboto Mono"),local("RobotoMono-Regular"),url(/assets/RobotoMono-Regular.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Roboto Mono;font-style:italic;font-weight:400;font-display:swap;src:local("Roboto Mono Italic"),local("RobotoMono-Italic"),url(/assets/RobotoMono-Italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Roboto Mono;font-style:normal;font-weight:500;src:local("Roboto Mono Medium"),local("RobotoMono-Medium"),url(/assets/RobotoMono-Medium.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap}:root{--color-background: hsl(240, 61%, 7%);--color-background-light: hsl(240, 39%, 14%);--color-text: hsl(240, 10%, 90%);--color-text-light: hsl(240, 10%, 80%);--color-text-lighter: hsl(240, 10%, 70%);--color-primary: hsl(217, 98%, 66%);--color-primary-light: hsl(217, 98%, 77%);--color-warning: hsl(29, 91%, 53%);--color-caution: hsl(0, 98%, 64%);--color-code-background: hsl(225, 42%, 16%);--color-border: hsl(235, 25%, 27%);--color-border-light: hsl(235, 15%, 41%);--color-scrollbar-knob: hsl(240, 35%, 17%);--color-scrollbar-knob-active: hsl(240, 30%, 23%);--color-selection-background: hsl(230, 98%, 58%);--font-xs: .8125rem;--font-sm: 1rem;--font-md: 1.125rem;--font-lg: 1.3125rem;--font-xl: 1.625rem;--font-x2: 2rem;--font-x3: 2.25rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-strong: 600;--line-height-loose: 1.75;--line-height-normal: 1.5;--line-height-tight: 1.25;--spacing-1: 2px;--spacing-2: 4px;--spacing-4: 8px;--spacing-6: 12px;--spacing-8: 16px;--spacing-10: 20px;--spacing-12: 24px;--spacing-16: 32px;--spacing-20: 40px;--spacing-24: 48px;--border-radius-small: 2px;--border-radius-medium: 4px;--border-radius-large: 8px;--border-width-hairline: .5px;--border-width-thin: 1px;--border-width-medium: 2px;--border-width-thick: 4px;--animation-duration-short: .2s;--animation-duration-medium: .3s;--animation-duration-long: .45s}@media (prefers-reduced-motion: reduce){:root{--animation-duration-short: .15s;--animation-duration-medium: .15s;--animation-duration-long: .15s}}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid}*{margin:0}html,body{height:100%}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{margin:0;background:var(--color-background);color:var(--color-text);-webkit-font-smoothing:antialiased}[hidden]{display:none}:focus-visible{outline-color:var(--color-primary)}::selection{background-color:var(--color-selection-background);color:var(--color-text)}::backdrop{--color-dialog-backdrop: hsla(0, 0%, 0%, .6);background:var(--color-dialog-backdrop)}html{font-family:Inter,Helvetica,sans-serif}body{line-height:var(--line-height-loose);font-weight:var(--font-weight-normal)}strong{font-weight:var(--font-weight-strong)}em{font-variation-settings:"slnt" -10;font-style:normal}h1,h2,h3,h4{font-weight:var(--font-weight-strong);overflow-wrap:break-word;hyphens:auto;text-wrap:pretty}h1,h2,h3{line-height:var(--line-height-tight)}h4,h5,h6{line-height:var(--line-height-normal)}h1{font-size:clamp(var(--font-x2),3vw + 1rem,var(--font-x3))}h2{font-size:clamp(var(--font-xl),2vw + 1rem,var(--font-x2))}h3{font-size:clamp(var(--font-lg),1vw + 1rem,var(--font-xl))}h4{font-size:var(--font-lg)}h5,h6{font-size:var(--font-md)}main>article>:is(h2,h3,h4){margin-block:calc(1.5 * var(--layout-row-spacing));margin-block-end:calc(.5 * var(--layout-row-spacing))}small{font-size:80%}sub{bottom:-.25em}sup{top:-.5em}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}p,ul,ol,table,blockquote{font-size:var(--font-md)}p,li{text-wrap:pretty}ol,ul{list-style:none;padding:0}main>article :is(ol,ul){list-style:revert;padding-inline-start:var(--spacing-10)}main>article :is(ol,ul) li{padding-block:0 var(--spacing-2);margin-block:var(--spacing-2)}blockquote{background:var(--color-background-light);padding-inline-start:calc(var(--layout-bleed-width) - var(--border-width-thick));padding-inline-end:var(--layout-bleed-width);padding-block:var(--spacing-6);border-inline-start:var(--border-width-thick) solid var(--color-primary);font-variation-settings:"slnt" -5;display:flex;flex-direction:column;row-gap:calc(var(--layout-row-spacing) / 3)}figure.admonition{background:var(--color-background-light);padding-inline-start:calc(var(--layout-bleed-width) - var(--border-width-thick));padding-inline-end:var(--layout-bleed-width);padding-block:var(--spacing-6);border-inline-start:var(--border-width-thick) solid var(--admonition_-accent-color);display:flex;flex-direction:column;row-gap:calc(var(--layout-row-spacing) / 3)}figure.admonition[data-admonition-type=note],figure.admonition[data-admonition-type=tip]{--admonition_-accent-color: var(--color-primary-light)}figure.admonition[data-admonition-type=important]{--admonition_-accent-color: var(--color-primary)}figure.admonition[data-admonition-type=warning]{--admonition_-accent-color: var(--color-warning)}figure.admonition[data-admonition-type=caution]{--admonition_-accent-color: var(--color-caution)}figure.admonition figcaption{color:var(--admonition_-accent-color);font-weight:var(--font-weight-medium);font-size:var(--font-md);white-space:pre-wrap}dfn{font-style:normal;text-decoration:underline var(--color-border-light) dotted;text-underline-offset:4.5px}:not(:is(code,kbd,pre)){font-feature-settings:"frac","cv05","cv11","calt","kern"}hr{height:0;color:var(--color-border-light);border-block-start-width:var(--border-width-thin)}a{--link_color-underline: var(--color-primary);box-shadow:0 1px 0 var(--link_color-underline);transition:box-shadow var(--animation-duration-medium) ease}a:any-link{text-decoration:none;color:inherit}@media (hover: hover){a:is(:hover,:focus){box-shadow:0 2px 0 var(--link_color-underline)}}a:has(>code){-webkit-box-decoration-break:clone;box-decoration-break:clone}a[data-code-reference=true]{border-radius:var(--border-radius-small)}:is(h2,h3,h4)>a[id]{--link_color-underline: transparent;--link_hash_opacity: 0;position:relative}:is(h2,h3,h4)>a[id]:before{position:absolute;content:"📎";font-size:.5em;text-align:center;font-weight:var(--font-weight-medium);top:.25px;height:100%;line-height:2.5em;left:calc(-1 * var(--layout-bleed-width));width:var(--layout-bleed-width);color:var(--color-primary-light);opacity:var(--link_hash_opacity);transition:opacity var(--animation-duration-short) ease-out}@media (hover: hover){:is(h2,h3,h4)>a[id]:is(:hover,:focus){--link_hash_opacity: 1}}:is(h2,h3,h4)>a[id]:target{--link_hash_opacity: 1}a[data-skip-link]{--link_color-underline: transparent;position:absolute;overflow:hidden;clip-path:polygon(0 0,0 0,0 0,0 0);height:1px;width:1px;margin:-1px;padding:0;border:0}a[data-skip-link]:focus{clip-path:none;padding:var(--spacing-6) var(--spacing-8);font-size:var(--font-md);z-index:1000;width:auto;height:auto;left:50%;transform:translate(-50%)}:is(pre,code,kbd){font-family:Roboto Mono,Menlo,Consolas,monospace;font-size:var(--font-sm);background:var(--color-code-background);letter-spacing:-.205px}:is(pre,code,kbd) *{font-family:inherit}code,kbd{-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:var(--spacing-1) var(--spacing-2);border-radius:var(--border-radius-small)}:not(:is(h1,h2,h3,h4))>a>code{padding-block-end:0;border-bottom-left-radius:0;border-bottom-right-radius:0}:is(h1,h2,h3,h4) code{font-size:.875em;font-weight:var(--font-weight-medium);padding-inline:var(--spacing-4);padding-block:0}pre{position:relative;padding:var(--spacing-12) var(--layout-bleed-width);overflow:auto;white-space:pre-wrap;-webkit-hyphens:none;hyphens:none;tab-size:2;line-height:var(--line-height-normal)}pre::-webkit-scrollbar{display:none}pre[data-code-language],pre[data-code-title]{padding-block-start:var(--spacing-24)}pre[data-code-language]:before,pre[data-code-title]:before{position:absolute;display:block;top:var(--spacing-8);left:var(--layout-bleed-width);font-family:Inter,Helvetica,sans-serif;font-size:var(--font-sm);font-weight:var(--font-weight-strong);content:attr(data-code-language)}pre[data-code-language][data-code-title]:before{content:attr(data-code-title) " (" attr(data-code-language) ")"}pre:not(data-code-language)[data-code-title]:before{content:attr(data-code-title)}main>article>pre:has(+pre){border-bottom-left-radius:0;border-bottom-right-radius:0}main>article>pre+pre{margin-block-start:calc(-1 * var(--layout-row-spacing, 0));border-top-left-radius:0;border-top-right-radius:0}button,input,select,textarea{font-family:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;padding:0}button{-webkit-appearance:button;background-color:transparent;background-image:none;cursor:pointer}:disabled{cursor:default}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}[type=search]::-webkit-input-placeholder{font-family:Inter,Helvetica,sans-serif}[type=search]::-moz-placeholder{font-family:Inter,Helvetica,sans-serif}input,input::placeholder,textarea::placeholder{color:inherit}textarea{resize:vertical}label{cursor:pointer}table{border-spacing:0;border-collapse:collapse;width:100%}th{font-weight:var(--font-weight-strong)}td,th{text-align:center;border-width:var(--border-width-thin);border-color:var(--color-border-light);padding:var(--table_spacing, var(--spacing-2))}.table-wrapper{width:100%;overflow-x:auto;overflow-y:hidden;--scrollbar_size: 8px;--table_spacing: var(--spacing-2);border-width:var(--border-width-medium);border-color:var(--color-border-light)}.table-wrapper table{clip-path:polygon(var(--table_spacing) var(--table_spacing),calc(100% - var(--table_spacing)) var(--table_spacing),calc(100% - var(--table_spacing)) calc(100% - var(--table_spacing)),var(--table_spacing) calc(100% - var(--table_spacing)))}::-webkit-scrollbar{background-color:transparent;width:var(--scrollbar_size, 8px);height:var(--scrollbar_size, 8px)}::-webkit-scrollbar-track{margin:var(--scrollbar_margin, 0)}::-webkit-scrollbar-thumb{background-color:var(--scrollbar_color-knob, var(--color-scrollbar-knob));border-radius:var(--scrollbar_size);border:var(--scrollbar_border, none)}@media (hover: hover){::-webkit-scrollbar-thumb:hover{background-color:var(-scrollbar_color-knob-active, var(--color-scrollbar-knob-active))}}body{scrollbar-gutter:stable both-edges;--scrollbar_size: 12px;--scrollbar_border: 2px solid var(--color-background)}body[data-scroll-lock=true]{overflow-y:hidden}img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}main>article>h1+img{width:100%;aspect-ratio:2;object-fit:cover}@media (hover: hover) and (prefers-reduced-motion: no-preference){main>article>h1+img{transition:filter 1.5s ease;transition-delay:1.5s}main>article>h1+img:hover{filter:saturate(200%)}}html{--layout-main-column-width: 800px;--layout-bleed-width: 24px;--layout-row-spacing: var(--spacing-12);--layout-area-spacing: calc(2 * var(--layout-row-spacing));--layout-border-radius: var(--border-radius-medium);scroll-padding-top:var(--layout-row-spacing)}@media (max-width: 50rem){html{--layout-border-radius: 0;--layout-row-spacing: var(--spacing-8)}}body{display:grid;grid-template-columns:minmax(0,1fr) minmax(auto,var(--layout-main-column-width)) minmax(0,1fr);grid-template-areas:"header header header" "left center right" "footer footer footer";row-gap:var(--layout-area-spacing)}main{grid-area:center}main>article{display:grid;grid-template-columns:var(--layout-bleed-width) 1fr var(--layout-bleed-width);row-gap:var(--layout-row-spacing)}main>article>*{grid-column:2}main>article>pre,main>article>blockquote,main>article>img,main>article>figure,main>article>details{grid-column:1/-1;border-radius:var(--layout-border-radius)}[data-area-gap]{padding-block-end:var(--layout-area-spacing)}.codepen-wrapper{width:100%}.codepen-wrapper>p{background:var(--color-background-light);padding-inline:var(--layout-bleed-width);padding-block:var(--spacing-6);border-radius:var(--layout-border-radius);font-variation-settings:"slnt" -5}.codepen-wrapper>div{height:clamp(300px,50vh,600px)}.codepen-wrapper>div,.codepen-wrapper>div>iframe{border-radius:var(--layout-border-radius)}.sparkles{display:inline-block;position:relative}@media (prefers-reduced-motion: no-preference){.sparkles:before,.sparkles:after{content:"✨";position:absolute;top:.5em;font-size:.5em;line-height:1;animation:flicker 2.5s 3 forwards ease-in-out,travel-vertical 5s 3 forwards ease-in-out}.sparkles:before{left:-.5em}.sparkles:after{right:-.5em;animation-delay:1s,3.75s;opacity:0}}@keyframes flicker{0%{transform:scale(.95);opacity:0}50%{transform:scale(1);opacity:.95}to{transform:scale(.95);opacity:0}}@keyframes travel-vertical{0%{transform:translateY(1.5em)}49%{transform:translateY(1.5em)}50%{transform:translateY(0)}99%{transform:translateY(0)}to{transform:translateY(1.5em)}}.wave{cursor:default;display:inline-block;transform-origin:75% 80%;will-change:transform}@media (hover: hover) and (prefers-reduced-motion: no-preference){.wave:is(:hover,:focus){animation:wave var(--animation-duration-long) infinite alternate ease-in-out}}@keyframes wave{0%{transform:rotate(-5deg)}to{transform:rotate(15deg)}}nav[aria-label=Collections]{display:grid;grid-template-columns:var(--layout-bleed-width) 1fr var(--layout-bleed-width);margin-block-end:var(--layout-area-spacing)}nav[aria-label=Collections] ul{grid-column:2;gap:var(--spacing-8);display:flex;flex-wrap:wrap}@media (max-width: 35rem){nav[aria-label=Collections] ul{overflow-x:auto;flex-wrap:nowrap;grid-column:1/-1;padding-inline:var(--layout-bleed-width);padding-block-end:var(--spacing-4);--scrollbar_size: 2.5px;--scrollbar_border: none;--scrollbar_margin: 0 var(--spacing-24)}}nav[aria-label=Collections] li{flex:none}nav[aria-label=Collections] a{--link_color-underline: transparent;display:inline-flex;column-gap:var(--spacing-2);padding:var(--spacing-6) var(--spacing-8);border-radius:var(--border-radius-medium);background:var(--color-background-light);line-height:var(--line-height-tight);font-weight:var(--font-weight-medium);will-change:transform;transition:color var(--animation-duration-medium) ease,transform var(--animation-duration-medium) ease}nav[aria-label=Collections] a:is([data-selected=true]){color:var(--color-primary)}@media (hover: hover){nav[aria-label=Collections] a:not(:is([data-selected=true])):is(:hover,:focus){color:var(--color-primary)}}@media (hover: hover) and (prefers-reduced-motion: no-preference){nav[aria-label=Collections] a:not(:is([data-selected=true])):is(:hover,:focus){transform:translateY(-2px);box-shadow:0 2px 0 transparent}nav[aria-label=Collections] a:not(:is([data-selected=true])):is(:hover,:focus) svg{animation:arrow-pull .75s ease 2}}@keyframes arrow-pull{0%{transform:translate(0)}50%{transform:translate(2px)}to{transform:translate(0)}}header{grid-area:header;display:grid;grid-template-columns:minmax(var(--layout-bleed-width),1fr) repeat(2,min(var(--layout-main-column-width) / 2,50% - var(--layout-bleed-width))) minmax(var(--layout-bleed-width),1fr);padding-block:var(--spacing-10)}header h1{grid-column:2;justify-self:start}header h1 img{width:8.75rem}header nav{grid-column:3;display:flex;align-items:center;justify-content:flex-end;color:var(--color-text-lighter)}header nav :is(a,button){--link_color-underline: transparent;display:inline-block;flex-shrink:0;padding:var(--spacing-6);border-radius:var(--border-radius-small);transition:color var(--animation-duration-medium) ease}header nav :is(a,button) svg{transition:scale var(--animation-duration-short) ease;transition-delay:.1s}@media (hover: hover){header nav :is(a,button):is(:hover,:focus){color:var(--color-text)}}@media (hover: hover) and (prefers-reduced-motion: no-preference){header nav :is(a,button):is(:hover,:focus) svg{scale:1.2;transition-delay:0ms}}@media (max-width: 25rem){header nav a{position:absolute;overflow:hidden;clip-path:polygon(0 0,0 0,0 0,0 0);height:1px;width:1px;margin:-1px;padding:0;border:0}}header nav[data-nav-action-container]{--nav-action-opacity: 0;--nav-action-transform-y: 70%}header nav [data-nav-action]:before{display:block;position:absolute;content:var(--nav-action-hotkey);opacity:var(--nav-action-opacity);font-family:Roboto Mono,Menlo,Consolas,monospace;font-size:var(--font-xs);background:var(--color-code-background);border-radius:var(--border-radius-small);width:1rem;height:1rem;line-height:1rem;text-align:center;border:var(--border-width-hairline) solid var(--color-border-light);border-bottom-width:var(--border-width-thin);transform:translate(10%,var(--nav-action-transform-y));transition:opacity var(--animation-duration-short) ease,transform var(--animation-duration-short) ease}header nav [data-nav-action]:hover:before{--nav-action-opacity: 0;--nav-action-transform-y: 150%}header nav [data-nav-action=home]{--nav-action-hotkey: "H"}header nav [data-nav-action=collections]{--nav-action-hotkey: "J"}header nav [data-nav-action=search]{--nav-action-hotkey: "K"}@media (pointer: fine) and (scripting: enabled) and (hover: hover){header nav[data-nav-action-container][data-nav-actions-shown]{--nav-action-opacity: 1;--nav-action-transform-y: 85%}}footer{grid-area:footer;display:grid;grid-template-columns:minmax(var(--layout-bleed-width),1fr) min((var(--layout-main-column-width)),100% - 2 * var(--layout-bleed-width)) minmax(var(--layout-bleed-width),1fr);padding-block:var(--spacing-8) var(--spacing-20)}footer div{grid-column:2;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--spacing-16) var(--spacing-24);padding-block-start:var(--spacing-12);border-block-start:var(--border-width-hairline) solid var(--color-border)}footer p{flex-basis:20rem;flex-grow:1;max-width:25rem;text-wrap:pretty}footer nav{display:flex;flex-direction:column;row-gap:var(--spacing-6);justify-content:space-between;flex-grow:.25;--footer_sitemap-column-count: 2}@media (max-width: 40rem){footer nav{--footer_sitemap-column-count: 3;flex-grow:0}}footer p,footer ul{font-size:var(--font-sm)}footer ul{columns:var(--footer_sitemap-column-count);column-gap:var(--spacing-12)}footer a{--link_color-underline: transparent;--link_color-hover: var(--color-primary);--link_animation-duration: var(--animation-duration-medium);transition:color var(--link_animation-duration) ease}@media (hover: hover){footer a:is(:hover,:focus){color:var(--link_color-hover)}}footer small{flex-basis:100%;font-size:var(--font-xs);color:var(--color-text-lighter);text-align:center}footer small a{--link_color-hover: var(--color-text);--link_animation-duration: var(--animation-duration-short)}nav[aria-label=Breadcrumb]{display:grid;grid-template-columns:var(--layout-bleed-width) 1fr var(--layout-bleed-width);--breadcrumb_column-gap: var(--spacing-2)}nav[aria-label=Breadcrumb] ol{grid-column:2;display:flex;color:var(--color-text-light);column-gap:var(--breadcrumb_column-gap);font-size:var(--font-sm);flex-wrap:wrap;margin-block-end:var(--spacing-8)}@media (hover: hover){nav[aria-label=Breadcrumb] ol:has(a:is(:hover,:focus)){color:var(--color-text-lighter)}}nav[aria-label=Breadcrumb] li{display:flex;column-gap:var(--breadcrumb_column-gap)}nav[aria-label=Breadcrumb] li:has([aria-current=page]){position:absolute;overflow:hidden;clip-path:polygon(0 0,0 0,0 0,0 0);height:1px;width:1px;margin:-1px;padding:0;border:0}@media (max-width: 25rem){nav[aria-label=Breadcrumb] li:first-child{position:absolute;overflow:hidden;clip-path:polygon(0 0,0 0,0 0,0 0);height:1px;width:1px;margin:-1px;padding:0;border:0}}nav[aria-label=Breadcrumb] svg{transition:color var(--animation-duration-medium) ease}nav[aria-label=Breadcrumb] a{--link_color-underline: transparent;transition:color var(--animation-duration-medium) ease}@media (hover: hover){nav[aria-label=Breadcrumb] a:is(:hover,:focus){color:var(--color-text)}}.hero{display:flex;column-gap:var(--spacing-20);row-gap:var(--spacing-12);align-items:center;padding-inline:var(--layout-bleed-width);margin-block-end:var(--layout-area-spacing)}.hero h1,.hero h2{margin-block-end:var(--spacing-8)}.hero p{text-wrap:balance}.hero p+p{margin-block-start:var(--spacing-4)}.hero img{border-radius:var(--border-radius-medium);height:240px;aspect-ratio:1;object-fit:cover}@media (hover: hover) and (prefers-reduced-motion: no-preference){.hero img{transition:filter 1.5s ease;transition-delay:1.5s}.hero img:hover{filter:saturate(200%)}}.hero footer{display:block;padding-block:var(--spacing-8) 0;color:var(--color-text-lighter);font-size:var(--font-sm)}.hero footer>a{--link_color-underline: transparent;display:inline-block;transition:color var(--animation-duration-short) ease}@media (hover: hover){.hero footer>a:is(:hover,:focus){color:var(--color-text)}}@media (max-width: 40rem){.hero{flex-direction:column}.hero img{order:-1}.hero h1,.hero h2,.hero p{text-align:center}}.preview-list{display:grid;grid-template-columns:var(--layout-bleed-width) 1fr var(--layout-bleed-width);margin-block-start:var(--layout-row-spacing)}.preview-list>*{grid-column:2}.preview-list h2{margin-block-end:var(--spacing-16)}.preview-list ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));align-items:start;column-gap:var(--spacing-16);row-gap:var(--spacing-24)}.preview-list:has(nav)>ul{margin-block-end:var(--layout-area-spacing)}.preview-list li{position:relative;container:preview/inline-size;display:flex;flex-wrap:wrap;row-gap:var(--spacing-8);column-gap:var(--spacing-12);align-items:center}.preview-list li a:before{content:"";position:absolute;inset:0}@media (hover: hover){.preview-list li:has(a:is(:hover,:focus)) h3{color:var(--color-primary-light)}}@media (hover: hover) and (prefers-reduced-motion: no-preference){.preview-list li:has(a:is(:hover,:focus)) img{filter:brightness(110%) saturate(125%);transform:scale(1.01)}}.preview-list article{display:flex;flex-direction:column;row-gap:var(--spacing-4)}.preview-list img{border-radius:var(--border-radius-medium);aspect-ratio:2;object-fit:cover;will-change:transform;transition:filter var(--animation-duration-long) ease,transform var(--animation-duration-medium) ease}.preview-list[data-large-images=true] img{aspect-ratio:1.5}.preview-list[data-single-column=true] ul{grid-template-columns:1fr}.preview-list a{--link_color-underline: transparent}.preview-list small{color:var(--color-text-lighter)}.preview-list h3{font-weight:var(--font-weight-medium);transition:color var(--animation-duration-medium) ease}@container preview (min-width: 23rem){.preview-list img{width:30cqi;height:30cqi;aspect-ratio:1}.preview-list article{flex:1 1 0}.preview-list p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}}main>article>footer{grid-row:auto;display:block;padding:0;color:var(--color-text-lighter);margin-block-end:var(--layout-area-spacing)}main>article>footer p{font-size:var(--font-sm);text-align:right;max-width:unset}main>article>footer p time{display:inline-block}main>article>footer p>*:is(a,span){display:block}@media (min-width: 28rem){main>article>footer p>a{display:inline}main>article>footer p>a:before{content:"·";padding-inline-end:var(--spacing-2)}}@media (min-width: 38rem){main>article>footer p>span{display:inline}main>article>footer p>span:before{content:"·"}}main>article>footer a{--link_color-underline: transparent;display:inline-block;transition:color var(--animation-duration-short) ease}@media (hover: hover){main>article>footer a:is(:hover,:focus){color:var(--color-text)}}nav[aria-label=Pagination],figcaption[aria-label="Replay steps"]{--pagination_middle-column-width: 1fr;display:grid;grid-template-columns:1fr var(--pagination_middle-column-width) 1fr;gap:var(--spacing-8)}nav[aria-label=Pagination]>a,nav[aria-label=Pagination]>button,figcaption[aria-label="Replay steps"]>a,figcaption[aria-label="Replay steps"]>button{--link_color-underline: transparent;min-width:120px;border-radius:var(--border-radius-medium);font-weight:var(--font-weight-medium);padding:var(--spacing-6);line-height:1;background:var(--color-background-light);display:inline-flex;align-items:center;column-gap:var(--spacing-2);justify-content:center;justify-self:center;will-change:transform;transition:color var(--animation-duration-medium) ease}@media (hover: hover){nav[aria-label=Pagination]>a:is(:hover,:focus),nav[aria-label=Pagination]>button:is(:hover,:focus),figcaption[aria-label="Replay steps"]>a:is(:hover,:focus),figcaption[aria-label="Replay steps"]>button:is(:hover,:focus){color:var(--color-primary)}}@media (hover: hover) and (prefers-reduced-motion: no-preference){nav[aria-label=Pagination]>a:is(:hover,:focus)[rel=next] svg,nav[aria-label=Pagination]>button:is(:hover,:focus)[rel=next] svg,figcaption[aria-label="Replay steps"]>a:is(:hover,:focus)[rel=next] svg,figcaption[aria-label="Replay steps"]>button:is(:hover,:focus)[rel=next] svg{transform:translate(2px)}nav[aria-label=Pagination]>a:is(:hover,:focus)[rel=prev] svg,nav[aria-label=Pagination]>button:is(:hover,:focus)[rel=prev] svg,figcaption[aria-label="Replay steps"]>a:is(:hover,:focus)[rel=prev] svg,figcaption[aria-label="Replay steps"]>button:is(:hover,:focus)[rel=prev] svg{transform:translate(-2px)}}nav[aria-label=Pagination]>a[aria-disabled=true],nav[aria-label=Pagination]>button[aria-disabled=true],figcaption[aria-label="Replay steps"]>a[aria-disabled=true],figcaption[aria-label="Replay steps"]>button[aria-disabled=true]{color:var(--color-text-lighter);pointer-events:none}nav[aria-label=Pagination]>a[aria-disabled=true] svg,nav[aria-label=Pagination]>button[aria-disabled=true] svg,figcaption[aria-label="Replay steps"]>a[aria-disabled=true] svg,figcaption[aria-label="Replay steps"]>button[aria-disabled=true] svg{display:none}nav[aria-label=Pagination]>a[rel=prev],nav[aria-label=Pagination]>button[rel=prev],figcaption[aria-label="Replay steps"]>a[rel=prev],figcaption[aria-label="Replay steps"]>button[rel=prev]{grid-column:1}nav[aria-label=Pagination]>a[rel=prev]:not([aria-disabled=true]),nav[aria-label=Pagination]>button[rel=prev]:not([aria-disabled=true]),figcaption[aria-label="Replay steps"]>a[rel=prev]:not([aria-disabled=true]),figcaption[aria-label="Replay steps"]>button[rel=prev]:not([aria-disabled=true]){padding-inline-end:var(--spacing-10)}nav[aria-label=Pagination]>a[rel=next],nav[aria-label=Pagination]>button[rel=next],figcaption[aria-label="Replay steps"]>a[rel=next],figcaption[aria-label="Replay steps"]>button[rel=next]{grid-column:-2}nav[aria-label=Pagination] svg.icon,figcaption[aria-label="Replay steps"] svg.icon{display:inline;flex-shrink:0;transition:transform var(--animation-duration-medium) ease}nav[aria-label=Pagination] p,figcaption[aria-label="Replay steps"] p{font-size:var(--font-xs);color:var(--color-text-light);grid-column:2;grid-row:1;text-align:center;align-self:center;line-height:var(--line-height-normal)}nav[aria-label=Pagination] p a,figcaption[aria-label="Replay steps"] p a{--link_color-underline: transparent;transition:color var(--animation-duration-short) ease}@media (hover: hover){nav[aria-label=Pagination] p a:is(:hover,:focus),figcaption[aria-label="Replay steps"] p a:is(:hover,:focus){color:var(--color-text)}}nav[aria-label=Pagination] p a,nav[aria-label=Pagination] p span,figcaption[aria-label="Replay steps"] p a,figcaption[aria-label="Replay steps"] p span{display:inline-block}@media (max-width: 30rem){nav[aria-label=Pagination],figcaption[aria-label="Replay steps"]{--pagination_middle-column-width: 0}nav[aria-label=Pagination] a[rel=prev],figcaption[aria-label="Replay steps"] a[rel=prev]{justify-self:end}nav[aria-label=Pagination] a[rel=next],figcaption[aria-label="Replay steps"] a[rel=next]{justify-self:start}nav[aria-label=Pagination] p,figcaption[aria-label="Replay steps"] p{grid-column:1/-1;grid-row:2}}main>article+nav{margin-block-end:var(--layout-area-spacing)}figcaption[aria-label="Replay steps"]{margin-block-start:var(--spacing-8)}figcaption[aria-label="Replay steps"] p{font-size:var(--font-sm)}@media (max-width: 30rem){figcaption[aria-label="Replay steps"]{--pagination_middle-column-width: 1fr}figcaption[aria-label="Replay steps"] p{grid-column:2;grid-row:1}}dialog{padding:0;background:var(--color-background-light);color:var(--color-text);width:100%;max-width:600px;--search_margin-block-start: 200px;--search_margin-block-end: 200px;margin:var(--search_margin-block-start) auto var(--search_margin-block-end);border-radius:var(--border-radius-medium);--search_input-height: 60px}@media (max-width: 37.5rem){dialog{--search_margin-block-start: 100px;--search_margin-block-end: 0px;border-radius:0}}@media (prefers-reduced-motion: no-preference){dialog{animation:dialog-in var(--animation-duration-medium) ease-out}}dialog search{display:grid;grid-template-columns:var(--spacing-8) 1.25rem auto 2rem var(--spacing-8);grid-template-rows:var(--search_input-height) auto;align-items:center}dialog search>svg.icon:first-of-type{grid-column:2}dialog [type=search]{background:transparent;outline:0;font-size:var(--font-md);line-height:var(--line-height-normal);margin:var(--spacing-6) var(--spacing-4)}dialog [type=search]:focus~output{border-color:var(--color-primary-light)}dialog button{transition:color var(--animation-duration-short) ease}@media (hover: hover){dialog button:is(:hover,:focus){color:var(--color-primary)}}dialog output{grid-column:1/-1;padding:var(--spacing-8) calc(var(--spacing-8) - var(--scrollbar_size, 0)) var(--spacing-8) var(--spacing-8);max-height:calc(100vh - var(--search_margin-block-start) - var(--search_margin-block-end) - var(--search_input-height));border-block-start:var(--border-width-thin) solid var(--color-border);transition:border-color var(--animation-duration-medium) ease;overflow-x:auto;display:flex;flex-direction:column;row-gap:var(--spacing-4);--scrollbar_size: 8px;--scrollbar_border: 2px solid var(--color-background-light);--scrollbar_color-knob: var(--color-scrollbar-knob-active)}dialog output::-webkit-scrollbar-track{margin:var(--spacing-4) 0}dialog output h2{font-weight:var(--font-weight-medium);font-size:var(--font-sm);color:var(--color-text-light)}dialog output ul{display:flex;flex-direction:column;row-gap:var(--spacing-4)}dialog output ul:not(:last-child){margin-block-end:var(--spacing-8)}dialog output a{display:flex;align-items:baseline;justify-content:space-between;line-height:var(--line-height-normal);column-gap:var(--spacing-8);padding:var(--spacing-2) 0;--link_color-underline: transparent;transition:color var(--animation-duration-medium) ease}dialog output a small{font-size:var(--font-sm);color:var(--color-text-light)}@media (hover: hover){dialog output a:is(:hover,:focus){color:var(--color-primary-light)}dialog output a:is(:hover,:focus)>small{color:var(--color-primary-light)}}dialog output p{padding-block:var(--spacing-4);text-wrap:pretty}@keyframes dialog-in{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}nav[aria-label="Table of contents"]{grid-area:left;display:block;padding:112px var(--spacing-24) var(--spacing-20) var(--spacing-12)}@media (max-width: 83rem){nav[aria-label="Table of contents"]{display:none}}nav[aria-label="Table of contents"] div{position:sticky;top:var(--spacing-24);display:grid;grid-template-columns:minmax(0,1fr) minmax(auto,17.5rem);grid-template-rows:auto;row-gap:var(--spacing-10)}nav[aria-label="Table of contents"] div>*{grid-column:2}nav[aria-label="Table of contents"] h2{font-size:var(--font-xl);font-weight:var(--font-weight-medium);color:var(--color-text)}nav[aria-label="Table of contents"] ol{display:flex;flex-direction:column;gap:var(--spacing-4)}nav[aria-label="Table of contents"] ol ol{padding-inline-start:var(--spacing-6);padding-block:var(--spacing-2)}nav[aria-label="Table of contents"] li{font-size:var(--font-sm);line-height:var(--line-height-normal);color:var(--color-text-light);text-wrap:wrap}nav[aria-label="Table of contents"] a{--link_color-underline: transparent;transition:color var(--animation-duration-medium) ease}@media (hover: hover){nav[aria-label="Table of contents"] a:is(:hover,:focus){color:var(--color-primary-light)}}details summary{display:flex;align-items:center;gap:var(--spacing-6);font-size:var(--font-md);font-weight:var(--font-weight-medium);cursor:pointer;transition:color var(--animation-duration-medium) ease}@media (hover: hover){details summary:is(:hover,:focus){color:var(--color-primary-light)}}details summary:before{display:inline-block;content:"▶";font-size:.75em;transition:transform var(--animation-duration-medium) ease}@media (max-width: 52rem){details summary{gap:var(--spacing-4)}details summary:before{margin-left:var(--spacing-6)}}details summary::marker{display:none;content:""}details summary::-webkit-details-marker{display:none}details>:not(summary){margin-inline:var(--layout-bleed-width)}@media (max-width: 52rem){details>:not(summary){margin-inline:0}}details>pre,details>blockquote,details>img,details>figure{border-radius:var(--layout-border-radius)}details[open] summary{margin-block-end:var(--spacing-4)}details[open] summary:before{transform:rotate(90deg)}.announcement{display:flex;column-gap:var(--spacing-20);row-gap:var(--spacing-12);align-items:center;justify-content:center;padding-inline:var(--layout-bleed-width);margin-block-end:var(--layout-row-spacing);margin-block-start:calc(-1 * (var(--layout-row-spacing) + var(--spacing-2)))}.announcement p{font-size:var(--font-sm);text-align:center}.announcement a{display:inline-block}} </style></head> <body> <a href="#skip-link-target" data-skip-link>Skip to content</a> <header aria-label="Main"> <h1> <a title="30 seconds of code" aria-label="30 seconds of code" href="/"> <img fetchpriority="high" src="/assets/30s-logo.png" alt="Home" width="140" height="48"> </a> </h1> <nav data-nav-action-container> <a href="/" data-nav-action="home"> <svg width="1.25rem" height="1.25rem" viewBox="0 0 128 128" fill="none" title="Home" aria-label="Home" class="icon"><g clip-path="url(#a)" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor"><path d="M16 42.667A5.333 5.333 0 0 1 21.333 48v58.667A5.333 5.333 0 0 0 26.667 112h74.666a5.336 5.336 0 0 0 5.334-5.333V48a5.333 5.333 0 0 1 10.666 0v58.667a15.998 15.998 0 0 1-16 16H26.667a15.999 15.999 0 0 1-16-16V48A5.333 5.333 0 0 1 16 42.667Z"></path><path d="M42.667 64A5.333 5.333 0 0 1 48 58.667h32A5.333 5.333 0 0 1 85.333 64v53.333a5.334 5.334 0 1 1-10.666 0v-48H53.333v48a5.334 5.334 0 1 1-10.666 0V64Z"></path><path d="M60.623 1.206a5.333 5.333 0 0 1 6.754 0l58.667 48a5.333 5.333 0 1 1-6.754 8.255L64 12.224 8.71 57.461a5.333 5.333 0 0 1-6.754-8.255l58.667-48Z"></path></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h128v128H0z"></path></clipPath></defs></svg> </a> <a href="/collections/p/1" data-nav-action="collections"> <svg width="1.25rem" height="1.25rem" viewBox="0 0 128 128" fill="none" title="Collections" aria-label="Collections" class="icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M21 94.25c0-2.9 2.35-5.25 5.25-5.25h4.5a5.25 5.25 0 1 1 0 10.5h-4.5A5.25 5.25 0 0 1 21 94.25ZM46 94.25c0-2.9 2.35-5.25 5.25-5.25h49.5a5.25 5.25 0 0 1 0 10.5h-49.5A5.25 5.25 0 0 1 46 94.25ZM21 64.25c0-2.9 2.35-5.25 5.25-5.25h4.5a5.25 5.25 0 1 1 0 10.5h-4.5A5.25 5.25 0 0 1 21 64.25ZM46 64.25c0-2.9 2.35-5.25 5.25-5.25h49.5a5.25 5.25 0 0 1 0 10.5h-49.5A5.25 5.25 0 0 1 46 64.25ZM21 34.25c0-2.9 2.35-5.25 5.25-5.25h4.5a5.25 5.25 0 1 1 0 10.5h-4.5A5.25 5.25 0 0 1 21 34.25ZM46 34.25c0-2.9 2.35-5.25 5.25-5.25h49.5a5.25 5.25 0 0 1 0 10.5h-49.5A5.25 5.25 0 0 1 46 34.25Z" fill="currentColor"></path></svg> </a> <button data-open-modal="omnisearch" data-nav-action="search"> <svg width="1.25rem" height="1.25rem" viewBox="0 0 128 128" fill="none" title="Search" aria-label="Search" class="icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M53.333 18.667c-19.145 0-34.666 15.52-34.666 34.666C18.667 72.48 34.187 88 53.333 88 72.48 88 88 72.48 88 53.333c0-19.145-15.52-34.666-34.667-34.666ZM8 53.333C8 28.296 28.296 8 53.333 8s45.334 20.296 45.334 45.333S78.37 98.667 53.333 98.667C28.296 98.667 8 78.37 8 53.333Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M84.229 82.362a5.333 5.333 0 0 1 7.542 0l24 24a5.334 5.334 0 0 1-7.542 7.543l-24-24a5.333 5.333 0 0 1 0-7.543Z" fill="currentColor"></path></svg> </button> <a href="https://github.com/Chalarangelo/30-seconds-of-code" target="_blank" rel="noopener noreferrer"> <svg width="1.25rem" height="1.25rem" viewBox="0 0 128 128" fill="none" title="GitHub" aria-label="GitHub" class="icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.493 89.373a5.333 5.333 0 0 1 6.467-3.88c4.351 1.087 7.266 4.019 9.35 6.465a94.373 94.373 0 0 1 2.21 2.735c.273.346.536.68.784.99.952 1.193 1.847 2.258 2.8 3.212 1.848 1.848 3.84 3.2 6.528 3.829 2.757.645 6.775.652 12.836-1.166a5.334 5.334 0 0 1 3.064 10.217c-7.273 2.182-13.254 2.523-18.33 1.335-5.146-1.205-8.821-3.853-11.64-6.672-1.38-1.38-2.568-2.814-3.595-4.1a207.96 207.96 0 0 1-.969-1.225c-.642-.815-1.204-1.53-1.808-2.238-1.75-2.054-2.835-2.789-3.817-3.034a5.333 5.333 0 0 1-3.88-6.468Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M114.667 45.44A5.333 5.333 0 0 1 120 50.773c0 15.714-4.807 26.253-12.794 32.969-5.367 4.513-11.779 6.953-18.1 8.346a23.306 23.306 0 0 1 1.561 10.134v20.445a5.333 5.333 0 0 1-10.667 0v-20.64c0-.14.005-.279.016-.419a12.639 12.639 0 0 0-3.525-9.789 5.333 5.333 0 0 1 3.238-9.013c8.074-.9 15.353-2.806 20.612-7.228 4.999-4.204 8.992-11.398 8.992-24.805a5.334 5.334 0 0 1 5.334-5.333Zm-96 .16A5.333 5.333 0 0 1 24 50.933c0 13.283 3.983 20.432 8.992 24.645 5.278 4.438 12.578 6.39 20.679 7.396a5.333 5.333 0 0 1 3.175 9.002 12.64 12.64 0 0 0-3.526 9.676c.009.125.013.25.013.375v20.64a5.333 5.333 0 0 1-10.666 0v-20.465a23.306 23.306 0 0 1 1.597-10.028c-6.331-1.444-12.76-3.911-18.136-8.432-7.977-6.707-12.795-17.185-12.795-32.809a5.333 5.333 0 0 1 5.334-5.333ZM33.27 5.747c4.185.929 10.007 3.226 17.7 8.383a5.333 5.333 0 1 1-5.94 8.86c-6.867-4.603-11.471-6.253-14.073-6.83l-.04-.009a21.707 21.707 0 0 0 .746 12.758 5.333 5.333 0 1 1-9.993 3.73 32.373 32.373 0 0 1 .575-24.073 5.334 5.334 0 0 1 3.385-3.012l1.517 5.113C25.63 5.554 25.635 5.552 25.64 5.55l.01-.003.022-.006.045-.013.097-.026a8.832 8.832 0 0 1 .791-.163c.432-.07.966-.125 1.606-.143 1.281-.035 2.96.085 5.058.55ZM107.693 5.55c.005.002.01.004-1.506 5.117l1.516-5.113a5.335 5.335 0 0 1 3.386 3.012 32.375 32.375 0 0 1 .574 24.072 5.333 5.333 0 1 1-9.993-3.73 21.7 21.7 0 0 0 .746-12.757l-.04.009c-2.601.577-7.206 2.227-14.073 6.83a5.333 5.333 0 0 1-5.94-8.86c7.694-5.157 13.516-7.454 17.701-8.383 2.098-.466 3.777-.586 5.059-.55.639.017 1.173.073 1.605.142a8.933 8.933 0 0 1 .791.163l.097.026.045.013.021.006.011.003Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M46.605 13.412a76.693 76.693 0 0 1 40.123 0 5.333 5.333 0 1 1-2.79 10.296 66.028 66.028 0 0 0-34.543 0 5.333 5.333 0 1 1-2.79-10.296ZM30.344 26.91a5.333 5.333 0 0 1 .185 7.54A23.68 23.68 0 0 0 24 50.906a5.333 5.333 0 0 1-10.666.057 34.347 34.347 0 0 1 9.471-23.866 5.333 5.333 0 0 1 7.54-.185Zm72.645 0a5.333 5.333 0 0 1 7.54.186A34.345 34.345 0 0 1 120 50.772a5.333 5.333 0 1 1-10.667.002 23.681 23.681 0 0 0-6.529-16.323 5.334 5.334 0 0 1 .185-7.54Z" fill="currentColor"></path></svg> </a> </nav> </header> <script type="module">const t={isMac:navigator.userAgent.toLowerCase().includes("mac"),navActionContainer:document.querySelector("[data-nav-action-container]"),navActionTriggers:{home:document.querySelector('[data-nav-action="home"]'),collections:document.querySelector('[data-nav-action="collections"]'),omnisearch:document.querySelector('[data-nav-action="search"]')},omnisearchDialog:document.querySelector('[data-modal="omnisearch"]'),navActionMap:{k:"omnisearch",j:"collections",h:"home"},handleKeyDown(e){const n=this.isMac?e.metaKey:e.ctrlKey,o=this.omnisearchDialog.open;!o&&n&&Object.keys(this.navActionMap).includes(e.key)?(this.hideHotkeys(),e.preventDefault(),this.triggerAction(this.navActionMap[e.key])):n&&!o?this.showHotkeys():this.hideHotkeys()},handleKeyUp(e){(this.isMac?e.key==="Meta":e.key==="Control")&&this.hideHotkeys()},triggerAction(e){this.navActionTriggers[e].click()},showHotkeys(){this.navActionContainer.dataset.navActionsShown=""},hideHotkeys(){delete this.navActionContainer.dataset.navActionsShown}};document.addEventListener("keydown",t.handleKeyDown.bind(t));document.addEventListener("keyup",t.handleKeyUp.bind(t));</script> <div id="skip-link-target"></div> <main> <section class="hero"> <div> <h1>CSS Articles</h1> <p>The CSS article collection contains utilities and interactive examples for CSS3. It includes modern techniques for creating commonly-used layouts, styling and animating elements, as well as articles for handling user interactions.</p> </div> <img src="/assets/splash/camera-600.webp" srcset="/assets/splash/camera-600.webp 600w,/assets/splash/camera-400.webp 400w" alt="" height="240" width="240" fetchpriority="high"> </section> <nav aria-label="Collections"> <ul> <li> <a href="/css/p/1" data-selected="true"> All </a> </li><li> <a href="/css/animation/p/1" data-selected="false"> Animation </a> </li><li> <a href="/css/interactivity/p/1" data-selected="false"> Interactivity </a> </li><li> <a href="/css/layout/p/1" data-selected="false"> Layout </a> </li><li> <a href="/css/visual/p/1" data-selected="false"> Visual </a> </li> </ul> </nav> <section class="preview-list"> <ul> <li> <img src="/assets/cover/flower-portrait-5-400.webp" srcset="/assets/cover/flower-portrait-5-400.webp 400w,/assets/cover/flower-portrait-5-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> CSS · <time datetime="2024-09-05"> September 5, 2024 </time> </small> <h3> <a href="/css/s/horizontal-vertical-gallery">Image gallery with horizontal or vertical scroll</a> </h3> <p>Create a horizontally or vertically scrollable image gallery.</p> </article> </li><li> <img src="/assets/cover/interior-8-400.webp" srcset="/assets/cover/interior-8-400.webp 400w,/assets/cover/interior-8-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> CSS · <time datetime="2024-09-14"> September 14, 2024 </time> </small> <h3> <a href="/css/s/custom-checkbox-radio">Styling checkboxes and radio buttons</a> </h3> <p>Learn how to create customized and animated checkboxes and radio buttons with CSS.</p> </article> </li><li> <img src="/assets/cover/clouds-over-mountains-400.webp" srcset="/assets/cover/clouds-over-mountains-400.webp 400w,/assets/cover/clouds-over-mountains-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> CSS · <time datetime="2023-12-23"> December 23, 2023 </time> </small> <h3> <a href="/css/s/circular-progress-bar">How can I create a circular progress bar using only CSS?</a> </h3> <p>Circular progress bars are fairly common in the web. Luckily, some new CSS features make it easier than ever to create them.</p> </article> </li><li> <img src="/assets/cover/clouds-n-mountains-400.webp" srcset="/assets/cover/clouds-n-mountains-400.webp 400w,/assets/cover/clouds-n-mountains-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> CSS · <time datetime="2024-09-11"> September 11, 2024 </time> </small> <h3> <a href="/css/s/card-hover-effects">Card hover effects</a> </h3> <p>Create cards with hover effects, such as rotating, shifting and perspective transforms.</p> </article> </li><li> <img src="/assets/cover/italian-horizon-400.webp" srcset="/assets/cover/italian-horizon-400.webp 400w,/assets/cover/italian-horizon-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> CSS · <time datetime="2024-09-12"> September 12, 2024 </time> </small> <h3> <a href="/css/s/alternating-text">Alternating text animations</a> </h3> <p>Ever wondered how those alternating text animations work? Here's a simple way to create one using CSS and JavaScript.</p> </article> </li><li> <img src="/assets/cover/tram-car-400.webp" srcset="/assets/cover/tram-car-400.webp 400w,/assets/cover/tram-car-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> CSS · <time datetime="2024-08-23"> August 23, 2024 </time> </small> <h3> <a href="/css/s/mouse-cursor-gradient-tracking">Mouse cursor gradient tracking</a> </h3> <p>Create a hover effect where the gradient follows the mouse cursor, with CSS and a little bit of JavaScript.</p> </article> </li><li> <img src="/assets/cover/architectural-400.webp" srcset="/assets/cover/architectural-400.webp 400w,/assets/cover/architectural-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> CSS · <time datetime="2024-09-20"> September 20, 2024 </time> </small> <h3> <a href="/css/s/image-overlay-hover">Image overlay on hover</a> </h3> <p>Learn how to display an image overlay effect on hover using CSS.</p> </article> </li><li> <img src="/assets/cover/dreamy-flowers-400.webp" srcset="/assets/cover/dreamy-flowers-400.webp 400w,/assets/cover/dreamy-flowers-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> CSS · <time datetime="2024-09-15"> September 15, 2024 </time> </small> <h3> <a href="/css/s/squiggle-link-hover-effect">Squiggle link hover effect</a> </h3> <p>Create the most whimsical link hover effect with a squiggle animation.</p> </article> </li><li> <img src="/assets/cover/compass-400.webp" srcset="/assets/cover/compass-400.webp 400w,/assets/cover/compass-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> CSS · <time datetime="2024-09-24"> September 24, 2024 </time> </small> <h3> <a href="/css/s/image-hover-menu">Show menu on image hover</a> </h3> <p>Display a menu overlay when the user hovers over an image.</p> </article> </li><li> <img src="/assets/cover/dark-leaves-5-400.webp" srcset="/assets/cover/dark-leaves-5-400.webp 400w,/assets/cover/dark-leaves-5-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> CSS · <time datetime="2024-09-23"> September 23, 2024 </time> </small> <h3> <a href="/css/s/hover-additional-content">Reveal additional content on hover</a> </h3> <p>Learn how you can create a card that displays additional content on hover.</p> </article> </li><li> <img src="/assets/cover/aerial-view-port-400.webp" srcset="/assets/cover/aerial-view-port-400.webp 400w,/assets/cover/aerial-view-port-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> CSS · <time datetime="2024-09-01"> September 1, 2024 </time> </small> <h3> <a href="/css/s/staggered-animation">Staggered list animation</a> </h3> <p>Staggered animations can be used to create a more dynamic user experience. Get creative with your lists!</p> </article> </li><li> <img src="/assets/cover/italian-horizon-400.webp" srcset="/assets/cover/italian-horizon-400.webp 400w,/assets/cover/italian-horizon-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> CSS · <time datetime="2024-09-06"> September 6, 2024 </time> </small> <h3> <a href="/css/s/typewriter-effect">Typewriter effect</a> </h3> <p>Create a typewriter effect animation with CSS variables and just a sprinkle of JavaScript.</p> </article> </li><li> <img src="/assets/cover/digital-nomad-12-400.webp" srcset="/assets/cover/digital-nomad-12-400.webp 400w,/assets/cover/digital-nomad-12-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> CSS · <time datetime="2024-09-02"> September 2, 2024 </time> </small> <h3> <a href="/css/s/loaders">Animated CSS loaders</a> </h3> <p>Loading indicators are a staple of modern web design. Here are some CSS loaders to keep your users engaged while they wait.</p> </article> </li><li> <img src="/assets/cover/pop-of-green-400.webp" srcset="/assets/cover/pop-of-green-400.webp 400w,/assets/cover/pop-of-green-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> CSS · <time datetime="2024-08-29"> August 29, 2024 </time> </small> <h3> <a href="/css/s/floating-or-sticky-list-titles">List with floating or sticky section headings</a> </h3> <p>Learn how to create a list with floating or sticky headings for each section.</p> </article> </li><li> <img src="/assets/cover/green-css-400.webp" srcset="/assets/cover/green-css-400.webp 400w,/assets/cover/green-css-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> CSS · <time datetime="2023-05-21"> May 21, 2023 </time> </small> <h3> <a href="/css/s/code-reviews">How do you review CSS code in Pull Requests?</a> </h3> <p>Reviewing CSS code is a skill that takes time to master. Here are some tips from my personal experience to help you get started.</p> </article> </li><li> <img src="/assets/cover/armchair-design-400.webp" srcset="/assets/cover/armchair-design-400.webp 400w,/assets/cover/armchair-design-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> CSS · <time datetime="2024-05-09"> May 9, 2024 </time> </small> <h3> <a href="/css/s/10-css-background-patterns">10 beautiful CSS background patterns</a> </h3> <p>I hand picked 10 of my favorite CSS background patterns from MagicPattern for your next project. Get them now!</p> </article> </li><li> <img src="/assets/cover/coworking-space-400.webp" srcset="/assets/cover/coworking-space-400.webp 400w,/assets/cover/coworking-space-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> CSS · <time datetime="2024-09-22"> September 22, 2024 </time> </small> <h3> <a href="/css/s/scroll-progress-bar">Scroll progress bar</a> </h3> <p>Create a progress bar indicating the scroll percentage of the page, using CSS and JavaScript.</p> </article> </li><li> <img src="/assets/cover/bridge-over-road-400.webp" srcset="/assets/cover/bridge-over-road-400.webp 400w,/assets/cover/bridge-over-road-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> CSS · <time datetime="2022-10-16"> October 16, 2022 </time> </small> <h3> <a href="/css/s/reset">CSS Reset</a> </h3> <p>A short, opinionated CSS reset to make your websites look great everywhere.</p> </article> </li><li> <img src="/assets/cover/flower-portrait-4-400.webp" srcset="/assets/cover/flower-portrait-4-400.webp 400w,/assets/cover/flower-portrait-4-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> CSS · <time datetime="2024-08-30"> August 30, 2024 </time> </small> <h3> <a href="/css/s/input-with-prefix">Input with prefix</a> </h3> <p>Ever wanted to create an input with a visual, non-editable prefix? CSS can help you with that!</p> </article> </li><li> <img src="/assets/cover/icebreaker-400.webp" srcset="/assets/cover/icebreaker-400.webp 400w,/assets/cover/icebreaker-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> CSS · <time datetime="2024-09-08"> September 8, 2024 </time> </small> <h3> <a href="/css/s/image-text-overlay">Image with text overlay</a> </h3> <p>Learn how to create an image with a text overlay using CSS.</p> </article> </li><li> <img src="/assets/cover/succulent-1-400.webp" srcset="/assets/cover/succulent-1-400.webp 400w,/assets/cover/succulent-1-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> CSS · <time datetime="2024-09-21"> September 21, 2024 </time> </small> <h3> <a href="/css/s/image-hover-rotate">Image rotate on hover</a> </h3> <p>Zoom in and rotate your images on hover and make them stand out.</p> </article> </li><li> <img src="/assets/cover/radio-monstera-400.webp" srcset="/assets/cover/radio-monstera-400.webp 400w,/assets/cover/radio-monstera-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> CSS · <time datetime="2024-09-13"> September 13, 2024 </time> </small> <h3> <a href="/css/s/card-image-cutout">Card with image cutout</a> </h3> <p>Cutout effects seem tricky to implement, but they really aren't. CSS has you covered!</p> </article> </li><li> <img src="/assets/cover/interior-5-400.webp" srcset="/assets/cover/interior-5-400.webp 400w,/assets/cover/interior-5-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> CSS · <time datetime="2024-09-04"> September 4, 2024 </time> </small> <h3> <a href="/css/s/toggle-switch">Create a toggle switch using HTML & CSS</a> </h3> <p>A toggle switch is little more than a checkbox with a custom appearance. This article shows you how to create one without using JavaScript.</p> </article> </li><li> <img src="/assets/cover/washed-ashore-400.webp" srcset="/assets/cover/washed-ashore-400.webp 400w,/assets/cover/washed-ashore-800.webp 800w" alt="" height="180" width="360" loading="lazy"> <article> <small> CSS · <time datetime="2024-08-24"> August 24, 2024 </time> </small> <h3> <a href="/css/s/content-aware-height-transition">Content-aware height transition</a> </h3> <p>Dynamically transition an element's height, based on its content.</p> </article> </li> </ul> <nav aria-label="Pagination"> <a href="/css/p/1" rel="prev" aria-disabled="true"> <svg width="1.25em" height="1.25em" viewBox="0 0 128 128" fill="none" class="icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M83.771 28.229a5.333 5.333 0 0 1 0 7.542L55.542 64l28.23 28.229a5.333 5.333 0 0 1-7.543 7.542l-32-32a5.333 5.333 0 0 1 0-7.542l32-32a5.333 5.333 0 0 1 7.542 0Z" fill="currentColor"></path></svg> Previous </a> <a href="/css/p/2" rel="next" aria-disabled="false"> Next <svg width="1.25em" height="1.25em" viewBox="0 0 128 128" fill="none" class="icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M44.229 28.229a5.333 5.333 0 0 1 7.542 0l32 32a5.333 5.333 0 0 1 0 7.542l-32 32a5.334 5.334 0 0 1-7.542-7.542L72.458 64l-28.23-28.229a5.333 5.333 0 0 1 0-7.542Z" fill="currentColor"></path></svg> </a> <p>Page 1 of 4 (73 articles)</p> </nav> </section> </main> <footer> <div> <p> Hello! <span class="wave">👋</span> I’m Angelos, a professional software engineer, based in Greece. I work on <strong>30 seconds of code</strong> in my free time to create the best resource I never had when I started out as a developer. </p> <nav aria-label="Sitemap"> <h5>Sitemap</h5> <ul> <li><a href="/">Home</a></li> <li><a href="/snippets/p/1">Articles</a></li> <li><a href="/collections/p/1">Collections</a></li> <li><a href="/about">About</a></li> <li><a href="/update-logs/p/1">Updates</a></li> <li><a href="/feed.xml">RSS</a></li> </ul> <small>Powered by <a href="https://www.netlify.com/" rel="noopener noreferrer nofollow" target="_blank">Netlify</a>, <a href="https://astro.build/" rel="noopener noreferrer nofollow" target="_blank">Astro</a> & <a href="https://github.com/" rel="noopener noreferrer nofollow" target="_blank">GitHub</a> <br> © 2017-2025 <a href="https://chalarangelo.me" rel="noopener noreferrer nofollow" target="_blank">Angelos Chalaris</a>. All rights reserved. </small> </nav> </div> </footer> <dialog data-modal="omnisearch"> <search> <svg width="1.25rem" height="1.25rem" viewBox="0 0 128 128" fill="none" aria-hidden="true" class="icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M53.333 18.667c-19.145 0-34.666 15.52-34.666 34.666C18.667 72.48 34.187 88 53.333 88 72.48 88 88 72.48 88 53.333c0-19.145-15.52-34.666-34.667-34.666ZM8 53.333C8 28.296 28.296 8 53.333 8s45.334 20.296 45.334 45.333S78.37 98.667 53.333 98.667C28.296 98.667 8 78.37 8 53.333Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M84.229 82.362a5.333 5.333 0 0 1 7.542 0l24 24a5.334 5.334 0 0 1-7.542 7.543l-24-24a5.333 5.333 0 0 1 0-7.543Z" fill="currentColor"></path></svg> <input type="search" placeholder="Search..." id="omnisearch" aria-label="Search articles and collections"> <button data-close-modal="omnisearch"> <svg width="2rem" height="2rem" viewBox="0 0 128 128" fill="none" aria-label="Close" class="icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M90.7523 97.8234C92.7049 99.776 95.8708 99.776 97.8234 97.8234C99.776 95.8708 99.776 92.705 97.8234 90.7523L70.9533 63.8823L97.8234 37.0123C99.776 35.0596 99.776 31.8938 97.8234 29.9412C95.8708 27.9886 92.7049 27.9886 90.7523 29.9412L63.8823 56.8112L37.0122 29.9412C35.0596 27.9885 31.8938 27.9885 29.9411 29.9412C27.9885 31.8938 27.9885 35.0596 29.9411 37.0122L56.8112 63.8823L29.9411 90.7524C27.9885 92.705 27.9885 95.8708 29.9411 97.8234C31.8937 99.7761 35.0596 99.7761 37.0122 97.8234L63.8823 70.9534L90.7523 97.8234Z" fill="currentColor"></path></svg> </button> <output aria-label="Search results" for="omnisearch"> <p>Start typing a keyphrase to see matching articles.</p> </output> </search> </dialog> <script type="module" src="/_astro/Omnisearch.astro_astro_type_script_index_0_lang.BJh0e4xz.js"></script> </body></html>