利用 CSS3 的 transition 属性制作过渡效果的导航栏
CSS3 新增了大量属性,在实际使用过程中,需要充分挖掘这些属性的潜力,才能制作出富有创意的作品。这里就介绍一个如何利用 CSS3 的 transition 属性来制作一个具有过渡效果的导航栏。
任鸟飞网站设计博客是一个关注网页设计、网站建设、前端开发、美工设计、推广优化、网站博客赚钱、互联网趣味信息及搜素引擎等的原创设计类博客。海阔凭鱼跃,天高任鸟飞!
CSS3 新增了大量属性,在实际使用过程中,需要充分挖掘这些属性的潜力,才能制作出富有创意的作品。这里就介绍一个如何利用 CSS3 的 transition 属性来制作一个具有过渡效果的导航栏。
CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致。
我在使用HTML5和CSS3制作的网站模板下载 文章中提供了一个国外模板供参考使用,为了进一步领会和掌握HTML5及CSS3的精髓,今天特地做了一个中文页面的模板。
最新信息,Google发布网页字体目录服务,通过 Google Font API ,提供开源字体,供网页设计师免费使用。
这里收集了8款CSS3代码生成器工具,使用CSS3代码生成器能够快速准确的生成相应的CSS3代码,达到事半功倍的效果。
做网站有6年时间了,刚开始的时候都是利用表格(table)来布局页面元素,后来因为CSS2.0的出现,而转变为利用div来布局,其最大的好处就是页面样式与内容数据的分离,这对网站重构(redesign)相当重要。而近来HTML5和CSS3开始大行其道,作为一名设计师,必须走在技术的最前沿,并尝试使用并推广HTML5和CSS3。
利用CSS3新增的gradient(背景颜色渐变)属性,可以直接编写相应CSS代码,制作渐变背景颜色的效果。相对于制作渐变背景图片,利用CSS3制作的渐变背景颜色则更容易修改,维护更方便。
随着CSS3的推广,以及越来越多的浏览器开始支持CSS3标准,CSS3得到众多网页设计者的垂青。以往众多利用图片才能实现的效果,现在利用CSS3也能实现。
CSS3新增了大量特性,例如Border Radius、 Box Shadow 、Text Shadow、 RGBA 、@Font Face 、Multiple Columns、 Box Resize、 Box Sizing 、Outline、 Selectors、 Gradients 。利用CSS3 Generator 代码生成工具即可轻松实现CSS3代码的自动生成,是网页设计师“居家旅游”的必备工具。