50 个最佳 CSS3 教程大放送
admin 13年前
本文收集了2011年最热门的50个 CSS3 教程，读者可根据这些教程轻松实现网页的设计。 <p><strong>1. <a href="/misc/goto?guid=4958199239044009624" target="_blank">Original Hover Effects with CSS3</a></strong></p> <p>本教程讲述应用 CSS3 实现风格迥异的鼠标悬停效果。</p> <p style="text-align:center;"><img height="268" alt="" src="https://simg.open-open.com/show/adae4d2e0ec18fa72c7e19555fcdff0e.jpg" width="500" /></p> <p><strong>2. <a href="/misc/goto?guid=4958200716381710380" target="_blank">CSS3 Transitions Without Using :hover</a></strong></p> <p>本教程讲述应用 CSS3 实现动态变换效果。</p> <p style="text-align:center;"><img height="275" alt="" src="https://simg.open-open.com/show/8b799079d097170895abc4fec214c681.jpg" width="500" /></p> <p><strong>3. <a href="/misc/goto?guid=4958199235354973920" target="_blank">How to Create a Beautiful Icon with CSS3</a></strong></p> <p>本教程讲述应用 CSS3 创建文档图标。</p> <p style="text-align:center;"><img height="298" alt="" src="https://simg.open-open.com/show/db43f1331e543c1b1f73ec3cfdf6c85f.jpg" width="500" /></p> <p><strong>4. <a href="/misc/goto?guid=4958199242652802516" target="_blank">Creative CSS3 Animation Menus</a></strong></p> <p>本教程讲述应用 CSS3 巧妙地将图标、主标题和二级标题整合成动态导航菜单。</p> <p style="text-align:center;"><img height="269" alt="" src="https://simg.open-open.com/show/0ff0855281810231bdcd3b188dc49297.jpg" width="500" /></p> <p><strong>5. <a href="/misc/goto?guid=4958200718482167549" target="_blank">Background-Clip in CSS3</a></strong></p> <p>本教程讲述应用 CSS3 的变形（transforms）、动态变换（transitions）和关键帧动画实现背景设计。</p> <p style="text-align:center;"><img height="237" alt="" src="https://simg.open-open.com/show/03d3b877f7a30fc3c9114a3cff911405.jpg" width="500" /></p> <p><strong>6. <a href="/misc/goto?guid=4958200719228102260" target="_blank">HTML5 logo using CSS3</a></strong></p> <p>本教程讲述应用 CSS3 设计 HTML 5 的 logo。</p> <p style="text-align:center;"><img height="239" alt="" src="https://simg.open-open.com/show/ddc3604f03bf7ef22e9349782f1a951d.jpg" width="500" /></p> <p><strong>7. <a href="/misc/goto?guid=4958200719957838391" target="_blank">CSS3 Progress Bars</a></strong></p> <p>本教程讲述应用 CSS3 设计进度条。</p> <p style="text-align:center;"><img height="224" alt="" src="https://simg.open-open.com/show/f69695ed96f2949aa740bb8a927f528f.jpg" width="500" /></p> <p><strong>8. <a href="/misc/goto?guid=4958200720694550214" target="_blank">Pure CSS (3) accordion</a></strong></p> <p>本教程讲述应用 CSS3 设计水平和垂直两种版本的折叠效果。</p> <p style="text-align:center;"><img height="295" alt="" src="https://simg.open-open.com/show/4424dd4b0a4242e771b98644616995fc.jpg" width="500" /></p> <p><strong>9. <a href="/misc/goto?guid=4958200721435456013" target="_blank">Awesome: 10 CSS3 box shadow experiments</a></strong></p> <p>本教程讲述应用 CSS3 创建方框阴影。</p> <p style="text-align:center;"><img height="316" alt="" src="https://simg.open-open.com/show/770b96c12d96acab1ccffaea76e5ee43.jpg" width="500" /></p> <p><strong>10. <a href="/misc/goto?guid=4958200722181505502" target="_blank">An Option to Mimic CSS3 Text Shadow in Internet Explorer</a></strong></p> <p>本教程讲述应用 CSS3 实现 <a href="/misc/goto?guid=4958200722919293791" target="_blank">MLB.com</a> 网站中的圆角、文字阴影等效果。</p> <p style="text-align:center;"><img height="325" alt="" src="https://simg.open-open.com/show/5af0dda062a8aa2b7a0322a1cabefbd2.jpg" width="500" /></p> <p><strong>11. <a href="/misc/goto?guid=4958200723647351529" target="_blank">The Apple.com navigation menu created using only CSS3</a></strong></p> <p>本教程讲述应用 CSS3 实现 Apple.com 网站顶部的灰色系导航菜单。</p> <p style="text-align:center;"><img height="211" alt="" src="https://simg.open-open.com/show/ffce015f5b8edf8948feb04fd5e6db39.jpg" width="500" /></p> <p><strong>12. <a href="/misc/goto?guid=4958199236845189228" target="_blank">Blur Menu with CSS3 Transitions</a></strong></p> <p>本教程讲述应用 CSS3 设计模糊菜单效果。</p> <p style="text-align:center;"><img height="270" alt="" src="https://simg.open-open.com/show/d8b828e62c335d795a743943f22e1f59.jpg" width="500" /></p> <p><strong>13. <a href="/misc/goto?guid=4958200725068911725" target="_blank">Rotating billboard using only CSS3</a></strong></p> <p>本教程讲述应用 CSS3 实现广告牌的动态变换（transitions）效果。</p> <p style="text-align:center;"><img height="217" alt="" src="https://simg.open-open.com/show/595d47580e310e77092211321cde6e65.jpg" width="500" /></p> <p><strong>14. <a href="/misc/goto?guid=4958200726018327006" target="_blank">CSS3 Linear Gradient Syntax Breakdown</a></strong></p> <p>本教程主要解析 CSS3 的线性渐变语法。</p> <p style="text-align:center;"><img height="286" alt="" src="https://simg.open-open.com/show/3cb53cf5f5ea4f3e9a6ac8efb0c5da61.jpg" width="500" /></p> <p><strong>15. <a href="/misc/goto?guid=4958200726769308511" target="_blank">Animated CSS3 helix using 3d transforms</a></strong></p> <p>本教程讲述应用 CSS3 实现3D 变形效果。</p> <p style="text-align:center;"><img height="239" alt="" src="https://simg.open-open.com/show/47ade31dd0c9fcb6e0cc7c7ee88ca38e.jpg" width="500" /></p> <p><strong>16. <a href="/misc/goto?guid=4958200727515905186" target="_blank">Circle Navigation Effect with CSS3</a></strong></p> <p>本教程讲述应用 CSS3 给导航添加鼠标悬停效果。</p> <p style="text-align:center;"><img height="269" alt="" src="https://simg.open-open.com/show/0172cb6f0de33684dd8062b99578ba4c.jpg" width="500" /></p> <p><strong>17. <a href="/misc/goto?guid=4958200728251444436" target="_blank">How to Build a Fully Functional CSS3-Only Content Slider</a></strong></p> <p>本教程讲述应用 CSS3 实现幻灯片切换效果。</p> <p style="text-align:center;"><img height="305" alt="" src="https://simg.open-open.com/show/4c41d54feea9165551e6240dc6590ba0.jpg" width="500" /></p> <p><strong>18. <a href="/misc/goto?guid=4958200729004890960" target="_blank">Fullscreen Image 3D Effect with CSS3 and jQuery</a></strong></p> <p>本教程讲述应用 CSS3 和 jQuery 实现图片的3D 旋转效果。</p> <p style="text-align:center;"><img height="270" alt="" src="https://simg.open-open.com/show/bf1d3e82975f85bc55f79490f98b1216.jpg" width="500" /></p> <p><strong>19. <a href="/misc/goto?guid=4958200729729407197" target="_blank">Create a 404 page with CSS3 animations</a></strong></p> <p>本教程讲述应用 CSS3 创建动画效果的404页面，作者是 Paravel 的创始人 Trent Walton。</p> <p style="text-align:center;"><img height="290" alt="" src="https://simg.open-open.com/show/5523bab3751eabec7c9b4665b8d27a04.jpg" width="500" /></p> <p><strong>20. <a href="/misc/goto?guid=4958200730481923834" target="_blank">Discover the power of CSS3 selectors</a></strong></p> <p>本教程讲述应用 CSS3 选择器细化图像。</p> <p style="text-align:center;"><img height="277" alt="" src="https://simg.open-open.com/show/49a42eeafe80f6252dbcf904eae40d04.jpg" width="500" /></p> <p><strong>21. <a href="/misc/goto?guid=4958200731227741672" target="_blank">Style 推ter posts on your site with CSS3</a></strong></p> <p>本教程讲述应用 CSS3 创建不同的 推ter 帖子样式。</p> <p style="text-align:center;"><img height="276" alt="" src="https://simg.open-open.com/show/0a8cdf317d68fbc6c2396988d546dac4.jpg" width="500" /></p> <p><strong>22. <a href="/misc/goto?guid=4958199236099223535" target="_blank">CSS3 Image Styles</a></strong></p> <p>本教程讲述应用 CSS3 给图片添加边框、阴影等效果。</p> <p style="text-align:center;"><img height="244" alt="" src="https://simg.open-open.com/show/8a7e1ced07b93e734fba0a79b338b2a4.jpg" width="500" /></p> <p><strong>23. <a href="/misc/goto?guid=4958200732637334156" target="_blank">The CSS3 Flexible Box model explained</a></strong></p> <p>本教程讲述应用 CSS3 的 Flexible Box 设计简单的网页。</p> <p style="text-align:center;"><img height="280" alt="" src="https://simg.open-open.com/show/77b71523bdc402b02a5186af1cb01890.jpg" width="500" /></p> <p><strong>24. <a href="/misc/goto?guid=4958183433132682899" target="_blank">Create a Stylish Contact Form with HTML5 & CSS3</a></strong></p> <p>本教程讲述应用 HTML5 和 CSS3 的新特性创建时尚的联系表单。</p> <p style="text-align:center;"><img height="332" alt="" src="https://simg.open-open.com/show/04524ddb5be72daa964ac295d40e3fec.jpg" width="500" /></p> <p><strong>25. <a href="/misc/goto?guid=4958200734040879980" target="_blank">CSS3 @font-face Design Guide</a></strong></p> <p>本教程讲述应用 CSS3 设计 Web 字体。</p> <p style="text-align:center;"><img height="296" alt="" src="https://simg.open-open.com/show/ec7c91e757213fdda97f680f531ab388.jpg" width="500" /></p> <p><strong>26. <a href="/misc/goto?guid=4958198981890589251" target="_blank">Create a Grid Based Web Design in HTML5 & CSS3</a></strong></p> <p>本教程逐步为你讲述应用 HTML5 和 CSS3 设计知名品牌眼镜官网。</p> <p style="text-align:center;"><img height="344" alt="" src="https://simg.open-open.com/show/6ce5c726c4dc18babca2c226e52f6a1c.jpg" width="500" /></p> <p><strong>27. <a href="/misc/goto?guid=4958200735461532497" target="_blank">How To Create a Stylish Button Entirely with CSS3</a></strong></p> <p>本教程讲述应用 CSS3 为网站创建一个简单的图形按钮，并实现渐变、阴影、边框和动态变换效果。</p> <p style="text-align:center;"><img height="296" alt="" src="https://simg.open-open.com/show/30d5c5cabc84b9d3b7fc94dc78a05618.jpg" width="500" /></p> <p><strong>28. <a href="/misc/goto?guid=4958200736204151797" target="_blank">Tutorial: Case Study with Html5 + CSS3</a></strong></p> <p>关于一个使用 HTML5 和 CSS3 的优秀个例的研究。</p> <p style="text-align:center;"><img height="262" alt="" src="https://simg.open-open.com/show/602fab69c098349f382657a99d021fec.jpg" width="500" /></p> <p><strong>29. <a href="/misc/goto?guid=4958200736943839293" target="_blank">CSS3 Transforms, Transitions, and Animations in Action</a></strong></p> <p>本教程讲述应用 CSS3 实现变形、过渡和动画切换效果。</p> <p style="text-align:center;"><img height="269" alt="" src="https://simg.open-open.com/show/a30004300e70e7339d5682263a74c6c5.jpg" width="500" /></p> <p><strong>30. <a href="/misc/goto?guid=4958200737677412464" target="_blank">Designing with CSS3 Support & Alternative Fallbacks</a></strong></p> <p>本教程讲述应用 CSS3 创建鼠标悬停动态文字效果。</p> <p style="text-align:center;"><img height="232" alt="" src="https://simg.open-open.com/show/e40ffcc9476ca2b0c689326497c98bde.jpg" width="500" /></p> <p><strong>31. <a href="/misc/goto?guid=4958200738426173813" target="_blank">CSS3 Buttons Tutorial</a></strong></p> <p>本教程讲述应用 CSS3 设计按钮。</p> <p style="text-align:center;"><img height="265" alt="" src="https://simg.open-open.com/show/82f212f4d7faae19e93b68a1782827a4.jpg" width="500" /></p> <p><strong>32. <a href="/misc/goto?guid=4958200739179206557" target="_blank">Pure CSS3 Speech Bubbles</a></strong></p> <p>本教程讲述应用 CSS3 创建提示框。</p> <p style="text-align:center;"><img height="233" alt="" src="https://simg.open-open.com/show/e01a189b8437601c3b0a53074ec42e87.jpg" width="500" /></p> <p><strong>33. <a href="/misc/goto?guid=4958200740135541632" target="_blank">CSS3 Flexible Box Layout Explained</a></strong></p> <p>本教程讲述应用 CSS3 实现灵活布局。</p> <p style="text-align:center;"><img height="235" alt="" src="https://simg.open-open.com/show/31512836dec608c1c72c71c63f699a43.jpg" width="500" /></p> <p><strong>34. <a href="/misc/goto?guid=4958200740899338251" target="_blank">Using CSS3 Transform</a></strong></p> <p>本教程讲述应用 CSS3 的变形、动态变换等实现动画效果。</p> <p style="text-align:center;"><img height="228" alt="" src="https://simg.open-open.com/show/efa256805183d15ec67d5cb504c09b3b.jpg" width="500" /></p> <p><strong>35. <a href="/misc/goto?guid=4958200741634675339" target="_blank">CSS3 Text Shadow Tutorial (simple)</a></strong></p> <p>本教程讲述应用 CSS3 的 text-shadow 轻松实现阴影效果。</p> <p style="text-align:center;"><img height="302" alt="" src="https://simg.open-open.com/show/a945b6cc8e01c367cc025e64848ee876.jpg" width="500" /></p> <p><strong>36. <a href="/misc/goto?guid=4958200742380405735" target="_blank">CSS3 Typography Tutorial</a></strong></p> <p>本教程讲述应用 CSS3 实现特殊的文字排版效果，使网页更加个性化。</p> <p style="text-align:center;"><img height="309" alt="" src="https://simg.open-open.com/show/cb219dccfabb76caa046a939c5505912.jpg" width="500" /></p> <p><strong>37. <a href="/misc/goto?guid=4958200743311404563" target="_blank">Drop Shadows in CSS3</a></strong></p> <p>本教程讲述应用 CSS3 为图片添加阴影。</p> <p style="text-align:center;"><img height="356" alt="" src="https://simg.open-open.com/show/d6a79390574d431b1e5ff4791b5d2eed.jpg" width="500" /></p> <p><strong>38. <a href="/misc/goto?guid=4958200744057403151" target="_blank">Tutorial – CSS3 Buttons with no images</a></strong></p> <p>本教程讲述应用 CSS3 无需图像设计按钮。</p> <p style="text-align:center;"><img height="176" alt="" src="https://simg.open-open.com/show/d4f52b127a7fadd591cb609e55a11888.jpg" width="500" /></p> <p><strong>39. <a href="/misc/goto?guid=4958184468847354558" target="_blank">Having Fun With CSS3: Spinning Newspapers</a></strong></p> <p>本教程讲述应用 CSS3 实现旋转报纸效果。</p> <p style="text-align:center;"><img height="272" alt="" src="https://simg.open-open.com/show/8e751482c0ae9a0745dcc9e0a42141b1.jpg" width="500" /></p> <p><strong>40. <a href="/misc/goto?guid=4958200745486835522" target="_blank">CSS3 Transitions Tutorial</a></strong></p> <p>本教程讲述应用 CSS3 和 HTML 实现转换效果，无需使用 JavaScript。</p> <p style="text-align:center;"><img height="235" alt="" src="https://simg.open-open.com/show/a512ca75bd746938c60dd86b7952355d.jpg" width="500" /></p> <p><strong>41. <a href="/misc/goto?guid=4958200746207259604" target="_blank">Creating a PHP and CSS3 Powered About Page</a></strong></p> <p>本教程讲述应用 PHP、HTML5和 CSS3 创建简单的网页。</p> <p style="text-align:center;"><img height="271" alt="" src="https://simg.open-open.com/show/867e52e33115fd66b19ccd07f2a95700.jpg" width="500" /></p> <p><strong>42. <a href="/misc/goto?guid=4958186704823976536" target="_blank">Making a CSS3 Animated Menu</a></strong></p> <p>本教程讲述应用 CSS3 设计动画导航菜单。</p> <p style="text-align:center;"><img height="243" alt="" src="https://simg.open-open.com/show/85c9f5756316d556353b2c64e1f56217.jpg" width="500" /></p> <p><strong>43. <a href="/misc/goto?guid=4958200747628173152" target="_blank">Photobooth with PHP, jQuery and CSS3</a></strong></p> <p>本教程讲述应用 PHP、jQuery 和 CSS3 创建照片集。</p> <p style="text-align:center;"><img height="271" alt="" src="https://simg.open-open.com/show/629a60493ca63cc3cc18ca438ea10485.jpg" width="500" /></p> <p><strong>44. <a href="/misc/goto?guid=4958199241922326508" target="_blank">postcard from Paris – css3 keyframes animations in use</a></strong></p> <p>本教程讲述 CSS3 关键帧动画的使用。</p> <p style="text-align:center;"><img height="300" alt="" src="https://simg.open-open.com/show/ae574a597e69881ea5d6264a171516b5.jpg" width="500" /></p> <p><strong>45. <a href="/misc/goto?guid=4958199244121957819" target="_blank">create a unique contact form with css3 transitions</a></strong></p> <p>本教程讲述应用 CSS3 实现动态信封效果。</p> <p style="text-align:center;"><img height="333" alt="" src="https://simg.open-open.com/show/65d2581b88a99f01d302318e1de179f1.jpg" width="500" /></p> <p><strong>46. <a href="/misc/goto?guid=4958200749705141071" target="_blank">CSS Custom Fonts Tutorial</a></strong></p> <p>本教程讲述应用 CSS3 创建自定义字体。</p> <p style="text-align:center;"><img height="239" alt="" src="https://simg.open-open.com/show/4cdbd6ec9875253d0b0d2fff343c0187.jpg" width="500" /></p> <p><strong>47. <a href="/misc/goto?guid=4958200750445615569" target="_blank">CSS3 Transition Animations With jQuery Fallbacks</a></strong></p> <p>本教程讲述应用 CSS3 和 jQuery 实现动画效果。</p> <p style="text-align:center;"><img height="256" alt="" src="https://simg.open-open.com/show/4b4136d31ec0204748b6275fcbcbcbf2.jpg" width="500" /></p> <p><strong>48. <a href="/misc/goto?guid=4958186148947600303" target="_blank">How to Create Link Tooltips Using CSS3 and JQuery</a></strong></p> <p>本教程讲述应用 CSS3 和 jQuery 设计超链接提示框。</p> <p style="text-align:center;"><img height="258" alt="" src="https://simg.open-open.com/show/700f396fe4c849d81d6f7c98ca7d92f1.jpg" width="500" /></p> <p><strong>49. <a href="/misc/goto?guid=4958186151771141909" target="_blank">Google Plus Style Animations with Jquery and CSS3</a></strong></p> <p>本教程讲述应用 jQuery 和 CSS3 实现旋转动画效果。</p> <p style="text-align:center;"><img height="334" alt="" src="https://simg.open-open.com/show/c892d156f0f6ed26aee79f90318a2730.jpg" width="500" /></p> <p><strong>50. <a href="/misc/goto?guid=4958200752553772898" target="_blank">Creating a css3 and jQuery photoflip</a></strong></p> <p>本教程讲述应用 CSS3 创建一个翻看照片效果。</p> <p style="text-align:center;"><img height="302" alt="" src="https://simg.open-open.com/show/8edfb682ffcf6206565ac7ad3ea99d1c.jpg" width="500" /></p> <p>Via <a href="/misc/goto?guid=4958200753496334340" target="_blank">webdesign14</a><br /> 来自: <a id="link_source2" href="/misc/goto?guid=4958200754259611289" target="_blank">http://www.iteye.com/news/23285</a> </p> <!--end: news_body -->