CSS Art

Introduction

Cascading Style Sheets (CSS) has become a powerful styling language for web designers and developers. Web designers use CSS to manipulate shapes, colors, and typography. CSS rules can create animated sequences and visual effects. They can even provide web users with visual feedback when they interact with a web element, such as a button or menu.

Some artists and creative coders enjoy developing web art with CSS. Their creations often include animations, interactive art, or impressive objects that sometimes look realistic! In this tutorial you’ll use different CSS style rules to create shapes, color gradients, and animations. You’ll play with the style rules of an animated emoji to practice using different CSS art elements. Then you can create your own CSS art object or scene!

Prerequisite: It’s recommended that you complete the Web Design course modules through Advanced HTML and CSS prior to beginning this tutorial.

CSS Shapes and Colors

You’ll have an opportunity to change the shape of the eyes, create a new mouth, add elements like tears, and change the skin tone on a CSS emoji, but first let’s look at one way to create basic shapes.

All CSS art is made up of basic shapes created by setting styles to an HTML <div> element. The HTML really just provides the web browser with a structure of how the art should be drawn or built. The real magic happens in the class styling of each <div> tag. By adding border styles, background colors, and changing the border radius of a <div> web element, you can create various basic shapes like circles, triangles, rectangles, trapezoids, and ovals.

Note: There is another way to create some basic shapes in CSS. The clip-path property allows you to determine the shape from either a circle, ellipse, or polygon. Then you can specify the shape’s size and position. For the purposes of this tutorial, we’ll focus on creating shapes primarily with border styles rather than the clip-path property.

Colors for your <div> tags and shapes are set using the background-color property. Color gradients can be set using the background-image property. You can then specify the colors, transparency, and direction for the gradient that should be used with that <div> web element.

The CSS Art Snippets web page below shows the styling rules for basic shapes, primarily using borders, background colors, and color gradients. Refer to this resource throughout the tutorial to create different shapes and manipulate the emoji art.

Set Up Your Sandbox Project

For this tutorial, you’ll recreate the emoji HTML and CSS files in your own HTML Sandbox project.

1. Create a new CodeHS Sandbox HTML project.
2. Make sure your project has index.html and style.css files.
3. Then copy and paste the code from the two files below into their respective files in your Sandbox HTML project.
4. Make all your edits in your Sandbox project using the provided code in this tutorial.

Eyes

Now it’s your turn to use some shapes to add eyes to the emoji in the CSS file below.

Try adding circle, oval (by changing the height or width of a circle), triangle, or trapezoid eyes to the emoji. Try changing the background-color property.

Note: The way this CSS file is structured, you only need to create one shape for both eyes. Add your shape styling rules to the .eye class in the style.css file in the program below.

Positioning

Positioning <div> tags with CSS can be tricky. To make it a little easier, the emoji artwork uses the positioning: absolute styling rule to allow <div> web elements to move freely on the screen. This means the elements’ position is not relative or in relation to any other element on the web page. By setting the positioning to absolute, you can translate or move elements freely and set their position in relation to the web page.

For example, the entire emoji is positioned using this style rule:

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

The eyes are positioned using multiple <div> elements.

• <div class="eyes"> creates a container for both eyes with style rules that position the eyes in relation to the emoji class
• <div class="eye left"> uses the .eye class to style the eye and the .left class to position within the eyes container
• Note that the <div class="eyes"> element is not closed </div> in the HTML document until after each of the eyes are created

In the style.css file of your emoji page above, locate the .left and .right classes. Adjust the percentage of the left or right properties to bring your eyes closer or farther apart. You can use measurement values like px or em instead of percentages if you choose.

Overflow

The emoji mouth <div> tags are structured similar to the eyes on the index.html file. The <div class="mouth"> element surrounds the tongue and teeth <div> tags. Now take a look at the .mouth and .tongue classes in the style.css files above.

The .mouth class style rules include an overflow: hidden property. This means that any web element within the .mouth class <div> tag will be hidden if it extends outside of the mouth. Because of this property, you can create a red oval and position it so low within the mouth that it hides the portion of the oval extending beyond the mouth. That’s how the tongue is created.

In the style.css file above, try changing the bottom property of the .tongue class to see the red oval rise or lower within the mouth. You can do this same thing with the teeth - which is basically a white rectangle with curved bottom corners.

Animations

Most CSS animations are created using the transform property. These are created with an @keyframes CSS at-rule that controls the transition steps. While a class style rule activates the animation and specifies the @keyframes name, speed, type of animation, and duration.

For the emoji CSS art below, let’s make the laughing face move up and down to show it’s laughing. Add the following @keyframes at-rule and class styling to the styles.css file below.

@keyframes laugh {
    50% {
        transform: translate(0, -10px);
    }
}

.face {
    animation: laugh 1s linear infinite;
}

When you’ve finished setting up your CSS animation, open the index.html file below and locate the <div> tags for the eyes and mouth. Since we only want the eyes and mouth to move up and down and not the whole emoji head, add the new .face class to just the eyes and mouth on the HTML document.

        <div class="face eyes"></div>

        <div class="face mouth"></div>

Refresh the page in the output to see your animation in action. Make any necessary changes or adjustments and customize this emoji to your liking.

Challenges

Now that you’ve had a chance to play with CSS on an emoji artwork, try these ideas to modify your emoji or create some new CSS art in your Sandbox! Plan out your art first. Remember to use an HTML file to structure your image and a CSS file to set up style rules and at-rules for your HTML elements. Refer to the CSS Art Code Snippets web page if you need ideas or style rules to get you started.

• Use rotation to animate your emoji eyes so that they spin
• Use colors and gradients to change the skin tone of your emoji
• Use a blue oval and triangle to add tears to your emoji - rotate them slightly
• Create a tongue that sticks out of the mouth of your emoji
• Create a new emoji, not a face, or an object of your choice in an HTML Sandbox project