CSS (Cascading Style Sheets) is a powerful tool that allows you to customize the appearance and create special effects for your blog. With CSS, you can animate elements on your page by adding animations, changing colors, sizes, and more. In this article, we will learn some popular CSS effects and how to apply them to your Blogger blog.

Why Should You Use CSS To Create Effects?

Adding CSS effects not only makes your blog more impressive and professional, but also has many other benefits:

• Increase interactivity: CSS effects help attract users’ attention and encourage them to interact more with blog content.
• Improve user experience: When elements on the page are animated, users will feel your blog is more alive and easier to use.
• Show creativity: CSS effects allow you to create unique, individual styles for your blog.

How to Use CSS to Create Special Effects

Below are the basic steps and some examples on how to create special CSS effects for blogs on Blogger.

1. Hover Effect (Mouse Over)

Effect hover is one of the most common effects, it is triggered when the user hovers over an element. For example, you can make a button or image change color, zoom in, or out when hovered over.

Simple example with hover effect for button:

/* CSS */button {
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #2980b9;
}
            

When the user hovers over the button, the background color changes from light blue to dark blue.

2. Animation

Effect animation. animation allows you to create smooth movements for the element. You can use animation to create effects such as making elements slide in from the outside, blink, or rotate.

Here’s an example of a piece of text sliding in from the right:

/* CSS */@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.text-slide-in {
    animation: slideIn 1s ease-out;
}
            

Add layers text-slide-in into the text in the HTML to apply this effect:

<p class="text-slide-in">Đây là hiệu ứng chuyển động trượt từ bên phải vào.</p>
            

3. Zoom In/Reduce Effect (Scale)

Effect scale. scale helps you zoom in or out on elements on hover or when a certain event occurs.

Example of an image that zooms in when the user hovers over it:

/* CSS */img {
    transition: transform 0.3s ease;
}

img:hover {
    transform: scale(1.2);
}
            

When hovering over the image, it will be enlarged to 1.2 times its original size.

4. Box Shadow

Effect box-shadow helps create shadows for elements, making them appear more prominent on the page.

Example of creating a shadow for a box or content tag:

/* CSS */.card {
    padding: 20px;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
            

When hovering over a card cardthe shadow will be darker, creating a striking effect.

5. Blinking Effect

Effect blinking often used to draw attention to an element by making it flash.

Here’s how to create a flickering effect for text:

/* CSS */@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

.blinking-text {
    animation: blink 1s infinite;
}
            

Add layers blinking-text to the text to apply the flicker effect:

<p class="blinking-text">Văn bản này sẽ nhấp nháy.</p>
            

How to Add CSS to Blogger

To apply CSS effects on Blogger, you need to add CSS code to the theme customization section. Here are the steps:

1. Go to your Blogger admin page and select the blog you want to edit.
2. Select “Themes” from the left navigation bar.
3. Click the “Customize” button and select “Advanced”.
4. Scroll to the bottom and click “Add CSS”.
5. Copy and paste the CSS code snippets you want to use into the empty box.
6. Click “Save” to apply the changes.

Tips for Using CSS Effects Effectively

• Don’t overuse the effect: Use moderate effects to avoid making the website too confusing and reducing the user experience.
• Performance optimization: Only apply effects to important elements to avoid slowing down page loading speed.
• Test on multiple devices: Make sure CSS effects display well on both desktop and mobile devices.
• Use compatible effects: Check if CSS effects are compatible with all popular browsers.

Blogger tips

Using CSS to create special effects is a great way to make your blog stand out and attract readers. By applying effects like hover, animation, scale, box-shadow and more, you can improve user experience and make your blog more lively. Hopefully with the above instructions, you will easily add special CSS effects to your blog. Wish you success!