Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

CSS Art: Creatively Craft 26 Unique illustrations With CSS

Name: CSS Art: Creatively Craft 26 Unique illustrations With CSS
Rating: 5.0 (1 reviews)

Express your artistic creativity with 26 illustrations using CSS. Use CSS to open up a world of artistic possibilities.

Created byPamch Tutor | M.EdTech | MCE

Last updated 12/2025

English

What you'll learn

Use CSS techniques to design animals faces, fruits, plants, car, Iron man mask, etc
Use CSS techniques to Design logos of Netflix, Figma, Android, Instagram, etc
Understand the importance of positioning (relative and absolute) in creating CSS art.
Understand how to use CSS to control the appearance and structure of HTML elements.
Learn how to use pseudo-elements (::before and ::after) to add extra layers and details to your drawings.
Learn how to use linear and radial gradients and shadows to add depth and dimension to your artwork.
Apply CSS properties like transform, border-radius, box-shadow, z-index to create intricate designs.

Course content

29 sections • 100 lectures • 22h 29m total length

Introduction to the projects to be created4:48
Learn to craft artistic illustrations with css and html by mastering absolute and relative positioning, transforms, perspective, clip paths, gradients, and z-index, and apply them to logos and icons.
Introduction6:47
Master CSS art by learning selectors, pseudo elements, and 3D transforms. Position elements with absolute and relative layouts, flex, grid, box shadows, and gradients across more than 20 projects.
The resources are all available for download0:42
Access downloadable resources, including the HTML and CSS used in each project, shown in the first video of every module. Enroll now.

Position Relative27:52
Explore how relative and absolute positioning shapes CSS art, using top, bottom, left, and right offsets, aspect ratio, and z-index to control stacking of block and inline elements.
Position Absolute - Part 122:20
Learn how absolute positioning removes an element from normal flow, how it stacks with siblings via z-index, and how to center elements with top, left, and translate.
Position Absolute - Part 27:56
Discover how absolute positioning looks for the nearest positioned parent, not the browser. See how a relative container centers absolute elements within the parent using box offset properties.
Selectors - Part 125:37
Master CSS selectors from the universal, HTML, and root elements, to adjacent and general siblings, descendants, and not-direct-child relationships for precise styling.
Selectors - Part 212:55
Master nth-child and end-of-type selectors to target specific list items and types, learn even/odd patterns, first/last child, and use before and after pseudo elements with content to create CSS art.
Creating Variables locally and globally.12:14
Understand how to create CSS variables with two dashes, access them with the var() function, and switch between local element scope and global root scope for color and size values.
CSS units - px rem em8:23
Explore how CSS units px, rem, and em behave, with rem tied to the root HTML font size and em to the parent, illustrating scalable typography.
CSS units - em %18:10
Explore how em, rem, and percentage units work in CSS, including em's font-size multiplication, rem's root sizing, and percentage's dependence on parent or viewport.
CSS units - vmin vmax vh vw14:36
Learn about CSS viewport units vmin, vmax, vw, and vh, which size elements by viewport dimensions and use the smaller or larger dimension with width and height.
Creating a triangle with border and absolute position17:30
Learn to create a triangle with borders in css art using an element with no width or height, absolute positioning, and at least two transparent borders with one colored border.
Using FLEX to centre an element vertically and horizontally3:45
Center elements with flex by turning the body into a flex container, then use justify-content center and align-items center to center horizontally and vertically with a 100vh height.
Positioning an element to the centre using margin and absolute position18:56
Learn how to center an element in its parent using flexbox and absolute positioning, including top/left 50% with translate(-50%, -50%), and the role of margin auto.
CSS Transform19:27
Explore the CSS transform property, applying translate, skew, rotate, and scale to move, tilt, and size elements in 2d and 3d scenes, with perspective preceding rotation.

The Art of box-shadow6:28
Learn to create a duplicate of an element using the box-shadow property, experiment with horizontal and vertical offsets, and build multi-shadow layouts to form cross shapes.
The Art of linear-gradient and box-shadow11:54
Explores applying linear gradients and box shadows to create three-color blocks with hard lines, using start and stop positions, degrees, and vertical orientation to replicate gradient visuals.
Creating circular pattern with radial gradient13:24
Learn to create circular patterns with radial gradient in CSS. Build the pattern with background-image, set background-size and no-repeat, and use color stops with transparent to shape circles.

Basic Structure of the Android Art12:07
Create the android logo with CSS by structuring HTML with divs for android, antenna, body, legs, and arms, linking CSS in VS Code, and centering a 400x400 container with flexbox.
Styling the head and eyes of the android19:37
Style the android head container and craft its eyes with before and after, positioning them absolutely inside a relative parent, and apply dry grouping for clean css.
Styling the antenna and the body13:12
Style the antenna and body using CSS by creating containers, absolute positioning, and transforms to rotate elements, then apply flex-direction column to stack components and add rounded borders.
Styling the legs and arms18:16
Learn to style two legs and two arms for a css illustration by using containers, relative parents, absolute positioning, and small dimensions with border-radius to craft curved limbs.

Basic Structure of the Stairs Art7:33
Create a stairs art with a block container and upper and lower stair elements in HTML, linked to CSS, centered with flex and viewport height to form the stairs.
Styling the first 4 stairs14:35
Discover how to build the first four CSS stairs using absolute positioning, precise width and height, top and left offsets, and the before pseudo-element to stack steps behind their parent.
Styling the last 3 stairs14:11
Craft the last three stairs as separate, absolute-positioned blocks using inner, lower, and before/after elements, with a consistent 20-pixel height and incrementing widths to form a CSS stair design.

Basic Structure of the bear face Art10:03
Design a CSS art bear face by structuring HTML with divs for ears, head, eyes, nose, and smile, then style with CSS variables and flexbox to center the content.
Styling the head, ears and eyes15:54
colorful css art: style a head with ears and eyes using relative and absolute positioning, before and after content, and a flex column to center and evenly space facial features.
Styling the nose and smile16:24
Master styling a nose and smile in CSS art by building a nose container, centering it, and creating a pink smile with borders, border radius, and inset box shadow.
Styling the top hair19:07
Explore styling the top hair by building layered CSS shapes with absolute positioning, flex layouts, and transforms, using border radius, aspect ratio, translate, and rotate to center and stack elements.

Basic Structure of the pot plant Art5:41
Create a pot plant illustration in CSS by building HTML with a container, leaf divs, and a vase; center it with flex and set a 400px container using box-sizing and resets.
Styling the leaves23:25
Style the leaves with a green base, 25% width and height, and diagonal border radii. Use absolute positioning, brightness filters, and transforms to arrange five leaves.
Styling the vase17:54

Basic Structure of the Instagram logo16:12
Learn to recreate the Instagram logo using css gradients, including radial and linear gradients, with variables and the before element, centered on the screen.
Styling the inner white parts12:09
Center the inner white shapes with absolute positioning, top 50%, left 50%, and translate to form a white curved rectangle, its circle and dots for a CSS art illustration.

Basic Structure of the bottle Art12:13
Create bottle art by styling a div.bottle with HTML5 and CSS. Center it with absolute positioning and margins, and apply a multi-stop gradient plus a box-shadow.
Styling the upper part and the shade color13:54
Position the before element absolutely to form the bottle’s upper part, then create a shade behind it with an after element using a linear gradient and rgba color.

Basic Structure of the captain America shield6:46
Build a Captain America shield using HTML and CSS by structuring a shield container with a star, and styling a red circle with a 40px border, border radius, and centering.
Styling the 2 other circles and one triangle13:21
Learn to craft css illustrations by building a white circle and a red shield circle with before and after and absolute positioning, then form stars from rotated triangles.
Finishing up the star15:24
Finish the Captain America shield by building a star from tilted triangles using CSS before and after elements, absolute positioning, and transforms.

Requirements

Adequate knowledge of HTML and CSS is NECESSARY
Ability to write CSS syntax properly and use CSS properties is a MUST
Text editor such as VS code, Sublime text, Bracket, Notepad++, etc.

Description

Are you ready to discover a new way to express your creativity? Do you want to transform your CSS skills into a powerful tool for creating stunning art? If so, our course on CSS Art: Creatively Craft 26 Unique illustrations With CSS is perfect for you.

We will use CSS techniques to design animal's face, fruits, plant, car, Iron man mask, Santa, ice cream etc.

Use CSS techniques to Design logos of Netflix, Figma, Android, Instagram, Nike, etc.

You will understand how Position Relative and Absolute really works behind the scene.

This course is designed to open up a world of artistic possibilities with CSS. If you are eager to explore the intersection of coding and art, or you are looking to add a unique skill set to your CSS repertoire, then this course is for you.

A very important aspect of using CSS to draw is positioning the shapes for alignment. That requires manipulation of the co-ordinates of the shapes. To do that, we often need to set an absolute or relative positioning.

Along with every element we also have the pseudo-elements - ::before and ::after as two additional boxes.

You will learn how to use CSS and HTML to create intricate and beautiful artworks. Imagine the satisfaction of seeing your code come to life as vibrant images and designs. This course will help you harness your coding skills in a way you never thought possible.

With CSS techniques, you will be able to create intricate designs and add fine details to your drawings. You'll also learn how to use pseudo-elements to add extra layers and complexity to your art.

You'll learn how to draw a variety of objects. You'll understand how to add clip-path properties, shadows, border-radius, textures, etc to make your drawings more realistic and visually striking.

Throughout the course, you'll work on a series of projects that reinforce what you've learned. These projects will give you hands-on experience and help you build a portfolio of stunning CSS art. Building a portfolio to showcase your CSS art can impress potential clients or employers and open up new career opportunities. If you’re an illustrator, CSS art is a perfect introduction to coding. If you’re a front-end developer, drawing with code is a creative way to become more familiar with the subtleties of CSS.

Don't miss out on this opportunity to combine your passion for art with the power of coding. Enrol in our course today and start your journey towards becoming a CSS artist. Unleash your creativity and create stunning digital art that will amaze and inspire!

Who this course is for:

Anyone who wants to explore the artistic side of CSS
Anyone who wants to learn how to draw or make illustrations with CSS

CSS Art: Creatively Craft 26 Unique illustrations With CSS

What you'll learn

Explore related topics

Course content

Course overview [This part shows what you will get from the course]-You can skip3 lectures • 12min

Valuable CSS Properties For This Course13 lectures • 3hr 30min

Box-shadow and Gradient Art3 lectures • 32min

Android Art4 lectures • 1hr 3min

Stairs Art3 lectures • 36min

Bear face Art4 lectures • 1hr 1min

Pot Plant Art3 lectures • 47min

Instagram Logo2 lectures • 28min

Bottle Art2 lectures • 26min

Captain America Shield3 lectures • 36min

Requirements

Description

Who this course is for: