Design v17

We rolled out a new site design on January 1! This is the 17th version of CSS-Tricks if you can believe that. The versions tend to evolve a decent amount beyond the initial launch, but we archive screenshots on this design history page. Like I said in our 2018 thank you post:

This is easily the most time, effort, and money that’s gone into a redesign since the big v10 design. There are a lot of aesthetic changes,

Read article

The post Design v17 appeared first on CSS-Tricks.

Read more

The Ethics of Web Performance

Tim Kadlec on the issues surrounding poor web performance and why it’s so important for us to care about making our sites as fast as possible:

Poor performance can, and does, lead to exclusion. This point is extremely well documented by now, but warrants repeating. Sites that use an excess of resources, whether on the network or on the device, don’t just cause slow experiences, but can leave entire groups of people out.

There is a growing gap between what

Read article

The post The Ethics of Web Performance appeared first on CSS-Tricks.

Read more

Brochure Design Ideas & Inspiration for 2019

Almost every designer has created a brochure at some point. And there’s a strong possibility you’ll be asked to design another! Whether it’s for a client or to promote your own business, there’s an art to designing a brochure. And then there’s an added challenge: brochure design isn’t just for print anymore. Digital brochures are […]
Read more

Slice and Dice a Disc with CSS

I recently came across an interesting sliced disc design. The disc had a diagonal gradient and was split into horizontal slices, offset a bit from left to right. Naturally, I started to think what would the most efficient way of doing it with CSS be.

Sliced gradient disc.

The first thought was that this should be doable with border-radius, right? Well, no! The thing with border-radius is that it creates an elliptical corner whose ends are tangent to the Read article

The post Slice and Dice a Disc with CSS appeared first on CSS-Tricks.

Read more

Re: Pleasing Color Palettes

There are so many tools out there to help you pick colors. I totally get it! It’s hard! When colors are done well, it’s like magic. It adds a level of polish to a design that can really set it apart.

Let’s look at some, then talk about this idea some more.

Here’s one I just saw called Color Koala:

It spits out five colors at ya and you’re off to the races.

Hue will give you some too. … Read article

The post Re: Pleasing Color Palettes appeared first on CSS-Tricks.

Read more

How to Quickly Improve the User Experience (UX) on WordPress

There is a strong link between your website’s user experience and amount of traffic. User experience (UX) is how users behave and feel when they’re using your site. For 83 percent of consumers, a seamless experience across all devices is important. Considering the UX should be one of your main goals when developing your site. …
The post How to Quickly Improve the User Experience (UX) on WordPress appeared first on Torque.
Read more

Piecing Together Approaches for a CSS Masonry Layout

Masonry layout, on the web, is when items of an uneven size are laid out such that there aren’t uneven gaps. I would guess the term was coined (or at least popularized) for the web by David DeSandro because of his popular Masonry JavaScript library, which has been around since 2010.

JavaScript library. Nothing against JavaScript, but it’s understandable we might not want to lean on it for doing layout. Is there anything we can do in CSS directly these … Read article

The post Piecing Together Approaches for a CSS Masonry Layout appeared first on CSS-Tricks.

Read more