Close Menu
  • Home
  • Web Technologies
    • HTML/CSS
    • JavaScript
    • JQuery
    • Django
    • WordPress
  • Programming
    • Python
    • PHP
  • Linux
    • Ubuntu
Facebook X (Twitter) Instagram
  • About Us
  • Contact Us
  • Write for Us
  • AIO SEO TOLLS
Facebook X (Twitter) Instagram Pinterest VKontakte
mr.wixXsid
  • Home
  • Web Technologies
    • HTML/CSS
    • JavaScript
    • JQuery
    • Django
    • WordPress
  • Programming
    • Python
    • PHP
  • Linux
    • Ubuntu
mr.wixXsid
Home » Cool CSS Tricks You Must Know
HTML/CSS

Cool CSS Tricks You Must Know

mrwixxsidBy mrwixxsidAugust 31, 2022Updated:August 31, 2022No Comments3 Mins Read
Facebook Twitter Pinterest Tumblr Reddit WhatsApp Email
Cool CSS Tricks
Share
Facebook Twitter LinkedIn Pinterest Email

If you think CSS can only be used to ‘prettify’ a website, add some colors to a text or make cool animations, then you might have to rethink what all CSS is capable of. Learning some cool CSS tricks won’t hurt right? so are you ready to know the actual powers of CSS? Then this article where we will tell you all you need to know about some awesome tricks of CSS features. It focuses on explaining some hidden but valuable cool tricks you can do just with the Cascading Style Sheets (CSS).

Here are some cool CSS tricks for you.

1 :first-letter

The first-letter selector is used to specify the style of the first letter of an element, it only applies to block-level elements. We can use :first-letter to drop the first letter of the text.

<p> Time Magazine </p>
p:first-letter {
  font-size: 2rem;
  color: #1363DF;
}

Time Magazine

2 :where()

The :where() CSS pseudo-class function takes a selector list as its argument and selects any element that can be selected by one of the selectors in that list. When applying the same style to multiple elements, the CSS might look like this:

.card h1, .card h2, .card h3 {
  color: #ddd;
}

This is equivalent to the following

.card :where(h1, h2, h3) {
 color: #ddd;
}

The where() function accepts a selector list as its argument and will select all elements that can be selected by any rule in the selector list.

3 drop-shadow

Have you ever tried adding a box-shadow to a transparent image only for it to look like you have added a border? I think we’ve all been there. The solution to adding shadow effects for transparent images is to use drop-shadow.

4 steps()

steps() is a timing function that allows us to break an animation or transition into segments, rather than one continuous transition from one state to another. The function takes two parameters – the first specifies the positive number of steps we want our animation to take.

There’s a bit of math involved when using steps(), but it’s not too painful. We want the second hand to rotate 360 degrees through 60 steps and to complete the animation within 60 seconds.

5 cursor

The cursor CSS property sets the mouse cursor, if any, to show when the mouse pointer is over an element.

The cursor setting should inform users of the mouse operations that can be performed at the current location, including text selection, activating help or context menus, copying content, resizing tables, and so on.

Let’s take a look at how we can implement them on a simple div:

Go and try it out yourself There are many more…

Some Cool CSS Tricks

1. :first-letter
2. :where()
3. drop-shadow
4. steps()
5. cursor

Cool CSS Tricks CSS CSS Tricks
Share. Facebook Twitter Pinterest Tumblr Reddit Telegram WhatsApp Email
mrwixxsid
  • Website
  • Facebook
  • X (Twitter)
  • Instagram

I am a Full-Stack Web Developer & Security Analyst from Bangladesh. I have built web/online applications on various Open Source Stacks and love information security testing.

Related Posts

HTML Tags You Probably Didn’t Know Existed

August 24, 2024

CSS Myths Busted: 10 Ways to Make CSS Less Painful

August 24, 2024

10 CSS Tips & Tricks Will Blow Your Mind!

August 24, 2024
Add A Comment
Leave A Reply Cancel Reply

Live Cricket
Live Cricket Updates
Latest Articles

Even Odd number’s in Assembly

April 10, 2025

Summation of Two Numbers in Assembly: Input and Output Explained

April 10, 2025

Resolving “sudo: command not found” in Linux: A Complete Guide

January 3, 2025

How to Change the Root Password in Ubuntu (and Why You Should Do It Now!)

October 4, 2024

Using the Python Pickle Module: A Beginner’s Guide

August 25, 2024
About

Mr.wixXsid is a website that publishes Web technologies, Programming, Linux, and Open-source ERP articles for an aspirant like you and us. We are in-depth research & present valuable content & resources to help the Web professional of all levels.

Latest

Even Odd number’s in Assembly

April 10, 2025

Summation of Two Numbers in Assembly: Input and Output Explained

April 10, 2025
Other sites
  • BLOG
  • SEO TOOL’S
  • All in One Video Downloader
  • SELFISH WORLD
Copyright © 2025 mr.wixXsid. All rights reserved.
  • Privacy Policy
  • Terms of Use
  • Advertise

Type above and press Enter to search. Press Esc to cancel.

Ad Blocker Enabled!
Ad Blocker Enabled!
Our website is made possible by displaying online advertisements to our visitors. Please support us by disabling your Ad Blocker.