I built a CSS egg!
Being a developer that leans more towards the frontend, I wanted to explore CSS art this week. My goal was to build something simple, and slowly add on elements as I go.
The following are notes I jotted down for myself and concepts that I felt would be helpful for others that are just getting started with CSS or wanting to do some CSS art for fun!
Hope you enjoy :)
Every element is a div
To elaborate, you are basically working with a plain HTML document, with nested divs. Then, you are adding style to those divs with CSS properties.
The Container Element
You'll want to make a div that acts as a container. This is super important because it will be the main div that your other elements get nested under.
- Set the position to relative: This means you are setting your position relative to its normal position, the top left corner of the page.
Nested Divs
Be mindful of the height and width of your parent div. What size does your child div need to be, in relation to the parent div?
When nesting divs, set the position to absolute: This basically means that your position properties(top, left, width, height) will now be based on the main div element(in our case, it's called the container), not the body of the page.
position: relative, display: block and margin: auto will automatically center your div.
display: flex, justify-content: center, align-items: center does the same thing.
The border-radius is what curves the shape.
- If you wanted to make a circle, you would set the border-radius to 50%
- If you don't set a border-radius the default shape is a square.
The end result, my lil' fried egg
Stay tuned! My goal is to animate this before the week ends. If anyone has any pointers, things that they found helpful, feel free to comment below! I'm always open to feedback and discussion.
Top comments (0)