Designs made in code


About Daily CSS Design

The idea behind Daily CSS Design is to create one responsive design every day for a whole year using only code.

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 a cool high-performant WebAssembly powered graphics.

As a designer I want to try out new color combinations, learn how abstract and organic shapes are made, and explore new animations 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. After that you would be well served by learning how to make SVGs by hand. And finally to learn how to use THREE.js and write fragment and vertex shaders. A good resource for learning how to write fragment shaders is The book of shaders

Follow DailyCssDesign on Instagram

Contact me at bjorndailycssdesign.com

More of my work can be found on Behance and Dribbble