Stylize what document thumbnails look like

Older designers will appreciate this…

Remember when to make a document thumbnail on a website look like a document and visually stand out from the rest of the images and content you whipped open PhotoShop, rotated the thumbnail, added a drop shadow, and saved an image for the web? Yeah, me too…and I don’t miss those days!

There are many current ways to do this, and it’s easy peasy in CSS!

Go Custom

1. Make a site-wide custom CSS class for your stylized document thumbnails

Making a custom CSS class can be an all-in-one approach where you custom style this type of element once with a single class instead of stacking multiple utility classes every time you want to recreate the thumbnail look.

 .document-tn {
    transform: rotate( 3deg);
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 3px 20px 0 rgb(0 0 0 / 19%);
    border: 1px solid #ccc;
    margin-bottom: 0.5rem;
}

In this scenario, you only apply one class to chosen <img> tags to add a rotation, shadow, border, and margin to the image thumbnail.

---

Are you interested in how to Take Charge of Your Health? Then please take a look at the West Virginia WiseWoman handbook. I designed this publication back in 2019. This free resource is intended to help you learn to make better choices for living a healthy lifestyle. The cover of this publication is shown in this post’s thumbnail examples. You can download it as a pdf.

---

Use a CSS Framework

Alternatively, CSS Frameworks give you access to utility classes you can stack to make the desired effect.

1. Bootstrap CSS Styles

• Bootstrap includes shadow utility classes (4.0 shadows or 5.0 shadows docs).
• Bootstrap does not, by default, include transform styles (yet). Instead, create a new rotation class.
• A simple border is baked right in, too (4.0 borders or 5.0 borders docs).
• Margins are easy to add with spacing utilities. Note that there is a change from margin bottom being “mb” to (4.0 margins or 5.0 margins docs).

In this code example, using Bootstrap, the image now has a border, bottom margin, and shadow.

<img  class="shadow border mb-2">

Add your own CSS class, perhaps use .rotate3 or .rotate-3:

.rotate-3 {
    transform: rotate( 3deg);
}

Once you’ve added your custom class, you can use your .rotate-3 class on any thumbnail images you choose. The final code for the stylized document look will have 4 classes applied.

<img  class="shadow rotate-3 border mb-2">

Explore this Bootstrap code in Codepen.

2. Tailwind CSS Styles

• Tailwind includes box shadow utility classes (Tailwind shadow docs).
• Tailwind includes rotate transform classes; you’ll need to use both the .transform and rotate-3 classes. (Tailwind rotate docs)
• Tailwind provides many options for borders. You’ll need to define border pixels, color, and type. The pixel size class is .border, which is 1px. Don’t forget your style, in this case solid. Finally, add a border color such as .border-gray-200. (Tailwind border docs).
• Margins are easy to add with spacing utilities. Declare bottom with “mb,” meaning margin-bottom. (Tailwind margins).

The final code for this stylized document look will have 7 classes applied.

<img class="shadow transform rotate-3 border border-solid  border-gray-200 mb-1">

Explore this Tailwind CSS code in CodePen.

Happy Web Designing!