This article will record the CSS fragments that we often use. Using these CSS can help us solve many practical project problems. Cracks suggest favoring your collection and looking at it later for easy searching.

Clear Float

There are many ways to avoid the hassle that floating causes to our code. One of the most convenient and compatible is to create another <div></div> in the same directory, but that adds a lot of useless code.In this case, we use: after to solve the floating problem. If there is a floating element in the current hierarchy, then add a clearfix class to its parent.

// Clear Float
.clearfix:after {
  content: "\00A0";
  display: block;
  visibility: hidden;
  width: 0;
  height: 0;
  clear: both;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
.clearfix {
  zoom: 1;
}

Vertical Horizontal Centering

Centering horizontally in the world of css is simpler than centering vertically. After years of evolution, there is still no good way to center elements vertically (each has advantages and disadvantages, but none of them can achieve the goals of good compatibility and low destructive power). Here are a few common ways to achieve this

Absolute positioning with known width and height

//Specially established Q-q-u-n:784783012 to share learning methods and small details to be noticed, keep updating the latest tutorials and learning techniques
(From zero basics to front-end project hands-on tutorials, learning tools, full stack development learning routes and planning)
position: absolute;
top: 50%;
left: 50%;
margin-top: -3em;
margin-left: -7em;
width: 14em;
height: 6em;

Absolute Positioning + Unknown Width and Height + Trans

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
//Browser prefix needs to be supplemented

flex makes it easy to center horizontally and vertically (unknown width and height)

display: flex;
align-items: center;
justify-content: center;

Add ellipsis at end of text

When the content of the text exceeds the width of the container, we want to add an ellipsis by default to prompt the user to omit the display of the content.

Fixed width for single line display...

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

Width is not fixed, suitable for multi-line and mobile display

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

Fuzzy effect of making text

When we want to create a sense of ambiguity in the text, we can do so

color: transparent;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);

Animation for simple loading

We achieve a very concise loading effect

.loading:after {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  content: "\2026";
  -webkit-animation: ellipsis 2s infinite;
}

// Animation section
@-webkit-keyframes ellipsis {
  from {
    width: 2px;
  }
  to {
    width: 15px;
  }
}

Custom Text Selection Style

By default, when we select text on a Web page, we give the selected part a dark blue background color (you can try it yourself by picking up the mouse). What if we want to customize the style of the selected part?

// Note that only these two attributes can be modified Font color Select Background color

element::selection {
  color: green;
  background-color: pink;
}
element::-moz-selection {
  color: green;
  background-color: pink;
}

Top Corner Sticker Effect

Sometimes we have the need to add a sticker effect to a list display page where some list items are newly added or hot, just like fork me on github on the default hexo blog.

Let's start with the leftmost effect step by step

html

<div class="wrap">
  <div class="ribbon">
    <a href="#">Fork me on GitHub</a>
  </div>
</div>

css

/* Outer Container Settings  */
.wrap {
  width: 160px;
  height: 160px;
  overflow: hidden;
  position: relative;
  background-color: #f3f3f3;
}

.ribbon {
  background-color: #a00;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  /* shadom */
  -webkit-box-shadow: 0 0 10px #888;
  -moz-box-shadow: 0 0 10px #888;
  box-shadow: 0 0 10px #888;
  /* rotate */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  /* position */
  left: -50px;
  top: 40px;
}

.ribbon a {
  border: 1px solid #faa;
  color: #fff;
  display: block;
  font: bold 81.25% "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 1px 0;
  padding: 10px 50px;
  text-align: center;
  text-decoration: none;
  /* shadow */
  text-shadow: 0 0 5px #444;
}

input Placeholder

When we set the placeholder property on some input types, we sometimes need to modify their default styles.

input::-webkit-input-placeholder {
  color: green;
  background-color: #f9f7f7;
  font-size: 14px;
}
input::-moz-input-placeholder {
  color: green;
  background-color: #f9f7f7;
  font-size: 14px;
}
input::-ms-input-placeholder {
  color: green;
  background-color: #f9f7f7;
  font-size: 14px;
}

Movable Clickable Element to Go Default Border

On mobile browsers, when you click on a link or a clickable element defined by Javascript, a blue border appears. To be honest, this is disgusting. How can I get rid of it?

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

drop cap

The following code can be used to achieve an effect similar to the drop of the initial in word

element:first-letter {
  float: left;
  color: green;
  font-size: 30px;
}

Small Triangle

In many places we can use small triangles, so let's draw triangles in four directions

.triangle {
  /* Base Style */
  border: solid 10px transparent;
}
/*lower*/
.triangle.bottom {
  border-top-color: green;
}
/*upper*/
.triangle.top {
  border-bottom-color: green;
}
/*Left*/
.triangle.top {
  border-right-color: green;
}
/*right*/
.triangle.top {
  border-left-color: green;
}

You can see that drawing a small triangle is very simple, as long as you have two lines of style, and you can set the style property in the opposite direction just by thinking about which direction you are drawing.

Mouse Hand

Normally, we want to add a mouse hand to the following elements

• a
• submit
• input[type="iamge"]
• input[type="button"]
• button
• label
• select

a[href],
input[type="submit"],
input[type="image"],
input[type="button"],
label[for],
select,
button {
  cursor: pointer;
}

Blocking Element Highlighting in Webkit Mobile Browser

When you visit a mobile website, you will see gray boxes around the selected elements that block the style with the following code

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Remove default margin s and padding s from browsers that commonly use tags

pre, code, legend, fieldset, blockquote...Wait tags aren't very common, so don't list them all. If you use them in your project, you can write them separately

body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dd,
ul,
ol,
th,
td,
button,
figure,
input,
textarea,
form {
  margin: 0;
  padding: 0;
}

Uniform input, select, textarea widths

Different browsers calculate box model widths differently in input, select, and textarea, unified as the most common content-box

input,
select,
textarea {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

table {
  /*table Set the distance between borders of adjacent cells to 0*/
  border-spacing: 0;
  /*By default, setting border on tr has no effect. If the table has a border set to merge mode:'border-collapse: collapse;'is fine*/
  border-collapse: collapse;
}

Remove default borders for some elements of the browser

acronym, fieldset...If other tags are not very common, they will not be listed; if they are used in an item, they can be written by themselves

img,
input,
button,
textarea {
  border: none;
  -webkit-appearance: none;
}

input {
  /*Since input does not inherit the parent element's centered style by default, the setting is:'text-align: inherit'*/
  text-align: inherit;
}

textarea {
  /*textarea Default not scalable*/
  resize: none;
}

Cancel element outline style

Since some of the attributes of the following elements do not inherit the parent node style, declare these attributes of these elements as attributes of the parent element

a,
h1,
h2,
h3,
h4,
h5,
h6,
input,
select,
button,
option,
textarea,
optgroup {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  color: inherit;
  outline: none;
}

Cancel default text decoration for hyperlink elements

In addition, the underscore and the underscore of the del and ins tags are still good, so do not remove them

a {
  text-decoration: none;
}

ol,
ul {
  /*The list of UI designs in development is too different from the original style, so cancel ol, ul default list style directly*/
  list-style: none;
}

button,
input[type="submit"],
input[type="button"] {
  /*Mouse passing is a "little hand" shape indicating clickable*/
  cursor: pointer;
}

input::-moz-focus-inner {
  /*Default "padding, border" when unfocusing part of the input version of Firefox Browser*/
  padding: 0;
  border: 0;
}

Action button to cancel some browser digital input controls

input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

Input control placeholder color setting #999

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #999;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #999;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #999;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #999;
}

template {
  /*Since some of the browsing template s will appear, hide them*/
  display: none;
}

Abbreviation position: fixed

.pf {
  position: fixed;
  /*chrome Kernel Browser position: fixed to prevent jitter*/
  -webkit-transform: translateZ(0);
}

Using Absolute Positioning Wide Elevation Principle, Centered Element

.middle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

Center elements vertically using relative positioning on CSS3

Specially established Q-q-u-n:784783012 to share learning methods and small details to be noticed, keep updating the latest tutorials and learning techniques
 (From zero basics to front-end project hands-on tutorials, learning tools, full stack development learning routes and planning)

.v-middle {
  position: relative;
  top: 50%;
  -webkit-transform: -webkit-translateY(-50%);
  -moz-transform: -moz-translateY(-50%);
  -o-transform: -o-translateY(-50%);
  transform: translateY(-50%);
}

The box model of element calculation width and height has border as outer limit "bb ==> border-box"

.bb {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Single-line text overflow displays the ellipsis "to ==> text-overflow"

.to {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Initialization Style

Different browsers have different default styles for each tag, and sometimes we don't want to use the default style given by the browser, so we can use reset.css to remove the default style

body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
fieldset,
legend,
button,
input,
textarea,
th,
td {
  margin: 0;
  padding: 0;
}
body,
button,
input,
select,
textarea {
  font: 12px/1.5 tahoma, arial, \5b8b\4f53;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
}
address,
cite,
dfn,
em,
var {
  font-style: normal;
}
code,
kbd,
pre,
samp {
  font-family: couriernew, courier, monospace;
}
small {
  font-size: 12px;
}
ul,
ol {
  list-style: none;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
sup {
  vertical-align: text-top;
}
sub {
  vertical-align: text-bottom;
}
legend {
  color: #000;
}
fieldset,
img {
  border: 0;
}
button,
input,
select,
textarea {
  font-size: 100%;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

Force Line Break/Automatic Line Break/Force No Line Break

/* Force no line break */
div {
  white-space: nowrap;
}

/* Automatic line break */
div {
  word-wrap: break-word;
  word-break: normal;
}

/* Force English word line breaks */
div {
  word-break: break-all;
}

Style of table boundaries

table {
  border: 1px solid #000;
  padding: 0;
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: 10px;
}
table td {
  height: 30px;
  border: 1px solid #000;
  background: #fff;
  font-size: 15px;
  padding: 3px 3px 3px 8px;
  color: #000;
  width: 160px;
}

Absolute positioning and margin

This can be used when we know in advance the length and width of the element to be centered:

.container {
  position: relative;
  width: 300px;
  height: 200px;
  border: 1px solid #333333;
}
.content {
  background-color: #ccc;
  width: 160px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -80px; /* Half the width */
  margin-top: -50px; /* Half the height */
}

Absolute positioning and transform

When the element to be centered is variable in width and height, we can use transform to offset the element.

.container {
  position: relative;
  width: 300px;
  height: 200px;
  border: 1px solid #333333;
}
.content {
  background-color: #ccc;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  text-align: center;
}

line-height

Line-heights are line heights, so we can adjust the layout with line heights!

However, there is a big disadvantage of this scheme: the copy must be single-line, if there are multiple lines, there will be problems in setting the line height.

.container {
  width: 300px;
  height: 200px;
  border: 1px solid #333333;
}
.content {
  line-height: 200px;
}

table layout

Set display: table for container elements and display: table-cell for current elements:

.container {
  width: 300px;
  height: 200px;
  border: 1px solid #333333;
  display: table;
}
.content {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

flex layout

We can set the parent element to display: flex and use align-items and justify-content in flex to center vertically and horizontally.This does not limit the width or height of the intermediate elements.

At the same time, the flex layout can also replace the line-height s scheme in some Android models where the text is not centered.

.container {
  width: 300px;
  height: 200px;
  border: 1px solid #333333;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content {
  background-color: #ccc;
  text-align: center;
}

Center left, right, top and bottom of the picture

A common approach is to set the outer div to table-cell; then center the inner elements left, right, top, and bottom.There is, of course, another way to do this, by using img as a div and referring to the code in 6.
The CSS code is as follows:

.content {
  width: 400px;
  height: 400px;
  border: 1px solid #ccc;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

The html code is as follows:

<div class="content">
  <img src="./4.jpg" alt="img" />
</div>

Small horizontal bars on both sides of the title

We often encounter the UI requirement that there are two small horizontal posts on both sides of the title. How did it work before?For example, use a border-top attribute, then position the middle text absolutely, and give the text a background color to cover the middle part.

Now we can use pseudo elements!

<div class="title">Title</div>

title {
  color: #e1767c;
  font-size: 0.3rem;
  position: relative;

  &:before,
  &:after {
    content: "";
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    border-top: 0.02rem solid #e1767c;
    width: 0.4rem;
  }
  &:before {
    margin-left: -1.2rem;
  }
  &:after {
    margin-left: 1.2rem;
  }
}

Drawing elements with the border attribute

border draws triangles, trapezoids, stars, and other arbitrary polygons as well as simple borders. Here are the two triangles and trapezoids drawn

<div class="triangle1"></div>
<div class="triangle2"></div>
<div class="trapezoid"></div>

.triangle1 {
  /*Acute triangle*/
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 100px solid #249ff1;
  border-left: 30px solid transparent;
  border-right: 100px solid transparent;
}
.triangle2 {
  /*Right triangle*/
  width: 0;
  height: 0;
  border-top: 80px solid transparent;
  border-bottom: 80px solid #ff5b01;
  border-left: 50px solid #ff5b01;
  border-right: 50px solid transparent;
}
.trapezoid {
  /*Trapezoid*/
  width: 0;
  height: 0;
  border-top: none;
  border-right: 80px solid transparent;
  border-bottom: 60px solid #13dbed;
  border-left: 80px solid #13dbed;
}

Drawing elements with border-radius

border-radius is mainly used to draw circles, circles, ellipses, rounded rectangles and other shapes. Here are two simple graphics to draw.

<div class="circle"></div>
<div class="ellipse"><div></div></div>

.circle,
.ellipse {
  width: 100px;
  height: 100px;
  background: #249ff1;
  border-radius: 50%;
}
.ellipse {
  width: 150px;
  background: #ff9e01;
}

But the border-radius attribute actually sets up to eight values, and by changing eight values you can get many unexpected images

Draw elements with box-shadow

For box-shadow, its complete declaration is box-shadow: h-shadow v-shadow blur spread color inset. Each value represents an offset in the horizontal direction of s, an inexpensive vertical direction, a blurred distance (feathering value), the size of the shadow (shadow s are the same size as the body when not set or set to 0), the color of the shadow, and whether or not an inner shadow is used.In practical applications, 3-6 values can be received, corresponding to the following:

• Three values: h-shadow v-shadow color
• Four values: h-shadow v-shadow blur color
• Five values: h-shadow v-shadow blur spread color
• Six values: h-shadow v-shadow blur spread color inset

At the same time, border-shadow accepts comma-separated values of more than one value, which allows us to achieve effects such as multiple borders.Below we use this property to implement a single label with no pseudo-elements to add icons and icons to represent targets.

<div class="plus"></div>
<div class="target"></div>

.plus {
  width: 30px;
  height: 30px;
  margin-left: 50px; /*Since box-shadow does not take up space, it is often necessary to add margin s to correct the location*/
  background: #000;
  box-shadow: 0 -30px 0 red, 0 30px 0 red, -30px 0 0 red, 30px 0 0 red;
}
.target {
  width: 30px;
  height: 30px;
  background: red;
  border-radius: 50%;
  margin-left: 50px;
  box-shadow: 0 0 0 10px #fff, 0 0 0 20px red, 0 0 0 30px #fff, 0 0 0 40px red;
}

Draw icons using CSS gradients

CSS3's gradient properties are so powerful that you can theoretically draw any graph with gradients that the nature and use of gradients is sufficient to write a long story, as illustrated below.

<div class="gradient"></div>

.gradient {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: silver;
  background-image: linear-gradient(335deg, #b00 23px, transparent 23px),
    linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(
      335deg,
      #b00 23px,
      transparent 23px
    ), linear-gradient(155deg, #d00 23px, transparent 23px);
  background-size: 58px 58px;
  background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
}

• glass

.cup {
  display: inline-block;
  width: 0.9em;
  height: 0.4em;
  border: 0.25em solid;
  border-bottom: 1.1em solid;
  border-radius: 0 0 0.25em 0.25em;
}
cup:before {
  position: absolute;
  right: -0.6em;
  top: 0;
  width: 0.3em;
  height: 0.8em;
  border: 0.25em solid;
  border-left: none;
  border-radius: 0 0.25em 0.25em 0;
  content: "";
}

• heart-shaped

.heart {
  display: inline-block;
  margin-top: 1.5em;
  width: 50px;
  height: 50px;
  background: green;
}
.heart:before,
.heart:after {
  position: absolute;
  width: 1em;
  height: 1.6em;
  background: #000;
  border-radius: 50% 50% 0 0;
  content: "";
  bottom: 0;
}
.heart:before {
  -webkit-transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
  right: 0;
  background: red;
  opacity: 0.5;
  z-index: 5;
}
.:after {
  -webkit-transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
  left: 0;
  opacity: 0.8;
}

• camera

.camera {
  display: inline-block;
  border-style: solid;
  border-width: 0.65em 0.9em;
  border-radius: 0.1em;
}
.camera:before {
  position: absolute;
  top: -0.3em;
  left: -0.3em;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  border: 0.1em solid #fff;
  box-shadow: 0 0 0 0.08em, 0 0 0 0.16em #fff;
  content: "";
}
.camera:after {
  position: absolute;
  top: -0.5em;
  left: 0.5em;
  width: 0.2em;
  border-top: 0.125em solid #fff;
  content: "";
}

• Moon

.moon {
  display: inline-block;
  height: 1.5em;
  width: 1.5em;
  box-shadow: inset -0.4em 0 0;
  border-radius: 2em;
  transform: rotate(20deg);
}

Floating Class

General floating list floating image floating

.float-left {
  float: left;
}
.float-right {
  float: right;
}
.float-li li,/*Defined on a li parent or ancestor element*/ li.float-li {
  float: left;
}
.float-img img,/*Defined on an img parent or ancestor element*/ img.float-li {
  float: left;
}
.float-span span,/*Defined on a span parent or ancestor element*/ span.float-span {
  float: right;
}

Background Picture Embedding and Location

.bg-img {
  background-image: url("../img/bg.png");
  background-position: center top;
  background-repeat: no-repeat;
}
.bg01-img {
  background-image: url("../img/bg01.png");
  background-position: center top;
  background-repeat: no-repeat;
}
.bg02-img {
  background-image: url("../img/bg02.png");
  background-position: center top;
  background-repeat: no-repeat;
}
.bg03-img {
  background-image: url("../img/bg03.png");
  background-position: center top;
  background-repeat: no-repeat;
}
.bg04-img {
  background-image: url("../img/bg04.png");
  background-position: center top;
  background-repeat: no-repeat;
}

Inheritance Class

.inherit-width {
  width: inherit;
}
.inherit-min-width {
  min-width: inherit;
}
.inherit-height {
  height: inherit;
}
.inherit-min-height {
  min-height: inherit;
}
.inherit-color {
  color: inherit;
}

text-indent

.text-indent {
  text-indent: 2rem;
}
/*16px*/
.text-indent-xs {
  text-indent: 1.5rem;
}
/*12px*/
.text-indent-sm {
  text-indent: 1.7rem;
}
/*14px*/
.text-indent-md {
  text-indent: 2rem;
}
/*18px*/
.text-indent-lg {
  text-indent: 2.4rem;
}
/*20px*/

Row Height

.line-height-xs {
  line-height: 1.3rem;
}
.line-height-sm {
  line-height: 1.5rem;
}
.line-height-md {
  line-height: 1.7rem;
}
.line-height-lg {
  line-height: 2rem;
}

.line-height-25x {
  line-height: 25px;
}
.line-height-30x {
  line-height: 30px;
}

ul indentation

.ul-indent-xs {
  margin-left: 0.5rem;
}
.ul-indent-sm {
  margin-left: 1rem;
}
.ul-indent-md {
  margin-left: 1.5rem;
}
.ul-indent-lg {
  margin-left: 2rem;
}
.ol-list,
.ul-list {
  list-style: disc;
}

Text truncation

Specially established Q-q-u-n:784783012 to share learning methods and small details to be noticed, keep updating the latest tutorials and learning techniques
 (From zero basics to front-end project hands-on tutorials, learning tools, full stack development learning routes and planning)
.truncate {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hide {
  display: none;
}

Picture, Video Specification

.img-max,
.video-max {
  width: 100%;
  height: auto;
}
/*display Display Mode*/
.inline {
  display: inline;
}
.inline-block {
  display: inline-block;
}
.block {
  display: block;
}

Border Style

.border-xs-black {
  border: 1px solid #000;
}
.border-sm-black {
  border: 2px solid #000;
}
.border-md-black {
  border: 3px solid #000;
}
.border-lg-black {
  border: 5px solid #000;
}

.border-xs-gray {
  border: 1px solid #9c9c9c;
}
.border-sm-gray {
  border: 2px solid #9c9c9c;
}
.border-md-gray {
  border: 3px solid #9c9c9c;
}
.border-lg-gray {
  border: 5px solid #9c9c9c;
}

background color

.bg-white {
  background: #fff !important;
}
.bg-black {
  background: #1b1c1d !important;
}
.bg-gray {
  background: #767676 !important;
}
.bg-light-gray {
  background: #f8f7f7 !important;
}
.bg-yellow {
  background: #fbbd08 !important;
}
.bg-orange {
  background: #f2711c !important;
}
.bg-red {
  background: #db2828 !important;
}
.bg-olive {
  background: #b5cc18 !important;
}
.bg-green {
  background: #21ba45 !important;
}
.bg-teal {
  background: #00b5ad !important;
}
.bg-darkGreen {
  background: #19a97b !important;
}
.bg-threeGreen {
  background: #097c25 !important;
}
.bg-blue {
  background: #2185d0 !important;
}
.bg-violet {
  background: #6435c9 !important;
}
.bg-purple {
  background: #a333c8 !important;
}
.bg-brown {
  background: #a5673f !important;
}

Split line preset

hr,
.hr-xs-Silver,
.hr-sm-black,
.hr-sm-Silver,
.hr-xs-gray,
.hr-sm-gray {
  margin: 20px 0;
}
hr {
  border: none;
  border-top: 1px solid #000;
}
.hr-xs-Silver {
  border: none;
  border-top: 1px solid #c0c0c0;
}
.hr-sm-black {
  border: none;
  border-top: 2px solid #000;
}
.hr-sm-Silver {
  border: none;
  border-top: 2px solid #c0c0c0;
}
.hr-xs-gray {
  border: none;
  border-top: 1px solid #767676;
}
.hr-sm-gray {
  border: none;
  border-top: 2px solid #767676;
}

Mouse a Label hover Effect

.hover-red a:hover,/*Add class name to a tag ancestor element without smart reminder by default*/ a.hover-red:hover {
  color: red;
} /*Add class name for a tag alone*/
.hover-yellow a:hover,/*Add class name to a tag ancestor element without smart reminder by default*/ a.hover-yellow:hover {
  color: #ffd700;
} /*Add class name for a tag alone*/
.hover-green a:hover,/*Add class name to a tag ancestor element without smart reminder by default*/ a.hover-green:hover {
  color: #70aa39;
} /*Add class name for a tag alone*/
.hover-blue a:hover,/*Add class name to a tag ancestor element without smart reminder by default*/ a.hover-blue:hover {
  color: blue;
} /*Add class name for a tag alone*/
.hover-gray a:hover,/*Add class name to a tag ancestor element without smart reminder by default*/ a.hover-gray:hover {
  color: #9c9c9c;
} /*Add class name for a tag alone*/
.underline a:hover,
a.underline:hover {
  text-decoration: underline;
}

Shadow effect

.shadow-text-xs {
  text-shadow: 4px 3px 0 #1d9d74, 9px 8px 0 rgba(0, 0, 0, 0.15);
} /*Intelligent compatibility ie10 above not considered*/

.shadow-xs {
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc')"; /* For IE 8 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc'); /* For IE 5.5 - 7 */
  -moz-box-shadow: 1px 1px 2px #cccccc; /* for firefox */
  -webkit-box-shadow: 1px 1px 2px #cccccc; /* for safari or chrome */
  box-shadow: 1px 1px 2px #cccccc; /* for opera or ie9 */
}
.shadow-sm {
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc')"; /* For IE 8 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc'); /* For IE 5.5 - 7 */
  -moz-box-shadow: 2px 2px 3px #cccccc; /* for firefox */
  -webkit-box-shadow: 2px 2px 3px #cccccc; /* for safari or chrome */
  box-shadow: 2px 2px 3px #cccccc; /* for opera or ie9 */
}
.shadow-md {
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc')"; /* For IE 8 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc'); /* For IE 5.5 - 7 */
  -moz-box-shadow: 3px 3px 5px #cccccc; /* for firefox */
  -webkit-box-shadow: 3px 3px 5px #cccccc; /* for safari or chrome */
  box-shadow: 3px 3px 5px #cccccc; /* for opera or ie9 */
}
.shadow-lg {
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc')"; /* For IE 8 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc'); /* For IE 5.5 - 7 */
  -moz-box-shadow: 5px 5px 8px #cccccc; /* for firefox */
  -webkit-box-shadow: 5px 5px 8px #cccccc; /* for safari or chrome */
  box-shadow: 5px 5px 8px #cccccc; /* for opera or ie9 */
}

fillet

Specially established Q-q-u-n:784783012 to share learning methods and small details to be noticed, keep updating the latest tutorials and learning techniques
 (From zero basics to front-end project hands-on tutorials, learning tools, full stack development learning routes and planning)
.border-radius-xs {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.border-radius-sm {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.border-radius-md {
  -webkit-border-radius: 7px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.border-radius-lg {
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
}

If articles and notes can give you a hint of help or inspiration, don't stint on your favorites and collections. You are definitely my greatest motivation to move forward