DEV Community

Cover image for Retro Mini Gallery with Modern CSS
Stephanie Eckles
Stephanie Eckles

Posted on

Retro Mini Gallery with Modern CSS

This project is a tribute to a time in web design (not so very long ago) that was ruled by gradients, patterns, and textures ๐Ÿ’…๐ŸŒˆ๐ŸŽจ

I wrote the initial version of this on JSFiddle in early 2012 with the comment "Yay pseudo elements!" ๐Ÿ˜‚

This updated version is responsive and uses modern CSS techniques, features, and tools like:

  • grid layout
  • object-fit on the image
  • Sass (technically around but not quite stable/well-known in 2012)

It also uses properly semantic and hierarchical HTML, and considers accessibility ๐Ÿค˜

The "retro" techniques used are:

  • not-quite-realistic wood grain background texture
  • text-shadow to "inset" the headline
  • skeumorphic(ish) "Polaroid" design of the cards
  • borderline-offensive gradients on the buttons ๐Ÿ˜…

Please enjoy!

If you're curious about the cut-out effect around the "love" button, it's accomplished by setting the same fixed position background image on the body and the ::after:

body,
.gallery-card__actions::after {
  background: url(http://subtlepatterns.com/patterns/wood_pattern.png) top left repeat fixed;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
anggachelsea profile image
Angga Lesmana

Wow that's cool๐Ÿ˜Š

Collapse
 
ubairnoor profile image
ubair noor

That is cool

Collapse
 
dezideriu_raita_b90ef77e4 profile image
Dezideriu Raita

Wooow nice but use also that TypeScript please coz right now those Love thinks doesn't do anything