Archive | 3D

RSS feed for this section

Creating Photorealistic 3D Graphics on the Web

Before becoming a web developer, I worked in the visual effects industry, creating award-winning, high-end 3D effects for movies and TV Shows such as Tron, The Thing, Resident Evil, and Vikings. To be able to create these effects, we would need to use highly sophisticated animation software such as Maya, 3Ds Max or Houdini and do long hours of offline rendering on Render Farms that consisted of hundreds of machines. It’s because I worked with these tools for …


Creating Photorealistic 3D Graphics on the Web is a post from CSS-Tricks

Solving the Last Item Problem for a Circular Distribution with Partially Overlapping Items

Let’s say we wanted to have something like this:

Clockwise circular (cyclic) distribution with partially overlapping items.

At first, this doesn’t seem too complicated. We start with 12 numbered items:

- 12.times do |i|
.item #{i}

We give these items dimensions, position them absolutely in the middle of their container, give them a background, a box-shadow (or a border) and tweak the text-related properties a bit so that everything looks nice.

$d: 2em;

.item {
position: absolute;
margin: …


Solving the Last Item Problem for a Circular Distribution with Partially Overlapping Items is a post from CSS-Tricks

Solving the Last Item Problem for a Circular Distribution with Partially Overlapping Items

Let’s say we wanted to have something like this:

Clockwise circular (cyclic) distribution with partially overlapping items.

At first, this doesn’t seem too complicated. We start with 12 numbered items:

- 12.times do |i|
.item #{i}

We give these items dimensions, position them absolutely in the middle of their container, give them a background, a box-shadow (or a border) and tweak the text-related properties a bit so that everything looks nice.

$d: 2em;

.item {
position: absolute;
margin: …


Solving the Last Item Problem for a Circular Distribution with Partially Overlapping Items is a post from CSS-Tricks

Simplifying CSS Cubes with Custom Properties

I know there are a ton of pure CSS cube tutorials out there. I’ve done a few myself. But for mid-2017, when CSS Custom Properties are supported in all major desktop browsers, they all feel… outdated and very WET. I thought I should do something to fix this problem, so this article was born. It’s going to show you the most efficient path towards building a CSS cube that’s possible today, while also explaining what common, but less than …


Simplifying CSS Cubes with Custom Properties is a post from CSS-Tricks