Css Module 57

  Module 57 : CSS Art & Drawing – Creating graphics and illustrations using only CSS. 

1. Introduction to CSS Art

What is CSS Art?

CSS Art refers to the technique of using only CSS (and minimal HTML) to create visually appealing drawings such as characters, landscapes, objects, or icons. This is done by manipulating:

Box model properties

Border manipulation

Pseudo-elements (::before, ::after)

CSS gradients

Transformations (rotate, scale, skew)

Shadows

Animations

Why CSS Art?

No dependencies: No need for images or SVGs.

Lightweight: No file load, faster performance.

Responsive and Scalable: Easily resize and adjust with CSS.

Skill Enhancement: Improves your understanding of CSS deeply.

2. Core Concepts and Techniques

2.1 Using the Box Model Creatively

CSS Art often begins with the box model—everything is built from rectangles.

div elements are shaped using width, height, and background.

Use border-radius to turn rectangles into circles or ovals.

html

 code

<div class="circle"></div> <style> .circle { width: 100px; height: 100px; background: red; border-radius: 50%; } </style>

2.2 Pseudo-elements for Layering

::before and ::after allow you to add two extra layers to each element, ideal for building features like eyes, noses, ears, etc.

css

code

.face::before { content: ""; position: absolute; width: 20px; height: 20px; background: white; border-radius: 50%; left: 10px; top: 20px; }

2.3 Borders as Shapes

Using CSS border to create triangles:

html

code

<div class="triangle"></div> <style> .triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid blue; } </style>

2.4 CSS Gradients

Gradients can simulate lighting, texture, and depth.

css

 code

.sun { background: radial-gradient(circle, yellow 0%, orange 60%); }

2.5 CSS Transforms and Positioning

Use transform for positioning and rotating shapes.

css

code

.eye { transform: rotate(15deg) translate(5px, 10px); }

3. Building a Simple CSS Character 

 Create a simple cartoon face using only HTML and CSS.

              

HTML Structure

html

code

<div class="face"> <div class="eye left"></div> <div class="eye right"></div> <div class="mouth"></div> </div>

CSS Styling

css code

.face { position: relative; width: 200px; height: 200px; background: #fdd; border-radius: 50%; margin: 50px auto; } .eye { position: absolute; width: 30px; height: 30px; background: #000; border-radius: 50%; top: 50px; } .eye.left { left: 40px; } .eye.right { right: 40px; } .mouth { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); width: 100px; height: 50px; border-bottom: 5px solid black; border-radius: 0 0 50px 50px; }

Explanation:

border-radius creates circular shapes for the face and eyes.

Pseudo-positioning is used to place the eyes and mouth.

transform: translateX(-50%) centers the mouth horizontally.

4. Advanced CSS Illustration: Creating a CSS Cat

Goal: Build a cute cat face using shapes, positioning, and gradients.

(Include pseudo-elements for ears, whiskers, etc.)

HTML

html

 code

<div class="cat"> <div class="ear left"></div> <div class="ear right"></div> <div class="eye left"></div> <div class="eye right"></div> <div class="nose"></div> <div class="whiskers"></div> </div>

CSS

css

 code

.cat { position: relative; width: 150px; height: 150px; background: #aaa; border-radius: 50%; margin: 100px auto; } .ear { width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-bottom: 40px solid #aaa; position: absolute; top: -30px; } .ear.left { left: 0; } .ear.right { right: 0; } .eye { width: 20px; height: 20px; background: black; border-radius: 50%; position: absolute; top: 50px; } .eye.left { left: 35px; } .eye.right { right: 35px; } .nose { width: 15px; height: 15px; background: pink; border-radius: 50%; position: absolute; top: 90px; left: 50%; transform: translateX(-50%); }

Explanation:

The ears are triangles made using borders.

The eyes and nose are positioned with absolute units.

You can extend this to animate whiskers, eyes blinking, etc.

5. Exercises

Exercise 1: Create a Smiling Emoji

Use a circle for the face.

Add two eyes and a smiling mouth using borders.

Apply a radial gradient to simulate shading.

Exercise 2: CSS Landscape Scene

Create a simple landscape with:

Green rectangle for grass

Blue rectangle for sky

Yellow circle for sun

Use border-radius and positioning.

6. Animate a Bouncing Ball

         

Objective:

Use CSS animations to simulate a bouncing ball using keyframes.

HTML

html

code

<div class="ball"></div>

CSS

css

 code

.ball { width: 50px; height: 50px; background: red; border-radius: 50%; position: relative; animation: bounce 1s infinite ease-in-out; } @keyframes bounce { 0%, 100% { top: 0; } 50% { top: 150px; } }

Explanation:

@keyframes defines the motion path.

ease-in-out smooths the motion.

This demonstrates physics-based motion in CSS.

7. Tips and Tricks

Use DevTools: Inspect and tweak values visually.

Draw on Paper First: Plan shapes and layers.

Work from Background to Foreground.

Use naming conventions for each part: ear-left, nose-tip, etc.

Use relative units (em, %) for scalability.

8. Tools 

CSS Gradient Generator

CSS Art Gallery on CodePen

[HTML CSS Drawing Tutorials – YouTube Channels]

9. Assessment

Assignment: Recreate a famous cartoon character’s face using only CSS.

Bonus: Add animation (eye blink, smile curve, etc.)

Rubric:

Creativity (30%)

Technical Execution (40%)

Code Clarity and Comments (20%)

Responsiveness (10%)