CSS-Tricks
@css

A website about making websites. Since 2007!

css-tricks.com
Joined April 2011
3,702 Photos and videos
Load newest
Last week, it was single element spinners. Today, @ChallengesCSS tackles dots loaders with clever masking techniques. css-tricks.com/single-elemen…

Single Element Loaders: The Dots | CSS-Tricks

In this second part of our four-part series, we will make a dot loader with only a single div element using CSS backgrounds and masks.

css-tricks.com
8
33
Some mind bend-y :nth-of-type-age here from @rpsthecoder for a nice way to style grouped selections. css-tricks.com/conditionally…

Conditionally Styling Selected Elements in a Grid Container | CSS-Tricks

Calendars, shopping carts, galleries, file explorers, and online libraries are some situations where selectable items are shown in grids (i.e. square

css-tricks.com
2
5
35
High fives to @dshanske for helping de-mystify what an IndieWeb setup in WordPress looks like! css-tricks.com/de-mystifying…
7
16
Useful Tools for Visualizing Databases on a Budget by @foreverayeesha css-tricks.com/useful-tools-…

Useful Tools for Visualizing Databases on a Budget | CSS-Tricks

A diagram is a graphical representation of information that depicts the structure, relationship, or operation of anything. Diagrams enable your audience to

css-tricks.com
14
28
Didya know that @ChallengesCSS has more than 500 examples of single div loaders? Well, he's kicking off a 4-part series on his approach starting with... spinnerrrrs. css-tricks.com/single-elemen…

Single Element Loaders: The Spinner | CSS-Tricks

This four-part series covers how to create single element loaders with minimal code while using modern CSS techniques.

css-tricks.com
5
12
54
Am I on the IndieWeb yet? css-tricks.com/am-i-on-the-i…

Am I on the IndieWeb yet? | CSS-Tricks

Can't smash the Like button hard enough for what Miriam Suzanne has to say on the challenging technical hurdles of implementing Webmentions:

css-tricks.com
3
9
Let’s Make a QR Code Generator With a Serverless Function! css-tricks.com/lets-make-a-q…

Let's Make a QR Code Generator With a Serverless Function! | CSS-Tricks

QR codes are funny, right? We love them, then hate them, then love them again. Anyways, they've lately been popping up again and it got me thinking about how

css-tricks.com
8
32
Building Interoperable Web Components That Even Work With React by @AdamRackis css-tricks.com/building-inte…
10
46
Please Give Me Some Space css-tricks.com/please-give-m…
1
6
31
How to Create Block Theme Patterns in WordPress 6.0 by Ganesh Dahal css-tricks.com/how-to-create…

How to Create Block Theme Patterns in WordPress 6.0 | CSS-Tricks

Block patterns, also frequently referred to as sections, were introduced in WordPress 5.5 to allow users to build and share predefined block layouts in the

css-tricks.com
4
19
SPAs, Shared Element Transitions, and Re-Evaluating Technology css-tricks.com/spas-shared-e…

SPAs, Shared Element Transitions, and Re-Evaluating Technology | CSS-Tricks

Nolan Lawson sparked some discussion when he described a noticeable shift away from single-page applications (SPAs):

css-tricks.com
5
16
Like so many things... it depends. css-tricks.com/just-how-long…

Just How Long Should Alt Text Be? | CSS-Tricks

I teach a class over at the local college here in Long Beach and a majority of the content is hosted on the Canvas LMS so students can access it online. And,

css-tricks.com
5
21
Beautify GitHub Profile css-tricks.com/beautify-gith…

Beautify GitHub Profile | CSS-Tricks

It wasn't long ago that Nick Sypteras showed us how to make custom badges for a GitHub repo. Well, Reza Shakeri put Beautify GitHub Profile together and it's

css-tricks.com
1
16
51
Huge props to @ChallengesCss for wrapping up a pretty darn nifty and impressive series on CSS hover effects! css-tricks.com/css-hover-eff…

Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D | CSS-Tricks

We’ve walked through a series of posts now about interesting approaches to CSS hover effects. We started with a bunch of examples that use CSS background

css-tricks.com
1
10
38
From the WebKit Blog: Customizing Color Fonts on the Web css-tricks.com/customizing-c…

Customizing Color Fonts on the Web | CSS-Tricks

Myles C. Maxfield on the WebKit Blog published a nifty how-to for color fonts. It comes on the heels of what Ollie wrote up here on CSS-Tricks the other day,

css-tricks.com
6
28
A Perfect Table of Contents With HTML & CSS by @slicknet css-tricks.com/a-perfect-tab…

A Perfect Table of Contents With HTML + CSS | CSS-Tricks

A table of contents is easy to generate in word processing tools, but trickier to pull off in plain HTML and CSS. But I have an approach that works.

css-tricks.com
18
95
Mastering SVG's stroke-miterlimit Attribute by @marianabeldi css-tricks.com/mastering-svg…

Mastering SVG's stroke-miterlimit Attribute | CSS-Tricks

So, SVG has this stroke-miterlimit presentation attribute. You’ve probably seen it when exporting an SVG from a graphic editor program, or perhaps you find

css-tricks.com
9
22
Having a way to "crop" an image in CSS will be another great tool in the box for designing in the browser. css-tricks.com/first-look-at…

First Look At The CSS object-view-box Property | CSS-Tricks

Ahmad Shadeed — doing what he always does so well — provides an early look at the object-view-box property, something he describes as a native way to crop an

css-tricks.com
1
13
57
Dialog Components: Go Native HTML or Roll Your Own? by Rob Levin css-tricks.com/dialog-compon…

Dialog Components: Go Native HTML or Roll Your Own? | CSS-Tricks

There’s a new native HTML dialog element making the rounds and I figured using it as a starting point for my own dialog component in AgnosticUI.

css-tricks.com
11
37
Verevolf css-tricks.com/verevolf/

Verevolf | CSS-Tricks

Zeldman:

css-tricks.com
2
14
Load more