Css Art: Practical And Creative Illustrations With Css

Explore the creative artistic possibilities of CSS. Bring your artistic ideas to reality using CSS

What you'll learn

Use CSS techniques to Design logos of TikTok, Gmail, Pepsi, Google, etc.

Use CSS techniques to Design Eva from Walle, Bart Simpsons, PlayStation game pad, smiling emoji, South African flag, etc.

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.

Learn how to use pseudo-elements (::before and ::after) to add extra layers and details to your drawings.

Understand how to use CSS to control the appearance and structure of HTML elements.

Requirements

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 web development skills into a powerful tool for creating stunning art? If so, our course on CSS Art:  Practical And Creative illustrations With CSS is perfect for you. We will use CSS techniques to design Eva from Wall-e, Bart Simpsons, Video game pad, smiling emoji, South African flag, etc.Use CSS techniques to Design logos of TikTok, WhatsApp, Gmail, Pepsi, Google, etc.This course is designed to open up a world of artistic possibilities. 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.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!

Overview

Section 1: Introduction

Lecture 1 Artistic projects we will create in this course

Lecture 2 Introduction

Section 2: CSS Properties Needed For This Course

Lecture 3 Position Relative

Lecture 4 Position Absolute - Part 1

Lecture 5 Position Absolute - Part 2

Lecture 6 Selectors - Part 1

Lecture 7 Selectors - Part 2

Lecture 8 Creating Variables locally and globally

Lecture 9 CSS units - px rem em

Lecture 10 CSS units - em %

Lecture 11 CSS units - vmin vmax vh vw

Lecture 12 Creating a triangle with border and absolute position

Lecture 13 Using FLEX to centre an element vertically and horizontally

Lecture 14 Positioning an element to the centre using margin and absolute position

Lecture 15 CSS Transform

Lecture 16 The Art of box-shadow

Lecture 17 The Art of linear-gradient and box-shadow

Lecture 18 Circular pattern with radial gradient

Section 3: England Flag Art

Lecture 19 Styling the England flag

Section 4: Laughing Emoji Art

Lecture 20 Basic Structure of the Laughing Emoji

Lecture 21 Styling the eyes and mouth

Section 5: Pepsi Logo

Lecture 22 Styling the Pepsi Logo

Section 6: Bahamas Flag

Lecture 23 Styling the Bahamas Flag

Section 7: Tik Tok Logo

Lecture 24 Basic structure of the Tiktok logo

Lecture 25 Styling the curve at the top

Lecture 26 Styling the curve at the bottom

Section 8: Duck Art

Lecture 27 Basic structure of the duck art

Lecture 28 Styling the nostril, eye, duck body and flip feather

Lecture 29 Styling the feathers

Lecture 30 Styling the legs

Section 9: WhatsApp Logo

Lecture 31 Basic structure of the WhatsApp logo

Lecture 32 Styling the white triangle

Lecture 33 Styling the green triangle and the phone icon

Section 10: Bulb On and Off

Lecture 34 Basic structure of the bulb

Lecture 35 Styling the handle of the bulb and the shade colour

Lecture 36 Styling the checkbox to give the on-off effect

Section 11: Spinning Fan

Lecture 37 Basic structure of the spinning fan

Lecture 38 Styling the blades of the fan, the rod and the base

Lecture 39 Styling the turn on-off button and animating the fan

Section 12: Popsicles Art

Lecture 40 Basic structure of the popsicles

Lecture 41 Styling the popsicles with gradients

Section 13: Gmail Logo

Lecture 42 Styling the blue and green part of the logo

Lecture 43 Styling the crimson skewed part of the logo

Section 14: Eva from Wall-E

Lecture 44 Basic structure of eva

Lecture 45 Styling the 2 eyes

Lecture 46 Styling the body and 2 arms

Section 15: Google Logo

Lecture 47 Styling the Google logo

Section 16: South African Flag

Lecture 48 Basic structure of the South African flag

Lecture 49 Styling the triangles and the the lines on the flag

Section 17: Uchiha Logo

Lecture 50 Styling the Uchiha Logo

Section 18: Video Game Pad Art

Lecture 51 Basic structure of video game pad

Lecture 52 Styling the 2 handles

Lecture 53 Styling the circle holder

Lecture 54 Styling the tap button and the direction keys

Lecture 55 Rotating and translating the direction keys

Lecture 56 Styling the circle buttons

Lecture 57 Styling the joysticks

Lecture 58 Styling the 2 small rectangle buttons

Lecture 59 Styling the analog and red light

Section 19: Bart Simpson head

Lecture 60 Basic structure of Bart Simpson head

Lecture 61 Styling the hair structure from hair-1 to hair-6

Lecture 62 Styling hair-7 to hair-9 and the forehead

Lecture 63 Styling the back and the eyebulge

Lecture 64 Styling the 2 eyes

Lecture 65 Styling the nose

Lecture 66 Styling the cheek and the covering of the nose

Lecture 67 Styling the lip and the lower jaw

Lecture 68 Styling the neck

Lecture 69 Styling the round neck and the ear shape

Lecture 70 Styling the ear linings

Anyone who wants to learn how to draw or make illustrations with CSS