资讯频道 → Web前端
阅读更多

10顶
0踩

Web前端

翻译新闻 50 个最佳 CSS3 教程大放送

2011-11-23 17:56 by 见习编辑 zhuyu 评论(8) 有20202人浏览
CSS3 教程 Web
本文收集了2011年最热门的50个CSS3教程，读者可根据这些教程轻松实现网页的设计。

1. Original Hover Effects with CSS3

本教程讲述应用CSS3实现风格迥异的鼠标悬停效果。



2. CSS3 Transitions Without Using :hover

本教程讲述应用CSS3实现动态变换效果。



3. How to Create a Beautiful Icon with CSS3

本教程讲述应用CSS3创建文档图标。



4. Creative CSS3 Animation Menus

本教程讲述应用CSS3巧妙地将图标、主标题和二级标题整合成动态导航菜单。



5. Background-Clip in CSS3

本教程讲述应用CSS3的变形（transforms）、动态变换（transitions）和关键帧动画实现背景设计。



6. HTML5 logo using CSS3

本教程讲述应用CSS3设计HTML 5的logo。



7. CSS3 Progress Bars

本教程讲述应用CSS3设计进度条。



8. Pure CSS(3) accordion

本教程讲述应用CSS3设计水平和垂直两种版本的折叠效果。



9. Awesome: 10 CSS3 box shadow experiments

本教程讲述应用CSS3创建方框阴影。



10. An Option to Mimic CSS3 Text Shadow in Internet Explorer

本教程讲述应用CSS3实现MLB.com网站中的圆角、文字阴影等效果。



11. The Apple.com navigation menu created using only CSS3

本教程讲述应用CSS3实现Apple.com网站顶部的灰色系导航菜单。



12. Blur Menu with CSS3 Transitions

本教程讲述应用CSS3设计模糊菜单效果。



13. Rotating billboard using only CSS3

本教程讲述应用CSS3实现广告牌的动态变换（transitions）效果。



14. CSS3 Linear Gradient Syntax Breakdown

本教程主要解析CSS3的线性渐变语法。



15. Animated CSS3 helix using 3d transforms

本教程讲述应用CSS3实现3D变形效果。



16. Circle Navigation Effect with CSS3

本教程讲述应用CSS3给导航添加鼠标悬停效果。



17. How to Build a Fully Functional CSS3-Only Content Slider

本教程讲述应用CSS3实现幻灯片切换效果。



18. Fullscreen Image 3D Effect with CSS3 and jQuery

本教程讲述应用CSS3和jQuery实现图片的3D旋转效果。



19. Create a 404 page with CSS3 animations

本教程讲述应用CSS3创建动画效果的404页面，作者是Paravel的创始人Trent Walton。



20. Discover the power of CSS3 selectors

本教程讲述应用CSS3选择器细化图像。



21. Style Twitter posts on your site with CSS3

本教程讲述应用CSS3创建不同的Twitter帖子样式。



22. CSS3 Image Styles

本教程讲述应用CSS3给图片添加边框、阴影等效果。



23. The CSS3 Flexible Box model explained

本教程讲述应用CSS3的Flexible Box设计简单的网页。



24. Create a Stylish Contact Form with HTML5 & CSS3

本教程讲述应用HTML5和CSS3的新特性创建时尚的联系表单。



25. CSS3 @font-face Design Guide

本教程讲述应用CSS3设计Web字体。



26. Create a Grid Based Web Design in HTML5 & CSS3

本教程逐步为你讲述应用HTML5和CSS3设计知名品牌眼镜官网。



27. How To Create a Stylish Button Entirely with CSS3

本教程讲述应用CSS3为网站创建一个简单的图形按钮，并实现渐变、阴影、边框和动态变换效果。



28. Tutorial: Case Study with Html5 + CSS3

关于一个使用HTML5和CSS3的优秀个例的研究。



29. CSS3 Transforms, Transitions, and Animations in Action

本教程讲述应用CSS3实现变形、过渡和动画切换效果。



30. Designing with CSS3 Support & Alternative Fallbacks

本教程讲述应用CSS3创建鼠标悬停动态文字效果。



31. CSS3 Buttons Tutorial

本教程讲述应用CSS3设计按钮。



32. Pure CSS3 Speech Bubbles

本教程讲述应用CSS3创建提示框。



33. CSS3 Flexible Box Layout Explained

本教程讲述应用CSS3实现灵活布局。



34. Using CSS3 Transform

本教程讲述应用CSS3的变形、动态变换等实现动画效果。



35. CSS3 Text Shadow Tutorial (simple)

本教程讲述应用CSS3的text-shadow轻松实现阴影效果。



36. CSS3 Typography Tutorial

本教程讲述应用CSS3实现特殊的文字排版效果，使网页更加个性化。



37. Drop Shadows in CSS3

本教程讲述应用CSS3为图片添加阴影。



38. Tutorial – CSS3 Buttons with no images

本教程讲述应用CSS3无需图像设计按钮。



39. Having Fun With CSS3: Spinning Newspapers

本教程讲述应用CSS3实现旋转报纸效果。



40.CSS3 Transitions Tutorial

本教程讲述应用CSS3和HTML实现转换效果，无需使用JavaScript。



41. Creating a PHP and CSS3 Powered About Page

本教程讲述应用PHP、HTML5和CSS3创建简单的网页。



42. Making a CSS3 Animated Menu

本教程讲述应用CSS3设计动画导航菜单。



43. Photobooth with PHP, jQuery and CSS3

本教程讲述应用PHP、jQuery和CSS3创建照片集。



44. postcard from Paris – css3 keyframes animations in use

本教程讲述CSS3关键帧动画的使用。



45. create a unique contact form with css3 transitions

本教程讲述应用CSS3实现动态信封效果。



46. CSS Custom Fonts Tutorial

本教程讲述应用CSS3创建自定义字体。



47. CSS3 Transition Animations With jQuery Fallbacks

本教程讲述应用CSS3和jQuery实现动画效果。



48. How to Create Link Tooltips Using CSS3 and JQuery

本教程讲述应用CSS3和jQuery设计超链接提示框。



49. Google Plus Style Animations with Jquery and CSS3

本教程讲述应用jQuery和CSS3实现旋转动画效果。



50. Creating a css3 and jQuery photoflip

本教程讲述应用CSS3创建一个翻看照片效果。



Via webdesign14
  • 大小: 24 KB
  • 大小: 11.7 KB
  • 大小: 8.3 KB
  • 大小: 21.9 KB
  • 大小: 26.6 KB
  • 大小: 14.8 KB
  • 大小: 13.1 KB
  • 大小: 88.8 KB
  • 大小: 41 KB
  • 大小: 49.6 KB
  • 大小: 13.2 KB
  • 大小: 21.7 KB
  • 大小: 40.7 KB
  • 大小: 12 KB
  • 大小: 20.8 KB
  • 大小: 19.7 KB
  • 大小: 19.1 KB
  • 大小: 35.8 KB
  • 大小: 36.4 KB
  • 大小: 35.8 KB
  • 大小: 42.1 KB
  • 大小: 33.9 KB
  • 大小: 44.4 KB
  • 大小: 18.5 KB
  • 大小: 21.9 KB
  • 大小: 25.1 KB
  • 大小: 26 KB
  • 大小: 31.8 KB
  • 大小: 12.9 KB
  • 大小: 36.9 KB
  • 大小: 8.4 KB
  • 大小: 30.6 KB
  • 大小: 36.1 KB
  • 大小: 27 KB
  • 大小: 13 KB
  • 大小: 21.2 KB
  • 大小: 28.5 KB
  • 大小: 9.7 KB
  • 大小: 12.6 KB
  • 大小: 12.9 KB
  • 大小: 10.7 KB
  • 大小: 11.6 KB
  • 大小: 27 KB
  • 大小: 51.5 KB
  • 大小: 19.1 KB
  • 大小: 47.5 KB
  • 大小: 32.2 KB
  • 大小: 27.7 KB
  • 大小: 26.1 KB
  • 大小: 38.7 KB
10
顶
0
踩
评论 共 8 条 请登录后发表评论
8 楼 njl_041x 2011-12-01 14:23
ie 必须抓紧改革了
7 楼 zhuzhuaijq 2011-11-30 00:20
  
6 楼 ufoqhmdt 2011-11-24 16:49
IE  还不死啊..全世界人民联合起来搞死IE  ,CSS 3  HTML5 就可以施展手脚了.世界也会更美好.
5 楼 goseasss 2011-11-24 13:10
收下了。谢谢啦~~~
4 楼 yonghong915 2011-11-24 12:47
看起来不错，但还没测试
3 楼 yanwu401909 2011-11-24 10:07
很不错的效果，可惜在IE下大部分无效。。。只有chrome支持最好
2 楼 西北汉子 2011-11-24 08:16
好东西，支持
1 楼 freezing 2011-11-24 00:37
看起来挺吸引人的！

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • extJS4升级至extJS6.6所遇问题及解决方案

    项目进行前端框架升级——extJS 4升级至extJS6.6所遇的一些问题及相对应的解决方案建议

  • ExtJS 7.6 SDK trial

    ExtJS 7.6 SDK trial

  • 包含各种类型的extjs小图标，Extjs4小图标

    包含各种类型的extjs小图标，Extjs4小图标

  • Extjs中文文档

    Extjs中文文档，包含Extjs的基本语法和各个类的详细说明以及用法。

  • Extjs6 下拉列表

    Extjs 下拉列表

  • ExtJS ToolTip功能

    ExtJS tooltip功能组件实例

  • EXTJS 6.5 商用版

    EXTJS 6.5 商用版 移除试用水印 ，加入完整商用版 .JS 直接使用，

  • EXTJS破解版本

    EXTJS破解版本EXTJS破解版本EXTJS破解版本EXTJS破解版本EXTJS破解版本EXTJS破解版本

  • extjs6.6项目示例

    原生态extjs框架的web项目，用senchacmd成功发布，通过改变base-color改变主题风格，见代码及文档

  • extjs中文api

    extjs中文api，提供实例extjs中文api，提供实例extjs中文api，提供实例extjs中文api，提供实例extjs中文api，提供实例extjs中文api，提供实例

  • Extjs-6.6.0去水印版

    Extjs-6.6.0-trial(去水印)版，Ext js 6.6版，javascript 类库，全能UI库，谁用谁知道。好东西要分享。

  • extJs5.0红色皮肤

    extJs5.0红色皮肤

  • EXTJS6.6.0包

    2012年3月14日，Extjs4.1正式发布。 2013年05月16日，Extjs4.2正式发布。 2014年12月05日，Extjs5.1Beta版正式发布。 2015年10月11日，Extjs6.0GPL开源版正式发布。 2016年09月26日，ExtJS 6.2 正式版正式发布。 [1]

  • Extjs6.2最新文档

    Extjs6.2最新文档；

  • ExtJS 4.2.5

    ExtJS 4.2.5 Release Notes for Ext JS 4.2.5 Release Date: November 3, 2015 Version Number: 4.2.5.1763

  • Extjs大型项目实例

    Extjs大型项目

  • ExtJs视频教程整包打包

    ExtJS 文字教程 extjs2 dojochina系列 extjs2视频教程 DOJO Extjs3-北风 Extjs3-大漠 ExtJS3.4-界面实战 extjs4 30集 uspcat系列 extjs4 其他视频一套 Extjs4.0MVC项目开发视频教程 extjs4.1.1视频教程 ExtJS4培训...

  • ExtJS4ExtJS5MD5 加密

    适用于ExtJS4、ExtJS5 MD5加密算法！

  • extjs6.6框架的web项目（登录+首页）

    extjs6.6框架的web项目，此资源是上一个资源的更新版。 用senchacmd成功发布，通过改变base-color改变主题风格，功能包含登录页、首页左菜单和列表，详见代码及部署说明文档。

  • ExtJs3.4 api

    extjs3.4api，很实用，方便大家学习extjs，欢迎大家下载 extjs3.4中文api，很实用，方便大家学习extjs，欢迎大家下载

Global site tag (gtag.js) - Google Analytics