zoukankan      html  css  js  c++  java
  • 实用的60个CSS代码片段[上]

      1 1、垂直对齐
      2 
      3 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑:
      4 .verticalcenter{
      5     position: relative;
      6     top: 50%;
      7     -webkit-transform: translateY(-50%);
      8     -o-transform: translateY(-50%);
      9     transform: translateY(-50%);
     10 }
     11 使用这个技巧,从单行文本、段落到box,都会垂直对齐。目前浏览器对Transform的支持是需要关注的,
     12 Chrome 4, Opera 10, Safari 3, Firefox 3, and Internet Explorer 9均支持该属性
     13 
     14 
     15 2、伸展一个元素到窗口高度
     16 
     17 在具体场景中,你可能想要将一个元素伸展到窗口高度,基本元素的调整只能调整容器的大小,因此要使一个元素伸展到窗口高度,
     18 我们需要伸展顶层元素:html和body:
     19 html, 
     20 body {
     21     height: 100%;
     22 }
     23 然后将100%应用到任何元素的高
     24 div {
     25     height: 100%;
     26 }
     27 
     28 
     29 3、基于文件格式使用不同的样式
     30 
     31 为了更容易知道链接的目标,有时你想让一些链接看起来和其它的不同。下面的片段在文本链接前添加一个图标,对不同的资源使用不同的图标或图片:
     32 a[href^="http://"]{
     33     padding-right: 20px;
     34     background: url(external.gif) no-repeat center right;
     35 }
     36 /* emails */
     37 a[href^="mailto:"]{
     38     padding-right: 20px;
     39     background: url(email.png) no-repeat center right;
     40 }
     41 
     42 /* pdfs */
     43 a[href$=".pdf"]{
     44     padding-right: 20px;
     45     background: url(pdf.png) no-repeat center right;
     46 }
     47 
     48 
     49 4、创建跨浏览器的图像灰度
     50 
     51 灰度有时看起来简约和优雅,能为网站呈现更深层次的色调。在示例中,我们将对一个SVG图像添加灰度过滤:
     52 <svg xmlns="http://www.w3.org/2000/svg">
     53     <filter id="grayscale">
     54         <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"/>
     55     </filter>
     56 </svg>
     57 为了跨浏览器,会用到filter属性:
     58 img {
     59     filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
     60     filter: gray; /* IE6-9 */
     61     -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
     62 }
     63 
     64 
     65 5、背景渐变动画
     66 
     67 CSS中最具诱惑的一个功能是能添加动画效果,除了渐变,你可以给背景色、透明度、元素大小添加动画。目前,你不能为渐变添加动画,但下面的代码可能有帮助。它通过改变背景位置,让它看起来有动画效果。
     68 button {
     69     background-image: linear-gradient(#5187c4, #1c2f45);
     70     background-size: auto 200%;
     71     background-position: 0 100%;
     72     transition: background-position 0.5s;
     73 }    
     74 button:hover {
     75     background-position: 0 0;
     76 }
     77 
     78 
     79 6、CSS:表格列宽自适用
     80 
     81 对于表格,当谈到调整列宽时,是比较痛苦的。然后,这里有一个可以使用的技巧:给td元素添加white-space: nowrap;能让文本正确的换行
     82 td {
     83     white-space: nowrap;
     84 }
     85 
     86 
     87 7、只在一边或两边显示盒子阴影
     88 
     89 如果你要一个盒阴影,试试这个技巧,能为任一边添加阴影。为了实现这个,首先定义一个有具体宽高的盒子,然后正确定位:after伪类。实现底边阴影的代码如下
     90 .box-shadow {
     91     background-color: #FF8020;
     92     width: 160px;
     93     height: 90px;
     94     margin-top: -45px;
     95     margin-left: -80px;
     96     position: absolute;
     97     top: 50%;
     98     left: 50%;
     99 }
    100 .box-shadow:after {
    101     content: "";
    102     width: 150px;
    103     height: 1px;
    104     margin-top: 88px;
    105     margin-left: -75px;
    106     display: block;
    107     position: absolute;
    108     left: 50%;
    109     z-index: -1;
    110     -webkit-box-shadow: 0px 0px 8px 2px #000000;
    111        -moz-box-shadow: 0px 0px 8px 2px #000000;
    112             box-shadow: 0px 0px 8px 2px #000000;}
    113 
    114 
    115 8、包裹长文本
    116 
    117 如果你碰到一个比自身容器长的文本,这个技巧对你很有用。在这个示例中,默认时,不管容器的宽度,文本都将水平填充。
    118 
    119 
    120 简单的CSS代码就能在容器中调整文本:
    121 pre {
    122     white-space: pre-line;
    123     word-wrap: break-word;
    124 }
    125 效果看起来如下:
    126 
    127 
    128 
    129 9、制造模糊文本
    130 
    131 想要让文本模糊?可以使用color透明和text-shadow实现
    132 .blurry-text {
    133    color: transparent;
    134    text-shadow: 0 0 5px rgba(0,0,0,0.5);
    135 }
    136 
    137 
    138 10、用CSS动画实现省略号动画
    139 
    140 这个片段将帮助你制造一个ellipsis的动画,对于简单的加载状态是很有用的,而不用去使用gif图像。
    141 .loading:after {
    142     overflow: hidden;
    143     display: inline-block;
    144     vertical-align: bottom;
    145     animation: ellipsis 2s infinite;
    146     content: "2026"; /* ascii code for the ellipsis character */
    147 }
    148 @keyframes ellipsis {    from {
    149         width: 2px;
    150     }
    151     to {
    152         width: 15px;
    153     }
    154 }
    155 
    156 
    157 11、样式重置
    158 
    159 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 {
    160   margin: 0;
    161   padding: 0;
    162   border: 0;
    163   font-size: 100%;
    164   font: inherit;
    165   vertical-align: baseline;
    166   outline: none;
    167   -webkit-box-sizing: border-box;
    168   -moz-box-sizing: border-box;
    169   box-sizing: border-box;
    170 }
    171 html { height: 101%; }
    172 body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }
    173 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
    174 ol, ul { list-style: none; }
    175 blockquote, q { quotes: none; }
    176 blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
    177 strong { font-weight: bold; } 
    178 table { border-collapse: collapse; border-spacing: 0; }
    179 img { border: 0; max-width: 100%; }
    180 p { font-size: 1.2em; line-height: 1.0em; color: #333; }
    181 
    182 
    183 12、典型的CSS清除浮动
    184 
    185 .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
    186 .clearfix { display: inline-block; }
    187 html[xmlns] .clearfix { display: block; }
    188 * html .clearfix { height: 1%; }
    189 
    190 
    191 13、新版清除浮动(2011)
    192 
    193 .clearfix:before, .container:after { content: ""; display: table; }
    194 .clearfix:after { clear: both; }
    195 /* IE 6/7 */
    196 .clearfix { zoom: 1; }
    197 
    198 
    199 14、跨浏览器的透明
    200 
    201 .transparent {
    202     filter: alpha(opacity=50); /* internet explorer */
    203     -khtml-opacity: 0.5;      /* khtml, old safari */
    204     -moz-opacity: 0.5;       /* mozilla, netscape */
    205     opacity: 0.5;           /* fx, safari, opera */
    206 }
    207 
    208 
    209 15、CSS引用模板
    210 
    211 blockquote {
    212     background: #f9f9f9;
    213     border-left: 10px solid #ccc;
    214     margin: 1.5em 10px;
    215     padding: .5em 10px;
    216     quotes: "201C""201D""2018""2019";
    217 }
    218 blockquote:before {
    219     color: #ccc;
    220     content: open-quote;
    221     font-size: 4em;
    222     line-height: .1em;
    223     margin-right: .25em;
    224     vertical-align: -.4em;
    225 }
    226 blockquote p {
    227     display: inline;
    228 }
    229 
    230 
    231 16、个性圆角
    232 
    233 #container {
    234     -webkit-border-radius: 4px 3px 6px 10px;
    235     -moz-border-radius: 4px 3px 6px 10px;
    236     -o-border-radius: 4px 3px 6px 10px;
    237     border-radius: 4px 3px 6px 10px;
    238 }
    239 /* alternative syntax broken into each line */#container {
    240     -webkit-border-top-left-radius: 4px;
    241     -webkit-border-top-right-radius: 3px;
    242     -webkit-border-bottom-right-radius: 6px;
    243     -webkit-border-bottom-left-radius: 10px;
    244     -moz-border-radius-topleft: 4px;
    245     -moz-border-radius-topright: 3px;
    246     -moz-border-radius-bottomright: 6px;
    247     -moz-border-radius-bottomleft: 10px;
    248 }
    249 
    250 
    251 17、通用媒体查询
    252 
    253 /* Smartphones (portrait and landscape) ----------- */
    254 @media only screen 
    255 and (min-device-width : 320px) and (max-device-width : 480px) {
    256   /* Styles */
    257 }
    258 /* Smartphones (landscape) ----------- */
    259 @media only screen and (min-width : 321px) {
    260   /* Styles */
    261 }
    262 /* Smartphones (portrait) ----------- */
    263 @media only screen and (max-width : 320px) {
    264   /* Styles */
    265 }
    266 /* iPads (portrait and landscape) ----------- */
    267 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    268   /* Styles */
    269 }
    270 /* iPads (landscape) ----------- */
    271 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    272   /* Styles */
    273 }
    274 /* iPads (portrait) ----------- */
    275 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    276   /* Styles */
    277 }
    278 /* Desktops and laptops ----------- */
    279 @media only screen and (min-width : 1224px) {
    280   /* Styles */
    281 }
    282 /* Large screens ----------- */
    283 @media only screen and (min-width : 1824px) {
    284   /* Styles */
    285 }
    286 /* iPhone 4 ----------- */
    287 @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
    288   /* Styles */
    289 }
    290 
    291 
    292 18、现代字体栈
    293 /* Times New Roman-based serif */
    294 font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
    295 /* A modern Georgia-based serif */
    296 font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
    297 /*A more traditional Garamond-based serif */
    298 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;
    299 /*The Helvetica/Arial-based sans serif */
    300 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;
    301 /*The Verdana-based sans serif */
    302 font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
    303 /*The Trebuchet-based sans serif */
    304 font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
    305 /*The heavier "Impact" sans serif */
    306 font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
    307 /*The monospace */
    308 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;
    309 
    310 
    311 19、自定义文本选择
    312 
    313 ::selection { background: #e2eae2; }::-moz-selection { background: #e2eae2; }::-webkit-selection { background: #e2eae2; }
    314 
    315 
    316 20、为logo隐藏H1
    317 
    318 h1 {
    319     text-indent: -9999px;
    320     margin: 0 auto;
    321     width: 320px;
    322     height: 85px;
    323     background: transparent url("images/logo.png") no-repeat scroll;
    324 }
    325 
    326 
    327 21、图片边框偏光
    328 
    329 img.polaroid {
    330     background:#000; /*Change this to a background image or remove*/
    331     border:solid #fff;
    332     border-width:6px 6px 20px 6px;
    333     box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */
    334     -webkit-box-shadow:1px 1px 5px #333;
    335     -moz-box-shadow:1px 1px 5px #333;
    336     height:200px; /*Set to height of your image or desired div*/
    337     width:200px; /*Set to width of your image or desired div*/
    338 }
    339 
    340 
    341 22、锚链接伪类
    342 
    343 a:link { color: blue; }
    344 a:visited { color: purple; }
    345 a:hover { color: red; }
    346 a:active { color: yellow; }
    347 
    348 
    349 23、奇特的CSS引用
    350 
    351 .has-pullquote:before {
    352     /* Reset metrics. */
    353     padding: 0;
    354     border: none;
    355     /* Content */
    356     content: attr(data-pullquote);
    357     /* Pull out to the right, modular scale based margins. */
    358     float: right;
    359     width: 320px;
    360     margin: 12px -140px 24px 36px;
    361     /* Baseline correction */
    362     position: relative;
    363     top: 5px;
    364     /* Typography (30px line-height equals 25% incremental leading) */
    365     font-size: 23px;
    366     line-height: 30px;
    367 }
    368 .pullquote-adelle:before {
    369     font-family: "adelle-1", "adelle-2";
    370     font-weight: 100;
    371     top: 10px !important;
    372 }
    373 .pullquote-helvetica:before {
    374     font-family: "Helvetica Neue", Arial, sans-serif;
    375     font-weight: bold;
    376     top: 7px !important;
    377 }
    378 .pullquote-facit:before {
    379     font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;
    380     font-weight: bold;
    381     top: 7px !important;
    382 }
    383 
    384 
    385 24、CSS3:全屏背景
    386 
    387 html { 
    388     background: url('images/bg.jpg') no-repeat center center fixed; 
    389     -webkit-background-size: cover;
    390     -moz-background-size: cover;
    391     -o-background-size: cover;
    392     background-size: cover;
    393 }
    394 
    395 
    396 25、内容垂直居中
    397 
    398 .container {
    399     min-height: 6.5em;
    400     display: table-cell;
    401     vertical-align: middle;
    402 }
    403 
    404 
    405 26、强制出现垂直滚动条
    406 
    407 html { height: 101% }
    408 
    409 
    410 27、CSS3渐变模板
    411 
    412 #colorbox {
    413     background: #629721;
    414     background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));
    415     background-image: -webkit-linear-gradient(top, #83b842, #629721);
    416     background-image: -moz-linear-gradient(top, #83b842, #629721);
    417     background-image: -ms-linear-gradient(top, #83b842, #629721);
    418     background-image: -o-linear-gradient(top, #83b842, #629721);
    419     background-image: linear-gradient(top, #83b842, #629721);}
    420 
    421 
    422 28、@font-face模板
    423 
    424 @font-face {
    425     font-family: 'MyWebFont';
    426     src: url('webfont.eot'); /* IE9 Compat Modes */
    427     src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    428     url('webfont.woff') format('woff'), /* Modern Browsers */
    429     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
    430     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    431 }
    432 body {
    433     font-family: 'MyWebFont', Arial, sans-serif;
    434 }
    435 
    436 
    437 29、缝合CSS3元素
    438 
    439 p {
    440     position:relative;
    441     z-index:1;
    442     padding: 10px;
    443     margin: 10px;
    444     font-size: 21px;
    445     line-height: 1.3em;
    446     color: #fff;
    447     background: #ff0030;
    448     -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
    449     -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
    450     box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
    451     -webkit-border-radius: 3px;
    452     -moz-border-radius: 3px;
    453     border-radius: 3px;
    454 }
    455 p:before {
    456     content: "";
    457     position: absolute;
    458     z-index: -1;
    459     top: 3px;
    460     bottom: 3px;
    461     left :3px;
    462     right: 3px;
    463     border: 2px dashed #fff;}
    464 p a {
    465     color: #fff;
    466     text-decoration:none;
    467 }
    468 p a:hover, p a:focus, p a:active {
    469     text-decoration:underline;
    470 }
    471 
    472 
    473 30、CSS3 斑马线
    474 
    475 tbody tr:nth-child(odd) {
    476     background-color: #ccc;}
  • 相关阅读:
    Java多线程之赛跑游戏(含生成exe文件)
    JavaSE之绘制菱形
    JavaSE项目之员工收录系统
    深度解析continue,break和return
    如何查看yum安装路径
    转载 linux umount 时出现device is busy 的处理方法--fuser
    linux安装扩展总结
    linux 编译安装amqp
    vmware 实现linux目录映射window本地目录
    yaf学习之——生成yaf示例框架
  • 原文地址:https://www.cnblogs.com/xiaomili/p/6343494.html
Copyright © 2011-2022 走看看