DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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 (2)

Collapse
 
anggachelsea profile image
Angga Lesmana

Wow that's cool๐Ÿ˜Š

Collapse
 
ubairnoor profile image
ubair noor

That is cool

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. ๐Ÿ›