CSS
25个令人惊奇的CSS3实验和例子
CSS3为设计师和开发者打开一片新天地。以前需要用到图片，JavaScript或者Flash的地方，现在能用CSS来实现了。不幸的是，现在主流浏览器不支持CSS3，这些开发只能当作实验或学习。不过，如果你有兴趣了解CSS3的强大，下面例子值得一看。 文中我们列举了来自不同设计师/开发者25个CSS3的实验或例子。有一些比较实用，所有的例子都展现了CSS3的功能和创新之处。 Pure CSS Social Media Icons Apple’s Navigation Bar Using Only CSS Easily Turn Your Images into Polaroids with CSS3 Recreating the OS X Dock Use CSS3 to Create a Dynamic Stack of Index Cards CSS Posters CSS3 Background-Clip & @Font-Face CSS3 Button Maker Create a Vibrant Digital Poster Design with CSS3 Experiment: Realistic [...]
纯粹CSS制作图片滑动栏
之前翻译过用jQuery制作的精彩图片滑动栏的文章，又曾利用ul和页内锚点制作过水平滚动的网页。前几天突然想，为什么不也用ul和页内锚点来制作图片滑动栏呢？用js和 jQuery制作的图片滑动栏的效果虽然很漂亮，不过对SEO不友好，而且不同浏览器，不同平台对它们的支持也不一致。纯粹用css和html制作图片滑 动栏在这些方面是有好的表现的。 效果：样例（点击可见），下载样例 制作思路如图： 具体制作步骤： 1.搭建好框架 <body> <div id=”box”> <div id=”slider”> <ul id=”image-text-div”> <li id=”a4″ name=”a4″>滑动栏的内容：可只是图片也可图文并存</li> <li id=”a4″ name=”a4″>滑动栏的内容：可只是图片也可图文并存</li> <li id=”a4″ name=”a4″>滑动栏的内容：可只是图片也可图文并存</li> <li id=”a4″ name=”a4″>滑动栏的内容：可只是图片也可图文并存</li> </ul> </div> <ul id=”button”> <li><a href=”#a1″>1</a></li> <li><a href=”#a2″>2</a></li> <li><a href=”#a3″>3</a></li> <li><a href=”#a4″>4</a></li> </ul> </div> </body> 2.添加细节。“滑动栏的内容”加上具体的图片与文字。还有添加一些样式以控制显示效果。我在“滑动栏的内容”中加的是: <img src=”image/css-slider.jpg” /> <div> <h2>纯粹CSS图片滑动栏</h2> <p>这里是滑动栏的文字区域。主要是为了说明左边图片，摘要而已，字数不需多，重点突出即可。 此滑动栏用到HTML和CSS。</p> </div> 3.添加样式 *{ margin:0; padding:0;} body{ [...]
09年国外最佳CSS设计网站
这篇文章（原文地址）来自著名的Web Design Wall， 更多09年国外最佳的文章请看我们翻译的WDL评选出来的09年国外最佳系列。 自从2007年以来，每年我都会提及来自Best Web Gallery（best web design是一个著名的国外优秀网页设计作品收藏资源的网站）的最佳CSS设计网站（查看07与08年 的）。今年这个时刻又来到–2009年最佳CSS设计。这次我筛选另外50个设计精彩的网站。在这个名单中，我发现很多有很多采用漂亮的衬线字体简洁风格的网站。那种杂乱和素描风格还是比较流行。不过，采用大幅背景图片就 不像在2008年那样热门了，2009取而代之的是纹理背景图片。 Sushi and Robots Bobulate A Way Back LegiStyles For a Beautiful Web Black Estate Cynosura Mark Dearman iA Trent Walton Area 17 Nosotros Atebits Square Space Gap Medics Fringe Typographica Book Cover Archive Search Inside Video Red Nose Day Carsonified Fajne Chlopaki Devia Mail [...]