Ashley Sheridan​.co.uk

Tags:

Playing around with CSS to create single <div> works of art is, while largely useless for production-worthy code, a lot of fun, especially to see how far a technique can be pushed. In the past I've created CSS Animals and even an animated BB8.

Contents

• Ghost
• Gravestone
• Pumpkin
• Frankenstein's Monster
  • The Head
  • The Neck
  • Animating the Eyes
• Conclusion

Here, I've played around with various ways to build a few fun Halloween-inspired art pieces.

Ghost

The first one I attempted was a ghost, with a heavy use of box-shadow to create the details.

The basic shape is a box with rounded corners on the top. Next, I added a circle (basic square with border-radius: 50%) using a pseudo element for the left hand. From there, the eyes, right hand, trails, and even the mouth is drawn with a series of box shadows on the pseudo element using a 0px spread:

In order from top to bottom are the right arm, the bottom trails, the two eyes, and then the mouth as 5 consecutive shadows with a 2px difference in position between each one.

To give the ghost a nice spooky effect, I repeated each trail and arm as another shadow but this time with a 20px spread. On the black background this gives the impression of a ghostly glow.

To finish the whole thing off, I used a simple CSS animation to give him a hover effect:

Gravestone

A Halloween house isn't complete without a gravestone or two outside the front, So I thought it would be nice to create one in CSS. Now, while this is technically still just a single <div>, there is text within the HTML. I know purists will declare this isn't allowed, but I think it's fine to bend the rules slightly for this.

This mostly makes use of basic font techniques, custom fonts, and characters from the extended character sets. The HTML (look away now purists!):

To get the nice rounded shape at the top, I used the long format of the border-radius property, which allows you to set both control points of the arc:

I wanted the cross and "RIP" part to be in a slightly different font, so that had to be content added through a :before element. This also uses the ♱ symbol (or the East Syriac Cross) from the Miscellaneous Symbols block of characters (where you'll find common weather and Zodiac symbols). It's common enough and most systems should have a font capable of displaying it.

As a little flourish, I wanted a small bouquet of flowers at the base of the stone. Handily, there's the 🎕 character which is named just that. One thing I did notice about this is that the display of it differs across base fonts installed on various systems. It shouldn't matter for this though, mostly it's just the glyph orientation that changes.

One important thing to note is that you must indicate to the browser the correct character set you're using for the content, or those symbols will not display. This is done through either a HTTP header if you're serving this via a web server, or using a <meta> tag as I've done above.

To finish things off, I added a spooky murky glow behind the gravestone using a simple animation between 1 shadow and 3.

Pumpkin

The pumpkin I found a little tricky initially, as I quickly found myself running out of elements for the full effect.

Again, I used the long form of border-radius to get a nice shape:

The major challenge here was the mouth, as I effectively needed a half semicircle, but I didn't want to use up one of my precious pseudo elements. To achieve this, I used an old trick which relies on stacking background gradients:

When the browser draws background gradients like this, it applies them in order from last to first. It's important to remember this as the stacking order is vital.

First, I give my pumpkin shape a black circle in the center, and the rest in orange. On top of that is a linear gradient, which draws a block of orange from the top down, then stops and draws transparent for the rest. It's this transparency which allows the radial gradient to show through, and gives the semicircle I was after.

Next, I did the stalk (I wasn't finished with the mouth, but the stalk needed to come first), which is basically just a block with a diagonal linear gradient using a mix of transparency and hard steps to give it an oblique appearance. It's a little crude, and I'm sure I could tidy it a little with more gradient layers over the top, but it works well:

What this did give me though was a nice rectangle block that I could use for as many box-shadows as I wanted; excellent pumpkin teeth!:

The last part was the eyes and nose. Borrowing from the earlier gravestone methods, I used a triangle from the Geometric Shapes block and replicated this back out with more box-shadows:

As before, ensure you either set the right character set headers or add the right <meta> tag or the triangle won't work. This is because it's a multibyte character, so a browser needs to understand how to handle it.

Finally, I added a glow animation to give the effect of a glowing Jack-o-lantern:

Frankenstein's Monster

This one took a lot more work with gradients, and surprisingly uses only 1 pseudo element despite being the most visually complex piece here.

The Head

The last line of this creates a single line a quarter of the way down the main head block, and the second then creates a series of 4 lines that cross it and run all the way down from top to bottom. That line also hides part of the first line as we only want a small scar. Finally, the first line (remember, gradients are stacked on top of each other from last to first) cuts off the vertical lines by drawing a green block above and below the scar.

The mouth is similar, but only uses 2 layers of gradients to buid one thick line that spans half the width of the face.

Next up are the eyes, using a total of 6 radial gradients:

I could have simplified this slightly and used only 4, but then I would have lost the animation on the pupils; not something I wanted to sacrifice for cutting out 2 lines of code! The dark rings beneath each eye are just a darker circle (made with a gradient, of course) slightly offset from the ones that create the eye.

Here again the line technique above has been used for the eyebrows, but this time each end has been 'capped' with a radial gradient to give them a softer edge and avoid the whole thing looking too blocky.

The hair is next, and just uses one gradient from the top that draws a small dark green block, and topped with a series of radial gradient circles.

The very last thing on the main head block is the nose, which just uses the reverse direction of the technique used to draw the dark eye rings.

The Neck

This was about as far as I could push the head block, and my attempts to have the neck and bar as part of this also drawn with gradients on the same <div> resulted in a square head at the bottom, which looked awful. Instead, I opted to use my :before element. Only 4 gradients are used here:

1. 4. The fourth draws the ends of the bolts, created as 2 vertical grey blocks on the left and right
2. 3. The third draws a black line over these at the top and bottom, so that the grey boxes don't span the full height of the pseudo element
3. 2. The second gradient draws a grey bar which spans the width of the element
4. 1. And lastly, the first gradient draws a green block in the middle to act as the neck of the monster

Animating the Eyes

As a finishing touch, I decided to animate the pupils of the eyes by alterin the background-position property. This is why I kept the pupils as separate gradients earlier, in order to act on their layer individually.

First, I set up the default background positions for all layers in the head:

Then, I set up a repeating alternating animation using 3 fixed points to animate between:

Conclusion

I've said it before, CSS can do some amazing things. Whether you should take it this far on your production site is another question, and I'd probably say "no" most of the time. However, there are a lot of simple techniques here that can be used effectively across your websites.

So if you're looking at doing these single div pieces of art yourself, I'd recommend getting to know how the CSS gradients work, and take a look at the things you can do with box-shadow. These two tools are your best friends, and incredibly powerful.

Happy Halloween! 👻👿💀