Adding Creative CSS Effects to Your Website: A Gradient Text, Background Ovalay, Diagonal Structure, Scroll bars
Adding Creative CSS Effects to Your Website
1. Gradient Text
Gradient colors add flair to headings, making them visually appealing. Here's how to implement it:
h1 {
background-image: linear-gradient(to right bottom, rgba(115, 209, 113, 0.1), rgba(58, 187, 128, 0.8));
background-clip: text;
color: transparent;
}
Example:
<h1>Welcome to My Website</h1>
2. Background Overlay
Overlaying a semi-transparent color on top of a background image creates depth. Follow these steps:
body {
background-image: linear-gradient(to right bottom, rgba(115, 209, 113, 0.1), rgba(58, 187, 128, 0.8)), url("image/photo.jpg");
background-size: cover;
background-position: top;
width: 100%;
height: 100vh;
}
3. Diagonal Structured Div
Breaking away from traditional rectangular boxes, let's create a diagonal div:
.header {
background-color: #aaa;
width: 100%;
height: 80vh;
clip-path: polygon(0 0, 100% 0, 100% 40vh, 0 100%);
}
Example:
<div class="header">
<!-- Content goes here -->
</div>
4. Customized Scrollbars
Personalize your website further by designing custom scrollbars:
*::-webkit-scrollbar {
width: 8px;
border-radius: 0 8px 8px 0;
background-color: #000;
}
*::-webkit-scrollbar-thumb {
width: 8px;
border-radius: 8px;
background-color: darkslategray;
}
These CSS techniques can greatly enhance the aesthetics of your website. Stay tuned for more tips and tricks, and feel free to explore further on your own. For additional effects and animations, check out on my YouTube channel.
That''s all for now! Keep experimenting and have fun coding!
