Code Snippets
67 articles
You can build a CSS accordion with two HTML elements and no script. Details wraps each item, summary holds the clickable label, and the…
Headers look simple until you start scrolling. Flexbox or grid arranges the logo, the links and whatever actions sit beside them, and position: sticky…
Safari 17.4 is the only browser that draws a real switch from a checkbox. WebDX browser data lists Safari 17.4, released March 2024, as…
Most image effects on a website never touch the image file. The browser applies them while it draws the page, which is why a…
Most login form CSS covers the resting state and stops there. The card is centered, the button is blue, and a mistyped email or…
The usual reason a first CSS animation does nothing is a missing duration. When the animation shorthand leaves one out, the duration defaults to…
Most CSS arrows end up on tooltips, dropdown menus and speech bubbles, where a small pointer shows what belongs to what. You can draw…
A resume built in HTML and CSS opens in any browser and prints to PDF. The same file can also go online as a…
Most modals still get built from a div, a high z-index and a keydown listener somebody has to remember to write. The native dialog…
Browsers already keep track of which radio input is checked and which details element is open, and the URL fragment works the same way.…
Most pages that ask for a calendar only need a date field, and the browser already ships one. The native date input has been…
A hover effect on a button is a change in color, shadow, position or size that shows while the pointer sits on it. The…
A gradient has no intrinsic dimensions, according to MDN, so background-size alone defines the tile. Leave it out and the gradient stretches across the…
CSS handles how a form looks and has no say in what it submits. Signup, login and checkout forms are where this gets used…
A carousel squeezes several items into the space of one. Script moves them through a fixed viewport, usually with buttons or dots and sometimes…
Icon-only buttons are fine until someone has to guess what the icon does. A CSS tooltip fixes that in a few lines: a positioned…
Default browser checkboxes look dated. They also render inconsistently across Chrome, Firefox, Safari, and Edge. These CSS checkboxes examples show you how to build…
Most dropdown menus on the web are two levels deep and sit inside a nav element. A nested list and a few selectors are…
Open the network tab on a page with a CSS logo and you won’t find a logo request. The browser paints the mark from…
Animated text is everywhere. The animation property appears on 73% of mobile pages in HTTP Archive’s 2020 Web Almanac, while only 24% of mobile…
The :hover pseudo-class applies a style only while a pointer rests on an element, and no JavaScript is involved. Links, buttons, cards and images…
The CSS transition property can’t animate a page change. It works on one element’s style at a time, and when a new document replaces…
A table that still sizes itself from its content after you set table-layout: fixed is a common thing to run into. The cause is…
Scroll effects used to mean an event listener and a throttle function, and plenty of pages still ship that way. Progress bars, cards that…
Shadows are one of those things everybody adds and almost nobody goes back to. A card gets a box-shadow in week one, a heading…
Plenty of tutorials style a button element, call it a download button and move on. It looks right. It also has no file URL…
The browser draws a range slider and handles the dragging. CSS only gets to repaint it. The control is input type=”range”, which lets a…
Bars, slices and rings can all be drawn with HTML elements and CSS properties alone. Bars come from grid or flexbox layouts with percentage…
Scroll snapping alone gets you a working carousel with no slider script, and the browser can generate the buttons and position markers too. Product…
Visitors scan a page for a spot to type, and when they find one, they use it. On useit.com, Nielsen Norman Group (2001) recorded…