12个真正有用的CSS3技巧

CSS3的出现无疑是一个强大的新东西,我现在在一些Web项目中开始在使用,很方便,同也很高兴能开始使用这一种新的技术。其先进的功能,给我们Web的页面制作真的带来极大的方便,比如说圆角、阴影、渐变等。这里我总结了常用的12种CSS3属性的使用,来帮助大家一起学习CSS3的新功能。

一、圆角——border-radius

早期制作元素的圆角都是使用图片来实现,这样需要增加多个标签来实现,而且对于多色的圆角,给我们的页面制作会带来极大的不便。有了CSS3的圆角属性——border-radius后,我们不必会每种不同的圆角制作图片而烦恼了,我们可以直接使用CSS3来制作。

.demo {
    -moz-border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
    -webkit-border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
    border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
}

具体效果如下:

2个真正有用的CSS3技巧"

有关于CSS3的border-radius具体使用大家可以参考本站的教程《CSS3的圆角Border-radius》。众所周知,IE6-8是不支持CSS3的属性的,如果你希望在IE6-8下也能正常使用CSS3的border-radius属性,我在这里给大家准备了几个解决方案,感兴趣的请参考IE-CSS3Cross-browser CSS3 border-radius CSS3 PIE,前面几个是关于CSS解决IE兼容问题的,大家还可以考虑使用js来解决,比如:jQuery CornerCorner.js以及DD_roundies

二、阴影和背景尺寸

接下来学习如何使用CSS3来制作阴影(box-shadow和text-shadow)以及背景尺寸(background-size):

有关于这方面的介绍大家可以点击《CSS3的文字阴影—text-shadow》介绍了有关于text-shadow的使用、《CSS3 box-shadow》介绍了CSS3的box-shadow如何使用、《CSS3 Background-size》详细介绍了background-size的应用。同样的,在IE下我们可以使用别的方法来实现其兼容性:

  1. CSS3 text-shadow:我们可以使用IE的滤镜来实现,具体的实现方法在《CSS3的文字阴影—text-shadow》教程中也有简单的介绍如过,如果想了解详细的使用方法,大家可以点击CSS3 Text-Shadow – Can It Be Done in IE Without JavaScript?
  2. CSS3 box-shadow:至于CSS3的box-shadow在IE下,我们同样可以使用滤镜来实现,详细的大家可以点击CSS Tricks——CSS Box ShadowHow to Simulate CSS3 box-shadow in IE6-8 Without JavaScript
  3. CSS3 background-size:这个属性我们同样使用的是IE滤镜来兼容IE下的效果,具体的大家参考Scale Background image to browser sizeIE Problems with CSS3 ‘background-size: cover’ and IEFilters

三、自定义字体

CSS3给我们提供了一个@font-face可以让我们自定义字体。这样就可以让我们实现用户不具备的字体,在用户的浏览器上也能正常显示。

2个真正有用的CSS3技巧"

有关于CSS3 @font-face无须考虑IE下的兼容问题,因为只要你具体了所有浏览字体,在各浏览器下,不管用户有没有安装字体都可以实现,比如说本站的logo就是一个实例。只是这个方法对中文使用起来会麻烦一点,因为文件太大,直接影响性能。

四、CSS3的色彩

CSS3的色彩比较有意思了,在以前的基础上增加了不少,详细的可以参考W3C官网,其中最具适用的是CSS3 RGBA:

2个真正有用的CSS3技巧"

有关于CSS3的色彩方面详细介绍,大家还可以参考Patrick Lin介绍的Playing Around with CSS3 Colors或者Chris CoyierRGBa Browser Support

五、美化表单

这里所讲的美化表单,其特殊之处是使用了CSS3的属性选择器来修饰表单:

有关于CSS3的属性选择器的详细介绍,大家还可以点击本站的——《CSS3 选择器——属性选择器》。

六、链接的应用

这个技巧是主要也是CSS3选择器的使用,也是使用CSS3属性选择器给链接添加icon:

七、多列布局

前面实现多列布局,我们都是使用浮动的配合实现,那么在CSS3中我们使用column属性,可以轻松的帮助我们实现:

2个真正有用的CSS3技巧"

同样为难的是在IE下,我们需要配合js来实现,具体如何配合JS来实现,大家可以点击Steven Bradley带来的Create Columns Easily With The CSS3 Multi-Column Layout ModuleClive WalkerMulti-column layout with CSS3 (and some JavaScript)

八、多背景

记得以前实现多背景需要增加多个html标签,现在CSS3给我们带来了一个Multiple Backgrounds功能,这样我们就可以无须为了实现多个背景来增加额外的标签:

如果你想使用这个属性实现IE下的效果,那么我们就需要加载一个jQuery插件,具体可以查看CSS Multiple Backgrounds / Background Layering with jQuery。要是你感兴趣的话还可以参考Cross-Browser Multi-background images, including IE一文。

九、CSS3的渐变

这个功能是用来代替图片渐变的效果,现在使用相当的多:

2个真正有用的CSS3技巧"

CSS3的渐变运用相当的广泛了,有同学肯定会问,IE下怎么办,其实不用太害怕,现在在IE下解决办法也相当的多,比如前面说的IE-CSS3CSS3 PIE都可以解决,当然我用的多的还是IE的滤镜。如果大家想了解更多的解决办法还可以参考Cross-Browser CSS Gradient Speed Up with CSS3 Gradients

十、CSS3的旋转

CSS3的旋转能辅助大家在hover状态制作一些特殊的效果,也可以使用他来制作文字的旋转样式:

2个真正有用的CSS3技巧"

这个效果要在IE下实现就相当来说是复杂一些,你具有较好的数学水平,如果你的数学和我一样不是很好,也不用怕,这里有一个工具可以帮我们搞定:IE’s CSS3 Transforms Translator,当然你要是还要知道其原理也可以阅读Cross Browser CSS Transforms – even in IE(不过我看了几回还没有整明白是怎么回事)。

十一、CSS3 Transition

这个功能也很强大,他能帮助我们实现平滑的变化效果,还可以使用他实现一些动画效果,具体的使用,大家可以参阅:

2个真正有用的CSS3技巧"

你肯定想知道在IE下如何实现,那就一起来看addyosmaniCSS3 Transition Animations With jQuery Fallbacks

十二、CSS3 Animation

这个功能很强大,但使用的并不是很多。虽然这样,但点击率是相当的高,说明大家都还是很想要了解这个属性的使用,所以将他放在最后给大家推荐。说的简单一点,他就像是flash的帧一样实现动画效果:

2个真正有用的CSS3技巧"

使用这个属性制作效果很方便,也很美。大家要是感兴趣的话可以看看LeaVerou给我们带来的animatable,里面介绍了近40种动画效果,而且我前段时间在《Animate.css》一文中介绍了Daniel Eden制作的动画效果。如果想了解更多的相关方面知识,大家还可以点阅Cross-Browser Animated CSS Transforms — Even in IE,此文能帮你解决IE下的兼容问题。

上面十二个CSS3的应用是我根据本站的CSS3属性点击率而做的总结,他们并没有先后顺序之分,只是想借此文告诉大家,CSS3这些属性使用频率相对较高。如果你始终想在IE下解决CSS3的兼容问题,我建议你多了解一下IE-CSS3CSS3 PIE还有就是IE的滤镜,这几种方法是相对使用较多的。如果你想了解更多的CSS3相关兼容性,你不仿看看CSS Compatibility and Internet ExplorerCSS3 Please,或者直接点击本站CSS3教程。最后希望此文对那些想学CSS3的朋友有个方向性的指导,如果你有更好的相关信息记得与我一起分享,你可以直接在评论中发表您的任何建议。

原文链接:https://www.w3cplus.com/blog/183.html

发表评论

登录后才能评论