Latest News

I ran across a super cool design for a login form over on the website theory11.com. Actually, the whole site and the products they make are incredibly well designed, there’s just something about the clean and classy form that really got me. Plus, it just so happened that the CodePen Challenge that coming week was based on forms, so I took a few minutes and tried slapping it together.

Fadeout vector pattern

One of the things I thought …

The post Here’s how I recreated theory11’s login form — how would you do it? appeared first on CSS-Tricks.

Chrome 69 is notable for us CSS developers:

• Conic gradients (i.e. background: conic-gradient(red, green, blue);): We’ve got lots of interesting articles about conic gradients here, and here’s some use cases and a polyfill from Lea Verou.
• Logical box model properties: margin, padding, and border all get an upgrade for more use cases. Think of how we have margin-left now — the “left” part doesn’t make much sense when we switch directions. Now, we’ll have margin-inline-start for

…

The post Chrome 69 appeared first on CSS-Tricks.

The process of a web browser turning HTML, CSS, and JavaScript into a finished visual representation is quite complex and involves a good bit of magic. Here’s a simplified set of steps the browser goes through:

1. Browser creates the DOM and CSSOM.
2. Browser creates the render tree, where the DOM and styles from the CSSOM are taken into account (display: none elements are avoided).
3. Browser computes the geometry of the layout and its elements based on the render tree.

…

The post Browser painting and considerations for web performance appeared first on CSS-Tricks.

The web has grown bigger. Both in expansiveness and weight. Nick Heer’s “The Bullshit Web”:

The average internet connection in the United States is about six times as fast as it was just ten years ago, but instead of making it faster to browse the same types of websites, we’re simply occupying that extra bandwidth with more stuff.

Nick clearly explains what he means by bullshit, and one can see a connection to Brad Frost’s similarly framed …

The post Slow Websites appeared first on CSS-Tricks.

Just like the title says! Here’s a sidebar navigation bar that…

1. Uses sticky positioning. It stays on the screen when it can, but won’t overlap the header, footer, or ever make any of it’s links inaccessible.
2. Scrolls smoothly to the sections you click to.
3. Activates the current nav based on scroll position (it’s a single page thing).

See the Pen Sticky, Smooth, Active Nav by Chris Coyier (@chriscoyier) on CodePen.

Sticky

It’s easy to toss position: sticky; …

The post Sticky, Smooth, Active Nav appeared first on CSS-Tricks.