CSS & HTML
CSS Image Styles: Rounded, Glossy, Masked and Shaped Images
Give images rings, gloss, fades, shapes and colour effects with modern CSS: aspect-ratio, object-fit, mask-image, clip-path and filter. No jQuery, fully responsive.
Tag: CSS
CSS & HTML
Working with SVG: Inline Icons, Animation and Clipping
A practical guide to SVG for designers: choosing inline vs img, currentColor icons, CSS stroke animation, clip paths, accessibility and clean exports.
CSS & HTML
CSS Image Styles: Rounded, Masked, Filtered and Blended
Eight CSS techniques, nine image looks on a normal img element: circles, rings, feathered masks, hexagons, grayscale, duotone and hover zoom, with…
CSS & HTML
Creating Reusable Background Patterns with CSS
Make dots, stripes, grids and SVG patterns from a few lines of CSS, then recolor them with custom properties and dark mode.…
Typography
@font-face and Web Fonts: Self-Hosting, WOFF2 and font-display
Use @font-face with one WOFF2 file, a variable font, font-display and a preload. Compare self-hosting with Google Fonts and Adobe Fonts, and…
Typography
CSS @font-face Guide: WOFF2, Variable Fonts and Fallbacks
How to use @font-face today: ship WOFF2, use one variable font file, choose font-display deliberately, preload the critical file and build fallbacks…
Layout
Responsive Video Embeds With CSS aspect-ratio
Make iframe videos elastic with a single line of CSS. Replace the old padding hack with aspect-ratio, and handle vertical video, native…
Layout
Responsive Design with CSS Media and Container Queries
Build a fluid blog layout with CSS Grid, clamp(), range-syntax media queries and container queries, and learn when to use each one.
UI Components
Back to Top Button with Smooth Scrolling
Build an accessible back-to-top button with a native anchor, CSS smooth scrolling and a few lines of IntersectionObserver. No jQuery required.
UI Components
HTML Placeholder Text: Styling, Floating Labels and Accessibility
The placeholder attribute works everywhere now, so drop Modernizr and jQuery. Style it, build a CSS-only floating label, and keep forms accessible.
CSS & HTML
Browser-Specific CSS: Feature Queries Instead of IE Hacks
Conditional comments and CSS hacks are obsolete. Use @supports feature queries, selector() tests and progressive enhancement to handle browser differences.
Layout
Clearing Floats in CSS: flow-root, Overflow and Flexbox
display: flow-root is the one-line, side-effect-free way to contain floats. See why overflow worked, where it fails, and when to use Flexbox…