A collection of CSS Codes

Web development technology is being innovated every year. browsers have gradually supported the CSS3 feature, and website designers and front-end developers generally adopt this new technology for design and development. But some developers are still obsessed with some CSS2 code.

This article will share 20 very professional CSS2/CSS3 codes for your use. You can save them in the IDE or in the CSS document, these code snippets will definitely surprise you.

1. CSS Resets

There are a lot of code on the network for CSS resetting. This code is adapted based on Eric Meyer's reset codes. It contains a response-style image and the boundary setting of all core elements, in this way, the margins and padding can be well aligned.

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; line-height: 1.0em; color: #333 ;}
2. Classic CSS Clearfix

This clearfix code has been widely used among Web developers. This class selector should be applied to containers with floating elements to ensure that the subsequent content is not floating, but will be pushed down and cleared.

. Clearfix: after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0 ;}
. Clearfix {display: inline-block ;}
<Font> </font>
Html [xmlns]. clearfix {display: block ;}
* Html. clearfix {height: 1% ;}
3. Upgraded Clearfix

In terms of performance, there is no difference between the new version and the classic version. These classes can effectively clear all floats, but they are only compatible with modern browsers and traditional IE 6-8.

. Clearfix: before,. container: after {content: ""; display: table ;}< font> </font>
. Clearfix: after {clear: both ;}
/* Internet Explorer 6/7 */
. Clearfix {zoom: 1 ;}
4. Cross-Browser Transparency

Many Attributes in CSS3 are compatible with browsers, but there are also special cases, such as opacity, which must be updated. The additional filter attribute can be compatible with any old version of Internet Explorer.

. Transparent {
Filter: alpha (opacity = 50 );
/* Internet explorer */
-Khtml-opacity: 0.5;
/* Khtml, old safari */
-Moz-opacity: 0.5;
/* Mozilla, netscape */
Opacity: 0.5;
/* Fx, safari, opera */
}
Source Code address: http://perishablepress.com/cross-browser-transparency-via-css/
5. CSS Blockquote Template

This code is mainly used to separate reference or copy content on the page, and provides the default style for the page text.

Blockquote {
Background: # f9f9f9; <
Border-left: 10px solid # ccc;
Margin: 1.5em 10px;
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;
}
View Source Code: http://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/
6. Personalized rounded corner code

Many CSS developers are familiar with the rounded corner syntax, but how do I set different values for each corner? Let's take a look at the following code!

# Container {
-Webkit-border-radius: 4px 3px 6px 10px;
-Moz-border-radius: 4px 3px 6px 10px;
-O-border-radius: 4px 3px 6px 10px;
Border-radius: 4px 3px 6px 10px;
}
/* Alternative syntax broken into each line */
# Container {
-Webkit-border-top-left-radius: 4px;
-Webkit-border-top-rightright-radius: 3px;
-Webkit-border-bottom-rightright-radius: 6px;
-Webkit-border-bottom-left-radius: 10px;
-Moz-border-radius-topleft: 4px;
-Moz-border-radius-topright: 3px;
-Moz-border-radius-bottomright: 6px;
-Moz-border-radius-bottomleft: 10px;
}
7. General media Query

This is a very good template for various fragmented media queries and can also be used on mobile devices. This code can even be referenced to the retina device by using min-device-pixel-ratio.

/* Smartphones (portrait and landscape )-----------*/
@ Media only screen
And (min-device-width: 320px) and (max-device-width: 480px ){

/* Styles */
}
/* Smartphones (landscape )-----------*/
@ Media only screen and (min-width: 321px ){

/* Styles */
}
/* Smartphones (portrait )-----------*/
@ Media only screen and (max-width: 320px ){

/* Styles */
 
}
/* IPads (portrait and landscape )-----------*/
@ Media only screen and (min-device-width: 768px) and (max-device-width: 1024px ){

/* Styles */
 
}
<Font> </font>
/* IPads (landscape )-----------*/
@ Media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape ){

/* Styles */
}
/* IPads (portrait )-----------*/
@ Media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait ){

/* Styles */
}
/* Export tops and laptops -----------*/
@ Media only screen and (min-width: 1224px ){

/* Styles */
}
/* Large screens -----------*/
@ Media only screen and (min-width: 1824px ){

/* Styles */
}
/* IPhone 4 -----------*/
@ Media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5 ){

/* Styles */
}
Source Code address: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
8. Modern font Stack

It is still difficult to design your own font stack on the new web page. I hope the following code will inspire you and Develop templates. For more information about the font stack source code, you can access CSS Font Stacks.

/* Times New Roman-based serif */
 
Font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

/* A modern Georgia-based serif */
 
Font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

/* A more traditional Garamond-based serif */
 
Font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter ", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

/* The Helvetica/Arial-based sans serif */
 
Font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed ", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

/* The Verdana-based sans serif */
 
Font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;

/* The Trebuchet-based sans serif */
 
Font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref ", sans-serif;

/* The heavier "Impact" sans serif */
 
Font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;

/* The monospace */
 
Font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono ", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
Source Code address: http://www.sitepoint.com/eight-definitive-font-stacks/
9. Select custom text

Some new Web browsers allow you to customize some highlighted colors on the Web page. The default color of the following code is light blue. Of course, you can set various colors based on your personal interests. The following code references a typical Webkit and Mozilla vendor Prefix: selection.

: Selection {background: # e2eae2 ;}
:-Moz-selection {background: # e2eae2 ;}
:-Webkit-selection {background: # e2eae2 ;}
10. Hide the H1 text on the Logo

H1 {
Text-indent:-9999px;
Margin: 0 auto;
Width: 320px;
Height: 85px;
Background: transparent url ("images/logo.png") no-repeat scroll;
}

 

11. Create a Paster effect border for the image

The following code allows you to create a photo with a large white border and a tiny shadow. You need to modify the image width/height to match your website layout.

Img. polaroid {
Background: #000;
/* Change this to a background image or remove */
Border: solid # fff;
Border-width: 6px 6px 20px 6px;
Box-shadow: 1px 1px 5px #333;
/* Standard blur at 5px. Increase for more depth *

-Webkit-box-shadow: 1px 1px 5px #333;

-Moz-box-shadow: 1px 1px 5px #333;

Height: 200px;/* Set to height of your image or desired div */
Width: 200px;
/* Set to width of your image or desired div */
}
Source Code address: http://www.smipple.net/snippet/kettultim/Polaroid%20Image%20Border%20-%20CSS3
12. Pseudo-class selector of the anchor Link

A: link {color: blue ;}
A: visited {color: purple ;}
A: hover {color: red ;}
A: active {color: yellow ;}
Source Code address: http://www.ahrefmagazine.com/web-design/30-useful-css-snippets-for-developers
13. Fancy CSS3 Pull-Quotes

Pull-quotes is different from blockquote in pages. They are usually used to reference text in articles.

. Has-pullquote: before {

/* Reset metrics .*/
Padding: 0;
Border: none;

/* Content */
Content: attr (data-pullquote );

/* Pull out to the right, modular scale based margins .*/
 
Float: rightright;
Width: 320px;
Margin: 12px-140px 24px 36px;

/* Baseline correction */
Position: relative;
Top: 5px;

/* Typography (30px line-height equals 25% incremental leading )*/
Font-size: 23px;
Line-height: 30px;
}
. Pullquote-adelle: before {
Font-family: "adelle-1", "adelle-2 ";
Font-weight: 100;
Top: 10px! Important;
}
 
. Pullquote-helvetica: before {
Font-family: "Helvetica Neue", Arial, sans-serif;
Font-weight: bold;
Top: 7px! Important;
}
. Pullquote-facit: before {
Font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;
Font-weight: bold;
Top: 7px! Important;
}
Source Code address: http://miekd.com/articles/pull-quotes-with-html5-and-css/
14. full screen background Effects of CSS3

If you want to use a large image as the background of a website and want to keep it fixed during Page scrolling, this code snippet is very suitable, but this Code cannot work on the old browser.

Html {
Background: url ('images/bg.jpg ') no-repeat center fixed;
-Webkit-background-size: cover;
-Moz-background-size: cover;
-O-background-size: cover;
Background-size: cover;
}
Source code: http://css-tricks.com/perfect-full-page-background-image/
15. Content vertical concentration

It is difficult to control the content in the vertical direction relative to the content in the horizontal position, especially when the scroll bar is taken into account. This pure CSS code can work well.

. Container {
Min-height: 6.5em;
Display: table-cell;
Vertical-align: middle;
}
Source Code address: http://www.w3.org/Style/Examples/007/center
16. vertical scroll bar

This Code ensures that your HTML elements are always slightly higher than the position where the browser scroll bar stays.

Html {height: 101%}
17. CSS3 Gradients Template

# Colorbox {
Background: #629721;
Background-image:-webkit-gradient (linear, left top, left bottombottom, from (#83b842), to (#629721 ));
Background-image:-webkit-linear-gradient (top, #83b842, #629721 );
Background-image:-moz-linear-gradient (top, #83b842, #629721 );
Background-image:-ms-linear-gradient (top, #83b842, #629721 );
Background-image:-o-linear-gradient (top, #83b842, #629721 );
Background-image: linear-gradient (top, #83b842, #629721 );
}
18. @ Font-Face template

Use @ font-face to embed the TTF/OTF/SVG/WOFF file into the website and generate a Custom font families.

@ Font-face {
Font-family: 'mywebfont ';
Src: url ('webfont. eot ');
/* IE9 Compat Modes */
Src: url ('webfont. eot? # Iefix') format ('embedded-opentype '),
/* IE6-IE8 */
Url ('webfont. woff') format ('woff '),
/* Modern Browsers */
Url ('webfont. ttf') format ('truetype '),
/* Safari, Android, iOS */
Url ('webfont. svg # svgfontname') format ('svg ');
/* Legacy iOS */
}
Body {
Font-family: 'mywebfont', Arial, sans-serif;
}
Source Code address: http://css-tricks.com/snippets/css/using-font-face/
19. Create a stitching Effect

P {
Position: relative;
Z-index: 1;
Padding: 10px;
Margin: 10px;
Font-size: 21px;
Line-height: 1.3em;
Color: # fff;
Background: # ff0030;
-Webkit-box-shadow: 0 0 4px # ff0030, 2px 1px 4px 4px rgba (10, 10, 0,. 5 );
-Moz-box-shadow: 0 0 4px # ff0030, 2px 1px 4px 4px rgba (10, 10, 0,. 5 );
Box-shadow: 0 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;
Bottombottom: 3px;
Left: 3px;
Rightright: 3px;
Border: 2px dashed # fff;
}
P {
Color: # fff;
Text-decoration: none;
}
P a: hover, p a: focus, p a: active {
Text-decoration: underline;
}

20. CSS3 zebra Effect

When a user browses many rows of data, it is difficult to tell which cell belongs to which row. By default, you can update different background colors for parity rows by adding a zebra crossing.

Tbody tr: nth-child (odd ){
Background-color: # ccc;
}
Source Code address: http://css-tricks.com/snippets/css/css3-zebra-striping-a-table/