CSSArt2.0

A repository containing my next-generation CSS artworks.

To access my artworks:

1. Visit the GitHub website https://khanhtranngoccva.github.io/CSSArt2.0/
2. Each artwork has its unique folder name. Add this name after the main URL.

Example: https://khanhtranngoccva.github.io/CSSArt2.0/CupheadVonBonBon

How it's made:

Tech used:

1. For every artwork except 3D model creations, I create a unique, original sketch to maximize authenticity and art purity with the help of Autodesk Sketchbook.
2. The sketch is colored using the same software.
3. A copy of the artwork in pure CSS code is then generated by partially tracing on the original sketch.

Optimizations:

• The CodePen editor and other browsers can be adjusted to different sizes, therefore my CSS works need to responsive across all viewport sizes. To achieve responsiveness, a NodeJS script is run to convert pixel lengths (px units) to length expressions using CSS variables.
• A master control variable (vmin units) that works with the length expressions mentioned above is used to dictate the size of the responsive artwork.

Lesson learned:

• Practiced sketching and illustration.
• Gained experience with various CSS techniques: transforms, filters, positioning, border-radius, outlines and borders, gradients,...
• Strengthened general problem solving skills.

Gallery