优良的css

CSS3实现11种经典的CSS技术

一、透明元素(opacity)：

如果你最近有访问Envato website，你就会发现，这个网站上使用了大量的透明属性——CSS3 Opacity。这个属性使用有一段时间了，在IE下我样要配合IE的滤镜一起来使用，只是有一点需要注意的，使用opacity制作透明效果会影响其所有后代元素的透明度。

CSS经典方法

<style type="text/css">  
    .box {  
    opacity: .6; // all modern browsers (this is CSS3)  
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE 8  
    filter: alpha(opacity=60); // IE 5-7  
    }  
</style>  
      
<div class="box">  
        <!--CONTENT-->  
</div>

CSS3方法

<style type="text/css">  
    .box {  
    opacity: .6;
    }  
</style>  
      
<div class="box">  
        <!--CONTENT-->  
</div>

用CSS3属性，我们可以不考虑IE下的效果，所以可以直接把IE下的滤镜去掉。具体效果DEMO。如果你想了解其使用方法，可以参阅本站的《CSS3 RGBA》一文。

六、RGBA

大家都知道RGB代表的是工绿蓝三色，但不知道A是什么？其中的A表示的是通道，这是指透明度。

CSS3方法

<style type="text/css">  
    .box {  
    background: rgba(239, 182, 29, .25);  
    }  
</style>  

设置opacity 的div ,子元素受影响的问题，可用rgba的方法

CSS3的方法简单多了吧，使用rgba我们可以使用在任何有元素的属性之上，如color,background-color,border-color等，大家可以查看DEMO效果。同时可以点击本站的有关教程《CSS3 RGBA》了解其具体的应用。

七、背景图片尺寸（background-size）

background-size属性是一个很神的东西，当你在创建一个流体布局时，这将帮你改变背景图片大小是非常的方便。

CSS经典方法

<style type="text/css">  
    .box {  
    position: relative;  
    overflow: hidden;  
    }  
        .box img {  
        position: absolute;  
        top: 0;  
        left: 0;  
        width: 50%;  
        height: 50%;  
        z-index: 100;  
        }  
        .box .content {  
        position: absolute;  
        z-index: 200;  
        }  
</style>  
      
    <div class="box">  
        <div class="content">  
            <!--CONTENT-->  
        </div>  
        <img src="http://d2o0t5hpnwv4c1.cloudfront.net/423_screenr/200x200.jpg" alt="" />  
    </div>

CSS3方法

<style type="text/css">  
    .box {  
    background: #ccc url(http://d2o0t5hpnwv4c1.cloudfront.net/423_screenr/200x200.jpg) no-repeat;  
    -webkit-background-size: 50%; /* Safari */  
    -o-background-size: 50%; /* Opera */  
    -khtml-background-size: 50%; /* Konqueror */  
	-moz-background-size: 50%; /* Firefox */  
	background-size: 50%; /* w3c */  
    }  
    </style>

有关于background-size的详细介绍，大家可以点击本站的相关教程《CSS3 background-size》。也可以查阅本例DEMO。

四、自定义字体(@font-face)

一直以来都向往着在web页面制作中使用自己喜欢的字体来排版，可以不使用任何图片，不使用任何的js就能实现各种各样的字体，不过这个属性有个不足之处，不太实适应于中文，具体原因是什么？大家可以参阅《CSS3 @font-face》一文。在没有CSS3 @font-face时，要想在页面中实现花哨的字体时，我们不得不使用图片或借助js来实现。

CSS3方法

<style type="text/css">  
    @font-face {  
    font-family: 'Loyal';  
    src: url('loyal.ttf');  
    }  
    .font {  
    font-family: Loyal;  
    font-size: 20px;  
    }  
</style>  
      
<span class="font">The quick brown fox jumps over the lazy dog.</span>

我们使用@font-face创建了一个font-family，然后在使用中具体的引用这个font-family。Michael Owens在《6 Ways To Improve Your Web Typography 》中有介绍过@font-face，大家也可以点击本站的前一篇教程《CSS3 @font-face》。最后大家也可以看看下面的DEMO。

八、多背景（Multiple Backgrounds）

以前制作多背景效果，我们都需要多个div来辅助实现，在每个div中放置一个背景图片，然后通过定位来实现。

CSS经典方法

		<style type="text/css">  
    .box {  
    width: 200px;  
    height: 150px;  
    background: url(images/bg.png) repeat-x;  
    }  
        .box2 {  
        width: 100%;  
        height: 100%;  
        background: url(images/text.png) center center no-repeat;  
        }  
    </style>  
      
    <div class="box">  
        <div class="box2">  
            <!--CONTENT-->  
        </div>  
    </div>

CSS3方法

		<style type="text/css">  
    .box {  
    width: 200px;  
    height: 150px;  
    background: url(images/text.png) center center no-repeat, url(images/bg.png) repeat-x;  
    }  
    </style>  
      
    <div class="box">  
        <!--CONTENT-->  
    </div>

具体如何操作Multiple Background请大家移步到教程《CSS3 Multiple Backgrounds》中阅读。大家也可以点击实例的DEMO。

九、多栏排版(columns)

这个属性是最有趣的一个属性，能让你的web页面像报纸杂志一样分多列排版。通常我们都是使用float来制作，也可以使用jQuery的columnizer.js插件动态实现。

CSS经典方法

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
    <script type="text/javascript" src="js/jquery.columnize.js"></script>  
    <script type="text/javascript">  
    $(function(){  
        $('.columns').columnize({  
            columns: 2  
        });  
    });  
    </script>  
    <style type="text/css">  
    .column {  
    padding-right: 10px;  
    }  
    .column.last {  
    padding: 0;  
    }  
    </style>  
      
    <div class="columns">  
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>  
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>  
    </div>

CSS3方法

		<style type="text/css">  
    .columns {  
    -moz-column-count: 2;  
    -webkit-column-count: 2;  
    }  
    </style>  
      
    <div class="columns">  
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>  
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>  
    </div>

这里只做了一个最简单的演示，如果你想了解更多的信息，你可以点击the multi-column page at CSS3.info或者直接点击本站有关于CSS3教程中的《CSS3 Multi-columns 之跨列》。DEMO演示。

十、图片边框(border-image)

border-image到目前为止，只有Firefox3.5+上的版本支持，大家可以点击Chris Spooner’s website，网站里面使用了border-image制作的效果，大家可以参考一二。虽然现在并不被所有浏览器支持，但这将是一种趋势，我们可以先对它进行学习。

CSS经典方法

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
    <script type="text/javascript" src="js/jquery.borderImage.js"></script>  
    <script type="text/javascript">  
    $(function(){  
        $('.classic .box').borderImage('url(images/border.png) 27 27 27 27 round round');  
    });  
    </script>  
    <style type="text/css">  
    .box {  
    border-width: 20px;  
    }  
    </style>  
      
    <div class="box">  
        <!--CONTENT-->  
    </div>

上面的实例告诉我们可以使用borderImage插件实现图片边框的效果。

CSS3方法

		<style type="text/css">  
    .box {  
    border-width: 20px;  
    -webkit-border-image: url(images/border.png) 27 round;  
    -moz-border-image: url(images/border.png) 27 round;  
    border-image: url(images/border.png) 27 round;  
    }  
    </style>  
      
    <div class="box">  
        <!--CONTENT-->  
    </div>

详细使用可以点击《CSS3 Border-image》一文。查看DEMO。

posted @ 2014-02-11 13:48 a fine day 阅读(154) 评论(0) 收藏举报

刷新页面返回顶部