Pure CSS Art: A Beginner’s Tale

Pure CSS Art: A Beginner’s Tale

A brief foray into CSS cocktails because… 2020

Earlier this year I first learned that pure CSS art was a thing, and it’s safe to say that my mind was officially blown. I didn’t know you could do so much with just…CSS?? (…and a little HTML, but mostly CSS!)

amazing pure css art by diana smith

Pure CSS art by the incredibly talented Diana Smith

Naturally I placed CSS art on my learning-to-code bucket list since I’m a sucker for anything visual or creative, but with all of the algorithms and data structures and fundamental JavaScript concepts to learn and study, it was placed on the back burner. This weekend I decided to finally give it a try! At first I thought about making some cute animals using simple shapes like this popular koala:

pure css art koala

That would’ve been a lot easier. But instead, in keeping with the theme of 2020, I decided to go with… cocktails! 🍹🍸

I found this great CodePen of a gin and tonic by Suzanne Aitchison and decided to play around by turning it into another favorite summer drink: an Aperol Spritz.

CodePen by Suzanne Aitchison

I thought it wouldn’t be too difficult to turn this into a different cocktail, being that so much of the work was already complete (shoutout to that citrus she made!), but it was trickier than I thought.

First I figured that I would change the glass shape, since traditionally an Aperol Spritz is served in a wine glass. Then I changed the color of the drink to a Aperol-looking shade of red, and I turned the lemon slice into an orange with some simple hex codes. There was some trouble-shooting with the glass, yes, but it was still doable!

Then I realized: ice cubes. An Aperol spritz really needs ice cubes. This was a lot trickier. I tried Googling “CSS ice cubes” and without many results, there was a lot of trial and error bringing them to life. I also realized that one ice cube would never be realistic enough. There should be three ice cubes! I was able to copy what I did for ice cube #1, and play around with the position and rotation. I must say, rotating CSS ice cubes was pretty fun.

Last but not least, animated bubbles! (This is a fizzy drink after all.)

css learning-to-code programming front-end-development design

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Lessons learned from standing up a front-end development program at IBM

3 key factors to make the [email protected] (Frontend Development at IBM) program — a community and support program where developers can grow their career and their skills — a success. In 2015, we created the [email protected] program to support front-end developers and give them the opportunity to learn new skills and teach other devs about their specific areas of expertise. While company programs often die out due to lack of funding, executive backing, interest, or leadership, our community is thriving in spite of losing the funding, executive support, and resources we had at the program’s inception.

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

8 Beginner Design Projects for Aspiring Front-end Developers

These are 8 projects with requirements and designs that you can do to add to your portfolio as a Front-end Developer. The order of these projects is from easy to intermediate level.

Learning How to Code Sass for CSS - Front End Developer Journey

Here's an update to my coding journey of learning frontend development. I decided to take a break from Javascript to learn How to Code Sass for CSS. I watched a udemy course from Jonas on advanced CSS to create the websites shown in this video.

Top 6 Productivity Tools for Front-end Developers

Today I wanted to share with you the tools I daily use to increase my productivity as a front-end developer. 6 tools to increase your productivity as a Front-end developer.