DEV Community


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

Discussion (3)

preetis51492531 profile image
Preeti sharma

Very nice article! I'm Preeti, I write for educational blogs. I make a collection of wonderful educational blogs from where I could take inspiration for writing. This article really inspires me though it is a little different from my domain but nonetheless it is a good writing. I sometime write for a education site blogs Let me know your thoughts if I could contribute to your blog too.

nitinga46534232 profile image
Nitin Garg

This is a wonderful article. I can see that you have done a lot of research and your subject knowledge is good and impressive.
This is Nitin, I also like to write for an education blog - This is an online blog for students who want to prepare for India's most difficult entrance exams - IIT JEE and NEET This is a free blog and provide free study material, quiz and notes to those who can't afford to pay hefty fees of coaching institutes. I write free of cost for the good cause. I know you must be busy with your work but if you could take out some time from your busy schedule and have a look at it. I saw a good collection of articles. If you only write a few words about this blog then it can help a lot of students out there. Thanks!

smritiwalia5 profile image
Smriti Walia

Hey, it's Smriti. Your article is a good one. I must say not everybody knows how to write blogs and make them look professional. Being a law student I always look for data points like charts, analysis in articles. Yours seems to give justice to the topic. My personal style includes a lot of graphs, numbers and informative videos. I write on for law related exams.