5 Amazing CSS Styles that Every Developer Should Know (original) (raw)

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 `

`

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 `

GeeksforGeeks

`

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 `

`

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 `

GeeksforGeeks

GeeksforGeeks

`

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 `