码迷,mamicode.com
首页 > Web开发 > 详细

一些比较实用的css片段

时间:2015-06-15 18:09:10      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:

新看了一个帖子,里面好多实用的css代码块,可拿出来当做功能库。先附上该文地址http://segmentfault.com/a/1190000002773955

里面的内容很多我挑了几个经过我验证的来写下

  1. 纯css背景噪音,兼容IE8 ,chrome,firefox

 body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            background-image: url(data:image/png;base64,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);*/
            background-color: #0094d0;}

虽然这部分看起来好大一坨,但是不必忧桑,不必害怕,有用的就是background-image,所谓的背景噪音就是看上去像是电视下雪花的状态,总体来说还是挺有用的,比纯色内容给人感觉丰富些,拿来用用也不错

     2.为标题图片隐藏文本

这个实际上是为了seo,在样式上并没有什么卵用。

 1 .logo {
 2             text-indent: -9999px;
 3             margin: 0 auto;
 4             width: 320px;
 5             height: 320px;
 6             background: transparent url("img/6.jpg") no-repeat ;
 7         }
 8 
 9 
10 <h1 class="logo">标题是否隐藏了呢</h1>

把html和css放一起了,这样是不对的,但是想偷个懒,所以就这样喽,这段有用的是text-indent

  3.清除浮动新法

long long ago,清除浮动我用的方法是最经典的

 1 .clearfix:after { 
 2 content: "."; 
 3 display: block; 
 4 clear: both; 
 5 visibility: hidden;
 6  line-height: 0; 
 7 height: 0; 
 8 }
 9 
10 .clearfix { display: inline-block; }

看了这个帖子之后立马尝试了一下这个新方法,兼容IE8哦

 .clearfix:before,.container:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

  代码减半,效果不打折~但是需要注意的是,要把包含浮动的容器加一个class相当于css中的.container否则不能生效的说~

  4.动态加载动画,省略号..变成...

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

  使用css3的动画,使包含省略号容器的长度变长变短,无限循环

  5、全屏背景

body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            background: url(‘img/9.jpeg‘) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
}

嗯,使用了一下这个方法,但是感觉不太理想,因为这个background-size: cover是让背景扩展的无限大直到可以适应浏览器窗口(尽量保持了图片的原有比例),但是图像的某些部分就无法显示在窗口中了,这样如果背景图像中有一些比较重要的要素可能就被截掉了,看不到的说,我推荐使用background-size: 100% 100%,这个属性也是让背景图片铺满全屏,但是不会去截图像而是让图片尽量全部显示,不足是牺牲了图片原来的比例,不过我觉得比少个头之类的好多了

嗯,就这么多啦,有新内容再补充~

一些比较实用的css片段

标签:

原文地址:http://www.cnblogs.com/dujingjie/p/4578611.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!