DEV Community

Cover image for Two tags and two box-shadows will re-create most of the macOS calendar app icon
Robert Mion
Robert Mion

Posted on

Two tags and two box-shadows will re-create most of the macOS calendar app icon

The HTML can be as simple as this without sacrificing on accessibility

<time datetime="08-04-2020">
  <span>Aug</span>
  <span>4</span>
</time>
Enter fullscreen mode Exit fullscreen mode

The first box-shadow gets us the illusion of a stack of paper

span:last-of-type {
  box-shadow: 0 10px #bbb;
}
Enter fullscreen mode Exit fullscreen mode

The other three box-shadows stack within a single declaration

time {
  box-shadow: 0 15px 15px 0 black, 
              0 20px 0 5px gray, 
              0 22px 0 5px black;
}
Enter fullscreen mode Exit fullscreen mode

Now I challenge you to re-create the rest and submit your solution here

Top comments (0)