加载中…
个人资料
real小辉侠
real小辉侠 新浪个人认证
  • 博客等级:
  • 博客积分:0
  • 博客访问:8,125
  • 关注人气:13
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

50 个最佳 CSS3 教程大放送

(2012-05-12 22:32:09)
标签:

css3

实例

it

分类: div+css那些事
本文收集了2011年最热门的50个CSS3教程,读者可根据这些教程轻松实现网页的设计。 
src: http://www.iteye.com/news/23285 
1. Original Hover Effects with CSS3 

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

http://dl.iteye.com/upload/attachment/584031/91356c22-a282-34f8-af18-a49eeacf191f.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


2. CSS3 Transitions Without Using :hover 

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

http://dl.iteye.com/upload/attachment/584033/c8b23901-80f1-3da4-8816-a8ba62232b78.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


3. How to Create a Beautiful Icon with CSS3 

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

http://dl.iteye.com/upload/attachment/584035/9c4faaa8-988e-3c8d-a30c-16788c88ac40.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


4. Creative CSS3 Animation Menus 

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

http://dl.iteye.com/upload/attachment/584037/57d6cd13-9606-3aa5-ad51-14ef5f5fac33.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


5. Background-Clip in CSS3 

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

http://dl.iteye.com/upload/attachment/584039/343004bd-5b42-3b1b-b058-4b18527b2e12.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


6. HTML5 logo using CSS3 

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

http://dl.iteye.com/upload/attachment/584041/66949b9f-b6a3-3954-b7de-4bd9f23013e0.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


7. CSS3 Progress Bars 

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

http://dl.iteye.com/upload/attachment/584043/e96df740-2468-3b57-99aa-4b6705b24012.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


8. Pure CSS(3) accordion 

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

http://dl.iteye.com/upload/attachment/584045/f4f196d3-0d38-3589-918e-16b1508054c5.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


9. Awesome: 10 CSS3 box shadow experiments 

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

http://dl.iteye.com/upload/attachment/584047/929e03a8-f7e5-308d-a53a-ab2fafd79892.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


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

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

http://dl.iteye.com/upload/attachment/584049/9b6590bc-c91c-3c2c-b78a-61063939635a.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


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

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

http://dl.iteye.com/upload/attachment/584051/e673e1ef-62e9-30b2-8d06-1a4d1b1297f9.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


12. Blur Menu with CSS3 Transitions 

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

http://dl.iteye.com/upload/attachment/584053/6c25a583-22ee-39aa-af99-c116ae19d5c3.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


13. Rotating billboard using only CSS3 

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

http://dl.iteye.com/upload/attachment/584055/fb49be52-c1c9-38da-a7a6-836ac2550b7b.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


14. CSS3 Linear Gradient Syntax Breakdown 

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

http://dl.iteye.com/upload/attachment/584057/f6c4e81f-4f43-3f9f-bdc5-95afed81b088.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


15. Animated CSS3 helix using 3d transforms 

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

http://dl.iteye.com/upload/attachment/584059/25b3fa68-2f01-3b4b-b93c-43970fa9ddf6.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


16. Circle Navigation Effect with CSS3 

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

http://dl.iteye.com/upload/attachment/584061/34316fd6-ac90-31a5-99c7-b66e998e7850.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


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

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

http://dl.iteye.com/upload/attachment/584063/6cdd7403-d77a-3708-9f6d-68c3fbc826ae.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


18. Fullscreen Image 3D Effect with CSS3 and jQuery 

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

http://dl.iteye.com/upload/attachment/584065/9e871921-59a1-37c8-b566-7aa7e3bd0052.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


19. Create a 404 page with CSS3 animations 

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

http://dl.iteye.com/upload/attachment/584067/3fdd88e4-1cee-308e-8637-7335f03a13b2.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


20. Discover the power of CSS3 selectors 

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

http://dl.iteye.com/upload/attachment/584069/7bea4c8a-a3d4-342c-b3d8-0591b33252ea.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


21. Style Twitter posts on your site with CSS3 

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

http://dl.iteye.com/upload/attachment/584071/694fe0fd-d15a-37d8-a554-1cc46d1e0aac.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


22. CSS3 Image Styles 

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

http://dl.iteye.com/upload/attachment/584073/2f0cc25d-d3f6-314c-8f9d-3e1cb8501df4.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


23. The CSS3 Flexible Box model explained 

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

http://dl.iteye.com/upload/attachment/584075/d33cbb8b-8627-36ae-82bb-745f316a9424.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


24. Create a Stylish Contact Form with HTML5 & CSS3 

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

http://dl.iteye.com/upload/attachment/584077/049bbf04-1e05-39e4-9717-b055893663f0.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


25. CSS3 @font-face Design Guide 

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

http://dl.iteye.com/upload/attachment/584079/564270a9-7df1-36bc-97c3-1f5973d4fa33.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


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

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

http://dl.iteye.com/upload/attachment/584081/7d7ab96b-4b5f-3bf2-8772-4df84af629e0.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


27. How To Create a Stylish Button Entirely with CSS3 

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

http://dl.iteye.com/upload/attachment/584083/5cb28154-2f2d-382a-8561-14341699029e.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


28. Tutorial: Case Study with Html5 + CSS3 

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

http://dl.iteye.com/upload/attachment/584085/783adbf7-e7c4-3432-a93f-cca78b46a86c.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


29. CSS3 Transforms, Transitions, and Animations in Action 

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

http://dl.iteye.com/upload/attachment/584087/2af14def-fec8-37b5-9662-a1e2324c2331.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


30. Designing with CSS3 Support & Alternative Fallbacks 

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

http://dl.iteye.com/upload/attachment/584089/f5135f95-238b-3c7d-8159-8aa4bda1210a.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


31. CSS3 Buttons Tutorial 

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

http://dl.iteye.com/upload/attachment/584091/7f1834c0-af35-3a9f-b7ea-1cb99cad943b.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


32. Pure CSS3 Speech Bubbles 

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

http://dl.iteye.com/upload/attachment/584093/2c06b64b-81ba-3ad6-a254-01f4bbb50bf2.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


33. CSS3 Flexible Box Layout Explained 

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

http://dl.iteye.com/upload/attachment/584095/60dfe8e2-eee7-37a4-bda4-dcc46b47843b.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


34. Using CSS3 Transform 

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

http://dl.iteye.com/upload/attachment/584097/c2691aaa-2835-32b8-aa13-90adfbb2114b.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


35. CSS3 Text Shadow Tutorial (simple) 

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

http://dl.iteye.com/upload/attachment/584099/e104a429-10c3-3e4b-b95e-92e87286b084.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


36. CSS3 Typography Tutorial 

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

http://dl.iteye.com/upload/attachment/584101/d66f62f4-109f-37bf-ae1c-be38acbf319c.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


37. Drop Shadows in CSS3 

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

http://dl.iteye.com/upload/attachment/584103/de785f04-55c0-3a16-967b-b1e006215963.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


38. Tutorial – CSS3 Buttons with no images 

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

http://dl.iteye.com/upload/attachment/584105/04b33cc3-da63-3675-9b6d-4e9635f6c75a.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


39. Having Fun With CSS3: Spinning Newspapers 

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

http://dl.iteye.com/upload/attachment/584107/77c99fa0-263b-3751-b60d-176a35e2b859.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


40.CSS3 Transitions Tutorial 

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

http://dl.iteye.com/upload/attachment/584109/5d72b7ec-8841-3899-b1dc-faf0822898e1.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


41. Creating a PHP and CSS3 Powered About Page 

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

http://dl.iteye.com/upload/attachment/584111/d78bdb09-8146-3fcb-813a-ef4853cb0416.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


42. Making a CSS3 Animated Menu 

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

http://dl.iteye.com/upload/attachment/584113/38965244-53fc-399c-84f8-b52a194b29ea.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


43. Photobooth with PHP, jQuery and CSS3 

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

http://dl.iteye.com/upload/attachment/584115/3d54a72c-c927-30d1-9428-e28eca739d8e.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


44. postcard from Paris – css3 keyframes animations in use 

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

http://dl.iteye.com/upload/attachment/584117/d48cd35a-d300-355d-981a-71a8ea0827e1.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


45. create a unique contact form with css3 transitions 

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

http://dl.iteye.com/upload/attachment/584119/0007b69c-aaf0-38e8-a799-2a70e25f25ce.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


46. CSS Custom Fonts Tutorial 

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

http://dl.iteye.com/upload/attachment/584121/cde155ac-590b-38f4-971f-604167cd5f36.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


47. CSS3 Transition Animations With jQuery Fallbacks 

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

http://dl.iteye.com/upload/attachment/584123/2dce6d1f-26f3-379c-88fc-43882cd0adc5.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


48. How to Create Link Tooltips Using CSS3 and JQuery 

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

http://dl.iteye.com/upload/attachment/584125/4ca80223-23c0-3967-9d62-3c7aa02aab0a.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


49. Google Plus Style Animations with Jquery and CSS3 

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

http://dl.iteye.com/upload/attachment/584127/85008a79-a1ed-3231-b9ec-36bc8a80bbd4.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />


50. Creating a css3 and jQuery photoflip 

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

http://dl.iteye.com/upload/attachment/584129/9e991e8b-0d6a-38b0-88d4-8e2207f784eb.jpg个最佳 CSS3 教程大放送" TITLE="50 个最佳 CSS3 教程大放送" />

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有