• Seo Expert
  • Khaali Paper

Important Use Full CSS

The following is a basic and most common CSS properties how they are used to style the web pages.

#CSS Transition Property:
.animation {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
or
.animation {
  -webkit-transition: all .7s ease-in-out;
  -moz-transition: all .7s ease-in-out;
  -o-transition: all .7s ease-in-out;
  -ms-transition: all .7s ease-in-out;
  transition: all .7s ease-in-out;
}
----------------------------------------------------------------------------
The appearance property defines how elements form controls are rendered:
  -webkit-apperance: none;
  -moz-apperance: none;
  appearance:none;

Example

select{
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-overflow:'';
  text-indent: 0.01px; /* Removes default arrow from firefox*/
  text-overflow: ""; /*Removes default arrow from firefox*/ }
  select::-ms-expand {
  display: none;
}
 ----------------------------------------------------------------------------
 body { -ms-overflow-style: scrollbar;}
------------------------------------
The box-shadow CSS property is used to add shadow effects around an element's frame.#The box-shadow Property:

.shadow {
  -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
}
------------------------------------
#Letter Spacing:
letter-spacing: 0.0px;
Or
letter-spacing: 1px;

#Box Sizing:
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;

 #Text Shadow:
 text-shadow: 0px 1px 0px black;
------------------------------------
#Gradient Background css:
background: #e2e4e7;
background: -moz-linear-gradient(top, #e2e4e7 0%, #e0e2e5 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #e2e4e7), color-stop(100%, #e0e2e5));
background: -webkit-linear-gradient(top, #e2e4e7 0%, #e0e2e5 100%); background: -o-linear-gradient(top, #e2e4e7 0%, #e0e2e5 100%);
background: -ms-linear-gradient(top, #e2e4e7 0%, #e0e2e5 100%); background: linear-gradient(to bottom, #e2e4e7 0%, #e0e2e5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e4e7', endColorstr='#e0e2e5', GradientType=0 );

------------------------------------
#Before/Affter - Font Awesome

::before {
  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007";
}

::before {
  font-family: "Font Awesome 5 Free"; font-weight: 400; content: "\f1ea";
}

::before {
  font-family: "Font Awesome 5 Brands"; content: "\f099";
}

CSS Properties

You can customize this code further as per your requirement.