Creative coding — learning to draw with css
- Why draw in css?
- How? Drawing pictures in css.
- CSS art /Techniques
Drawing pictures in css
This was my first css drawing challenge and learning from scratch . You may be familiar with this well known painting in art history Napoleon crossing the Alps by Jacques Louis David.
Yes, you maybe thinking .. what? You choose this image to drawing your first css drawing with? It’s not the most straight forward although the challenge excited me so I went with 😊.
The drawing isn’t quite finished.. there are no hands.. and half legs and other things but it’s 100% css.
And..this is what the code looks like…
Lots of css.. = 3874 lines.
Not the cleanest code. But thats not the point of this. The main focus here is about exploration ,learning and pushing the medium of CSS.
I think my next project challenge will be how I can make it less, reusable clean way to draw now I have learnt the basics.
I have seen so many ways to draw with css and one approach is using one div. So that maybe my next challenge.
Is this practical? Not really……..but…here are a few good reasons I think for drawing in css .
Purposeful study and practice of medium:
- Value in exploration. A way to learn and enhance the ability to visualize and build complex shapes.
- Learn how to use graphics and detail as a combination of basic shapes, and then to manipulate those shapes to create the desired image
- All skills we can use/improve in building the ui of a website as a front end developer.
- Improve attention for detail — seeing beyond the surface.
Understand and stretch:
- CSS is a Front end developers medium. New ways at looking at mediums, tools.
- For me being a front-end developer and drawing with code is a creative way to become more familiar with the subtleties of CSS and stretching myself and skills and to see what is possible.
- Pushing the boundaries and to look at things in a different way eg. like an artist — sculptor doesn’t set out to make just a wood sculptor they use the medium to show the world through their eyes and explore and push the medium, which can open up new possibilities.
Creative flow:
- CSS art meditative and fun! I come from an fine arts background and it feels quite similar to drawing/sketching for me .
- Creative flow, otherwise known as “flow state”, is when you have full immersion in your tasks that you are fully in the present moment. This is losing track of time and being fully engaged in the task.
- These flow states are known as the most addictive states of being, which creates purpose and happiness and as we know happiness is contagious. As humans this is what I believe we are all striving for ❤️.
and …. Creative flow helps fight burnout:
Burnout isn’t just about resting, burnout can also be fought by creative flow. Experiencing flow can give you a lift/happiness for other activities.
Using your brain in different ways strengthens it:
For example programming and stress. The brain can lock those two things together.
Creative activities can refocus neural pathways in the brain and then increase neural plasticity.
This is the ability of neural networks in the brain to change through growth and reorganisation.
Side projects = rejuvenates.
When we are in this flow state, neurochemicals augment the creative process which mean we can take in more information, creating stronger pattern recognition and amplifys our learning ability.
How? Drawing pictures in css:
https://diana-adrianne.com/purecss-francine/
Box Model:
As we know as front end developers, everything in CSS has to be in a box — which makes it literally more challenging to think outside the box 😀.
By default, the size (width, height) of a box is determined by the content and specified margin, padding. As we won’t be having any HTML content, we need to explicitly mention the width and height of the (block) boxes — div is the normally used element.
Basic shapes: with border-radius:
Border-radius is a great way to create not only circles and ellipses, but also organic looking shapes. Manipulating the default box square into different shapes.
Basic examples of border radius used below :
Similar to drawing for me or anything we make on the web breaking things down is essential requirement. For css drawing this is breaking down parts into basic shapes (boxes, circles, semi circles, triangles, trapezoid, etc.), and then layer bits together and try to think how those shapes are combined, overlap or align together to create the image desired.
I thought this quote fitted quite well with similar ways of thinking with developers and arts by Karsten Schmidt who is a programmer and artist.
Positioning:
- A very important aspect of CSS drawing is positioning the shapes for alignment for creating complex shapes from basic ones. That requires manipulation of the co-ordinates of the shapes. To do that, often need to set an absolute or relative positioning.
- In a lot of case it helps to set *{position: absolute} — it’s easier to calculate position relative to the parent element. But it’s not always necessary - you can use relative positioning, or even flex/grid based on the particular use case (flex with justify-content is a great tool for cantering elements).
- The main point is figuring out how the different boxes are to be positioned with each other.
- To help create many different layers to build the desired image z-index comes in handy to position elements in front of or behind other elements .
::before, ::after :
Along with every element we also have the pseudo-elements ::before and ::after as two additional boxes.
This means we can use those for some details as an alternative to adding more elements in our markup, which can make the html start to get a bit out of hand. (A good usage is adding new elements for different parts, and using pseudo-elements to add details like shades, patterns to a part). Pseudo-elements are good for building layers depth.
Example: .horse-bottom {….} and then. .horse-bottom::before {…..}
Box shadow:
Box-shadow can be used create copies of a shape in addition to simulating a 3D effect. Multiple box-shadows can be applied to an element to create multiple copies of different sizes. Inset borders can be used to create shadows as well.
Box shadow:
offset-x | offset-y | blur-radius | spread-radius | color
Gradients:
Gradient is one of the most common tool used in CSS art.
Most common and useful type of gradient is the linear-gradient().
The gradients “axis” can go from left-to-right, top-to-bottom, or at any angle you chose. In websites, gradients are used for smooth transitions between two or more specified colours. It’s really helpful to know how gradients can be used to create shapes, patterns, shading, etc
Clip Path:
Clip-path is another way to create custom shapes.
The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Border-radius and box-shadow may not play well with clip-path
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%
https://codepen.io/julietbrown/pen/RwpvvJz
Tools.. that are very handy:
I discovered this a lot later that would of save me a bit of time 😃 but the learning was worth the fiddling and calculating
https://bennettfeely.com/clippy/ ( left)
https://9elements.github.io/fancy-border-radius/#30.30.35.22-- (right)
CSS art /Techniques:
David Desandro:
Opera logo — 2010 css drawing goes way back.
Bryan James:
Uses the clip path technique: eg. webkit-clip-path: polygon( 40% 40%, 50% 60%, 60% 40% );
Used on this technique awesome website Species in pieces : http://species-in-pieces.com/
And my favourite.. Diana Adrianne
The drawings make me think about how it challenges what art/painting is, making similar representation of a historic painting but in the ‘new’ age digital through coding with css.
Conclusion:
Css drawing is all over the web! It’s fun, pushes and stretches a medium to create and express ideas with a new way of looking at art on the web.
There is no real straight formula to it. There are a number of nuances and tricks which can be picked up through the trial & errors. If you don’t know where to begin, I suggest starting by replicating existing illustrations. Starting with a model will take away the creative aspect and let you focus on the code and logic. When you are comfortable enough with the process, you’ll find it easier to create your own CSS drawings from scratch.
Are you keen to try it out now? 😃
If your curious here are some great resources below.
