CSS3

CSS3实现11种经典的CSS技术

在CSS2中,我们为了达到一定的设计效果,时常都需要添加额外的<div>或使用PNG图片等方法来实现。当CSS3的时代到来之际,我们不应该只局限于这些老技术,我们应该大胆的去尝试一些新技术。今天我们就跟随NettutsVasili的教程《11 Classic CSS Techniques Made Simple with CSS3 》。来学习使用CSS3新技术实现十一种经典的CSS样式效果。

CSS3制作图片样式

在《jQuery和CSS3给图片制作圆角》一文中说过了,当你在Web页面制作中如果你直接把CSS3中的border-radiusbox-shadow应用在图片,浏览器并不会完全显示。前面在《jQuery和CSS3给图片制作圆角》中说过其解决方法,就是把图片作为背景图片,这样我们就可以应用任何样式来修饰图片,而且此时浏览器也会完美的呈现出来。

CSS3制作手风琴——CSS3 :target的应用

前一回我在《CSS3制作垂直手风琴》介绍了使用“:hover”来制作手风琴效果。今天,你将学习使用CSS3的另一个属性——:target来制作一个非常简单的动画手风琴的效果。在具体动手之前,我们一起来简单的了解一下这个“:target”。

CSS3制作垂直手风琴

说起手风琴的制作,大家肯定首选就是使用jQuery来制作,我在《如何使用jQuery制作手风琴效果》也简单的介绍了使用jQuery制作手风琴效果。但今天我在Saud Khan的《Cross Browser Pure CSS3 Vertical Accordion》中学习了一种使用纯CSS制作手风琴效果,稍加整理了一下,贴上来与大家一起分享。

CSS3 制作Drop Shadow效果

在介绍CSS3系列时,我花了一篇很长的篇幅专门介绍了CSS3box-shadow属性以及其具体的使用等。

CSS3 Tips

今天主要和大家一起学习Red写的《CSS3 tooltips》。从里面我们一起来学习如何使用CSS3来制作tips。

纯CSS3制作Tabs选项卡

Tabs选项卡对于Web前端攻城师来说并不陌生,也制作了不少,我们在《CSS3+jQuery制作切角的Tabs》也介绍了一个使用CSS3配合jQuery制作Tabs的实例。我想大家在制作Tabs选项卡大多数都是使用jQuery或者javaScript来实现的。而单独使用纯CSS来制作Tabs来说还是比较少见。

CSS3+jQuery制作切角的Tabs

今天在Red阅读了一篇《CSS3 tabs with beveled corners》博文,介绍了使用CSS3制作切角的Tabs,觉得特有意思。其中含量最高的并不是其如何实现的Tabs,而是其中如何使用CSS3来制作切角效果,如:

CSS3和HTML实体符制作带图片效果的Buttons

大家都知道,无论我们是设计一个网站或Web应用程序,我们都少不了Buttons。自从有了CSS3后,我们制作一些漂亮的Buttons就容易多了,只是有一点头痛的是,IE6-8不能支持这种靓丽的Buttons。前面我在《CSS3 Gradient Buttons》和《CSS——Bootstrap From Twitter》都有介绍关于CSS3制作好看的Buttons方法,并且在《LESS和CSS3动态制作按钮》介绍了如何使用CSS3结合Less动态制作不同的Buttons。

CSS3 Gradient Buttons

前面在《CSS3 Gradient》一文中详细介绍了CSS3中的Gradient属性的使用,一直没来得急介绍这方面的实例,今天在Nick La (@nickla)的Web Designer Wall中看到了一篇《CSS3 Gradient Buttons》主要介绍用CSS3中的Gradient属性制作Buttons的效果。觉得蛮好的,特意整理一份放上来与大家分享。

页面

返回顶部