Stylize what document thumbnails look like

S

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!

Now, there are so many 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 serve as 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 apply a rotation, shadow, border, and margin to the image thumbnail.

Thumbnail example of how to add class in CSS
/*** The Basics ***/
<img class="document-tn">

/*** Example in WordPress ***/
<img src="https://designertofullstack.com/wp-content/uploads/2021/10/document-thumbnail-example.jpg" alt="Thumbnail example of how to add stylized CSS class" class="wp-image-687 document-tn"/>

Are you interested in how to Take Charge of Your Health? Then please take a look at the West Virginia WiseWoman handbook. 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 that you can stack to make the effect you desire.

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 your own 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 class. (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.

About the author

Kelly Barkhurst

Designer to Fullstack is my place to geek out and to share tech solutions from my day-to-day as a designer, programmer, and business owner (portfolio). I also write on Arts and Bricks, a parenting blog and decal shop that embraces my family’s love of Art and LEGO bricks!

Add comment

Recent Posts

Archives

Categories