DEV Community

bhuvana-guna
bhuvana-guna

Posted on

2 1

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

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (3)

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

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay