Creative CSS Drawing Course : Make Art With CSS

Ahmed Sadik guides you to master creative CSS drawing by creating more than 20 shapes, logos, and drawings with diverse methods beyond standard web pages.

Build a diamond using only CSS borders on four spans inside a diamond div. Rotate the diamond by 45 degrees and refine the border colors to resemble a real diamond.

Learn to draw an envelope with a beating heart using CSS borders and pseudo-elements, shaping a card and layering the heart via :before and :after animations.

Learn to build the Pepsi logo using HTML and CSS by composing a blue circle with the white and red overlays via the before and after pseudo-elements.

Learn to build a CSS camera illustration by composing divs for the camera body, lens, flash, and button, and style them with flexbox alignment, circles via border radius, and shadows.

Create a coffee mug illustration using HTML and CSS by layering circles with the box-shadow property, then build the handle with a before pseudo-element and rotate it into place.

Learn to draw the Batman logo using only HTML and CSS by composing ovals, squares, and ears with divs, borders, and transforms.

Design Captain America's shield logo using nested red, white, and blue circles, centered with flexbox, and form a star in the blue circle with bordered triangles.

Create a CSS gear illustration by composing divs with classes gear and bar, centering inner elements, and rotating bars to form teeth using transform and absolute positioning.

Learn to build the git logo in CSS by composing two lines and circles with :before and :after on an orange block, then rotate the design 45 degrees.

Learn to recreate the Google logo in CSS by crafting three colored borders and a blue connector with divs, borders, rotation, border-radius, and z-index to layer the pieces.

Create the Instagram logo using pure HTML and CSS by nesting divs (logo, square, circle, small circle), applying borders, border radius, a radial gradient, and flexbox centering.

Learn to craft an angry panda face in CSS by assembling divs for the head, ears, eyes, nose and mouth, using positioning, borders, border-radius, transforms, and layering.

Learn to build a flat watermelon illustration using HTML and CSS by creating a watermelon div with 16 seed spans styled as inline-block and rounded borders.

Create the Adidas logo using three divs inside a container, positioning and rotating them, then hide overflow and set all lines to black.

Create the brackets logo with CSS by a white box with layered blue shadows for borders, and shape the two brackets inside using before and after pseudo elements.

Create a cute donut illustration in CSS using two-tone pink layers, a smiley face, and a highlight, built with divs, before/after pseudo elements, and precise positioning.

Create a colorful five-part logo with CSS by shaping divs of identical size, applying border-radius for curved corners, and assembling them with flexbox wrap into a two-top, two-middle, one-bottom layout.

design the react logo in css by building three ovals with before and after pseudo elements, rotating them to form a blue emblem and centering an inner circle.

Explore css drawing by building the LG logo from divs, forming the letters L and G on a red circular background with borders and transforms.

Create a CSS ice cream illustration using a container div, a stick, and side pieces, with three bite animations and melting parts to reveal negative space.

Create a CSS Pikachu drawing by building a container with eyes, nose, cheeks, and a mouth, using absolute positioning and simple animations to make the eyes move horizontally.

Create a koala drawing with simple circles in CSS and HTML, building a head, ears, eyes, nose, and triangular hair using absolute positioning, flex centering, and a red canvas.

Learn to build an owl drawing using HTML and CSS, layering divs, pseudo elements, and shapes to create head, eyes, beak, wings, feet, and a branch.

Create a polar bear head using CSS and HTML by layering divs for the head, ears, eyes, and muzzle, with responsive positioning and z-index to achieve depth.

Create a playful snowman drawing using HTML and CSS by building the head, body, hat, scarf, eyes, nose, hands, and buttons with positioned divs and shapes.

Design a Bomberman drawing with HTML and CSS by assembling a head, body, arms, legs, and face from divs. Animate blinking eyes and a waving left hand for lively motion.