Top 10 CSS Properties Making HTML Developer’s Life Easy

CSS offers many properties to organize HTML elements in order to render a webpage. Of those, here’s a list of Top 10 CSS properties that makes life easy of any HTML CSS developer.

Clearfix

Custom Text Selection

Easing Variables

Custom Variables

Disable Selection

Loading Spinner

Gradient Text

Overflow Scroll Gradient

Reset All Styles

Sibling Fade

Lets look in detail at each of these Top 10 CSS properties with example.

1. Clearfix

A clearfix is the property to make way for an element to automatically clear its child elements. This helps in eliminating the need to add additional markup. It’s generally used in float layouts where elements are floated to be stacked horizontally. The clearfix is a way to combat the zero-height container problem for floated elements.

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<head>

<style>

div {border:5pxsolid#000;padding:5px;}

.image1 {float:right;}

.clearfix {overflow:auto;}

.image2 {float:right;}

</style>

</head>

<body>

<!-- Here, image is bigger than the container, so it overflows outside of that container -->

In the first image, the image is taller than the element containing it, and it is floated, so it overflows outside of its container. In the second image, we added clearfix class with overflow: auto; to the containing element, to fix the problem.

2. Custom Text Selection

Previously, there was no option to play with the text selection properties. Now we have 3 properties which works with ::selection :

4. Custom Variables

Mostly variable declaration function is available on the development side but now any HTML CSS developer can call the variable in CSS3 and they can apply within the CSS. This property is very helpful to create functionality in CSS and reduce the website development time.

5. Disable Selection

6. Loading spinner

Earlier for loading spin animation, we had to use Jquery but now with CSS3, we can do it very easily using CSS.

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<div class="loading"></div>

@keyframes loading-spin {

0% {

transform:rotate(0deg);

}

100% {

transform:rotate(360deg);

}

}

. loading {

display:inline-block;

border:4pxsolidrgba(0,0,0,0.1);

border-left-color:#000000;

border-radius:50%;

width:30px;

height:30px;

animation:loading-spin1.2slinearinfinite;

}

7. Gradient Text

Earlier, we had to use images in order to display text with gradient. But with CSS3, it is possible to give gradient effect in the text itself.

CSS

1

2

3

4

5

<p class="gradient">I am Gradiant</p>

.gradient {background:-webkit-linear-gradient(black,red);

-webkit-text-fill-color:transparent;

-webkit-background-clip:text;

}

8. Overflow Scroll Gradient

Whenever width and height is fixed and the content is larger than that, then the content will overflow and scroll will come into display. As a default behavior, content in the bottom will cut somewhere. For a smooth transition scroll, we can put some animation. So here this property comes to help.

position: relative property is used for parent analytic positioning context for child-content. ::after property defines a child content. background-image: linear-gradient(…) property is used to add gradient that comes in fade from top to bottom. position: absolute property is used for child content of the particular div and to set the position as per relative positioned div.

9. Reset All Styles

Earlier in order to remove all effects from a particular page, the developer had to remove it line-by-line. But with CSS3, you can do this with just one div on top of the page with all:initial property.

Vikas Dave

Hello I am UI/UX Designer, have a good experience in design layouts and developing HTML based sites using bootstrap, JQuery plugins etc. Also having good experience in WordPress theme integration and working within PHP frameworks like Modx, Laravel, Yii, Yii2, CodeIgnitor.