5 Amazing CSS Styles that Every Developer Should Know
Last Updated :
10 Apr, 2023
CSS (Cascading Style sheets) helps the developer to enhance the visual appearance of web pages, In other words, we can say that CSS adds life to web pages and beautifies it. Using CSS, we can change the layout, color, fonts, images, and the best part is that for a particular style or layout we can write a code once and use it many times whenever we want to implement it across our website which is very advantageous and time-saving.
Here we will discuss 5 CSS tricks that can make your website stand apart.
1. Customized Cursor: Ever felt bored using the same ordinary cursor every time? What if you could customize your cursor according to your wish? Imagine a cursor that has your image or something unique? Sounds cool right? This can be done simply by using CSS in a single line of code. In the below example, we have used three different images for the cursor: GeeksforGeeks logo, an image of cheese, and a rocket, you can use any image of your choice.
cursor: url("anyimage.png"), pointer;
Example:
Filename: index.html
html
<!DOCTYPE html>
<html>
<head>
<title>Customized Cursor</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<button>GFG Cursor</button>
<button>Cheese Cursor</button>
<button>Rocket Cursor</button>
</div>
</body>
</html>
|
Filename: style.css
css
body {
background-color: pink;
padding: 0;
margin: 0;
}
.container {
width: 690px;
height: 220px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
button {
font-size: 30px;
background-color: white;
border: none;
outline: none;
text-transform: uppercase;
color: black;
width: 200px;
padding: 20px;
padding-left:40px;
padding-right:40px;
}
button:nth-child(1) {
cursor: url("gfg.png"),pointer;
}
button:nth-child(2) {
cursor: url("cheese.png"),pointer;
}
button:nth-child(3) {
cursor: url("rocket.png"),pointer;
}
|
Output:
Limitations for using any desired image as a cursor:
- Any image format can be used like JPG, PNG, or BMP
- The image size should be 32×32px, any image size greater than this won’t work.
2. Shadow Effect: The shadow effect is a very simple yet amazing effect that gives a 3D touch to our text.
h1 {
font-size: 5rem;
text-shadow: 5px 5px 0px green;
}
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Shadow Effect</title>
<style>
h1 {
font-size: 5rem;
text-shadow: 5px 5px 0px green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
|
Output:
3. Colorful Filters: The color of any image can be changed without using any editing tool, this can be done easily using the CSS filter property.
Filename: index.html
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>CSS FILTERS</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="image">
<img class="original" src="gfg.jpg">
<img class="brightness" src="gfg.jpg">
<img class="huerotate" src="gfg.jpg">
<img class="grayscale" src="gfg.jpg">
<img class="blend" src="gfg.jpg">
</div>
</body>
</html>
|
Filename: style.css
css
.image img {
max-width: 300px;
}
.original {
}
.brightness {
filter: brightness(150%);
}
.huerotate {
filter: hue-rotate(180deg);
}
.grayscale {
filter: grayscale(100%);
}
.blend {
filter: invert(1) hue-rotate(260deg);
}
|
Output:
Property tip: The color of any image can be changed to many colors, just by changing the value of degrees. Example:
filter: invert(1) hue-rotate(90deg);
filter: invert(1) hue-rotate(150deg);
4. Background Clipped Text: Almost every one of us has tried giving fancy background to our text which is very simple. ‘Background clipped text’ means trimming the background image to the text so that it looks more attractive and cool. We can simply do it by the below line of code, where ‘anyimage’ is the desirable image of your choice which you want to clip.
background-image: url('anyimage.jpg');
-webkit-background-clip: text;
color: transparent;
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Background Clipped Text</title>
<style>
h1 {
font-size: 12rem;
background-image: url('anyimage.jpg');
-webkit-background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
<h1>GeeksforGeeks</h1>
</body>
</html>
|
Output:
You can even clip a GIF in the background of the text! this can be done using the same above code just replacing the name of the image with the name of the GIF
5. Drop Caps Text: ‘Drop caps’ is a text effect in which the first letter of the first paragraph is made larger to create an eye-catchy effect, it is often used in newspapers, magazines, and novels.
p::first-letter {
color:green;
font-size: 3.9rem;
float: left;
padding-right: 4px;
}
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Drop Effect</title>
<style type="text/css">
.content {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
.article {
width: 50%;
margin: 20px;
}
p::first-letter {
float: left;
line-height: 30px;
font-size: 50px;
padding-right: 5px;
padding-left: 5px;
color: green;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: -5px;
margin-right: 5px;
}
p {
font-size: 14px;
}
</style>
</head>
<body>
<div class="content">
<div class="article">
<p>
Geeksforgeeks is a computer science
portal for geeks. The content on
GeeksforGeeks has been divided into
various categories from programming
languages, topic-wise practice,
development , data structures ,
algorithm to interview preparation,
company- wise interview experience,
recruitment procedure of a company
it has everything covered. A drop cap
is a effect in which the first letter
of the first paragraph is made larger
to create an eye catchy effect it is
often used in newspaper , magazines
and novels.
</p>
</div>
</div>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...