<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>纯css制作面包屑，兼容IE6</title> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";} /* demo */ .demo{width:600px;margin:100px auto;background:#f0f0f0;position:relative;} .demo ul{height:32px;overflow:hidden;} .demo li{float:left;width:200px;text-align:center;position:relative;z-index:2;font-weight:bold;font-size:14px;line-height:32px;} .demo li em{position:absolute;right:-24px;top:-8px;width:0;height:0;line-height:0;border-width:24px 0 24px 24px;border-color:transparent transparent transparent #fff;border-style:dashed dashed dashed solid;} .demo li i{position:absolute;right:-16px;top:0;width:0;height:0;line-height:0;border-width:16px 0 16px 16px;border-color:transparent transparent transparent #f0f0f0;border-style:dashed dashed dashed solid;} .demo li.current{background:#f60;color:#fff;z-index:1;} .demo li.current i{border-color:transparent transparent transparent #f60;} </style> </head> <body> <div class="demo"> <ul class="clearfix"> <li>面包屑一<em></em><i></i></li> <li class="current">面包屑二<em></em><i></i></li> <li>面包屑二<em></em><i></i></li> </ul> </div> </body> </html>
View Details#1: Flat login design for mobile by Calvin Smith 色彩非常棒，用于移动应用的平面登录界面设计，简单、漂亮。 #2: Transparent flat login screen by Rich Smith 你肯定不能再对这个界面做任何简化了，使用了全屏设计方案，让整个登录界面更加时髦。 #3: Flat login design on Behance 非常平滑的设计 #4: Flat login screen by cssflow 我喜欢该界面顶部那个彩虹条 #5: Flat login page with cool background color 使用合适的全屏背景色来突出登录表单，看起来很新鲜。 #6: Use of photos in flat login design 另外一个趋势是使用圆形的图片 #7: Retro flat login design by Marina Belova 尽管我不太喜欢其背景色掉，但仍不失为好的登录界面设计案例 #8: Animated flat login design by CHI-YI CHAO 这里的动画被应用和功能很好。在其正常状态,登录名和密码框是灰色的。一旦你开始输入就会变成白色，这是静态平面设计好方法。 #9: Horizontal flat login design by Nicholas Bittencourt 该设计非常独特，使用水平方式呈现，还包括流行的圆形图片。 #10: Elegant […]
View DetailsFlat UI Kit by Riki Tanone (free) Flat UI Kit (PSD) by Devin Schulz (free) Eerste UI Kit (free) Metro UI kit (free) Ui Kit by Abhimanyu Rana (free) Flat Ui Kit by Zachary VanDeHey (free) FREE flat UI kit by Visualcreative.cz (free) UI Kit (PSD) by Piotr Kwiatkowski (free) Vertical Infinity (free) Flat/UI Kit by Sebastiaan Scheer (free) Flat UI Kit by Jan Dvorak (free) Flat Design UI Concepts (free) UI/UX Kit (free) Flat Bold UI Kit by Simon Eramo (free) UI Kit by Huseyin Yilmaz (free) […]
View Details对设计和开发一个网站来说，web开发者不能低估了网站滚动效果的重要性。如今，设计者们都视为一大挑战了，在网站中设计出吸引眼球的高效视觉滚动效果。幸运的是有各种各样的jquery 滚动插件可供他们使用，有了这些插件，他们可以根据页面滚动的位置做出很多吸引眼球的效果，像背景变换、动画等等。 本文中我收集了20款可以帮你实现很绚效果的Jquery滚动插件。 有了下面的这些jQuery滚动插件，你可以随意的让网站中的任何元素滚动， 使网站变得更加绚丽、吸引眼球。 1. One Page scroll One Page Scroll，一个jQuery插件，简化了类似网站的创建。它需要很少的设置，只需要创建HTML结构，调用函数就可以了。 可选的，easing功能，它的速度和循环行为也可以设置。而且，它已经支持对每个页面SEO友好的URL。 2. Scrolld Scrolld.js是一个jQuery的独特开源插件。Scrolld.js提供了一种完美的高精度的布局方法，且使用实时更新的数据值生成导航。使用Scrolld.js滚动到项目将永远精准且将提供最好的用户体验。Scrolld.js是专门为支持响应式布局而设计的，可以将页面长导航变成一个简单的任务栏。Scrolld.js设计初衷是为能方便使用，并能够在几分钟内快速部署。 3. Animate Scroll AnimateScroll 是一个简单的jQuery插件,它用来为滚动增加延迟效果. 可以自定义滚动样式(30多种滚动效果)和滚动速度. 还有一个可以操纵"滚动结束位置"的"padding"选项. 这个插件不局限于整个页面,某个特定的包裹元素也可以作为其目标. 4. JInvertScroll jInvertScroll 是一个操纵默认滚动行为和强制水平滚动的jQuery插件.它通过onScroll回调函数简化了视察效果的创建,我们可以在onScroll回调函数中为任意元素增加动画效果.该插件很小,只有不到1KB大小,而且几乎不需要任何配置就可以工作. 为某个包裹元素添加一个特定的样式类然后调用一个JS方法就足够了. 5. Smint Smint 是一个帮助开发者在单页面风格的网站中创建导航. 它有两个主要的元素, 一个是不动的导航条,当你向下滚动页面的时候它会停留在页面的顶部,另一个是菜单按钮,当你点击的时候会自动将页面滚动到相应的区域. SMINT插件很简单,所以只有一个控制页面滚动速度的选项. 默认的速度是500毫秒 (半秒钟),但你可以将它设置为任意你喜欢的值. 下载的文件中包含一个demo,所以你可以轻松地将它作为你自己单页面网站的模板. 6. jQuery Arbitrary Anchor Plugin jQuery Arbitrary Anchor Plugin 允许页面滚动到页面中任意的基于jQuery/CSS选择器的对象上. 你可以通过在页面URL的#后面添加一个jQuery/CSS选择器来创建一个有用并且整洁的动态锚点滚动效果. 该插件继承了普通锚点的功能,也就是说,一个拥有名值属性的锚点标签仍然可以被正常地滚动到. 一个具有与锚点相同值的ID属性的元素也具有同样的效果. 这个小小的插件可以被应用到任何元素上. 7. ScrollUp ScrollUp 是一个轻量级的jQuery插件,它用来轻松实现自定义可以在任意网站使用的"滚动到顶部"效果.如果想创建一个可见的线条来帮助确定距离顶端的理想滚动距离,你需要为activeOverlay设置项制定一个有效的CSS颜色.ScrollUp可以通过CSS实现完全可定制,这使得它可以被很容易的应用到你的项目中. 只需要在你的CSS文件中scrollUp生成的ID设置你的样式即可. 它是基于MIT协议发布的. 8. jQuery Stick ‘em jQuery Stick ‘em 可以使内容在滚动的时候固定在某个点上.有时候,我们有一些很高的图片. 所以当你滚动到图片的底部之后,你将不得不滚回到描述你刚才看的图片的文字处. 解决办法就是当你滚动页面的时候把内容固定. 坑爹的是,我们不能仅仅把文字的位置设置为:fixed,一旦滚动到页面底部就玩完了.由于有时候页面上会有很多部分,我们不得不在某个点将内容"取消固定". 那么让我们来解决这个问题,jQuery Stick’em就能够实现该功能. 9. Infinity.js Infinity.js是用于web的表格视图UI库：它能够加速长列表的滚动并且保证你的无限的数据流畅和稳定。它体积小，久经测试而且性能很好。这是Github上最火的代码，并且以BSD协议分发。被注释的源代码作为演示Infinity关闭与开启是可用的。 Infinity.js是Airbnd公司开发的，除了流行许愿列表和朋友订阅部门，现在已经子啊日常的生产中使用。它只依赖于jQuery。 11. Mobiscroll Mobiscroll 是一个为移动设备(Android手机,iPhone,iPad,Galaxy Tab)准备的轮式滚动日期和时间的选择器.它可以被自定义来支持任意自定义的数值,也可以被用作对于本土选择控制的一个直观的替换. 它的样式是可以改变的. 12. Page Scroller Page Scroller 是一个基于JavaScript的强大的流畅滚动导航系统,它使用强大的jQuery库. 该插件可以在任何网站上轻松创建.你可以选择导航菜单的位置,也可以轻松地改变滚动速度.滚动插件需要依赖jQuery1.3以上的版本. 13. WayPoints Waypoints是一个比较小的jQuery框架，通过它可以轻松的在任何滚动元素滚动情况下执行函数。Waypoints可根据用户在页面滚动的位置生成一个比较稳定的流行UI模式。Waypoints遵循MIT和GPL双重协议。 据测试，在jQuery 1.4版本以上兼容IE6+, FF3+, Safari 4+, 和 […]
View Details如果你是一个网页设计师，那么你应该清楚字体在网页设计中的重要性，本文再向你推荐 20 个新鲜免费的字体。 God Bless America Astrolyte Beautiful ES Chocolate Dealer 20DB My special angel font Braxton free font G-Unit Rough Brush Script Eletroz Lainie Day Koch Antiqua Zier ALEX BRUSH FontPunk.com font Porter Sans Block Bumple Rolling Rocker Headline Text Frank-n-Plank Science Fair via djdesignerlab 转自：http://www.oschina.net/news/45512/20-fresh-new-free-fonts-designers
View Details线框图工具在网页和软件开发中扮演着重要的角色，它们帮助开发者和客户提供一个形象的可视网页页面。对你的网站有好性和简单导航操作也是非常的重要，尽管当你的网站内容多而杂的时候。网站一旦进入最后阶段，线框工具还可以帮你减少设计上的麻烦。 笔和纸在绘制初始线框图的时候非常好用，它能描绘出对网站的初步设计。但是，在后期的测试阶段，你需要一个先进的软件应用。这个应用应该支持版本管理和编辑，因此，这样可以削减在设计阶段中本身的缺陷。这里列出了十个流行线框图工具以及它们的费用: 给设计人员的10个极为有用又划算的线框图工具 PowerMockup—PowerPoint上的线框图附加工具 如果你想把Microsoft PowerPoint转换成一个线框图工具，这个附加工具将会相当有用。一个新的面板将会添加到PP窗口中，它使你可以使用展示在面板中的一些线框图元素和图标。可以通过拖拽把它加到幻灯片中。 PowerMockup和所有最新版的Microsoft Office兼容，包括Office 2013。你可以花费$60购买该线框图工具，供单用户使用。 Moqups—在线建模和线框图工具 如果你需要矢量线框图，这个在线HTML5应用应该是你的理想选择。它由罗马尼亚的软件工程师开发，供全世界的开发者免费使用。你甚至都不需要注册。最近，该团队开发了一个高级版的Moqups， 它是可选的，有不受限制的修订、主页、与工程师团队的在线协作以及其它一些有用的特性。 Wireframe.cc — 在线线框图工具(免费) Wireframe.cc是一款简单的工具，它没有那些乱七八糟的东西，你可以直接用鼠标在画布上随意作画。它会产生一个唯一的URL，可以共享。Wireframe.cc完全免费， 但是其高级版是收费的。 Axure RP—扩展线框图工具 它是最具综合性最包罗万象的一个工具之一，最低价是￥290。可以用来做任何事，包括开发复杂原型，说明文档和简单线框草图。它也有一些特定的高级特性，比如在客户端之间分享原型。这种设计方式使得它可以管理组员之间的讨论和反馈以及协作。 Balsamiq Mockups—基于Flash的快速线框工具 自从它在2008年被一名开发者开发出来之后，它在很短的时间内就流行开来。它是如此的流行，全世界已经有数以千计的开发者在使用它了。Balsamiq Mockups可以进行设计，看起来就像是在纸上画的草稿一样，而不像是机器制图。它和Flash兼容良好，并且已经成为Adobe Air Application。你可以用$80买到它。 Fluid UI—供Android, iOS, 和Windows App使用的在线原型设计工具 如果你在找一款给手机应用进行原型设计的工具，Fluid UI将是你的理想选择。它是基于web的工具，既可以用于创建高保真模型，也可以创建低保真的线框。它拥有供Windows 8, android和iOS应用使用的用户接口。针对单个项目，你可以获得一个账户，它提供最多10屏的绝对免费。如果你愿意付费，每月$30起。 Pencil—GUI原型设计工具(开源) Pencil是一款原型设计工具，而且是开源的。我们可以通过它来创建许多设计原型和GUI模型。它有一个巨大的待用图形商店，可以供Android, iOS和web应用来使用，用作通用设计元素和UI控制。 你可以在pencil网站上找到可供下载的工件， 访问许多模板集，都是由用户贡献的。它也给多个操作系统提供独立版本。 UXToolbox—Windows上的线框图工具 如果你在开发手机应用，桌面应用或者网络站点，UXToolbox使你可以创建交互性的原型设计和线框图。它的一个更有趣的特性是，你可以在草图线框图和规矩漂亮的线框图之间来回切换，只需要点击一下按钮。你可以轻松的把设计导出成HTML或XML。$240就可以买到。 Live Wires—iPad上的线框图App 它允许你进行原型设计并直接在iPad进行测试。它同时兼容iPhone和iPad应用。它有一个扩展库。它的收费低至$10。 Mockups.me—UI线框图应用 在特性方面，它和Balsamiq Mockups非常接近，但它要高一个等级因为它可以被用作Android和iOS的手写板。它也有一个内置的交流系统，可以用来收集评论和反馈。它的web版每年收费$100，而手持版仅售$20。 写在最后 所以，市面上有许多线框图工具，可以根据你的需求来选择。这些工具有免费的也有收费的。多数时候，只有高级版才收费，而试用版是免费的。 转自：http://www.oschina.net/translate/10-extremely-useful-and-cost-effective-wireframe-tools-for-designers
View Details根据维客的介绍，级联样式表（CSS）是用于描述以标记语言书写的文档外观显示（外观和格式）的样式表语言。最常见的应用是样式化HTML或者XHTML格式的web页面，不过这种语言也可以在任何一种XML文档中使用，包括纯XML文档，SVG和XUL文档。 互联网上有大量的CSS工具可用，不过寻找一个有用的CSS工具是一项费时费力的任务。为了节省你宝贵的时间，我们为开发者收集了5个最新的、易用的CSS工具，这样可以简化开发者的开发任务、省去很多麻烦。 几点人 翻译于 昨天(8:59) 0人顶 顶 翻译的不错哦! 1. Animo.js Animo.js是一个强大的用来管理CSS动画的小工具。它带有很多特性，如Stack animations, 创建跨浏览器模糊滤镜，在动画完成时设置回调。Animo 包括了迷人的 animate.css 库文件，它是由Dan Eden编写的。它提供了将近60种漂亮的动画。 他同时给库文件添加了一些助理动画。 源码 徐继开 翻译于 昨天(8:33) 0人顶 顶 翻译的不错哦! 2. 方便的 CSS3 动画 Cheat Sheet CSS3 Animation Cheat Sheet 是一款已预设并可直接使用的网站动画特效库。你只要把CSS导入现有项目中并直接调用内嵌的CSS类来修饰你的页面元素。 CSS3 Animation Cheat Sheet是基于CSS3 @keyframes 规则的并且支持所有最新的浏览器(如果算IE这个非标浏览器的在内的话我说的是IE10)。 通过CSS3 @keyframes规则你不需要担心元素每一帧的位置，CSS3会自动完成。 来源 TOTOTO_TOTO 翻译于 昨天(11:11) 0人顶 顶 翻译的不错哦! 3. 创建CSS3 创建CSS3罗列出每个元素的属性，并且允许我们对每个元素重新定义，以及即刻显示预览效果。你可以给同一个元素添加许多属性规则，同时还可以修改生成的CSS代码。 创建CSS源代码在这儿。 几点人 翻译于 昨天(9:07) 0人顶 顶 翻译的不错哦! 4. Salvattore 现在有很多种用于解决瀑布流式的多列动态的布局方案，Salvattore 是另外一个好的解决方案，它与其他方案有一个重要的不同之处，它只需要使用css去配置，而不用配置javaScript脚本。它也是一个使用javascript编写的解决方案，但不需要依赖任何的框架。 源文件在此 凌培勇 翻译于 昨天(11:09) 0人顶 顶 翻译的不错哦! 其它翻译版本(1) 5. nthChild :nth-child，一个通过公式来选择元素的强大的css选择器，在样式化布局里有很大的应用。如果你没有使用这个选择器的经验，nthMaster，一个专注于这个选择器的网站，将会对你有很大的帮助。nthMaster提供了多种多样的:nth-child使用场景，简单，形象，并有一些基本的描述。它包含了获取 特殊的元素，范围内，范围外，:nth-of-type的使用等等 Source 转自：http://www.oschina.net/translate/5-fresh-handy-css-tools-for-develoepers
View Details当你有一个新的产品或者一个新的功能即将上线时，你希望有一个页面来告知用户此事，怎么设计这样的页面呢？本文提供40个免费的 Coming Soon 页面模板供你参考。 HTML5 Coming Soon Template Simple Coming Soon Page HTML Elegant Clean Under Construction Page Coming Soon Page Template Website Under Construction Template LaunchTime WordPress Theme Launch Pad – Full Screen Image Under Construction Coming Soon Launching Soon – Under Construction Page Prepare for Launch – Under Construction Page Easy Coming Soon with Pie Chart, 10 colors + Bonus Soon Coming Soon Under Construction 01 2 Skins Under Construction Page w/ AJAX contact form Minimal Coming Soon MoonLight > Responsive coming soon Page Fleepy Under […]
View DetailsACME Secret Agent Burrito Walter Angry Birds Gretoon Mucho Macho Altamonte Arcanum Fighting Spirit akaHoggle Cactus Sandwich National Cartoon Sound Heart Yahoo Mickey The Mocking Bird JF Rock Cosmic Dude Harry P Earth Kid via djdesignerlab 转自：http://www.oschina.net/news/43923/20-beautiful-free-cartoon-fonts
View Details设计师们每天的工作经常要用到各种模板，本文推荐 20 个新的免费 PSD 模板，可节省设计时间。 Blueprint Notice PSD Wooden Drawer Icon Minimal Clock Icon Retro Business Card Poster fence GREEN RATTAN PLANTS SKETCHPAD Twitter Nav UI USB Key PSD CS6 Glowing Login PSD Panel iphone 5 Playstation 2 Handle Dashboard UI Elements PSD Freebie Elegant Metallic Logo Mockup (PSD) WordPress login psd Login & Register Form Flat Icons White UI Kit Soft Leather Buttons Contemporary Nav Bar Buttons PSDs via djdesignerlab 转自：http://www.oschina.net/news/43594/20-new-useful-free-psd-templates-for-designers
View Details