CSS Art: December - Galah Days of Summer

This is a submission for Frontend Challenge - December Edition, CSS Art: December.

Inspiration

While going for an afternoon walk in Sydney during December as the summer holidays between, I’ve noticed many galahs (pink and grey native cockatoos) playing and feeding their young. After a bit of research, I found that their mating season typically runs between July to December. With their beautiful vibrant colours and enjoying the warm afternoon strolls, galahs feel like an iconic part of an Australian Christmas.

Demo

• Live Demo: https://naomijustin.github.io/Galah-Days-of-Summer/
• Code: https://github.com/naomijustin/Galah-Days-of-Summer

Journey

• I wanted to create something that would not only be aesthetic, but also playful that could highlight the playfulness of galahs in this season. I decided on creating a galah that would be eating a eucalyptus leaf.
• To make up the elements of the bird, I used a combination of clip-path and border-radius to create the organic shapes and then used a container to store all the bird elements that would be able to transform the scale. For the container, I used relative and absolute position and centered this on the page. Then for all the elements inside the container I used different z-index values to layer them.
• For the more complex shapes, I found a way to use stacking gradients and blend modes for the background to create more complex shading with linear gradients and radius gradients.

The above is the detailed content of CSS Art: December - Galah Days of Summer. For more information, please follow other related articles on the PHP Chinese website!