Web设计者必须掌握的25个CSS效果

Today we have part 4 of our series on handy code snippets where weround up CSS, html and Ajax techniques, these are usefull resources forweb designers so get them bookmarked! If you missed them, also checkout part one , part two and part three.


Simple Accessible ‘More’ Links - “There is this information that we are hiding. But why not show that hidden information when the user is hovering the link?”

153.jpg


10 Tips for an easier CSS Life- As with most things, a logical and structured approach is the bestway to go. Therefore I have put together 10 quick tips (in no specialorder) to help make your CSS coding as pain-free as possible

163.jpg


CSS Gallery Layout- Setting up a gallery layout is not exactly one of the jobs I amlooking forward to doing. I assume you all are using lists by now tolay out thumbnail galleries, right?

183.jpg


CSS Alert Box- In various places around the net you may have seen alert boxes which,as far as I can tell, owe their origins to the K2 template for WordPress

232.jpg


CSS Tab Designer- CSS Tab Designer is a unique and easy to use software to help youdesign css-based lists and tabs visually and without any programmingknowledge required 33.jpg Mini Slide Navigation - Sliding nav bar using javascript for the slide effect

43.jpg


Centered Tabs with CSS - What if we need a bit more flexibility? What if we need to place our navigation in the center?

133.jpg


Multi Column Layout - We all know the problems that arise when we try to build multi-column layouts in which the columns are of equal height

53.jpg


CSS Shorthand Properties- One of the many great possibilities in CSS is the use of shorthandproperties. It lets you specify several properties by using only one

63.jpg


10 CSS tricks you may not know - 10 Handy tips

74.jpg


Snook’s Resizable Underlines- The aim is to apply underlines to paragraph text that stretch thewhole width of the column (without using justified text), regardless ofthe lengths of the paragraph text itself

243.jpg


Layout-O-Matic - Create layouts of your choosing with this online tool

83.jpg


List-O-Matic - Create navigation bars from lists using this online tool

93.jpg


CSS Vista - Edit CSS and see the results live in Firefox and Internet Explorer simultaneously

103.jpg


Image Floats with the text wrap- How many times do you have an image floated left in a block ofcontent, but want to keep that content from wrapping around your image?

116.jpg


Web Standards Checklist - A list to run through before you launch a standards compliant website

173.jpg


Future Proof your CSS with conditional comments - Conditional comments in your style sheets

193.jpg


CSS Star Ratings - Another handy piece of css and html for rating stars

115.jpg


CSS Typography- You don’t often see “CSS” and “typography” used in the samesentence—and for good reason. Traditional typography is a very subtleand beautiful form of design, with thousands of variations and choices

214.jpg


Zoom Zoom Zoom - Let the user change the size of the text

222.jpg


Sliding Doors box with rounded corners- The goal of the exercise was to create rounded-corner boxes withvisual flare and the absolute minimal amount of semantically correctmarkup

202.jpg


Changing Man Layout - A liquid three column layout which featured two flexible outer columns and a fixed width centre column

123.jpg


Switch McLayout - CSS-basedliquid layout has proven successful during the reign of 800-pixel to1024-pixel screens, but as we use a wider range of devices to accessthe web, we need more powerful and flexible ways of managing layout

252.jpg


Styling Form Controls- A question that is frequently asked in forums like the css-discussmailing list is how to style form controls in a consistent way acrossplatforms

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值