Summary of advanced CSS techniques

“Enumerate the effects”

Set the font style for the input placeholder
Single – and multi-line text exceeds the ellipsis
Negative margin techniques
Position and set the bearing situation
Common scenarios for adjacent sibling selectors
Handy tips for using the Outline property
Hide the scroll bar or change the scroll bar style
Pure CSS draws triangles
Dotted box drawing skills
Card effect creation
There are two common ways to hide text
Table border merge

“1-1. Set the font style for the input placeholder”

Sets the style of the input placeholder

input::-webkit-input-placeholder {    /* Chrome/Opera/Safari */
    color: red;
}
input::-moz-placeholder { /* Firefox 19+ */  
    color: red;
}
input:-ms-input-placeholder { /* IE 10+ */
    color: red;
}
input:-moz-placeholder { /* Firefox 18- */
    color: red;
}
 
<input type="text" placeholder="Please set user name">
Copy the code

Sets the style for focusing the input

input:focus {   
  background-color: red;
}
Copy the code

Unborder input

border: none;
outline: none;
Copy the code

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> <style type="text/ CSS "> input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: red; } input::-moz-placeholder { /* Firefox 19+ */ color: red; } input:-ms-input-placeholder { /* IE 10+ */ color: red; } input:-moz-placeholder { /* Firefox 18- */ color: red; } input:focus { background-color: red; } input{ border: none; outline: none; } </style> </head> <body> <input type="text" placeholder=" placeholder ">Copy the code

“1-2. Single and multi-line text beyond ellipsis”

// Ellipses appear in a single line of text
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
 
// Ellipses appear in multiple lines of text
display: -webkit-box; /* The object is displayed as an elastic stretchable box model */
-webkit-box-orient: vertical; /* Vertically rows the child elements from top to bottom (sets the arrangement of the child elements of the flex box) */
-webkit-line-clamp: 3; /* The number of lines, more than three hidden and extra ellipsis denoted... * /
line-clamp: 3;
word-break: break-all;
overflow: hidden;
max-width: 100%;
Copy the code

<div class="container">
  <p class="single">
    <span class="c-red">Single overflow:</span>ECMAScript 6 Tutorial is an open source JavaScript language tutorial that provides a comprehensive overview of the new syntax features introduced in ECMAScript 6.</p>
  <p class="mutiple">
    <span class="c-red">Multi-line overflow:</span>ECMAScript 6 Tutorial is an open source JavaScript language tutorial that provides a comprehensive overview of the new syntax features introduced in ECMAScript 6. This book covers all the differences between ES6 and the previous version of ES5, gives a detailed introduction to the syntax involved, and provides a lot of concise and easy to understand code examples.</p>
</div>
Copy the code

/ * * / container
    .container {
      width: 300px;
      height: 200px;
      margin: 100px;
      padding: 20px;
      border: 1px solid #eee;
      font-size: 13px;
      color: #555;
    }
 
    .c-red {
      color: red;
    }
 
    p {
      background-color: rgba(189.227.255.0.28);
      padding: 2px 5px;
    }
 
    / * * / line
    .single {
      width: 300px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: break-all;
    }
 
    / * * /
    .mutiple {
      display: -webkit-box; /* The object is displayed as an elastic stretchable box model */
      -webkit-box-orient: vertical; /* Vertically rows the child elements from top to bottom (sets the arrangement of the child elements of the flex box) */
      -webkit-line-clamp: 3; /* The number of lines, more than three hidden and extra ellipsis denoted... * /
      line-clamp: 3;
      word-break: break-all;
      overflow: hidden;
      max-width: 100%;
    }

Copy the code

“1-3. Techniques for using negative margins”

Rule: when left is negative, it is left shift; when right is negative, it is left pull. Up and down are similar to left and rightCopy the code

* {margin:0;
    padding:0;
}
.wrap{
    /* Use negative technique to move overall */
    margin-left:-6px;
}
.item{
    float:left;
    width: 20%;
    height: 300px;
    border-left:6px solid #fff;
    box-sizing: border-box;
}
<div class="wrap">
    <div class="item" style="background-color: red;"></div>
    <div class="item" style="background-color: green;"></div>
    <div class="item" style="background-color: yellow;"></div>
    <div class="item" style="background-color: pink;"></div>
    <div class="item" style="background-color: green;"></div>
</div>
Copy the code

“1-4. Positioning and Setting azimuth situation”

Rule: Setting both left and right is the same as implicitly setting the width for absolute and fixed positioningCopy the code

span{
  border:1px solid red;
  position: absolute;
  left:0;
  right:0;
  
   /* Set width:100%; display:block */
}
<span>1</span>
Copy the code

“1-5. Common Scenarios for Adjacent Sibling selectors”

ul{
  width: 500px;
   margin:auto;
   list-style: none;
   padding:0;
   border:1px solid red;
   text-align: center;
 }
 li+li{
   border-top:1px solid red;
 }
Copy the code

<ul>
 <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

Copy the code

“1-6. Clever tips for using outline attributes”

Difference: Outline does not calculate size border calculates sizeCopy the code

* {
    padding: 0;
    margin: 0;
  }
 
  ul {
    list-style: none;
    width: 600px;
    margin: auto;
  }
 
  li {
    padding: 10px;
    border: 10px solid pink;
    outline-offset: -10px;
  }
  li+li{
    margin-top:-10px;
  }
  li:hover{
    /* border:10px solid gold; * /
    outline:10px solid gold;
  }
Copy the code

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
Copy the code

“1-7. Hide scrollbar or change scrollbar Style”

.scroll-container {
   width: 500px;
   height: 150px;
   border: 1px solid #ddd;
   padding: 15px;
   overflow: auto;     / * must * /
 }
 
 .scroll-container::-webkit-scrollbar {
   width: 8px;
   background: white;
 }
 
 .scroll-container::-webkit-scrollbar-corner,
   /* Scrollbar corner */
 .scroll-container::-webkit-scrollbar-thumb,
 .scroll-container::-webkit-scrollbar-track {      /* Scroll bar track */
   border-radius: 4px;
 }
 
 .scroll-container::-webkit-scrollbar-corner,
 .scroll-container::-webkit-scrollbar-track {
   /* Scroll bar track */
   background-color: rgba(180.160.120.0.1);
   box-shadow: inset 0 0 1px rgba(180.160.120.0.5);
 }
 
 .scroll-container::-webkit-scrollbar-thumb {
   /* Scroll bar handle */
   background-color: #00adb5;
 }
Copy the code

<p class="scroll-container"Word-wrap: break-word! Important; "> < p style =" max-width: 100%; Willow yiyi, blowing up pieces of smoke, a heavy curtain do not know how many layers. She went upstairs and looked away, but could not see the road leading to Zhangtai. Spring has come to the evening, march rain accompanied by strong winds, and then the heavy door closed the dusk scenery, but also can not keep the spring. Tearful eyes asked falling flowers can know my heart, falling flowers silent, confused, little by little fly to the swing. How deep is the courtyard? Willow yiyi, blowing up pieces of smoke, a heavy curtain do not know how many layers. She went upstairs and looked away, but could not see the road leading to Zhangtai. Spring has come to the evening, march rain accompanied by strong winds, and then the heavy door closed the dusk scenery, but also can not keep the spring. Tearful eyes asked falling flowers can know my heart, falling flowers silent, confused, little by little fly to the swing. How deep is the courtyard? Willow yiyi, blowing up pieces of smoke, a heavy curtain do not know how many layers. She went upstairs and looked away, but could not see the road leading to Zhangtai. Spring has come to the evening, march rain accompanied by strong winds, and then the heavy door closed the dusk scenery, but also can not keep the spring. Tearful eyes asked falling flowers can know my heart, falling flowers silent, confused, little by little fly to the swing. How deep is the courtyard? Willow yiyi, blowing up pieces of smoke, a heavy curtain do not know how many layers. She went upstairs and looked away, but could not see the road leading to Zhangtai. Spring has come to the evening, march rain accompanied by strong winds, and then the heavy door closed the dusk scenery, but also can not keep the spring. Tearful eyes asked falling flowers can know my heart, falling flowers silent, confused, little by little fly to the swing. </p>Copy the code

“1-8. Draw triangles with pure CSS”

/* triangle */
.up-triangle {
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 0 25px 40px 25px;
   border-color: transparent transparent rgb(245.129.127) transparent;
 }
 
 /* inverted triangle */
 .down-triangle {
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 40px 25px 0 25px;
   border-color:  rgb(245.129.127) transparent transparent transparent;
 }
 div:last-child {
   margin-top: 1rem;
 }
Copy the code

“1-9. Dotted Box Drawing Skills”

.dotted-line {
  width: 800px;
  margin: auto;
  padding: 20px;
  border: 1px dashed transparent;
  background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, #ccc .25em, white 0, white .75em);
}
<p class="dotted-line"Word-wrap: break-word! Important; "> < p style =" max-width: 100%; Willow yiyi, blowing up pieces of smoke, a heavy curtain do not know how many layersCopy the code

“1-10. Card Effect Making”

.coupon {
 width: 300px;
  height: 100px;
  line-height: 100px;
  margin: 50px auto;
  text-align: center;
  position: relative;
  background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right /50% 51px no-repeat,
  radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 51px no-repeat,
  radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 51px no-repeat,
  radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 51px no-repeat;
  filter: drop-shadow(2px 2px 2px rgba(0.0.0.2.));
}
.coupon span {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  color: red;
  font-size: 50px;
  font-weight: 400;
}
Copy the code

<p class="coupon">
 <span>200</span>Coupon < / p >Copy the code

“1-11. Two common ways to hide text”

text-indent: -9999px; Or the font - size: 0;Copy the code

.logo {
 width: 190px;
  height: 80px;
  float: left;
  margin-top: 8px
}
 
.logo h1 {
  position: relative
}
 
.logo h1 .logo-bd {
  display: block;
  margin-left: 22px;
  padding-top: 58px;
  width: 142px;
  overflow: hidden;
  background: url(http://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png) 0 0 no-repeat;
  text-indent: -9999px;
}
Copy the code

<h1>
  <a href="#" role="img" class="logo-bd clearfix">taobao</a>
</h1>
Copy the code

“1-12. Table border Merge”

table{
  border-collapse: collapse;
}
Copy the code

<table border="1">
    <thead>
    <tr>
      <th>The first column</th>
      <th>The second column</th>
      <th>The third column</th>
      <th>The fourth column</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>1.1</td>
      <td>1.2</td>
      <td>1.3</td>
      <td>1.4</td>
    </tr>
    <tr>
      <td>2.1</td>
      <td>2.2</td>
      <td>2.3</td>
      <td>2.4</td>
    </tr>
    <tr>
      <td>3.1</td>
      <td>3.2</td>
      <td>3.3</td>
      <td>3.4</td>
    </tr>
    </tbody>
  </table>
Copy the code

“Enumerate the effects”

“1-1. Set the font style for the input placeholder”

Related Posts

Similarities and differences between Cookie, localStorage and sessionStorage

The fetch communication

Navigation bar and content block linkage switch effect