DEV Community

Oliver Kühn
Oliver Kühn

Posted on

100 div curtain effect

#codepen #css #effect #nojs

My small contribution for the September 2020 CodePen Challenge. Hope you like it!

  • pure CSS
  • grid layout
  • view port always covered (portrait or landscape doesn't matter)
  • every curtain div own correct --col and --row custom properties
  • transition duration is calculated from values of --col and --row
  • interactivity handled through a checkbox, label and the CSS sibling combinator
  • div labels generated by a CSS counter

Top comments (0)

Read next

jess profile image

Join us for the next Frontend Challenge: Space Edition 👾🪐👽

Jess Lee -

arjuncodess profile image

Interactive Solar System Exploration with CSS & JavaScript

Arjun Vijay Prakash -

mroman7 profile image

Write less CSS using :is(), :where(), and :has() pseudo-classes

Roman -

rarestoma profile image

Best Tailwind CSS Template Builders

Toma Rares -