Create a CSS art without HTML. 🤯
Tags: css, html, tutorial, webdev
Published: 2020-11-27 13:15:41

Well well well, no catch here. As [I have said already](https://dev.to/vaibhavkhulbe/the-web-without-css-18d), learning CSS and using some of its properties carefully, is no joke.

The concept of CSS art is usually to practice our CSS skills. How to add this property, how to add such values, when to use this unit for precise craft or how to even choose one property over the other.

If you're into these type of questions or just want to know _why_ you should dive into making art with CSS, then I would recommend you all to check the following article written by [@Suzanne](https://dev.to/s_aitchison) on her learnings after she completed 50 Days of CSS:

{% post https://dev.to/s_aitchison/5-lessons-from-50-days-of-css-art-2ae1 %}

Okay, so everyone uses some sort of HTML markup to have a basic structure of CSS art but what if you're feeling super cool with your CSS skills and just want to skip the markup? How about we just don't use _any_ HTML code and make CSS art possible?

Of course, most of you might already know the 'trick' we will be using but if you're a beginner in CSS or in making art with CSS, read on because we are about to make an emoji which is a blend of 🤯 and 🤪...

---

# What is CSS art? 🌚

Hehe, I forgot to even introduce you to this term in case you're unaware...

> It's the act of **using only HTML and (of course) CSS to create any art form**.

Now that's a made-up sentence above to convey the meaning briefly. The art form can include anything you can imagine from a cartoon character to illustrations, basically anything that comes under the category of 'art'.

So you can go from this glass of water...

{% codepen https://codepen.io/kassandrasanch/pen/VwedQve default-tab=result %}

...to this ridiculously detailed Mona Lisa painting:

{% codepen https://codepen.io/jaysalvat/pen/HaqBf default-tab=result %}

Yes, that 'painting' you just saw is not just a `<img>` tag with an image attached to it, every element you see there is made from scratch!

# What we will make? 👀

Of course, not another Mona Lisa but yes, we can make a simple (yet different) emoji like this:

![CSS art demo](https://dev-to-uploads.s3.amazonaws.com/i/aurg57tvu7o1hjsfen4q.png)

...and not this:

![Art Gif](https://media.giphy.com/media/gVJKzDaWKSETu/giphy.gif)

Dang dang! How is it? Of course, not beautiful but yes, might have some taste of humor in it?

# Breaking down the layout 🖼

Before writing any code, we must understand:

- How many elements we will need?
- What properties we are aware of?
- How can we use those CSS properties?
- Is there any new properties or a CSS feature we need to learn?
- What units should be used for measurement? `em`, `rem`, or just `%`?

Let's visually enhance the output we need (dev mode on!):

![Emoji dev](https://dev-to-uploads.s3.amazonaws.com/i/mdgr0jivx9lxqs3xutdw.png)
<figcaption>Yeah, you can appreciate my Figma skills for that, lol 😆 </figcaption>

We can clearly see (thanks to the dotted borders):

- There is an overall container to hold our emoji (represented in blue background).
- Then we have the main body of the emoji which is a circle filled with yellow color.
- Inside this, we have the two eyes (super light brown) and then the vague wide mouth (dark brown).

Three quick elements and we got three quick minutes, ready? (I randomly added the 'three minutes' thing, please take as much time you need to fully understand the concept).

# Start making CSS art with zero HTML characters 🤪

### The markup 🤒 
Oops, nothing much here but make sure to either [link your CSS file externally or internally](https://www.hostinger.in/tutorials/difference-between-inline-external-and-internal-css#The-Difference-Between-Inline-External-and-Internal-CSS-Styles), whatever you feel is good.

### The real deal 😎
Open up your stylesheet. Everything we need can be encapsulated inside the `<body>` of the DOM. So we first start by using the [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body) selector. [Here's a cool CSS Tricks article](https://css-tricks.com/html-vs-body-in-css/) on HTML vs Body if you're into that.

Whatever property you write inside the `body` selector will target the DOM's `<body>` element. It consists of basically all of the HTML content you can see. But using just `body` and adding some colors will simply apply the entire color to the full page. We don't want that.

What we need is the 'trick'! And that is to use a [pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) on the `body`! 🥳

> A **pseudo-element** is a _keyword_ that is attached to any selector that **lets us style a specific part** of that selected element.

With this, we can make an infinite amount of shapes, vectors, and yes, CSS art by simply using a single element. In this case, we will just need to work on the `body` part and nothing else.

There is a range of pseudo-elements available, one of the most important among those is the [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) pseudo-element. This one selects the first child of the selected element and is generally used to add a special element by using the mandatory [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content) property which generated the value.

For our emoji art, we don't need any special content inside so we can leave this property's value as blank `""`.

#### Position the emoji 📐
Next, we need to position the emoji. To make something visible you can add a `background-color` of `orangered` because the plain `red` value is almost like coding at night with a light theme and maximum screen brightness...

![Burning eyes Gif](https://media.giphy.com/media/KGbqQQoVN43cY/giphy.gif)

We need to make [positioning absolute](https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/#absolute) to the original `body` element. Now we need to set where on the viewport we need to show the emoji. For this we use:

```css
.
.
.
top: 0; left: 0; right: 0; bottom: 0;
margin: auto;
.
.
.
```

This ensures the CSS art is centered throughout the webpage. Next just give a decent amount of `width` and `height` say, `15rem` units. And yes, as the _body_ of the emoji perfect round, just add `border-radius: 50%;` to make that happen.

By now you should have the emoji centered and with fixed dimensions.

#### Working with the background! 🟡
Everyone changes from here! We need to make those facial features like eyes and the mouth.

The [`background`](https://developer.mozilla.org/en-US/docs/Web/CSS/background) (specifically the [`background-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)) property of CSS accepts something cool along with the usual color value i.e. gradients! 

For our demo, we need to only use the [`radial-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient()), a CSS function which creates a gradient that radiates (like a circle) from the center. It has the following syntax:

```
radial-gradient(circle at center, red 0, blue, green 100%)
```

We first provide from where the circle needs to be drawn and then what colors are needed (with the amount).

As you saw in the layout breakdown, we have 3 circles for 2 eyes and 1 mouth. So, for each of those, we will need to use the `radial-gradient`. As for the background of the emoji body, you can change that later. Here how our circles would go:

1️⃣ The **first eye** is a big one. First, we need to position it. For that, after `circle at` we use a rough estimate of both _horizontal and vertical placements_ in terms of percentages. Here I have chosen `30%` and `40%` respectively.

Next, we give it a color of `#b58c1b` (light brown) and a `20%` scale from its original scale. The more you increase this percent, the bigger the circle would be. 

The third parameter is simply making it `transparent` so that it doesn't affect the color of the emoji body.

```css
.
.
.
radial-gradient(circle at 30% 40%, #b58c1b 0%, 
#b58c1b 20%, transparent 0%),
.
.
.
```

2️⃣ The **second eye** is the same but here we need a small size so just change the scale to `13%`:

```css
.
.
.
/* Big eye */
radial-gradient(circle at 30% 40%, #b58c1b 0%, 
#b58c1b 20%, transparent 0%),

/* Small eye */
radial-gradient(circle at 70% 45%, #b58c1b 0%, 
#b58c1b 13%, transparent 0%),
.
.
.
```

3️⃣ The **wide mouth** is also made up of the same radial gradient but here apart from a different position and color, we need to define the _wideness_ or the length of the mouth. That slight wide mouth feel can be done by giving external width and height of `80rem` and `5rem` respectively.

And make sure to add `no-repeat` towards the end else, this mouth would go crazy all over the face!

```css
.
.
.
/* Big eye */
radial-gradient(circle at 30% 40%, #b58c1b 0%, 
#b58c1b 20%, transparent 0%),

/* Small eye */
radial-gradient(circle at 70% 45%, #b58c1b 0%, 
#b58c1b 13%, transparent 0%),

/* Wide mouth */
radial-gradient(circle at 50%, #672e00 10%, 
transparent 10%) 50% 100% / 80rem 5rem no-repeat
.
.
.
```

Finally, the emoji background color hex value can be added towards the end as:

```css
.
.
.
background:
    radial-gradient(circle at 30% 40%, #b58c1b 0%, 
    #b58c1b 20%, transparent 0%),

    radial-gradient(circle at 70% 45%, #b58c1b 0%, 
    #b58c1b 13%, transparent 0%),

    radial-gradient(circle at 50%, #672e00 10%, 
    transparent 10%) 50% 100% / 80rem 5rem no-repeat

    #ffcf34;
```

So now the entire code of the CSS emoji looks like this:

```css
body::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 15rem;
	height: 15rem;
	border-radius: 50%;
	background:  
		radial-gradient(circle at 30% 40%, #b58c1b 0%, 
    #b58c1b 20%, transparent 0%),
		radial-gradient(circle at 70% 45%, 
    #b58c1b 0%, #b58c1b 13%, transparent 0%),
		radial-gradient(circle at 50%, 
     #672e00 10%, transparent 10%) 50% 100% / 80rem 5rem no-repeat
		#ffcf34;
}
```

That's it! You just made CSS art without a single line of HTML but most importantly you learned what is a pseudo-element, how it works, how to make good use of gradients to make art forms, and more! 

Here's the CodePen embed of the above code:

{% codepen https://codepen.io/kvaibhav01/pen/jOMNvKJ default-tab=result %}

<figcaption>Lol, there's just a CSS tab, looks weird... 🌚</figcaption>
---

# More resources 🤩

Go ahead with your new CSS art skills and get more knowledge from these resources:

- [Pure CSS Art: A Beginner’s Tale by Alison Quaglia](https://blog.prototypr.io/pure-css-art-a-beginners-tale-2740ebf44199)
- [PURE CSS A​R​T GALLERY](https://css-art.com)
- [CSS Art Crash Course - By Example! by DesignCourse](https://youtu.be/uXBoQ4WRD9A)

---

_Thanks for reading, I appreciate it! Have a good day. (✿◕‿◕✿)_

---
<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="en" dir="ltr">Always remember to leave yourself useful comments! 👇<a href="https://twitter.com/hashtag/DevHumour?src=hash&amp;ref_src=twsrc%5Etfw">#DevHumour</a> <a href="https://twitter.com/hashtag/Developer?src=hash&amp;ref_src=twsrc%5Etfw">#Developer</a> <a href="https://t.co/VJsR6YYVSs">pic.twitter.com/VJsR6YYVSs</a></p>&mdash; Microsoft Developer UK (@msdevUK) <a href="https://twitter.com/msdevUK/status/1327204570913792000?ref_src=twsrc%5Etfw">November 13, 2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
---

#### [📫 Subscribe to my weekly developer newsletter 📫](https://mailchi.mp/f59beeac6b9b/devupdates)

##### PS: From this year, I've decided to write here on DEV Community. Previously, I wrote on Medium. If anyone wants to take a look at my articles, [here](https://medium.com/@vaibhavkhulbe)'s my Medium profile.