CSS: Advanced Features

This is a technical reference on advanced, pure-CSS techniques for adding visual polish and motion to a web site: rounded corners, box shadows, gradients, state transitions, transforms, keyframe animations, and typography controls. Every technique is demonstrated on a running example — a bakery web site with a top navigation bar, a left-hand filter menu, and a grid of product ("pie") cards — but the underlying CSS rules apply to any project.

The starting site uses a top navigation bar built from an unordered list with the built-in list styling removed and the list items floated left so that the logo, an "All pies" link, and a "Contact" link appear horizontally. A search <input> and search <button> sit on the right of the nav bar; the input uses CSS padding to make it visually larger than a default HTML input box. Below the nav bar, a grid of pie "cards" is built from plain <div> and <img> elements.

Compared to inspirational e-commerce and Bootstrap-style themes, the original site has only sharp, 90-degree corners. The border-radius property is the first tool used to soften the design.