Customizing WordPress - Adding a Post List Rounded Corners and Drop Shadow Effect to a Blog Page (feat. CSS)

WordPress blogs's post listings page is the first place visitors see after the main page. WordPress Improving the look of this page through decorating can greatly enhance the user experience.

In this post, we'll show you how to apply simple CSS code to make your blog page's post list look a little more aesthetically pleasing by angling it. Rounded cornersand then when you hover over it, you'll see that the Shadow effectsin a more attractive way.

Before Applying WordPress Decoration: The Rigid Rectangle Design

Before you customize WordPress, your post list is displayed as a simple square by default, as shown above. While this design is clean, it can sometimes look too stiff and bland. In some cases, the distinction between each post item isn't so clear, and users may have trouble recognizing individual posts.

How to apply CSS to WordPress

Before we get to applying CSS, let's walk through how to add CSS in WordPress, and here's the path we'll take.

1. Log in to your WordPress admin page.
2. In the left menu, click "Appearance" or "Appearance."
3. “Customize" or "Decorate".
4. “Additional CSS" section and click it.
5. Enter your CSS code here (that code is below).
6. “Public" or "Publish" button to apply the changes.

This method avoids having to modify your theme files directly, and your changes are preserved when you update your theme.

Applying CSS code

You can improve the look of your post list by adding the following CSS code to the Customize-AdditionalCSS section of WordPress as mentioned above. Copy the code below and navigate to the path we gave you above and paste it in.

/* Set individual post boxes to be rounded, and prevent them from overflowing */
.post {
    border-radius: 10px; /* make the corners rounded (10px curvature) */
    overflow: hidden; /* Prevent content from overflowing the box border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0, 0.1); /* add a soft shadow to the box (0px x-axis, 4px y-axis, 8px spread) */
    transition: all 0.3s ease-in-out; /* Process all style changes smoothly for 0.3 seconds */
}

/* Styling when hovering over the post box */
.post:hover {
    transform: scale(1.02); /* slightly increase the size of the box (1.02x) */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0, 0.15); /* change the shadow to be more pronounced (6px y-axis, 12px spread) */
}

In the code above, you can change the curvature by adjusting the number on this line border-radius: 10px. In the image below, the rounded corners are the result of setting this number to 5.

After: Smooth, polished design

After applying this CSS code, each item in the post list looks like this: Can you notice the difference between the left and right post appearance? Rightis used to zoom in on a list of posts by hovering the mouse over it, and the Shadow effectsappears.

1. Rounded corners: The corners of each post box are rounded to give it a softer feel.
2. Shadow effects: A slight drop shadow makes each post stand out on the page.
3. Hover Effects: When the mouse hovers over the post, it zooms in slightly and highlights the shadow, making it more interactive.
4. Smooth transitions: All style changes are applied smoothly, providing a visually seamless experience.

These changes give the post list page a more modern, sleek look, and each post item is clearly categorized, making it easier for users to navigate through your content. The hover effect also increases user interaction, creating a more user-friendly experience.

Conclusion

With a few simple lines of CSS code, I was able to make some really nice improvements to the list of posts on my WordPress blog. These visual improvements aren't just aesthetic, they have a direct impact on the user experience and contribute to the overall quality of my blog. Try these CSS code tricks to give your visitors a more attractive and user-friendly design.

As a side note, here's another tip. Attention All: The Secret to Animating Buttons That Stand Out (feat. WordPress) We hope you've had a chance to customize the buttons you use in your posts.

# Explanation of the code

/* Set individual post boxes to be rounded, and prevent them from overflowing */
.post {

This line defines the style for elements with the '.post' class. It applies primarily to elements that represent blog posts.

    border-radius: 10px; /* round the corners (10px curvature) */

This property rounds the element's corners to a 10-pixel radius. This turns square corners into soft curves.

    overflow: hidden; /* Prevent content from going beyond the box boundaries */

This property ensures that the content inside the element does not go outside the defined boundaries. This is especially important when used with rounded corners.

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0, 0.1); /* Add a soft shadow to the box (0px x-axis, 4px y-axis, 8px spread) */

This line adds a drop shadow effect to the element. It has a horizontal offset of 0, a vertical offset of 4px, a blur of 8px, and a black 10% opacity.

    transition: all 0.3s ease-in-out; /* process all style changes smoothly for 0.3 seconds */
}

This property sets all style changes to happen smoothly over the course of 0.3 seconds. The 'ease-in-out' timing function ensures that the change starts slowly, speeds up, and ends slowly again.

/* Style when hovering over the post box */
.post:hover {

This selector defines the style that will be applied when the user hovers the mouse over the '.post' element.

    transform: scale(1.02); /* slightly enlarge the box size (1.02x) */

This property enlarges the size of the element to 1.02 times its original size. This has the effect of making the element slightly larger when hovered over.

    box-shadow: 0 6px 12px rgba(0, 0, 0, 0, 0.15); /* Make the shadow more pronounced (6px y-axis, 12px spread) */
}

This line emphasizes the shadow more on mouseover. The vertical offset is increased to 6px, the blur is increased to 12px, and the opacity is increased to 15%.