Here’s how I recreated theory11’s login form — how would you do it?

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.

Read more

Chrome 69

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.

Read more

Advanced OOP For WordPress Part 8: Developing New Features For Extensible WordPress Plugins Using Test-Driven Development

In my last post in this series on advanced PHP object-oriented programming for WordPress development, I walked through refactoring the low-level API of a plugin, using tests to guide the process and make sure everything works correctly. I say “low-level API” because the focus was on the internal of how the system will work. I …
The post Advanced OOP For WordPress Part 8: Developing New Features For Extensible WordPress Plugins Using Test-Driven Development appeared first on Torque.
Read more

Browser painting and considerations for web performance

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.

Read more

Border Design: 8 Tips & Modern Examples

Graphic designers have been using borders for as long as they have been designing things. And they’re a fun element to play with. We’re taking a look at eight border design concepts (most of them you can actually download as project starters), along with tips for usage and some examples that you can try in […]
Read more

Slow Websites

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.

Read more