• Home
  • Web Technologies
    • HTML/CSS
    • JavaScript
    • JQuery
    • Django
    • WordPress
  • Programming
    • Python
    • PHP
  • Linux
    • Ubuntu
  • More
    • About Us
    • Contact Us
    • Write for Us
Facebook Twitter Instagram
  • About Us
  • Contact Us
  • Write for Us
Facebook Twitter Instagram Pinterest VKontakte
mr.wixXsid
  • Home
  • Web Technologies
    • HTML/CSS
    • JavaScript
    • JQuery
    • Django
    • WordPress
  • Programming
    • Python
    • PHP
  • Linux
    • Ubuntu
mr.wixXsid
Home»HTML/CSS»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
  • 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.

Add A Comment

Leave A Reply Cancel Reply

Latest Articles

What is Linux?

January 24, 2023

WordPress Product Black Friday Deals For 2022

November 10, 2022

How to Customize a WooCommerce Shop

October 13, 2022

6 WooCommerce plugins to boost your WordPress Store Functionalities

October 12, 2022

How to Set Up a WooCommerce Store Page

September 29, 2022
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

What is Linux?

January 24, 2023

WordPress Product Black Friday Deals For 2022

November 10, 2022
Other sites
  • BLOG
  • PNG to JPG
  • All in One Video Downloader
  • THE GAGSTER
Copyright © 2023 mr.wixXsid. All rights reserved.
  • Privacy Policy
  • Terms of Use
  • Advertise

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