CSS Shapes require a reference box to establish a coordinate system for drawing and positioning shapes. The reference box determines how shapes are calculated relative to the element's box model (margin, border, padding, or content box). This tutorial explains how reference boxes work, which box model values to use, and how they affect shape positioning and content flow.
CSS Shapes solve a fundamental web layout limitation: content wrapping around custom shapes. Before CSS Shapes, floated elements always created rectangular float areas, preventing content from flowing around circles, polygons, or transparent images. This tutorial explains what CSS Shapes are, how they control content flow without rendering visual shapes, and the core concepts needed to use them effectively.
CSS Shapes control how content flows around floated elements, but they don't actually render visual shapes—they define float areas. Understanding this distinction is crucial: CSS Shapes determine where content wraps, not what shapes appear on the page. This tutorial explains what CSS Shapes are, how they differ from visual CSS shapes created with borders or clip-path, and why floated elements still create rectangular float areas without the CSS Shapes module.
Web layouts have been trapped in rectangular boxes for decades, limiting designers to grid-based structures that can't match the creative freedom of print design. CSS Shapes changes everything by allowing content to flow around custom shapes, creating magazine-style layouts with text wrapping around circles, polygons, and custom paths. This comprehensive guide teaches you how to break free from rectangular constraints and build sophisticated, editorial-style layouts that were previously impossible on the web.
Centering elements in CSS used to require complex hacks, but modern CSS provides multiple reliable methods. Each approach—positioning, flexbox, and grid—has different use cases and trade-offs. This tutorial demonstrates three modern centering techniques, helping you choose the right method for your layout needs and understand when each approach works best.
The HTML <search> element provides proper semantic meaning for search functionality, improving accessibility, SEO, and browser understanding. Before its introduction, developers had no native way to mark search regions, forcing workarounds with generic containers or ARIA landmarks. This tutorial demonstrates how to use the <search> element in common scenarios like site-wide search bars and filtered content lists, ensuring your search functionality is properly identified by assistive technologies and search engines.
Replacing images with HTML and CSS improves maintainability and accessibility, but making HTML elements scale proportionally like images requires responsive techniques. CSS Container Queries enable elements to respond to their container's dimensions rather than the viewport, creating truly responsive components. This tutorial demonstrates how to build an HTML/CSS ad that scales proportionally like an image, adapting to different container sizes automatically.
Scroll-driven animations create engaging, interactive experiences that respond to scroll position, but implementing them with JavaScript requires complex event listeners, performance optimizations, and manual calculations. CSS Scroll-Driven Animations eliminate this complexity by binding animations directly to scroll containers using the animation-timeline property and view() function. This tutorial demonstrates how to create scroll-triggered animations with pure CSS, no JavaScript required.
Truncating text with an ellipsis sounds simple, until you need to support multiple lines, responsive layouts, and real production browsers. In this guide, you'll learn how to implement single-line and multi-line text truncation using pure CSS, including modern techniques that work across today's browsers. We'll cover text-overflow, -webkit-line-clamp, and layout constraints that make or break truncation in the real world. If you've ever struggled to keep overflowing text under control without JavaScript, this guide will give you clean, reliable solutions.
CSS Grid provides powerful layout capabilities beyond simple two-dimensional grids, enabling centering, stacking, complex layouts, and even animating to unknown heights without JavaScript. This tutorial demonstrates advanced CSS Grid techniques that solve common layout challenges, showing how grid's unique features simplify complex design requirements.
CSS masks solve design challenges that seem impossible with standard CSS properties, enabling fade effects, irregular shapes, and complex image transformations without JavaScript or extra markup. This tutorial demonstrates three practical CSS mask techniques: creating fade-out effects on scrolling containers, adding irregular edge shapes to banners, and transforming square images into hexagonal shapes. You'll learn how CSS masks work and when to use them instead of alternatives like gradients or clip-path.
Irregular text paths typically require images, creating maintenance issues, accessibility problems, and SEO limitations. Inline SVG with CSS provides a better solution, enabling dynamic, responsive, and accessible text-on-path effects directly in HTML. This tutorial demonstrates how to create curved and shaped text using SVG and CSS, ensuring designs remain editable, scalable, and accessible.
Default HTML radio buttons look outdated and inconsistent across browsers, but styling them directly is impossible due to browser limitations. This tutorial demonstrates how to create custom-styled radio buttons using CSS, hiding the native input and creating accessible, visually appealing alternatives that work across all browsers and maintain full functionality.
For the longest time we’ve been stuck with boxes and it makes things that are common yet beautiful in the print world difficult if not impossible on the web. CSS shapes change this, leveling the playing field allowing us to create much more engaging layouts and designs on the web.
I was lucky enough to get the invite from Matt West, founder/organizer of CodeSLO, via my coworker @schwarty to give a presentation at the CodeSLO meetup "HTML and CSS - Part 3 - Modern Web Design" meet up. This was a good time. I got to get out and talk shop with a great group of people who were excited to learn about design and the role it plays on the web. My talk went a little over thirty minutes and covered the basic principles of good design: contrast, repetition, proximity, alignment, layout, typography, color, and more. For those that were unable to attend, feel free to take a look at the slides to see what you missed...
Sometimes it's necessary to have a link that contains some children elements. Say, for example, you have a link that contains some text and an inline SVG icon that's styled using CSS. This set up allows you to style the icon for all of the link states `:hover`, `:visited`, and `:active` right? Well yes, with the exception of the `:active` state in Internet Explorer. Well, not without a work around at least.
You've likely seen CSS animations and transitions in various web applications out there where they just didn't work well. They are choppy and freeze along with a bunch of other issues. This occurs because they are not taking advantage of the device GPU and hardware acceleration, but are instead using the browsers' built in rendering engine.
For those of us who are used to working with XHTML this is going to seem a little odd but, with HTML5, we no longer need to add a trailing slash on self closing tags like images and inputs.
With all of the great frameworks popping up it can be difficult to choose the "right" one. Besides doing some really great things, probably the two most popular frameworks [Twitter Bootstrap](http://getbootstrap.com/2.3.2/) and [Zurb Foundation](http://foundation.zurb.com/), can be a little overreaching at times when it comes to theming them. You may find that you have to overwrite and undo many styles to make them look unique. This is where web developer [James South's](https://twitter.com/James_M_South) [Responsive Boilerplate](http://responsivebp.com/) may prove to be that "right" one.
Now that there are so many people accessing the sites we build through touch devices many of us will see that we need to alter the default panning and zooming behavior of the browser when touching them.