Skip to main content

[转]53 CSS-Techniques You Couldn’t Live Without

很漂亮

//原文
 53 CSS-Techniques You Couldn’t Live Without
53个CSS-不可或缺的技巧

QUOTE:
CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts - and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. Isn’t it great? Well, actualy, it is.

CSS是重要的，它正在越来越广泛的被运用。层叠样式表拥有很多表格布局所没有的优势，首先从布局或者页面的设计与出现在页面中的信息中作严格的分离，从而让页面的设计能够很容易被改变，仅用一个CSS文件更换另一个。难道它不够强大吗？恩，是的，其实它很强大。

QUOTE:
Over the last few years web-developers have written many articles about CSS and developed many useful techniques, which can save you a lot of time - of course, if you are able to find them in time. Below you’ll find a list of techniques we , as web-architects, really couldn’t live without. They are essential and they indeed make our life easier. Let’s take a look at 53 CSS-based techniques you should always have ready to hand if you develop web-sites.

在过去的几年里，网站开发者写了很多关于CSS的文章和开发了很多实用的技巧，这些能帮你节省很多时间。当然，如果你有足够时间也可能发现它们。在下面，你将会发现我们作为网站架构师真正不可或缺的技巧目录。它们确实是必要的，它们使我们的生活更简单。让我们看一看这53个基于CSS的技巧，如果你做网站开发，应该永远都愿意掌握它们。

QUOTE:
Thanks to all developers who contributed to accessible and usable css-based design over the last few years. We really appreciate it. Thanks!

感谢所有的在过去几年里在易用和可用的基于CSS设计方面作出贡献的开发者们，我们真的很感谢他们！谢谢你们！

1. CSS Based Navigation //基于CSS的导航



2. Navigation Matrix Reloaded //导航矩块翻转



3. CSS Tabs //CSS标签



4. CSS Bar Graphs //CSS条状图表



5. Collapsing Tables: An Example //压缩表格：一个实例



6. Adam’s Radio & Checkbox Customisation Method //亚当的单选框和复选框的用户化方法



7. CSS Image Replacement //CSS图像替代



8. CSS Shadows(CSS Shadows Roundup) //CSS阴影（CSS阴影综述）



9. CSS Rounded Corners Roundup (Nifty Corners) //CSS圆角综述（漂亮的拐角）



10. Drop Cap-Capital Letters with CSS //用CSS实现首字母下沉



11. Define Image Opacity with CSS //用CSS定义图像半透明



12. How to Create a Block Hover Effect for a List of Links //如何给链接列表创建鼠标悬停的区块效果



13. Pullquotes with CSS (Automatic Pullquotes with JavaScript and CSS) //用CSS实现引用（用JavaScript和CSS实现自动引用）



14. CSS Diagrams //CSS图表



15.CSS Curves //CSS曲线



16. Footer Stickallows for the footer of a Web page to appear either at the bottom of the browser window or the bottom of the Web page content – whichever is visually lowest.

页脚帖允许一个网站页面的页脚显示在在浏览器窗口的底部或者网站页面内容的底部中实际最底的一个。



17. CSS Image Map //CSS图像地图



18. CSS Image Pop-Up //CSS图像弹出



19.CSS Image Preloader //CSS图像预载



20. CSS Image Replacement for Buttons //CSS按钮的图片替换



21.Link Thumbnail //链接缩略图



22. CSS Map Pop //CSS地图提示



23. PHP-based CSS Style Switcher //基于PHP的CSS样式改变



24. CSS Unordered List Calender (CSS Styled Calender) //CSS无序列表日历（CSS设计的日历）



25. CSS-Based Forms: Techniques //基于CSS的表单：技巧



26. CSS-Based Tables: Techniques //基于CSS的表格：技巧



27. Printing Web-Documents and CSS //打印网站文档和CSS



28. Improved Links-Display for Print-Layouts with CSS //用CSS改良打印布局的链接显示



29. CSS-Submit Buttons //CSS提交按钮



30. CSS Teaser Box //CSS内容摘要盒子



31. CSS Tricks for Custom Bullets //对于定义式列表的CSS窍门



32. Ticked Off Links Reloaded //用记号标出翻转的链接



33. CSS Zooming //CSS缩放



34. Creating a Star Rater using CSS //用CSS创建星型评价



35. The ways to style visited Links //设计浏览过链接的方法



36. PDF, ZIP, DOC Links Labeling //PDF,ZIP,DOC链接的标注



37. Displaying Percentages with CSS //用CSS显示百分比



38. Image Floats without the Text Wrap //没有被正文包围的浮动图片



39. Let visitors decide, whether or not will they open link in a new window //让访问者决定，是否会在新窗口带开链接



40. Simple accessible external links //简单易用的外部链接



41. Zebra Table with JavaScript and CSS //用JavaScript和CSS实现多条纹的表格



42. Vertical Centering with CSS (Horizontal and Vertical Centering with CSS) //用CSS实现垂直居中（用CSS实现水平和垂直居中）



43. Unobtrusive Sidenotes //不引人注目的旁注



44. Image Caption with CSS (Styled Images with Caption) //用CSS实现图像说明（设计给图像加上说明）



45. Dynamic Piechart with CSS //用CSS实现动态饼图



46. Format Footnotes with CSS //用CSS实现布局脚注



47. Hierarchical Sitemap with CSS //用CSS实现分等级的网站地图



48. Snook’s Resizable Underlines //史鲁克的可改变大小的下划线



49. Switchy McLayout: An Adaptive Layout Technique //马克布局改变: 一个自适应布局的技巧



50. StyleMap: CSS+HTML Visual Sitemap //样式地图：CSS+HTML 形象化的网站地图



51. Custom Reading Width //自定义阅读宽度



52. CSS Alert Message //CSS提示信息



53. CSS Production Notes //CSS产品注释



Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1519839


Labels:

Comments

Post a Comment

Popular posts from this blog

Determine Perspective Lines With Off-page Vanishing Point

In perspective drawing, a vanishing point represents a group of parallel lines, in other words, a direction. For any point on the paper, if we want a line towards the same direction (in the 3d space), we simply draw a line through it and the vanishing point. But sometimes the vanishing point is too far away, such that it is outside the paper/canvas. In this example, we have a point P and two perspective lines L1 and L2. The vanishing point VP is naturally the intersection of L1 and L2. The task is to draw a line through P and VP, without having VP on the paper. I am aware of a few traditional solutions: 1. Use extra pieces of paper such that we can extend L1 and L2 until we see VP. 2. Draw everything in a smaller scale, such that we can see both P and VP on the paper. Draw the line and scale everything back. 3. Draw a perspective grid using the Brewer Method. #1 and #2 might be quite practical. #3 may not guarantee a solution, unless we can measure distances/p...
2 comments
Read More »

[转] UTF-8 and Unicode FAQ for Unix/Linux

这几天,这个东西把我搞得很头疼 而且这篇文章好像太大了,blogger自己的发布系统不能发 只好用mail了 //原文 http://www.cl.cam.ac.uk/~mgk25/unicode.html UTF-8 and Unicode FAQ for Unix/Linux by Markus Kuhn This text is a very comprehensive one-stop information resource on how you can use Unicode/UTF-8 on POSIX systems (Linux, Unix). You will find here both introductory information for every user, as well as detailed references for the experienced developer. Unicode has started to replace ASCII, ISO 8859 and EUC at all levels. It enables users to handle not only practically any script and language used on this planet, it also supports a comprehensive set of mathematical and technical symbols to simplify scientific information exchange. With the UTF-8 encoding, Unicode can be used in a convenient and backwards compatible way in environments that were designed entirely around ASCII, like Unix. UTF-8 is the way in which Unicode is used under Unix, Linux, and similar systems. It is now time to make sure that you are well familiar ...
Post a Comment
Read More »

Moving Items Along Bezier Curves with CSS Animation (Part 2: Time Warp)

This is a follow-up of my earlier article.  I realized that there is another way of achieving the same effect. This article has lots of nice examples and explanations, the basic idea is to make very simple @keyframe rules, usually just a linear movement, then use timing function to distort the time, such that the motion path becomes the desired curve. I'd like to call it the "time warp" hack. Demo See the Pen Interactive cubic Bezier curve + CSS animation by Lu Wang ( @coolwanglu ) on CodePen . How does it work? Recall that a cubic Bezier curve is defined by this formula : \[B(t) = (1-t)^3P_0+3(1-t)^2tP_1+3(1-t)t^2P_2+t^3P_3,\ 0 \le t \le 1.\] In the 2D case, \(B(t)\) has two coordinates, \(x(t)\) and \(y(t)\). Define \(x_i\) to the be x coordinate of \(P_i\), then we have: \[x(t) = (1-t)^3x_0+3(1-t)^2tx_1+3(1-t)t^2x_2+t^3x_3,\ 0 \le t \le 1.\] So, for our animated element, we want to make sure that the x coordiante (i.e. the "left" CSS property) is \(...
3 comments
Read More »