Many of us love to solve real-world problems either by finding the simplest solution to a complex problem or by reaching a million people over the internet and interacting with them.
What attracts the most when you meet a person - well most of us wouldn't mind agree it's their impression. The way they interact and the way they look.
CSS plays the most significant role when it comes to interacting on the web. Millions of people are browsing over the internet to find something new, it may be a piece of information or an image of a cat.
We the Developers might be very good at writing the best algorithms but what catches the most is when the UI comes in.
Let's Discuss a few properties of the CSS which help us to create the design on top of all the logical codes behind the user interface.
The Pseudo Selectors:
A CSS pseudo-class also known as pseudo selector is a keyword added to an element that showcase a special impact on the selected element(s).
Some pseudo selectors most commonly used:_
- :hover
Shines effects over the element or its children elements when we point our fingers or mouser-over the item.
- ::after and ::before
The most commonly loved selectors after :hover. there is a number of design and animations we can person using either or both of these selectors. From making a Hamburger Menu to converting a checkbox into a button with dynamic text.
- :focus
This works in a similar fashion to :hover except that the pseudo-element glitters when we select or focus on the element it's used.
:empty
My Personal favorite when it comes to removing or hiding the elements that shall no longer be visible to the user.
:placeholder-shown
Now, I won't lie to you. Recently I worked on this project by Hitesh Choudhary. I was unaware if there is some sort of solution where I can find out if an input element is empty after a user tries to make an entry on it. This really helped me to know if the input element is empty and I was surprised by the way it worked.
* =================*=================*=================*=================*
Now that we are aware of the most commonly used selectors let's dive into the world of Positions
The Position takes care of how an element should be positioned in the document.
- Static: This is the default position of all the elements and has no impact on position properties such as top, bottom, left, right, and yes even the most loved property i.e., z-index.
Relative: we use this property almost every day. This keeps the element in its original place providing the features of offset from all 4 directions.
Absolute: the most demandable property I would say. This moves the element on any part of the document the way you like it to appear. The only thing that keeps this position in limit is the relatively positioned element, which of course is a parent in the DOM Tree.
If the element positioned absolute has no parent positioned relative. It can even exceed the ViewPort of the device- making the element disappear.
Fixed: This is most commonly used on floating buttons like a Live Chat App on a website, or may be a contact button on a medical website.
Sticky: Normally we use this in scenarios like header where the element shall always be visible to the user at the same position on the scroll of the page.