1、垂直对齐

如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑:

  1. .verticalcenter{
  2. position: relative;
  3. top: 50%;
  4. -webkit-transform: translateY(-50%);
  5. -o-transform: translateY(-50%);
  6. transform: translateY(-50%);
  7. }

(ps: 【译】如何实现CSS居中?–CSS居中常用方法 )

使用这个技巧,从单行文本、段落到box,都会垂直对齐。目前浏览器对Transform的支持是需要关注的,Chrome 4, Opera 10, Safari 3, Firefox
3, and Internet Explorer 9.均支持该属性。

2、伸展一个元素到窗口高度

在具体场景中,你可能想要将一个元素伸展到窗口高度,基本元素的调整只能调整容器的大小,因此要使一个元素伸展到窗口高度,我们需要伸展顶层元素: html 和 body :

  1. html,
  2. body {
  3. height: 100%;
  4. }

然后将100%应用到任何元素的高:

  1. div {
  2. height: 100%;
  3. }

3、基于文件格式使用不同的样式

为了更容易知道链接的目标,有时你想让一些链接看起来和其它的不同。下面的片段在文本链接前添加一个图标,对不同的资源使用不同的图标或图片:

  1. a[href^="http://"]{
  2. padding-right: 20px;
  3. background: url(external.gif) no-repeat center right;
  4. }
  5. /* emails */
  6. a[href^="mailto:"]{
  7. padding-right: 20px;
  8. background: url(email.png) no-repeat center right;
  9. }
  10. /* pdfs */
  11. a[href$=".pdf"]{
  12. padding-right: 20px;
  13. background: url(pdf.png) no-repeat center right;
  14. }

看起来是这样的: http://jsfiddle.net/agusesetiyono/3sL1r0mw/light/

4、创建跨浏览器的图像灰度

灰度有时看起来简约和优雅,能为网站呈现更深层次的色调。在示例中,我们将对一个SVG图像添加灰度过滤:

  1. <svg xmlns="http://www.w3.org/2000/svg">
  2. <filter id="grayscale">
  3. <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
  4. </filter>
  5. </svg>

为了跨浏览器,会用到 filter 属性:

  1. img {
  2. filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
  3. filter: gray; /* IE6-9 */
  4. -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  5. }

5、背景渐变动画

CSS中最具诱惑的一个功能是能添加动画效果,除了渐变,你可以给背景色、透明度、元素大小添加动画。目前,你不能为渐变添加动画,但下面的代码可能有帮助。它通过改变背景位置,让它看起来有动画效果。

  1. button {
  2. background-image: linear-gradient(#5187c4, #1c2f45);
  3. background-size: auto 200%;
  4. background-position: 0 100%;
  5. transition: background-position 0.5s;
  6. }
  7. button:hover {
  8. background-position: 0 0;
  9. }

效果在这里: http://jsfiddle.net/agusesetiyono/gw46dk27/1/light/

6、CSS:表格列宽自适用

对于表格,当谈到调整列宽时,是比较痛苦的。然后,这里有一个可以使用的技巧:给 td 元素添加 white-space: nowrap; 能让文本正确的换行

  1. td {
  2. white-space: nowrap;
  3. }

查看效果: http://jsfiddle.net/agusesetiyono/1uotj8wv/3/light/

7、只在一边或两边显示盒子阴影

如果你要一个盒阴影,试试这个技巧,能为任一边添加阴影。为了实现这个,首先定义一个有具体宽高的盒子,然后正确定位 :after 伪类。实现底边阴影的代码如下:

  1. .box-shadow {
  2. background-color: #FF8020;
  3. width: 160px;
  4. height: 90px;
  5. margin-top: -45px;
  6. margin-left: -80px;
  7. position: absolute;
  8. top: 50%;
  9. left: 50%;
  10. }
  11. .box-shadow:after {
  12. content: "";
  13. width: 150px;
  14. height: 1px;
  15. margin-top: 88px;
  16. margin-left: -75px;
  17. display: block;
  18. position: absolute;
  19. left: 50%;
  20. z-index: -1;
  21. -webkit-box-shadow: 0px 0px 8px 2px #000000;
  22. -moz-box-shadow: 0px 0px 8px 2px #000000;
  23. box-shadow: 0px 0px 8px 2px #000000;
  24. }

效果: http://jsfiddle.net/agusesetiyono/1kwhsfvo/light/

8、包裹长文本

如果你碰到一个比自身容器长的文本,这个技巧对你很有用。在这个示例中,默认时,不管容器的宽度,文本都将水平填充。

简单的CSS代码就能在容器中调整文本:

  1. pre {
  2. white-space: pre-line;
  3. word-wrap: break-word;
  4. }

效果看起来如下:

9、制造模糊文本

想要让文本模糊?可以使用 color 透明和 text-shadow 实现。

  1. .blurry-text {
  2. color: transparent;
  3. text-shadow: 0 0 5px rgba(0,0,0,0.5);
  4. }

demo: http://jsfiddle.net/agusesetiyono/n5uh4s0j/light/

10、用CSS动画实现省略号动画

这个片段将帮助你制造一个ellipsis的动画,对于简单的加载状态是很有用的,而不用去使用gif图像。

  1. .loading:after {
  2. overflow: hidden;
  3. display: inline-block;
  4. vertical-align: bottom;
  5. animation: ellipsis 2s infinite;
  6. content: "\2026"; /* ascii code for the ellipsis character */
  7. }
  8. @keyframes ellipsis {
  9. from {
  10. width: 2px;
  11. }
  12. to {
  13. width: 15px;
  14. }
  15. }

效果: http://jsfiddle.net/agusesetiyono/MDzsR/69/light/

11、样式重置

  1. 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 {
  2. margin: 0;
  3. padding: 0;
  4. border: 0;
  5. font-size: 100%;
  6. font: inherit;
  7. vertical-align: baseline;
  8. outline: none;
  9. -webkit-box-sizing: border-box;
  10. -moz-box-sizing: border-box;
  11. box-sizing: border-box;
  12. }
  13. html { height: 101%; }
  14. body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }
  15. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
  16. ol, ul { list-style: none; }
  17. blockquote, q { quotes: none; }
  18. blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
  19. strong { font-weight: bold; }
  20. table { border-collapse: collapse; border-spacing: 0; }
  21. img { border: 0; max-width: 100%; }
  22. p { font-size: 1.2em; line-height: 1.0em; color: #333; }

12、典型的CSS清除浮动

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

13、新版清除浮动(2011)

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

14、跨浏览器的透明

  1. .transparent {
  2. filter: alpha(opacity=50); /* internet explorer */
  3. -khtml-opacity: 0.5; /* khtml, old safari */
  4. -moz-opacity: 0.5; /* mozilla, netscape */
  5. opacity: 0.5; /* fx, safari, opera */
  6. }

15、CSS引用模板

  1. blockquote {
  2. background: #f9f9f9;
  3. border-left: 10px solid #ccc;
  4. margin: 1.5em 10px;
  5. padding: .5em 10px;
  6. quotes: "\201C""\201D""\2018""\2019";
  7. }
  8. blockquote:before {
  9. color: #ccc;
  10. content: open-quote;
  11. font-size: 4em;
  12. line-height: .1em;
  13. margin-right: .25em;
  14. vertical-align: -.4em;
  15. }
  16. blockquote p {
  17. display: inline;
  18. }

16、个性圆角

  1. #container {
  2. -webkit-border-radius: 4px 3px 6px 10px;
  3. -moz-border-radius: 4px 3px 6px 10px;
  4. -o-border-radius: 4px 3px 6px 10px;
  5. border-radius: 4px 3px 6px 10px;
  6. }
  7. /* alternative syntax broken into each line */
  8. #container {
  9. -webkit-border-top-left-radius: 4px;
  10. -webkit-border-top-right-radius: 3px;
  11. -webkit-border-bottom-right-radius: 6px;
  12. -webkit-border-bottom-left-radius: 10px;
  13. -moz-border-radius-topleft: 4px;
  14. -moz-border-radius-topright: 3px;
  15. -moz-border-radius-bottomright: 6px;
  16. -moz-border-radius-bottomleft: 10px;
  17. }

17、通用媒体查询

  1. /* Smartphones (portrait and landscape) ----------- */
  2. @media only screen
  3. and (min-device-width : 320px) and (max-device-width : 480px) {
  4. /* Styles */
  5. }
  6. /* Smartphones (landscape) ----------- */
  7. @media only screen and (min-width : 321px) {
  8. /* Styles */
  9. }
  10. /* Smartphones (portrait) ----------- */
  11. @media only screen and (max-width : 320px) {
  12. /* Styles */
  13. }
  14. /* iPads (portrait and landscape) ----------- */
  15. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  16. /* Styles */
  17. }
  18. /* iPads (landscape) ----------- */
  19. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  20. /* Styles */
  21. }
  22. /* iPads (portrait) ----------- */
  23. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  24. /* Styles */
  25. }
  26. /* Desktops and laptops ----------- */
  27. @media only screen and (min-width : 1224px) {
  28. /* Styles */
  29. }
  30. /* Large screens ----------- */
  31. @media only screen and (min-width : 1824px) {
  32. /* Styles */
  33. }
  34. /* iPhone 4 ----------- */
  35. @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
  36. /* Styles */
  37. }

(ps: 【译】Responsive
Design常用的媒体查询
 )

18、现代字体栈

  1. /* Times New Roman-based serif */
  2. font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman",
    serif;
  3. /* A modern Georgia-based serif */
  4. font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation
    Serif", Georgia, serif;
  5. /*A more traditional Garamond-based serif */
  6. 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;
  7. /*The Helvetica/Arial-based sans serif */
  8. 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;
  9. /*The Verdana-based sans serif */
  10. font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation
    Sans", Verdana, "Verdana Ref", sans-serif;
  11. /*The Trebuchet-based sans serif */
  12. font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana
    Ref", sans-serif;
  13. /*The heavier "Impact" sans serif */
  14. font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold",
    "Arial Black", sans-serif;
  15. /*The monospace */
  16. 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

19、自定义文本选择

  1. ::selection { background: #e2eae2; }
  2. ::-moz-selection { background: #e2eae2; }
  3. ::-webkit-selection { background: #e2eae2; }

20、为logo隐藏H1

  1. h1 {
  2. text-indent: -9999px;
  3. margin: 0 auto;
  4. width: 320px;
  5. height: 85px;
  6. background: transparent url("images/logo.png") no-repeat scroll;
  7. }

21、图片边框偏光

  1. img.polaroid {
  2. background:#000; /*Change this to a background image or remove*/
  3. border:solid #fff;
  4. border-width:6px 6px 20px 6px;
  5. box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */
  6. -webkit-box-shadow:1px 1px 5px #333;
  7. -moz-box-shadow:1px 1px 5px #333;
  8. height:200px; /*Set to height of your image or desired div*/
  9. width:200px; /*Set to width of your image or desired div*/
  10. }

Code
Source

22、锚链接伪类

  1. a:link { color: blue; }
  2. a:visited { color: purple; }
  3. a:hover { color: red; }
  4. a:active { color: yellow; }

Code
Source

23、奇特的CSS引用

  1. .has-pullquote:before {
  2. /* Reset metrics. */
  3. padding: 0;
  4. border: none;
  5. /* Content */
  6. content: attr(data-pullquote);
  7. /* Pull out to the right, modular scale based margins. */
  8. float: right;
  9. width: 320px;
  10. margin: 12px -140px 24px 36px;
  11. /* Baseline correction */
  12. position: relative;
  13. top: 5px;
  14. /* Typography (30px line-height equals 25% incremental leading) */
  15. font-size: 23px;
  16. line-height: 30px;
  17. }
  18. .pullquote-adelle:before {
  19. font-family: "adelle-1", "adelle-2";
  20. font-weight: 100;
  21. top: 10px !important;
  22. }
  23. .pullquote-helvetica:before {
  24. font-family: "Helvetica Neue", Arial, sans-serif;
  25. font-weight: bold;
  26. top: 7px !important;
  27. }
  28. .pullquote-facit:before {
  29. font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;
  30. font-weight: bold;
  31. top: 7px !important;
  32. }

Code
Source

24、CSS3:全屏背景

  1. html {
  2. background: url('images/bg.jpg') no-repeat center center fixed;
  3. -webkit-background-size: cover;
  4. -moz-background-size: cover;
  5. -o-background-size: cover;
  6. background-size: cover;
  7. }

Code
Source

25、内容垂直居中

  1. .container {
  2. min-height: 6.5em;
  3. display: table-cell;
  4. vertical-align: middle;
  5. }

Code
Source

26、强制出现垂直滚动条

  1. html { height: 101% }

27、CSS3渐变模板

  1. #colorbox {
  2. background: #629721;
  3. background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));
  4. background-image: -webkit-linear-gradient(top, #83b842, #629721);
  5. background-image: -moz-linear-gradient(top, #83b842, #629721);
  6. background-image: -ms-linear-gradient(top, #83b842, #629721);
  7. background-image: -o-linear-gradient(top, #83b842, #629721);
  8. background-image: linear-gradient(top, #83b842, #629721);
  9. }

28、@font-face模板

  1. @font-face {
  2. font-family: 'MyWebFont';
  3. src: url('webfont.eot'); /* IE9 Compat Modes */
  4. src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  5. url('webfont.woff') format('woff'), /* Modern Browsers */
  6. url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
  7. url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
  8. }
  9. body {
  10. font-family: 'MyWebFont', Arial, sans-serif;
  11. }

Code
Source

29、缝合CSS3元素

  1. p {
  2. position:relative;
  3. z-index:1;
  4. padding: 10px;
  5. margin: 10px;
  6. font-size: 21px;
  7. line-height: 1.3em;
  8. color: #fff;
  9. background: #ff0030;
  10. -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
  11. -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
  12. box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
  13. -webkit-border-radius: 3px;
  14. -moz-border-radius: 3px;
  15. border-radius: 3px;
  16. }
  17. p:before {
  18. content: "";
  19. position: absolute;
  20. z-index: -1;
  21. top: 3px;
  22. bottom: 3px;
  23. left :3px;
  24. right: 3px;
  25. border: 2px dashed #fff;
  26. }
  27. p a {
  28. color: #fff;
  29. text-decoration:none;
  30. }
  31. p a:hover, p a:focus, p a:active {
  32. text-decoration:underline;
  33. }

Code
Source

30、CSS3 斑马线

  1. tbody tr:nth-child(odd) {
  2. background-color: #ccc;
  3. }

Code
Source

31、有趣的&

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

Code
Source

32、大字段落

  1. p:first-letter{
  2. display: block;
  3. margin: 5px 0 0 5px;
  4. float: left;
  5. color: #ff3366;
  6. font-size: 5.4em;
  7. font-family: Georgia, Times New Roman, serif;
  8. }

33、内部CSS3 盒阴影

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

34、外部CSS3 盒阴影

  1. #mydiv {
  2. -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
  3. -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
  4. box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
  5. }

35、三角形列表项目符号

  1. ul {
  2. margin: 0.75em 0;
  3. padding: 0 1em;
  4. list-style: none;
  5. }
  6. li:before {
  7. content: "";
  8. border-color: transparent #111;
  9. border-style: solid;
  10. border-width: 0.35em 0 0.35em 0.45em;
  11. display: block;
  12. height: 0;
  13. width: 0;
  14. left: -1em;
  15. top: 0.9em;
  16. position: relative;
  17. }

Code
Source

36、固定宽度的居中布局

  1. #page-wrap {
  2. width: 800px;
  3. margin: 0 auto;
  4. }

Code
Source

37、CSS3 列文本

  1. #columns-3 {
  2. text-align: justify;
  3. -moz-column-count: 3;
  4. -moz-column-gap: 12px;
  5. -moz-column-rule: 1px solid #c4c8cc;
  6. -webkit-column-count: 3;
  7. -webkit-column-gap: 12px;
  8. -webkit-column-rule: 1px solid #c4c8cc;
  9. }

Code
Source

38、CSS固定页脚

  1. #footer {
  2. position: fixed;
  3. left: 0px;
  4. bottom: 0px;
  5. height: 30px;
  6. width: 100%;
  7. background: #444;
  8. }
  9. /* IE 6 */
  10. * html #footer {
  11. position: absolute;
  12. 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');
  13. }

Code
Source

39、IE6的PNG透明修复

  1. .bg {
  2. width:200px;
  3. height:100px;
  4. background: url(/folder/yourimage.png) no-repeat;
  5. _background:none;
  6. _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');
  7. }
  8. /* 1px gif method */
  9. img, .png {
  10. position: relative;
  11. behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage
    = "none",
  12. this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
  13. this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
  14. this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
  15. this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
  16. }

Code
Source

40、跨浏览器设置最小高度

  1. #container {
  2. min-height: 550px;
  3. height: auto !important;
  4. height: 550px;
  5. }

41、CSS3 鲜艳的输入

  1. input[type=text], textarea {
  2. -webkit-transition: all 0.30s ease-in-out;
  3. -moz-transition: all 0.30s ease-in-out;
  4. -ms-transition: all 0.30s ease-in-out;
  5. -o-transition: all 0.30s ease-in-out;
  6. outline: none;
  7. padding: 3px 0px 3px 3px;
  8. margin: 5px 1px 3px 0px;
  9. border: 1px solid #ddd;
  10. }
  11. input[type=text]:focus, textarea:focus {
  12. box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  13. padding: 3px 0px 3px 3px;
  14. margin: 5px 1px 3px 0px;
  15. border: 1px solid rgba(81, 203, 238, 1);
  16. }

Code
Source

42、基于文件类型的链接样式

  1. /* external links */
  2. a[href^="http://"] {
  3. padding-right: 13px;
  4. background: url('external.gif') no-repeat center right;
  5. }
  6. /* emails */
  7. a[href^="mailto:"] {
  8. padding-right: 20px;
  9. background: url('email.png') no-repeat center right;
  10. }
  11. /* pdfs */
  12. a[href$=".pdf"] {
  13. padding-right: 18px;
  14. background: url('acrobat.png') no-repeat center right;
  15. }

Code
Source

43、强制换行

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

Code
Source

44、在可点击的项目上强制手型

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

Code
Source

45、网页顶部盒阴影

  1. body:before {
  2. content: "";
  3. position: fixed;
  4. top: -10px;
  5. left: 0;
  6. width: 100%;
  7. height: 10px;
  8. -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  9. -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  10. box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  11. z-index: 100;
  12. }

Code
Source

46、CSS3对话气泡

  1. .chat-bubble {
  2. background-color: #ededed;
  3. border: 2px solid #666;
  4. font-size: 35px;
  5. line-height: 1.3em;
  6. margin: 10px auto;
  7. padding: 10px;
  8. position: relative;
  9. text-align: center;
  10. width: 300px;
  11. -moz-border-radius: 20px;
  12. -webkit-border-radius: 20px;
  13. -moz-box-shadow: 0 0 5px #888;
  14. -webkit-box-shadow: 0 0 5px #888;
  15. font-family: 'Bangers', arial, serif;
  16. }
  17. .chat-bubble-arrow-border {
  18. border-color: #666 transparent transparent transparent;
  19. border-style: solid;
  20. border-width: 20px;
  21. height: 0;
  22. width: 0;
  23. position: absolute;
  24. bottom: -42px;
  25. left: 30px;
  26. }
  27. .chat-bubble-arrow {
  28. border-color: #ededed transparent transparent transparent;
  29. border-style: solid;
  30. border-width: 20px;
  31. height: 0;
  32. width: 0;
  33. position: absolute;
  34. bottom: -39px;
  35. left: 30px;
  36. }

Code
Source

47、H1-H5默认样式

  1. h1,h2,h3,h4,h5{
  2. color: #005a9c;
  3. }
  4. h1{
  5. font-size: 2.6em;
  6. line-height: 2.45em;
  7. }
  8. h2{
  9. font-size: 2.1em;
  10. line-height: 1.9em;
  11. }
  12. h3{
  13. font-size: 1.8em;
  14. line-height: 1.65em;
  15. }
  16. h4{
  17. font-size: 1.65em;
  18. line-height: 1.4em;
  19. }
  20. h5{
  21. font-size: 1.4em;
  22. line-height: 1.25em;
  23. }

Code
Source

48、纯CSS背景噪音

  1. body {
  2. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
  3. background-color: #0094d0;
  4. }

Code
Source

39、持久的列表排序

  1. ol.chapters {
  2. list-style: none;
  3. margin-left: 0;
  4. }
  5. ol.chapters > li:before {
  6. content: counter(chapter) ". ";
  7. counter-increment: chapter;
  8. font-weight: bold;
  9. float: left;
  10. width: 40px;
  11. }
  12. ol.chapters li {
  13. clear: left;
  14. }
  15. ol.start {
  16. counter-reset: chapter;
  17. }
  18. ol.continue {
  19. counter-reset: chapter 11;
  20. }

Code
Source

(PS: 可参考content属性详解 )

50、CSS悬浮提示文本

  1. a {
  2. border-bottom:1px solid #bbb;
  3. color:#666;
  4. display:inline-block;
  5. position:relative;
  6. text-decoration:none;
  7. }
  8. a:hover,
  9. a:focus {
  10. color:#36c;
  11. }
  12. a:active {
  13. top:1px;
  14. }
  15. /* Tooltip styling */
  16. a[data-tooltip]:after {
  17. border-top: 8px solid #222;
  18. border-top: 8px solid hsla(0,0%,0%,.85);
  19. border-left: 8px solid transparent;
  20. border-right: 8px solid transparent;
  21. content: "";
  22. display: none;
  23. height: 0;
  24. width: 0;
  25. left: 25%;
  26. position: absolute;
  27. }
  28. a[data-tooltip]:before {
  29. background: #222;
  30. background: hsla(0,0%,0%,.85);
  31. color: #f6f6f6;
  32. content: attr(data-tooltip);
  33. display: none;
  34. font-family: sans-serif;
  35. font-size: 14px;
  36. height: 32px;
  37. left: 0;
  38. line-height: 32px;
  39. padding: 0 15px;
  40. position: absolute;
  41. text-shadow: 0 1px 1px hsla(0,0%,0%,1);
  42. white-space: nowrap;
  43. -webkit-border-radius: 5px;
  44. -moz-border-radius: 5px;
  45. -o-border-radius: 5px;
  46. border-radius: 5px;
  47. }
  48. a[data-tooltip]:hover:after {
  49. display: block;
  50. top: -9px;
  51. }
  52. a[data-tooltip]:hover:before {
  53. display: block;
  54. top: -41px;
  55. }
  56. a[data-tooltip]:active:after {
  57. top: -10px;
  58. }
  59. a[data-tooltip]:active:before {
  60. top: -42px;
  61. }

Code
Source

51、深灰色的圆形按钮

  1. .graybtn {
  2. -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
  3. -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
  4. box-shadow:inset 0px 1px 0px 0px #ffffff;
  5. background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
  6. background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );
  7. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');
  8. background-color:#ffffff;
  9. -moz-border-radius:6px;
  10. -webkit-border-radius:6px;
  11. border-radius:6px;
  12. border:1px solid #dcdcdc;
  13. display:inline-block;
  14. color:#777777;
  15. font-family:arial;
  16. font-size:15px;
  17. font-weight:bold;
  18. padding:6px 24px;
  19. text-decoration:none;
  20. text-shadow:1px 1px 0px #ffffff;
  21. }
  22. .graybtn:hover {
  23. background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );
  24. background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );
  25. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');
  26. background-color:#d1d1d1;
  27. }
  28. .graybtn:active {
  29. position:relative;
  30. top:1px;
  31. }

Code
Source

52、在可打印的网页中显示URLs

  1. @media print {
  2. a:after {
  3. content: " [" attr(href) "] ";
  4. }
  5. }

Code
Source

53、禁用移动Webkit的选择高亮

  1. body {
  2. -webkit-touch-callout: none;
  3. -webkit-user-select: none;
  4. -khtml-user-select: none;
  5. -moz-user-select: none;
  6. -ms-user-select: none;
  7. user-select: none;
  8. }

54、CSS3 圆点图案

  1. body {
  2. background: radial-gradient(circle, white 10%, transparent 10%),
  3. radial-gradient(circle, white 10%, black 10%) 50px 50px;
  4. background-size: 100px 100px;
  5. }

Code
Source

55、CSS3 方格图案

  1. body {
  2. background-color: white;
  3. background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
  4. linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
  5. background-size: 100px 100px;
  6. background-position: 0 0, 50px 50px;
  7. }

Code
Source

56、Github的fork色带

  1. .ribbon {
  2. background-color: #a00;
  3. overflow: hidden;
  4. /* top left corner */
  5. position: absolute;
  6. left: -3em;
  7. top: 2.5em;
  8. /* 45 deg ccw rotation */
  9. -moz-transform: rotate(-45deg);
  10. -webkit-transform: rotate(-45deg);
  11. /* shadow */
  12. -moz-box-shadow: 0 0 1em #888;
  13. -webkit-box-shadow: 0 0 1em #888;
  14. }
  15. .ribbon a {
  16. border: 1px solid #faa;
  17. color: #fff;
  18. display: block;
  19. font: bold 81.25% 'Helvetiva Neue', Helvetica, Arial, sans-serif;
  20. margin: 0.05em 0 0.075em 0;
  21. padding: 0.5em 3.5em;
  22. text-align: center;
  23. text-decoration: none;
  24. /* shadow */
  25. text-shadow: 0 0 0.5em #444;
  26. }

Code
Source

57、CSS font属性缩写

  1. p {
  2. font: italic small-caps bold 1.2em/1.0em Arial, Tahoma, Helvetica;
  3. }

Code
Source

58、论文页面的卷曲效果

  1. ul.box {
  2. position: relative;
  3. z-index: 1; /* prevent shadows falling behind containers with backgrounds */
  4. overflow: hidden;
  5. list-style: none;
  6. margin: 0;
  7. padding: 0;
  8. }
  9. ul.box li {
  10. position: relative;
  11. float: left;
  12. width: 250px;
  13. height: 150px;
  14. padding: 0;
  15. border: 1px solid #efefef;
  16. margin: 0 30px 30px 0;
  17. background: #fff;
  18. -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  19. -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  20. box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  21. }
  22. ul.box li:before,
  23. ul.box li:after {
  24. content: '';
  25. z-index: -1;
  26. position: absolute;
  27. left: 10px;
  28. bottom: 10px;
  29. width: 70%;
  30. max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
  31. max-height: 100px;
  32. height: 55%;
  33. -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  34. -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  35. box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  36. -webkit-transform: skew(-15deg) rotate(-6deg);
  37. -moz-transform: skew(-15deg) rotate(-6deg);
  38. -ms-transform: skew(-15deg) rotate(-6deg);
  39. -o-transform: skew(-15deg) rotate(-6deg);
  40. transform: skew(-15deg) rotate(-6deg);
  41. }
  42. ul.box li:after {
  43. left: auto;
  44. right: 10px;
  45. -webkit-transform: skew(15deg) rotate(6deg);
  46. -moz-transform: skew(15deg) rotate(6deg);
  47. -ms-transform: skew(15deg) rotate(6deg);
  48. -o-transform: skew(15deg) rotate(6deg);
  49. transform: skew(15deg) rotate(6deg);
  50. }

Code
Source

59、鲜艳的锚链接

  1. a {
  2. color: #00e;
  3. }
  4. a:visited {
  5. color: #551a8b;
  6. }
  7. a:hover {
  8. color: #06e;
  9. }
  10. a:focus {
  11. outline: thin dotted;
  12. }
  13. a:hover, a:active {
  14. outline: 0;
  15. }
  16. a, a:visited, a:active {
  17. text-decoration: none;
  18. color: #fff;
  19. -webkit-transition: all .3s ease-in-out;
  20. }
  21. a:hover, .glow {
  22. color: #ff0;
  23. text-shadow: 0 0 10px #ff0;
  24. }

Code
Source

60、带CSS3特色的横幅显示

  1. .featureBanner {
  2. position: relative;
  3. margin: 20px
  4. }
  5. .featureBanner:before {
  6. content: "Featured";
  7. position: absolute;
  8. top: 5px;
  9. left: -8px;
  10. padding-right: 10px;
  11. color: #232323;
  12. font-weight: bold;
  13. height: 0px;
  14. border: 15px solid #ffa200;
  15. border-right-color: transparent;
  16. line-height: 0px;
  17. box-shadow: -0px 5px 5px -5px #000;
  18. z-index: 1;
  19. }
  20. .featureBanner:after {
  21. content: "";
  22. position: absolute;
  23. top: 35px;
  24. left: -8px;
  25. border: 4px solid #89540c;
  26. border-left-color: transparent;
  27. border-bottom-color: transparent;
  28. }

Css学习总结(2)——60个有用CSS代码片段的更多相关文章

  1. java,有用的代码片段

    在我们写程序的过程中,往往会经常遇到一些常见的功能.而这些功能或效果往往也是相似的,解决方案也相似.下面是我在写代码的过程中总结的一些有用的代码片段. 1.在多线程环境中操作同一个Collection ...

  2. CSS学习笔记(8)--纯CSS绘制三角形(各种角度)

    纯CSS绘制三角形(各种角度) CSS三角形绘制方法,学会了这个,其它的也就简单.   我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...

  3. web前端学习(三)css学习笔记部分(1)-- css入门基础知识+基本样式

    1.介绍及语法 1.1CSS概述: CSS指层叠样式表 CSS样式表极大地提高了工作效率 如果值大于一个单词,需要加上引号(意思是值只有一个的时候可以不加引号) 1.2CSS高级语法 1.选择器分组 ...

  4. Jquery学习总结(1)——Jquery常用代码片段汇总

    1. 禁止右键点击 ? 1 2 3 4 5 $(document).ready(function(){     $(document).bind("contextmenu",fun ...

  5. 60个有用CSS代码片段

    1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: re ...

  6. web前端学习(三)css学习笔记部分(5)-- CSS动画--页面特效、HTML与CSS3简单页面效果实例

    CSS动画--页面特效部分内容目前仅仅观看了解内容,记录简单笔记,之后工作了进行内容的补充 7.  CSS动画--页面特效 7.1  2D.3D转换 7.1.1  通过CSS3转换,我们能够对元素进行 ...

  7. web前端学习(三)css学习笔记部分(3)-- css常用操作

    5.  CSS常用操作 5.1  对齐 使用margin属性进行水平对齐 <!DOCTYPE html> <html lang="en"> <head ...

  8. css学习(2)-- 常见的CSS属性和值

    1.CSS中修饰字体的属性 属    性 描    述 属  性  值 font-family 字体族科 任意字体族科名称都可以使用例如Times.serif等,而且多个族科的赋值是可以使用的,中间用 ...

  9. CSS有用的代码片段

    1.垂直对齐 .vc{ position:relative; top:50%; -webkit-transform:translateY(-50%); -o-transform:translateY( ...

随机推荐

  1. 【codeforces 723E】One-Way Reform

    [题目链接]:http://codeforces.com/contest/723/problem/E [题意] 给你一个无向图; 让你把这m条边改成有向图; 然后使得出度数目等于入度数目的点的数目最多 ...

  2. 工具-putty使用

    Ubuntu 下安装 OpenSSH Server 是无比轻松的一件事情,需要的命令只有一条 sudo apt-get install openssh-server 启动SSH服务: sudo /et ...

  3. HDU——T1231 最大连续子序列

    http://acm.hdu.edu.cn/showproblem.php?pid=1231 Problem Description 给定K个整数的序列{ N1, N2, ..., NK },其任意连 ...

  4. HDU 4686

    再不能直视这道题,换INT64就过了....... 同样可以使用矩阵的方法.构造1*5的 D[N],a[n],b[n],a[n]*b[n],1 接着你应该就会了. #include <iostr ...

  5. 从零单排入门机器学习:线性回归(linear regression)实践篇

    线性回归(linear regression)实践篇 之前一段时间在coursera看了Andrew ng的机器学习的课程,感觉还不错,算是入门了. 这次打算以该课程的作业为主线,对机器学习基本知识做 ...

  6. Spark SQL with Hive

    前一篇文章是Spark SQL的入门篇Spark SQL初探,介绍了一些基础知识和API,可是离我们的日常使用还似乎差了一步之遥. 终结Shark的利用有2个: 1.和Spark程序的集成有诸多限制 ...

  7. 受 SQLite 多年青睐,C 语言到底好在哪儿?

    SQLite 近日发表了一篇博文,解释了为什么多年来 SQLite 一直坚持用 C 语言来实现,以下是正文内容: C 语言是最佳选择 从2000年5月29日发布至今,SQLite 一直都是用 C 语言 ...

  8. 蓝桥杯-- 历届试题 核桃的数量 (gcd)

      历届试题 核桃的数量   时间限制:1.0s   内存限制:256.0MB        问题描述 小张是软件项目经理,他带领3个开发组.工期紧,今天都在加班呢.为鼓舞士气,小张打算给每个组发一袋 ...

  9. hdoj--1028--Ignatius and the Princess III(母函数)

    Ignatius and the Princess III Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K ...

  10. .NET序列化工具Jil、Json.NET和Protobuf的简单测评

    前一段时间逛园子的时候发现有人比较了Jil.Json.NET和Protobuf的性能,一时好奇,也做了个测试,这里记录下来,以供查阅. 前期准备 依赖类库的话,可以通过Nuget在公共组件库总下载,这 ...