DEV Community: Tanner Dolby

Terminal Style Image Gallery

Tanner Dolby — Fri, 10 May 2024 17:00:12 +0000

This is a submission for the Netlify Dynamic Site Challenge: Visual Feast.

What I Built

I built a terminal style Image Gallery with homepage interaction and curated feed designed in a masonry layout with featured image pages. Photos fetched from the Pexels API.

Demo

https://fascinating-kitsune-b8c2cc.netlify.app/

Platform Primitives

I'm leveraging the Netlify Image CDN by using the <Image> component from next/image provided by the Next.js framework.

Window illustration - CSS

Tanner Dolby — Thu, 27 Aug 2020 15:16:55 +0000

An interactive css art window that displays two backgrounds, day and night. Based on this dribble shot: https://dribbble.com/shots/11283947-Taking-it-slow

CSS Telephone Booth

Tanner Dolby — Tue, 11 Aug 2020 05:43:11 +0000

This drawing in particular really opened my eyes to how much I use basic shapes in CSS art. When I say basic shapes, I'm talkin squares, rectangles, circles, ovals, triangles, lines. Utilizing your tool belt of shapes allows for some really cool CSS art! If you practice using these shapes with `box-shadow`, `linear-gradient` and some other cool tricks, you can recreate any picture on the web using CSS and a bit of markup!

Creating CSS art takes time

Remember creating these illustrations takes time. Some of the basic drawings might only require a couple hours of work, but as you move into more complex replications and drawings, it can take many hours if not days to perfect. I didn't say it would happen overnight.

But the feeling of accomplishment after finishing a CSS drawing is unrivaled.

Where to look for images

When I'm looking for a new css art idea, I start by searching for images online. Usually by typing in the keyword (ie telephone booth) and saving 3-5 images that I wanted to stare at for a few minutes each before deciding which made the most sense in my head to start making.

I also look for things to make with CSS over on dribbble. I found the red telephone booth which is the topic of this post on dribbble.

Want to learn more?

CSS art has turned into a hobby of mine and I can attribute essentially all of the skills I've learned from this article: Single Div Drawings by Lynn Fisher.

CSS Pixel Ghost

Tanner Dolby — Mon, 03 Aug 2020 15:33:52 +0000

I created this image of a ghost on the pixel drawing application PxL created by @jh3y. I animated the pixel ghosts eyes using CSS keyframes. Image also available as an SVG or PNG.

Using PxL is a whole lotta fun and allows for really creative pixel art. I'd love to see what others can create with this great pixel drawing app.

Single Div Camera

Tanner Dolby — Mon, 03 Aug 2020 15:25:47 +0000

My attempt to recreate a single div camera. Made with lots of box-shadows.

Original illustration by @lynnandtonic

If you want to get started with single div drawings and CSS art in general. I highly recommend you checkout this amazing article over on Mozilla Hacks by Lynn Fisher Single Div Drawings with CSS

Animated Loading Divs

Tanner Dolby — Mon, 03 Aug 2020 15:11:14 +0000

This loading animation was created using GSAP and a row of four div elements. I saw a similar loader after logging out of the game I was playing this morning and thought it was cool. So here is my first attempt at recreating it.

Variable Font Animation

Tanner Dolby — Mon, 03 Aug 2020 14:58:28 +0000

Introduction to Google Variable fonts with some GSAP animation sprinkled in to animate letters to and from low/high font-weights. Shoutout to @jh3y for making me aware of variable fonts.

Cassette Tape - CSS

Tanner Dolby — Mon, 03 Aug 2020 05:08:18 +0000

My latest CSS illustration of an audio cassette tape. I tried to give it a retro color scheme. This started as an attempt for single div, but I ended up using a bit of markup instead of performing psuedo element wizardry.

Check it over on @codepen: Cassette Tape - CSS