2012年最精彩的15个 CSS3 教程

2013-1-12    蓝蓝设计的小编

转载蓝蓝设计(   www.lanlanwork.com  )是一家专注而深入的设计机构 ,为期望卓越的国内外企业提供有效的   BS界面设计 、  cs界面设计 、  ipad界面设计   、  包装设计 、  图标定制 、  用户体验 、交互设计、   网站建设 平面设计服务

 来源: http://www.cnblogs.com/lhb25/archive/2013/01/13/css3-tutorials-best-of-2012.html

如果您想订阅本博客内容,每天自动发到您的邮箱中,            请点这里  

 

 

 过去的这一年, CSS3 被更多的人关注和学习,应用得越来越多。这篇文章挑选出的2012年最值得关注的15个  CSS3 教程能够帮助你更好的掌握 CSS3 的实际使用。

  CSS3 提供了众多强大的视觉效果特性,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果。以前很多需要编写 JavaScript 才能实现的效果,如今只需要简单的写几句 CSS3 代码就能实现。

01. 使用jQuery和CSS3实现翻转滑块

展示产品的方法有很多,其中之一是使用网格样式的滑块效果。

在本教程中,我将分享如何使用 jQuery  和 CSS3  变换实现翻转滑块效果的产品展示。

2012年CSS3教程 -  15

最终效果      示例下载      详细教程

 

02. CSS转换特性实现标签云

在本教程中,您将学习创建一个效果精美的标签云。

作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CSS 变换特性。

2012年CSS3教程 -  6

最终效果      示例下载      详细教程

 

03. 使用CSS3伪元素实现堆叠效果

:before 和 :after 这个两个 CSS3  伪元素可是实现很多有趣的效果。

本教程将告诉你如何使用 CSS3  为元素创建一个简单的图片堆叠效果。

2012年 -  5 CSS3的教程

最终效果      示例下载      详细教程

 

04. CSS3面包屑导航

面包屑导航能够让用户知道他们所在的层次结构,能够方便的导航到上一层页面。

在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航。

2012年 -  3 CSS3的教程

最终效果      详细教程

 

05. 使用CSS3实现动画按钮

在本教程中,你将了解到如何创建一些动画按钮,有悬停效果或者活动状态,风格各异。

2012年CSS3教程 -  14

最终效果      示例下载      详细教程

 

06. 创建一个垂直的折叠式菜单

本教程将告诉你如何使用 CSS3 创建一个手风琴菜单。

网络上有很多的 CSS3  手风琴效果教程,这个版本是使用 :target 伪类实现,需要支持 CSS3  属性的浏览器。

2012年CSS3教程 -  2

最终效果      示例下载      详细教程

 

07. 如何创建光滑的CSS3按钮

在这个入门教程中,你将学习如何制作很酷的 CSS3  按钮。

2012年CSS3教程 -  7

最终效果      详细教程

 

08. 使用CSS3过渡特性创建一个独特的联系表单

在这个优秀的 CSS3  教程中,您将学习如何创建一个鼠标悬停滑动的信封形式联系表单效果。

2012年CSS3教程 -  10

最终效果      示例下载      详细教程

 

09. 如何创建CSS3下拉菜单

在本教程中,您将学习如何编写一个纯 CSS3 导航下拉菜单。

最终效果      详细教程

 

10. Arctext.js - CSS3和jQuery实现弯曲的文本

Arctext.js 是基于 Lettering.js 的文字旋转插件,根据旋转半径准确计算每个字母的旋转弧度并均匀分布。

虽然 CSS3 也能够实现字符旋转效果,但要让每个字母都沿着弯曲路径排布相当的复杂,Arctext.js 可以轻松实现。

2012年 -  9 CSS3的教程

最终效果      示例下载      详细教程

 

11. CSS3有序列表样式

在这篇文章中,您将学习如何使用语义的方法给有序列表添加一些 CSS3  样式。

2012年 -  8 CSS3的教程

最终效果      详细教程

 

12. CSS3悬停效果与Websymbols教程

在教程中,将告诉您新的 CSS 悬停效果, 看起来非常有趣。

我很喜欢 CSS3 悬停效果,所以我们想和大家分享一些新的创意的悬停效果。

2012年CSS3教程 -  11

最终效果      示例下载      详细教程

 

13. 使用CSS3和jQuery实现灯箱效果

这个 CSS3 教程教您如何结合 jQuery 来实现一个简单的灯箱效果。

2012年CSS3教程 -  12

最终效果      示例下载      详细教程

 

14. 用CSS3和jQuery实现垂直导航菜单

在这个教程中,你可以学会如何使用 CSS3 jQuery 实现精美的垂直导航菜单。

2012年CSS3教程 -  13

最终效果      示例下载      详细教程

 

15. 响应式CSS3内容滑块

CSS3 响应式内容滑块,正如其名称所暗示的,一个不需要 JavaScript 支持的 CSS3 滑块。

实际的效果能媲美其它任何的 JavaScript 滑块。这个虽然不是教程,但这个非常棒的滑块真的值得看看。

2012年 -  4 CSS3的教程

分享本文至:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档