Daily
CSS
Design

Designs made in code

@DailyCssDesign

Illustration of a landscape containing mountains, trees, and a river

About Daily CSS Design

The original goal was to create one interactive design every day in 2018 using only code. Though it's not daily anymore, I'm still creating whenever I feel inspired. Here are some questions that I'm frequently asked:

Why design in code?

Ultimately, the idea is a bit silly. Design software is definitively better suited for designing. However, combing the design and development process by designing in code could potentially leave more time to create cool interactives and animations.

What are your goals?

As a developer my goal is to improve my skills in technologies I rarely use, such as repeating gradients, 3d effects in the browser, and some day maybe even cool high-performant WebAssembly powered graphics.

As a designer I want to get better at composition, try out new color combinations, learn how abstract and organic shapes are made, and explore new animation techniques.

As a developer and designer I have the silly goal of being able to tell which color I'm looking at when seeing for instance #2cefcb or rgb(255, 68, 137)

What technologies do you use?

The simplest ones are just made with HTML, CSS, and SVGs. For the 3D looking ones I'm using WebGL through three.js. Three.js has certain 3d shapes, such as spheres, boxes and planes, built-in which I use a lot with modifications. I'm adding color and textures to those shapes by coding fragment shaders.

How can I make these?

All you really need is a text editor and some patience. A good place to start is to learn some basic CSS and HTML. Create boxes and circles, overlay them, experiment, and see what happens.

If you're interested in making 3d scenes, I would recommend looking at three.js and learn how to write fragment and vertex shaders. Here are some cool tutorial and useful resources:

Follow DailyCssDesign on Instagram

Contact me at bjorndailycssdesign.com

More of my work can be found on Behance and Dribbble