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>
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>
.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:
Similar Reads
CSS Tutorial CSS stands for Cascading Style Sheets. It is a stylesheet language used to style and enhance website presentation. CSS is one of the three main components of a webpage, along with HTML and JavaScript.HTML adds Structure to a web page.JavaScript adds logic to it and CSS makes it visually appealing or
7 min read
CSS Introduction CSS (Cascading Style Sheets) is a language designed to simplify the process of making web pages presentable.It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing, and positioning.The main advantages are the separation of content (in HTML) and styling (in CSS) and the
4 min read
CSS Syntax CSS is written as a rule set, which consists of a selector and a declaration block. The basic syntax of CSS is as follows:The selector is a targeted HTML element or elements to which we have to apply styling.The Declaration Block or " { } " is a block in which we write our CSS.HTML<html> <h
2 min read
CSS Selectors CSS Selectors are used to target HTML elements on your pages, allowing you to apply styles based on their ID, class, type attributes, and more. There are mainly 5 types of selectors.Basic CSS Selectors: These are used to target elements by tag, .class, or # ID for fundamental styling needs.Combinato
7 min read
CSS Comments CSS comments are used to add notes or explanations to your code, helping you and others understand it better. They start with /* and end with */ and can be used for both single-line and multi-line comments. Note: Comments are ignored by browsers, so they won’t affect how your webpage looks or works.
2 min read
CSS Colors CSS colors are used to set the color of different parts of a webpage, like text, background, and borders. This helps make the page look more attractive and easier to read. You can define colors using names, hex codes, RGB values, and more.You can try different formats of colors here- #content-iframe
5 min read
CSS Borders Borders in CSS are used to create a visible outline around an element. They can be customized in terms ofWidth: The thickness of the border.Style: The appearance of the border (solid, dashed, dotted, etc.).Color: The color of the border.You can try different types of borders here- #custom-iframe{ he
5 min read
CSS Margins CSS margins are used to create space around an element, separating it from neighboring elements and the edges of the webpage. They control the layout by adjusting the distance between elements, providing better organization and readability.Syntax:body { margin: value;}HTML<html> <head>
4 min read
CSS Height and Width Height and Width in CSS are used to set the height and width of boxes. Their values can be set using length, percentage, or auto.Width and HeightThe width and height properties in CSS are used to define the dimensions of an element. The values can be set in various units, such as pixels (px), centim
4 min read
CSS Outline CSS outline is a property used to draw a line around an element's border. It does not affect the layout, unlike borders. It's often used to highlight elements, providing a visual emphasis without altering the dimensions of the element.Syntaxselector{ outline: outline-width outline-type outline-color
4 min read