How to make digital art with CSS.

css

Intro

I started tinkering with CSS in 2018-20. And took couple CSS (cascading style sheets) courses, intermediate to advance level ones, took the basic one on Khan academy and other ones on udemy. The CSS basic hands-on course on General assembly stands out as I learned more advance CSS manipulation there, along with the maths involved.

CSS art and animation was really awesome, as you could design stuff yourself. It was my first hangover with coding and to make something cool.

Things I designed

My (more or less looking) face

See the Pen CSS Face by Shashwat Verma (@zippytyro) on CodePen.

Here’s the source code and below is the explanation:

  • Positioning the Face:
    The container class ensures the face is centered on the screen using position: fixed and transform: translate(-50%, -50%).
  • Face Structure: The face class defines the main facial structure with rounded corners (border-radius) and a light peach background color.
  • Facial Angles:
    f-angle2 and f-angle1 create angular details on the face using rotated rectangles with specific border-radius values.
  • Hair Styling:
    hair and line create a simple hair design with a dark brown color, using borders for styling.
  • Eye Styling:
    eye1 and eye2 define the eyes with a black background, giving them a circular appearance using border-radius: 50%.
  • Ear Design:
    ear1 and ear2 use rotated rectangles to create ears with a light peach color.
  • Nose Detail:
    The nose class adds a simple, neutral-colored nose to the face.
  • Mouth Design:
    mouth forms the mouth using a rotated circular shape with a red-orange border.
  • Eyeball Styling:
    eyeball-one and eyeball-two create white circular shapes representing the eyeballs.
  • Background and Font Styling:
    The body class sets a gradient background, and the p class styles text at the bottom with a white color, centered alignment, and a specific font-family.

Yin-Yang symbol with hover animation

See the Pen Yin Yang with animation by Shashwat Verma (@zippytyro) on CodePen.

Code explanation:

  • Background Styling:The body element sets the background color to a light purple shade (rgb(204, 132, 252)).
  • Container Positioning: The .container class is positioned absolutely, centered both horizontally and vertically using transform: translate(-50%, -50%), top: 50%, and left: 50%.
  • Yin Yang Symbol Styling: The .ball class styles the yin yang symbol using a circular div with alternating black and white segments, achieved through borders and positioning.
  • Inner White Circle: The .ball::before pseudo-element represents the inner white circle of the yin yang symbol, using absolute positioning and borders.
  • Inner Black Circle: The .ball::after pseudo-element represents the inner black circle of the yin yang symbol, using similar techniques as the white circle.
  • Text Styling: The .t class styles the accompanying text with center alignment, increased font size (1.5em), and a monospace font family. A margin is added to the top for spacing.
  • Hover Animation: The .ball:hover selector applies a rotation animation (round) on hover, creating a spinning effect.
  • Rotation Animation: The @keyframes round rule defines a rotation animation from 0 to 360 degrees, creating a complete spin effect for the yin yang symbol.

Conclusion

It’s interesting to design something purely out of code, CSS makes it possible. The latest features of CSS are even more interesting and worth learning. Although, CSS art being a niche thing I was intrigued by it which made me to learn more.

Read more development articles here.

Related Posts