Common front-end CSS code

This article was first published in the public number: execution context, synchronous update personal blog: story film, reprint please sign. Code is constantly updated!!

The Demo preview is here at ！！！！

Code Preview Demo

supplement

If you have a common can also share out duck!!

The premise

Daily development in the use of CSS code to share with you, which may have a lot of common use. Welcome to put forward better solutions!!

Git address

Common front-end CSS code

1, vertical center alignment

.vc {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
.vc {
   position:absolute;
   top: 50%;
   left: 50%;
   width: 100px;
   height: 100px;
   margin:-50px 0 -50px;
}
Copy the code

2. Full screen display

html, 
body {
    position: fixed;
    width: 100%;
    height: 100%;
}
div {
    height: 100%;
}
Copy the code

3. Different A tag links use different styles

// link

a[href^="http://"]{
    background: url(link.gif) no-repeat center right;
}
// emails
a[href^="mailto:"]{
    background: url(email.png) no-repeat center right;
}

// pdfs

a[href$=".pdf"]{
    background: url(pdf.png) no-repeat center right;
}
Copy the code

4. Image gray scale

img {
    filter: gray; 
    -webkit-filter: grayscale(1);
}
Copy the code

5. Background gradient animation

bg { background-image: linear-gradient(#5187c4, #1c2f45); background-size: auto 200%; background-position: 0 100%; The transition: background - 0.5 s position; } bg:hover { background-position: 0 0; }Copy the code

6. Wrap long text

pre {
    white-space: pre-line;
    word-wrap: break-word;
}
Copy the code

7. Obscure text

.text {
   filter: blur(1px);
}
Copy the code

8, with CSS animation ellipsis animation

.point:after { overflow: hidden; display: inline-block; vertical-align: bottom; animation: ellipsis 2s infinite; content: "\2026"; } @keyframes ellipsis { from { width: 2px; } to { width: 15px; }}Copy the code

9. Style resets

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { height: 101%; } body {font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } strong { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } img { border: 0; max-width: 100%; } p {font-size: 1.2em; The line - height: 1.0 em. color: #333; }Copy the code

10. Clear the float

.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
Copy the code

11. CSS element transparency

.transparent { filter: alpha(opacity=50); - KHTML - opacity: 0.5; Moz - opacity: 0.5; Opacity: 0.5; }Copy the code

CSS reference styles

blockquote { background: #f9f9f9; border-left: 10px solid #ccc; Margin: 1.5 em 10 px; padding: .5em 10px; quotes: "\201C""\201D""\2018""\2019"; } blockquote:before { color: #ccc; content: open-quote; font-size: 4em; line-height: .1em; margin-right: .25em; vertical-align: -.4em; } blockquote p { display: inline; }Copy the code

Personality rounded corners

.borderRadius {
    border-radius: 4px 3px 6px 10px;
}
.borderRadius {
    border-top-left-radius: 4px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 10px;
}
Copy the code

14, General media query

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } @media only screen and (min-width : 321px) { /* Styles */ } @media only screen and (max-width : 320px) { /* Styles */ } /* iPad */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : Portrait) {/* Styles */} /* desktop */ @media only screen and (min-width: 1224px) { /* Styles */ } @media only screen and (min-width : 1824px) {/* Styles */} @media only screen and (-webkit-min-device-pixel-ratio:1.5), Only screen and (min-device-pixel-ratio:1.5) {/* Styles */}Copy the code

15. Custom text selection

::selection { background: #e2eae2; }
Copy the code

16. Polarizing the picture border

img.polaroid {
    background:#000; 
    border:solid #fff;
    border-width:6px 6px 20px 6px;
    box-shadow:1px 1px 5px #333; 
    -webkit-box-shadow:1px 1px 5px #333;
    -moz-box-shadow:1px 1px 5px #333;
    height:200px; 
    width:200px;  
}
Copy the code

17, anchor chain connected pseudo class

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; }
Copy the code

18. Full screen background

html { 
    background: url('bg.jpg') no-repeat center center fixed; 
    background-size: cover;
}
Copy the code

19. Content is vertically centered

The center {min - height: 6.5 em. display: table-cell; vertical-align: middle; }Copy the code

20. Force vertical scroll bars

html { height: 101% }
Copy the code

CSS3 gradient template

.bg {
    background: #629721;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));
    background-image: linear-gradient(top, #83b842, #629721);
}
Copy the code

22, @font-face quote

@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); src: url('webfont.eot? #iefix') url('webfont.woff') format('woff'), url('webfont.ttf') format('truetype'), url('webfont.svg#svgFontName') format('svg'); } body { font-family: 'MyWebFont', Arial, sans-serif; }Copy the code

23. Connect CSS3 elements

p { position:relative; z-index:1; padding: 10px; margin: 10px; font-size: 21px; The line - height: 1.3 em. color: #fff; background: #ff0030; Box-shadow: 00 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } p:before { content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left :3px; right: 3px; border: 2px dashed #fff; } p a { color: #fff; text-decoration:none; } p a:hover, p a:focus, p a:active { text-decoration:underline; }Copy the code

24, CSS zebra crossing

tbody tr:nth-child(odd) {
    background-color: #ccc;
}
Copy the code

25, CSS &

.amp {
    font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
    font-style: italic;
    font-weight: normal;
}
Copy the code

26. Inner box shadow

.div { 
    box-shadow: inset 2px 0 4px #000;
}
Copy the code

27. Shadow of outer box

.div {box-shadow: 0 2px 2px-2px rgba(0, 0, 0, 0.52); }Copy the code

28. Triangle list bullets

Margin: 0.75em 0; padding: 0 1em; list-style: none; } li:before { content: ""; border-color: transparent #111; border-style: solid; Border-width: 0.35em 0 0.35em 0.45em; display: block; height: 0; width: 0; left: -1em; Top: 0.9 em. position: relative; }Copy the code

29, fixed width of the center layout

.div {
    width: 800px;
    margin: 0 auto;
}
Copy the code

CSS3 column text

.columnsText {
    text-align: justify;
    -webkit-column-count: 3;
    -webkit-column-gap: 12px;
    -webkit-column-rule: 1px solid #c4c8cc;
}
Copy the code

31, CSS fixed footer

footer {
    position: fixed;
    left: 0px;
    bottom: 0px;
    height: 30px;
    width: 100%;
    background: #444;
}
Copy the code

32. Set the minimum height of the browser

.div{ min-height: 550px; height: auto ! important; height: 550px; }Copy the code

33, CSS3 input effect

Input [type=text] {transition: all 0.30s ease-in-out; outline: none; padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid #ddd; } input[type=text]:focus { box-shadow: 0 0 5px rgba(81, 203, 238, 1); padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid rgba(81, 203, 238, 1); }Copy the code

Force line breaks

pre {
    white-space: pre-wrap;        
    word-wrap: break-word;  
}
Copy the code

Force hand shapes on clickable items

.pointer {
    cursor: pointer;
}
Copy the code

Top of the page box shadow

body:before {
    content: "";
    position: fixed;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    z-index: 100;
}
Copy the code

CSS3 dialog bubble

.line { background-color: #ededed; border: 2px solid #666; font-size: 35px; The line - height: 1.3 em. margin: 10px auto; padding: 10px; position: relative; text-align: center; width: 300px; border-radius: 20px; box-shadow: 0 0 5px #888; } .chat-bubble-arrow-border { border-color: #666 transparent transparent transparent; border-style: solid; border-width: 20px; height: 0; width: 0; position: absolute; bottom: -42px; left: 30px; } .chat-bubble-arrow { border-color: #ededed transparent transparent transparent; border-style: solid; border-width: 20px; height: 0; width: 0; position: absolute; bottom: -39px; left: 30px; }Copy the code

Persistent list sorting

ol.chapters {
    list-style: none;
    margin-left: 0;
}
ol.chapters > li:before {
    content: counter(chapter) ". ";
    counter-increment: chapter;
    font-weight: bold;
    float: left;
    width: 40px;
}
ol.chapters li {
    clear: left;
}
ol.start {
    counter-reset: chapter;
}
ol.continue {
    counter-reset: chapter 11;
}
Copy the code

39. CSS floats prompt text

a { border-bottom:1px solid #bbb; color:#666; display:inline-block; position:relative; text-decoration:none; } a:hover, a:focus { color:#36c; } a:active { top:1px; } a[data-tooltip]:after { border-top: 8px solid #222; Border - top: 8 px solid hsla (. % 0, 0, 0%, 85); border-left: 8px solid transparent; border-right: 8px solid transparent; content: ""; display: none; height: 0; width: 0; left: 25%; position: absolute; } a[data-tooltip]:before { background: #222; Background: hsla (. % 0, 0, 0%, 85); color: #f6f6f6; content: attr(data-tooltip); display: none; font-family: sans-serif; font-size: 14px; height: 32px; left: 0; line-height: 32px; padding: 0 15px; position: absolute; Text-shadow: 0 1px 1px hsla(0,0%,0%,1); white-space: nowrap; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } a[data-tooltip]:hover:after { display: block; top: -9px; } a[data-tooltip]:hover:before { display: block; top: -41px; } a[data-tooltip]:active:after { top: -10px; } a[data-tooltip]:active:before { top: -42px; }Copy the code

40. Dark grey round button

.graybtn {
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');
    background-color:#ffffff;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#777777;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #ffffff;
}
.graybtn:hover {
    background:gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');
    background-color:#d1d1d1;
}
.graybtn:active {
    position:relative;
    top:1px;
}
Copy the code

41, show a link to the URLs

@media print { a:after { content: " [" attr(href) "] "; }}Copy the code

42. Disable mobile Webkit selection highlighting

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
Copy the code

CSS3 dot pattern

body {
    background: radial-gradient(circle, white 10%, transparent 10%),
    radial-gradient(circle, white 10%, black 10%) 50px 50px;
    background-size: 100px 100px;
}
Copy the code

44, CSS3 checkered pattern

body {
    background-color: white;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), 
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 100px 100px;
    background-position: 0 0, 50px 50px;
}
Copy the code

45, CSS font property abbreviation

Font: italic small-caps bold 1.2em/1.0em Arial, Tahoma, Helvetica; }Copy the code

Paper page crimping effect

ul.box {
    position: relative;
    z-index: 1;
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0; 
}
ul.box li {
    position: relative;
    float: left;
    width: 250px;
    height: 150px;
    padding: 0;
    border: 1px solid #efefef;
    margin: 0 30px 30px 0;
    background: #fff;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
}
ul.box li:before,
ul.box li:after {
    content: '';
    z-index: -1;
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 70%;
    max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
    max-height: 100px;
    height: 55%;
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -webkit-transform: skew(-15deg) rotate(-6deg);
    -moz-transform: skew(-15deg) rotate(-6deg);
    -ms-transform: skew(-15deg) rotate(-6deg);
    -o-transform: skew(-15deg) rotate(-6deg);
    transform: skew(-15deg) rotate(-6deg); 
}
ul.box li:after {
    left: auto;
    right: 10px;
    -webkit-transform: skew(15deg) rotate(6deg);
    -moz-transform: skew(15deg) rotate(6deg);
    -ms-transform: skew(15deg) rotate(6deg);
    -o-transform: skew(15deg) rotate(6deg);
    transform: skew(15deg) rotate(6deg); 
}
Copy the code

Bright chain connection

a {
    color: #00e;
}
a:visited {
    color: #551a8b;
}
a:hover {
    color: #06e;
}
a:focus {
    outline: thin dotted;
}
a:hover, a:active {
    outline: 0;
}
a, a:visited, a:active {
    text-decoration: none;
    color: #fff;
    transition: all .3s ease-in-out;
}
a:hover, .glow {
    color: #ff0;
    text-shadow: 0 0 10px #ff0;
}
Copy the code

48, banner display with CSS3 features

.featureBanner {
    position: relative;
    margin: 20px
}
.featureBanner:before {
    content: "Featured";
    position: absolute;
    top: 5px;
    left: -8px;
    padding-right: 10px;
    color: #232323;
    font-weight: bold;
    height: 0px;
    border: 15px solid #ffa200;
    border-right-color: transparent;
    line-height: 0px;
    box-shadow: -0px 5px 5px -5px #000;
    z-index: 1;
}
.featureBanner:after {
    content: "";
    position: absolute;
    top: 35px;
    left: -8px;
    border: 4px solid #89540c;
    border-left-color: transparent;
    border-bottom-color: transparent;
}
Copy the code

49. Limit the display of ellipses to single lines of text

div{
    width: 65px;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

Copy the code

50. Limit multiple lines of text beyond ellipses

div{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
Copy the code

51, CSS triangle drawing

.sj {
    width: 0; 
    height: 0;
    border-width: 100px;
    border-style: solid;
}

.sj-left {
    border-color: transparent pink transparent transparent;
}

.sj-right {
    border-color: transparent transparent transparent pink;
}

.sj-top {
    border-color: transparent transparent pink transparent;
}

.sj-bottom {
    border-color: pink transparent transparent transparent;
}
Copy the code

Adaptive text box automatic wrapping, limit width and height

div{
    display: inline-block;
    min-height: 15px;
    max-width: 78%;
    padding: 12px 10px;
    text-align: left;
    font-family: Microsoft YaHei;
    word-wrap: break-word;
}
Copy the code

53, ~ selector: find all siblings of an element

For example. The test ~. The name {background: red}Copy the code

54, + selector: find the next sibling of an element

For example, the test +. The name {background: red}Copy the code

Font-size: 0 font-size: 0

56. Use padding to scale the box

Outermost container {display:flex; display:flex-box; flex-wrap:warp; } outermost container > child {flex-basis:25%; } outermost container > child > parent {width:100%; padding-top:75%; position:relative; } outer container > child > parent > child {width:100%; height:100%; position:absolute; top:0; left:0; }Copy the code

Use pointer-events to disable event cursors from becoming default to prevent hover and hover events from being triggered

pointer-events:none;
Copy the code

58, use max-width to prevent the image from breaking the container

Img {max-width: 100%; Display: inline - block; }Copy the code

59. The use of pseudo-classes and pseudo-elements

// Pseudo-classes are represented by: and pseudo-elements are represented by :: To represent common pseudo-classes are: :hover :active: Focus :visited: Link :lang :first-child: last-Child :not :nth-child // They're just like HTML elements, But you can't use javascript to get the usual pseudo-elements ::before ::after ::first-letter ::first-line using :valid and :invalid for form validation html5 provides a similar approach to required Form attributes such as Email tel: Required // Specifies a form element with a required attribute :valid // specifies a required form element with a correct match :invalid // specifies a form element <input that does not match the specified requirement Type ="text" required /> input:vaild{border:1px solid green; box-shadow:inset 10px 0 0 green; } input:invaild{border:1px solid red; box-shadow:inset 10px 0 0 red; } Use :target to fold panels use :not to exclude other selectors :not([readonly]):not([.disabled]):not([text]), etc. Use :nth-child to change color :nth-child(2n+1){background:red; } :nth-child(2n){backgorund:blue; } beautify the selected text with ::selection p::selection{background:red; color:green; } placeholder ::placeholder{color:Red; } p::first-letter{font-size:30px; color:Red; padding:20px; } use ::first-line to mark the first line of the paragraph p::first-line{color:red; }Copy the code

Footer is always at the bottom of the page

<style>
body {
  position:absolute;
  width:100%;
  min-height:100%; 
}
#app {
  padding-bottom: 200px;
  height: 100%; 
  font-family: "Microsoft Yahei", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #333;
  min-width: 1190px;
}
</style>
footer {
  clear: both;
  position: absolute;
  bottom: 0px;
  width: 100%;
  background: #000;
  color: #fff;
  min-width: 1200px;
  height: 200px;
}
Copy the code

Two child elements one has the content automatically spread, the other is empty how to follow the height.

.f{
    display: flex;
    align-items: stretch;
}
Copy the code

62. Eliminate the Transition screen

.css {transform: translate3d (0, 0); }Copy the code