2012年7月11日星期三

50种强大的CSS技术

这是来自SmashingMagazine的又一个CSS相关资源收集文章,事实上,里面有一半多的技巧,帕兰在之前翻译Noupe的101个CSS技术高级应用教程(上)101个CSS技术高级应用教程(下)里面都已经介绍过了。 不过还是全部翻译一个,就当作是复习吧。

CSS技巧

1. Triadic Background Setting with CSS
利用三张背景图片来创造一种错觉上的3D效果,非常的酷. [via Wilson Miner]

css00 50种强大的CSS技术

2. Creative Use of PNG Transparency in Web Design
使用javascript和CSS技巧,让PNG透明图片能够IE7或其它一些较老的浏览器支持。

css02 50种强大的CSS技术

3. CSS Server-Side Pre-Processor

一个CSS幻灯片服务器的预处理器

css03 50种强大的CSS技术

4. Advanced CSS Menu

来自Nick.la创建的一个CSS菜单,帕兰看只要这样的CSS列表,基本都能收录到这个效果。

css32 50种强大的CSS技术

5. CSS SiteMap

非常直观的CSS网站地图,且利用错觉产生3D效果

css42 50种强大的CSS技术

6. Styling File Inputs with CSS and the DOM
对input区域的美化,简单实用,同时也证明一件事情: 一个好的网页设计要注重每一个细节。

css01 50种强大的CSS技术

7. A Savvy Approach to Copyright Messaging
Derek Powazek提出的利用一张图片和CSS结合,为你的风容添加一个强有力的版权声明信息。

css50 50种强大的CSS技术

8. Particletree Category List

一个漂亮的树型分类列表

css21 50种强大的CSS技术

9. Advanced CSS Menu Trick
高级的CSS菜单创建技巧,你可以学着创建出各种漂亮效果的CSS菜单

css60 50种强大的CSS技术

10. CSS hover effect

让所有html元素都能像<a>元素那样实现悬浮效果

css47 50种强大的CSS技术

11. Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table

创建一个动态亮高的表格,效果非常酷,类似于YOBO音乐播放器的那种效果。

css43 50种强大的CSS技术

12. A Stripe of List Style Inspiration
一个个性的CSS列表风格

list style 50种强大的CSS技术

13. Rediscovering the Button Element
css54 50种强大的CSS技术

14. Dynamic CSS With Variables
Geoffrey Grosenbach为你讲解如何整合CSS应用到 Ruby on Rails.

dynamic css 50种强大的CSS技术

15. Hyperlink Cues with Favicons
为每一外部链接显示一个醒目的图标,来提高链接的点击。

css62 50种强大的CSS技术

16. A CSS styled table version 2

又一个CSS风格的表格

css46 50种强大的CSS技术

17. CSS Step Menu
一步一步的设计之旅。而到底有多少要看你想要创建的东西的复杂程度。

css52 50种强大的CSS技术

18. Creating bulletproof graphic link buttons with CSS | 456 Berea Street

用CSS创建出超酷效果的点击按钮

css19 50种强大的CSS技术

19. Iconize Textlinks with CSS
给网站中不同的文档指定一个不同的图标。

css56 50种强大的CSS技术

20. Better Ordered Lists (Using Simple PHP and CSS)
创建一个有序列表的文章显示效果。

css51 50种强大的CSS技术

21. Circular Menu with CSS
介绍如何生成一个漂亮的圆形导航菜单

march 10 50种强大的CSS技术

22. CSS Dock Menu

CSS的Mac Dock 鱼眼菜单效果

css48 50种强大的CSS技术

23. Digg-like navigation bar using CSS
教你如何创建一个类似Digg顶部的CSS导航系统

digg 50种强大的CSS技术

24. 13个强大的Javascript 和 CSS菜单
包括13个高级的CSS菜单。

menu1 50种强大的CSS技术

25. CSS Pricing Matrix
一个CSS表格的延伸应用,你可以把它弄的尽可能漂亮和强大。

csspricingmatrix 50种强大的CSS技术

26. CSS List Expander
CSS和脚本结合生成的一个隐藏/显示控制列表。

css57 50种强大的CSS技术

27. How to create VISTA style toolbar with CSS
这个教程将会你如何利用CSS创建一个Vista风格的工具栏。

vista 50种强大的CSS技术

28. Fade Out Bottom
利用对一个层的CSS定位和一张背景图片,实现层的渐变淡化效果。

css59 50种强大的CSS技术

29. Scrollovers – A New Way of Linking
大家都熟悉悬停效果。这是一个基于CSS + JavaScript的技术的技术,它创造一个新鲜的模式。

css58 50种强大的CSS技术

30. How to Style an A to Z Index with CSS

如果利用CSS样式化A到Z字母

css35 50种强大的CSS技术

31. CSS List Boxes
用一个简单的无序清单生成列来,最终拿 来展示项目、产品或是服务。

listboxes 50种强大的CSS技术

32. How-to create a “Table of Contents” Navigation
531的一个简单教程,通过几条线,几个链接,让你的列表既简洁又美观。

toc 50种强大的CSS技术

33. CSS Recipe for Success

css12 50种强大的CSS技术

34. Partial Opacity

css33 50种强大的CSS技术

35. Simple Round CSS Links (Wii Buttons)

css25 50种强大的CSS技术

36. How to make sexy buttons with CSS

css26 50种强大的CSS技术

37. CSS Pull Quotes

css36 50种强大的CSS技术

38. Drop Shadow CSS

css55 50种强大的CSS技术

39. CSS Speech Bubbles
简单的自定义代码服务,所生成的代码严格符合 XHTML 1.0 标准 ,可以运行在大多数浏览器。

best of february 03 50种强大的CSS技术

40. CSS Double Lists

css37 50种强大的CSS技术

41. Perspective Text with CSS

css38 50种强大的CSS技术

42. Better Email Links: Featuring CSS Attribute Selectors
教程如何生成一个优秀的Email链接。其支持Internet Explorer 6 and 7.

bel 50种强大的CSS技术

43. CSS: Menu Descriptions
这个功能非常实用的,如果你想让用户访问和在你的网站上添加内容。

css61 50种强大的CSS技术

Further Techniques

44. CSS Transparency Settings for All Browsers

css11 50种强大的CSS技术

45. Time Sensitive CSS Switcher
CSS风格切换脚 本

46. Custom Reading Containers
aAmazing little script允计用重点主任何内容。

47. Eric Meyer’s CSS Reset

css27 50种强大的CSS技术

48. PNG Overlay
Create a transparent PNG overlay which can be used as a mask / frame around regular JPEG or GIF so users can upload photos without having to worry about using any graphics program to apply filters, plus it saves time.

49. Turning Lists into Trees

css29 50种强大的CSS技术

50. Create Resizable Images With CSS

css40 50种强大的CSS技术

来源于 50种强大的CSS技术 | 帕兰映像

没有评论:

发表评论