Shrinking Button Outlines
A CSS technique using outline-offset and transitions to create animated, shrinking focus outlines for buttons, improving accessibility and visual feedback.
A CSS technique using outline-offset and transitions to create animated, shrinking focus outlines for buttons, improving accessibility and visual feedback.
A tutorial on creating a clean, scalable CSS spinner using only 2 HTML elements and pseudoelements, focusing on maintainable code and performance.
Explains a workaround for using @font-face rules within Shadow DOM encapsulation in web components.
A developer shares her experience teaching a Girl Develop It class on web accessibility, covering topics like offscreen content and tab index.
A guide to various techniques for implementing responsive typography on websites, covering media queries, viewport units, and accessibility.
A technical guide on recreating Google's animated loader using pure CSS, covering border animations and rotation techniques.
Explores solving dynamic grid layout problems using pure CSS logic, like handling orphaned items, without relying on preprocessors or JavaScript.
Explains why CSS-only auto-resizing of input fields is impossible due to HTML's definition of inputs as void elements.
A tutorial on creating animated navigation icons (Transformicons) using CSS transforms and transitions, with code examples.
A tutorial on creating slanted, 3D-looking tabs using CSS transforms and pseudo-elements, with graceful degradation for older browsers.
Part 2 of a Susy CSS framework tutorial, covering margin/padding mixins and responsive design techniques.
Explains the difference between CSS selectors :nth-child and :nth-of-type with practical examples.
Author explains their decision to leave the W3C to focus on personal projects, open source work, writing a book, and standards development.
Introduces CSS preprocessors like SASS to organize and edit CSS code more efficiently, reducing pain points in web development.
A guide on using CSS to maintain the aspect ratio of embedded iframes (like videos) in responsive web design.
Explains the importance of Vertical Rhythm in web design and provides a step-by-step guide to implementing it for a more professional website layout.
A tutorial on styling blog content, covering text, fonts, links, images, lists, and blockquotes for a clean website design.
A tutorial on styling a website header with CSS, covering linking stylesheets, using CSS resets, and applying layout techniques.
A guide to nine essential CSS properties, including display, width, height, and more, for web developers.
A developer shares their experience redesigning a personal blog using WordPress, focusing on CSS changes and exploring the Ghost platform.