Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the CSS code snippets that every designer should have". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn what CSS code snippets every designer should have.

1. CSS reset

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.0mm; color: # 333;}

Basic CSS resets are the most common code snippets on the network. This is my own custom reset code, which is based on Eric Meyer's reset codes. There are some image settings and borders for all the core elements to maintain the appropriate marings and padding.

two。 Classic CSS Clearfix

.clearfix: after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} .clearfix {display: inline-block;} html [xmlns] .clearfix {display: block;} * html .clearfix {height: 1%;}

This clearfix code is used by many smart developers on the website. It applies to a box model that holds floating elements. This will ensure that everything in it is stretched rather than floating.

3. 2011 updated Clearfix

.clearfix: before, .container: after {content: "; display: table;} .clearfix: after {clear: both;} / * IE 6 * 7 * / .clearfix {zoom: 1;}

Let's not mention the main differences between this new version and the classic version. Both of them can effectively clear your floating elements, and both support popular browsers and even Internet Explorer 6-8.

4. Transparency across browsers

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 * /}

Code Source

Some of the new CSS3 properties we might think apply anywhere. Actually, no, we have to adjust it a little bit. Transparency is an example. Add this filter attribute to ensure that it works properly in the IE browser.

5. CSS block reference template

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;}

Code Source

Not all people have to use blockquotes on their websites. But I think it's a good element to separate references or optimize repetitive content on blogs and web pages. The above code provides a default style for your blockquotes so that your content doesn't look monotonous.

6. The fillet of personality

# 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-right-radius: 3px;-webkit-border-bottom-right-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;}

Most developers are familiar with the fillet property of CSS3. But do you know how to set a different value for each corner? The above code helps you solve this problem! The above two versions have achieved this effect for you, so study it carefully.

7. General media inquiry

/ * 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 * /} / * 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 * /} / * Desktops 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 * /}

Code Source

This is a great template and you can find other piecemeal media queries on CSS-Tricks. Anyway, I've handcuffed all their examples, including tons of actual mobile devices. These codes can even use the minimum device pixel ratio for retinal screen devices.

8. Modern font stack

/ * 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

Code Source

It's hard to design a new page and brainstorm your own CSS font stack. I hope this little piece of code will ease some of the torture and give you some templates to get started. If you're looking for more examples, check out the CSS font stack, which is one of my favorite resources.

9. Custom text selection

:: selection {background: # e2eae2;}::-moz-selection {background: # e2eae2;}::-webkit-selection {background: # e2eae2;}

Some new browsers will allow you to define the highlighted colors on the page. By default this is set to light blue, but you can set any color value you like, this small piece of code includes a typical:: selection target and specific prefixes for Webkit and Mozilla.

10. Hide the H1 text as the Logo flag

H1 {text-indent:-9999px; margin: 0 auto; width: 320px; height: 85px; background: transparent url ("images/logo.png") no-repeat scroll;}

The first time I noticed that this technology was implemented in the ancient Digg layout. For SEO purposes, you can also set an H1 tag that contains the name of your site. But with CSS we can remove the text and make it invisible and replace it with a customized logo image.

11. Polaroid image boundary

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*/}

Code Source

Applying this basic fragment will enable you to implement the .polaroid class on your image. This will create an old photo style effect with a wide white edge and some light shadows. You need to update the width / height values to match your image size and site layout.

twelve。 Anchor link pseudo class

A:link {color: blue;} a:visited {color: purple;} a:hover {color: red;} a:active {color: yellow;}

Code Source

Most CSS developers know about anchor link classes and: hover effects. But I would like to introduce this small piece of code as a reference for beginners. These are the four default states of an anchor link and some other HTML elements. Keep them handy until you can remember something more complicated.

13. Fancy CSS3 Pull- citation

. has-pullquote:before {/ * Reset metrics. * / padding: 0; border: none; / * Content * / content: attr (data-pullquote); / * Pull out to the right, modular scale based margins. * / float: right; 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;}

Code Source

Unlike Pull- citations (Pull-quotes) and block references (blockquotes), they appear on the side of your blog or news article. These citations often refer to text from articles, so they are slightly different from block references. These default classes have some basic properties with three unique font types to choose from.

14. Full screen background and CSS3

Html {background: url ('images/bg.jpg') no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover; background-size: cover;}

Code Source

I should note that this code doesn't work correctly in older browsers that don't support CSS3 syntax. However, if you are looking for a quick solution that does not need to care about legacy system support, this is the best code snippet you can find! Add large photos to the background of your site while keeping them variable size and fixed as you scroll.

15. Vertically centered content

.container {min-height: 6.5em; display: table-cell; vertical-align: middle;}

Code Source

With margin: 0 auto technology, it is easy to place embedded content in the middle of your page. However, vertical text is much more difficult, especially considering scrollbars and other ways. But this is a pure CSS solution that works flawlessly without JavaScript.

16. Force vertical scroll bar

Html {height: 101%}

If your page content doesn't fill the entire height of your browser window, then you won't be anxious to get the scroll bar. But resizing will force them to appear and add an additional 10-15 pixels to your window width, pushing away your page content. This code snippet will ensure that your HTML element is always a little higher than the browser, forcing the scroll bar to stay in place.

17. CSS3 gradient template

# colorbox {background: # 629721; background-image:-webkit-gradient (linear, left top, left bottom, 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);}

The CSS3 gradient is another wonderful part of the new technical parameters. Many specific prefixes are hard to remember, so this code snippet will save you some time for each project.

18. @ font-face template

@ 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;}

Code Source

This is some other CSS3 code that is not easy to remember. With @ font-face you can embed your own TTF/OTF/SVG/WOFF file into your website to generate custom font types. Use this template as a basic example for your future project.

19. Fully define CSS3 elements

P {position:relative; zff0030 index1; padding: 10px; margin: 10px; font-size: 21px; line-height: 1.3em.color: # fff; background: # ff0030;-webkit-box-shadow: 00 4px # ff0030, 2px 1px 4px 4px rgba (10 moz-box-shadow: 00 4px # index.5);-moz-box-shadow: 00 4px # index.5) Box-shadow: 000 4px # ff0030, 2px 1px 6px 4px rgba;-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;}

Code Source

20. CSS3 zebra stripes

Tbody tr:nth-child (odd) {background-color: # ccc;}

Code Source

The best application of this project is on the data list. It is difficult to define a table with 40 or 50 rows. By adding the above CSS3 stripe attribute, you can easily add background color to odd rows.

21. Character beautification

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

Code Source

This css class is used for span elements that surround text in the page content. It will display some typical serif fonts in italics. Test it to see if it's your favorite style.

twenty-two。 The first letter of a paragraph

P:first-letter {display: block; margin: 5px 0 05px; float: left; color: # ff3366; font-size: 5.4em; font-family: Georgia, Times New Roman, serif;}

You must have seen the special effect of their initials in newspapers and pictures. For a web page or blog with sufficient space, it will certainly be affected by it. The above CSS rules define all P tags, or you can define them as a class or ID.

23. Inner Shadow of CSS3 Box Model

# mydiv {- moz-box-shadow: inset 2px 0 4px # 000;-webkit-box-shadow: inset 2px 0 4px # 000; box-shadow: inset 2px 0 4px # 000;}

Shadow has provided a great change for our website. You can define this attribute for almost all elements, and it all looks very good. The above code defines the inner shadow, which is ugly for the design, but it is good under certain circumstances.

24. External Shadows of CSS3 Box Model

# mydiv {- webkit-box-shadow: 0 2px 2px-2px rgba (0,0,0,0.52);-moz-box-shadow: 0 2px 2px-2px rgba (0,0,0,0.52); box-shadow: 0 2px 2px-2px rgba (0,0,0,0.52);}

Like inner shadows in CSS3, I also provide a code for outer shadows. Note that the third number represents the fuzzy distance and the fourth represents the range. Learn more from W3Schools.

25. Triangle list prefix

Ul {margin: 0.75em 0; padding: 01em; list-style: none;} li:before {content: "; border-color: transparent # 111; border-style: solid; border-width: 0.35em 0 0.35em 0.45mm; display: block; height: 0; width: 0; left:-1em; top: 0.9em; position: relative;}

Code Source

Whether you believe it or not, I believe it. The list prefix of triangles is possible in CSS3. This looks so cool, but unfortunately not all browsers support it.

twenty-six。 Fixed width centered layout

# page-wrap {width: 800px; margin: 0 auto;}

Code Source

I know I've mentioned how to set the level in the middle before. The code here is perfectly centered horizontally with a fixed width.

twenty-seven。 CSS3 text categorization

# columns-3 {text-align: justify;-moz-column-count: 3;-moz-column-gap: 12px;-moz-column-rule: 1px solid # c4c8cc;-webkit-column-count: 3;-webkit-column-gap: 12px;-webkit-column-rule: 1px solid # c4c8cc;}

Code Source

CSS3 listings will look great on the site, but the real question is how do we separate text-based content. With the above code, set the values of the columns in your text paragraph, and the text content will be divided into columns of the same width according to the values you set.

twenty-eight。 CSS fixed footer

# footer {position: fixed; left: 0px; bottom: 0px; height: 30px; width: 100%; background: # 444;} / * IE 6 * / * html # footer {position: absolute; top: _ expression ((0-(footer.offsetHeight) + (document.documentElement.clientHeight? Document.documentElement.clientHeight: document.body.clientHeight) + (ignoreMe = document.documentElement.scrollTop? Document.documentElement.scrollTop: document.body.scrollTop)) + 'px');}

Code Source

This is actually much more useful than it sounds, and it's easy to add a fixed footer to your site. These footers are fixed no matter how the page scrolls, and you can include some help or contact information. Add value to the user interface perfectly.

twenty-nine。 Transparency of PNG pictures under IE6

.bg {width:200px; height:100px; background: url (/ folder/yourimage.png) no-repeat; _ background:none; _ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/folder/yourimage.png',sizingMethod='crop');} / * 1px gif method * / img, .png {position: relative Behavior: _ expression ((this.runtimeStyle.behavior= "none") & & (this.pngSet?this.pngSet=true: (this.nodeName = = "IMG" & & this.src.toLowerCase (). IndexOf ('.png') >-1? (this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader (src='" + this.src + ", sizingMethod='image')" This.src = "images/transparent.gif"): (this.origBg = this.origBg? This.origBg: this.currentStyle.backgroundImage.toString () .replace ('url (",'). Replace ('"),'), this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader (src='" + this.origBg + ", sizingMethod='crop')", this.runtimeStyle.backgroundImage = "none")), this.pngSet=true));}

Code Source

The use of transparent images has become the most basic practice of the website. At the beginning, it was a gif diagram, and now all use PNG transparent maps. Unfortunately, some older IE browsers do not support this transparency attribute. The problem can be solved by adding the above code.

thirty。 Minimum height across browsers

# container {min-height: 550px; height: auto! important; height: 550px;}

Developers who have to use min-height know that all browsers support this attribute. Many new browsers support this property, but Internet Explorer and older versions of Firefox have problems with this support. The above code can solve this Bug.

thirty-one。 CSS3 luminous input box

Input [type=text], textarea {- webkit-transition: all 0.30s ease-in-out;-moz-transition: all 0.30s ease-in-out;-ms-transition: all 0.30s ease-in-out;-o-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, textarea:focus {box-shadow: 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);}

Code Source

I really like this basic custom CSS3 class because it overrides the way the default browser behaves. The Chrome & Safar users I know are disgusted with the outline of the input box in the form. Adding these attributes to your stylesheet will set a whole new design for the basic input box elements.

thirty-two。 Link style based on file type

/ * external links * / a [href ^ = "http://"] {padding-right: 13px; background: url ('external.gif') no-repeat center right;} / * emails * / a [mailto:"] {padding-right: 20px; background: url (' email.png') no-repeat center right;} / * pdfs * / a [href$= ".pdf"] {padding-right: 18px Background: url ('acrobat.png') no-repeat center right;}

Code Source

A rather obscure piece of CSS code, but I like its creativity! You can decide the file type of the link using the CSS selector and use the icon as the background image. These can contain different protocols (HTTP, FTP, IRC, mailto) or simply their own file types (mp3, avi, pdf).

thirty-three。 Mandatory code wrapper

Pre {white-space: pre-wrap; / * css-3 * / white-space:-moz-pre-wrap; / * Mozilla, since 1999 * / white-space:-pre-wrap; / * Opera 4-6 * / white-space:-Omuri premuri wrap. / * Opera 7 * / word-wrap: break-word; / * Internet Explorer 5.5 + * /}

Code Source

Typical pre tags are used to display large chunks of code in a layout. This is prearranged text, as you find on Notepad or Textedit, unless you often look at a long piece of text that causes a horizontal scroll bar. This CSS code will force all pre tags to be in encapsulated code format and will not go outside the container.

thirty-four。 Force a hand cursor to be displayed on a clickable entry

A [href], input [type = 'submit'], input [type =' image'], label [for], select, button, .input {cursor: pointer;}

Code Source

There are many default clickable HTML elements that do not always show hand pointer icons. Using this CSS selector setting, you can force the shape of the pointer for many key elements and any other objects that use the .pointer class.

thirty-five。 Shadow at the top of the page

Body:before {content: "; position: fixed; top:-10px; left: 0; width: 100%; height: 10px;-webkit-box-shadow: 0px 0px 10px rgba (0box-shadow: 0px 0px 10px rgba; box-shadow: 0px 0px 10px rgba); z-index: 100;}

Code Source

Apart from some pleasant beauty, developers may not find it useful. But I do enjoy the effect, and obviously it's unique! Simply attach this CSS code to your body element and you can display a fading shadow from the top of your page.

thirty-six。 CSS3 conversation bubble

.chat-bubble {background-color: # ededed; border: 2px solid # 666; font-size: 35px; line-height: 1.3em; margin: 10px auto; padding: 10px; position: relative; text-align: center; width: 300px;-moz-border-radius: 20px;-webkit-border-radius: 20px;-moz-box-shadow: 00 5px # 888 -webkit-box-shadow: 0 5px # 888; font-family: 'Bangers', arial, serif;} .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;}

Code Source

When it comes to conversation bubbles, countless user interface uses emerge. These can be used to process discussion reviews, to create bulletin boards, or to display referenced text. Just add the following classes to your stylesheet, and you can also find the relevant HTML code from this CSS3 snippet.

thirty-seven。 Default H1-H5 header

H1 color: # 005a9c;} H1 {font-size: 2.6emm; line-height: 2.45emm;} H2 {font-size: 2.1emm; line-height: 1.9emm;} h3 {font-size: 1.8emm; line-height: 1.65emm;} h4 {font-size: 1.65emm; line-height: 1.4em } h5 {font-size: 1.4em; line-height: 1.25mm;}

Code Source

I have provided many common syntax, including browser CSS resets and some HTML element resets. This template contains the default styles for all the main header elements from the H1-H5. You may want to add H6, but I have never seen a website using all six nested headers.

thirty-eight。 Pure CSS background noise

Body {background-image: url (data:image/png;base64,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); background-color: # 0094d0;}

Code Source

Designers have seen this effect added to websites for a long time, although they usually use repetitive tile images with transparency. But we can embed Base64 coding into CSS to generate a whole new image. In the above code snippet example, a small noise texture is generated on the body background, or you can create a custom noise background in the noise texture generator.

thirty-nine。 Continue sorting the list

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;}

Code Source

I don't think this may be a particularly popular code segment, but it does have a market among developers. There may be a situation where you need to continue a list item and it is split into two separate UL elements. Check out the code above to find a good pure CSS fix.

forty。 CSS hover tooltip

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;} / * Tooltip styling * / a [data-tooltip]: after {border-top: 8px solid # 222 Border-top: 8px solid hsla (0before 0% 8px solid transparent; content 0% data-tooltip .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 (0Person0% data-tooltip .85) Color: # f6f6f6; content: attr (data-tooltip); display: none; font-family: sans-serif; font-size: 14px; height: 32px; left: 0; line-height: 32px; padding: 015px; position: absolute; text-shadow: 0 1px 1px hsla (0pc0p0p0p1); 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;}

Code Source

There are many open source jQuery-based tooltips that you can implement on your website. But CSS-based tooltips are rare, and this is one of my favorite code snippets. Just copy to your stylesheet and use the new HTML5 data properties, and you can set the tooltip text through data-tooltip.

forty-one。 A dark gray round button

.graybtn {- moz-box-shadow:inset 0px 1px 0px 0px # ffffff;-webkit-box-shadow:inset 0px 1px 0px 0px # ffffff; box-shadow:inset 0px 1px 0px 0px # ffffff; background:-webkit-gradient (linear, left top, left bottom, color-stop (0.05,# ffffff), color-stop (1, # d1d1d1); background:-moz-linear-gradient (center top, # ffffff 5%, # d1d1d1 100%) Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#ffffff', endColorstr='#d1d1d1'); background-color:#ffffff;-moz-border-radius:6px;-webkit-border-radius:6px; 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:-webkit-gradient (linear, left top, left bottom, color-stop (0.05,# d1d1d1), color-stop (1, # ffffff); background:-moz-linear-gradient (center top, # d1d1d1 5%, # ffffff 100%); filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#d1d1d1', endColorstr='#ffffff') Background-color:#d1d1d1;} .graybtn: active {position:relative; top:1px;}

Code Source

As another helpful template for web developers, I included this simple CSS3 button class. I used the class name of .graybtn and showed the corresponding color, but that doesn't mean you can't change the style to suit your own site. Check the hexadecimal values in the color wheel to find matching approximate tones from different color ranges.

forty-two。 Display URLS on a printed page

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

Code Source

If you run a news site or manage resources with a lot of printed material, this is probably one of the best code snippets you can find. The anchor links on the page will look the same as usual. But when printing, your users will see a URL with hyperlinks to the link text. This is very convenient for people who need to visit the web page that you link to, but can't see the URL in a specific printed document.

forty-three。 Disable mobile Webkit 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;}

Based on your mobile experience, this code may not be very useful. But when you visit mobile sites with Safari or other Webkit engine-based browsers, you'll notice that they have a gray box around the elements as soon as you click on them. As long as you add these styles to your site, you can remove the highlighting effects of all native mobile browsers.

forty-four。 CSS3 pattern with dots

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

Code Source

I was a little surprised when I first found this code snippet online. But this is really an interesting way to improvise a pure CSS3 BG schema. I set the body element as the default target, but you can reference it to any div container on the page.

forty-five。 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: 00, 50px 50px;}

Code Source

Similar to the dot pattern above, we can also create a seamless checkered pattern. This method requires a little more syntax to run, but it looks perfect in all browsers that support CSS3. You can also change the color values of black and white to match the color scheme of your own website.

forty-six。 Github Fork ribbon

.ribbon {background-color: # A00; overflow: hidden; / * top left corner * / position: absolute; left:-3mm; top: 2.5mm; / * 45deg ccw rotation * /-moz-transform: rotate (- 45deg);-webkit-transform: rotate (- 45deg); / * shadow * /-moz-box-shadow: 00 1em # 888 -webkit-box-shadow: 0 1em # 888;} .ribbon a {border: 1px solid # faa; color: # fff; display: block; font: bold 81.25% 'Helvetiva Neue', Helvetica, Arial, sans-serif; margin: 0.05em 0 0.075em 0; padding: 0.5em 3.5mm; text-align: center; text-decoration: none / * shadow * / text-shadow: 0 0.5em # 444;}

Code Source

As a big Github user, I was impressed by this basic code. You can use the conversion properties of CSS3 to quickly create Github corner ribbons. This is perfect for open source plug-ins or code packages that have many followers on Github. If you have an active library of Github packages, it's also great for hosted HTML/CSS/JS demos.

forty-seven。 Compressed CSS font properties

P {font: italic small-caps bold 1.2em/1.0em Arial, Tahoma, Helvetica;}

Code Source

The main reason why web developers don't often use this compressed font property is that not all settings are required. But an understanding of this shorthand method can save you a lot of time and space on the stylesheet. Use this code snippet when you want to shorten your font style format.

forty-eight。 Page curling effect

Ul.box {position: relative; z-index: 1; / * prevent shadows falling behind containers with backgrounds * / 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), 00 40px rgba (0,0,0.06) inset;-moz-box-shadow: 0 1px 4px rgba (0,0,0,0.27), 00 40px rgba (0,0,0.06) inset Box-shadow: 0 1px 4px rgba (0,0,0,0.27), 00 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);}

Code Source

This page curl effect can be applied to almost any container that contains site content. I immediately think of image media and quoted text, but this is the only way to really do anything. Check out the online demo page of this code to get a better understanding of how these pages implement curling.

forty-nine。 Glowing anchor link

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;-webkit-transition: all .3s ease-in-out } a:hover, .glow {color: # ff0; text-shadow: 0 0 10px # ff0;}

Source code

CSS3 text Shadow provides a unique approach to web typesetting. More specifically, this clip is a very good resource for developing creative mouse hover glowing effects. Although I don't think this special effect can be integrated into most websites without maladjustment, if you have the patience to adjust it, you will certainly be able to impress visitors.

fifty。 Distinctive CSS3 display bar

.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 } Thank you for your reading, the above is the content of "what CSS code snippets every designer should have". After the study of this article, I believe you have a deeper understanding of what CSS code snippets that every designer should have, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.