DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,864 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
bhuvana-guna
bhuvana-guna

Posted on

CSS Only Image - Beginner

I have been wanting to try CSS only images for a very long time. When I found this sketch by Bruno Echenique CampanhΓ£ on google images I wanted to try it with only CSS.

Challenges Faced

  1. Creating concentric circles and lines in the background without any extra markups

Concepts learnt

  1. How to efficiently breakdown an image to divs (which should be nested and in which order)
  2. How to not use too many markups

CSS Properties learnt

  1. linear gradient
  2. radial gradient
  3. clip-path

Helpful Resources

  1. Clippy
  2. Shapy- Gradient shape editor by Victoria
  3. Starter course for absolute CSS Images begineer by Michael Mangialardi

Top comments (3)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›