本篇文章搜集的内容不是很多，但是很实用的CSS用户界面工具包，你可以免费下载的ui工具包。 每个CSS UI工具包包含按钮、盒子、进度条、滑块、标签、通知、旋转木马、复选框、单选按钮、开关等。 点击图片进入下载页面。 CSS Inbox User Interface Drunken Parrot UI Kit Toolkit GET – S.. DONE Bootflat Amsterdam UI Kit – CSS INK &nb…
CSS滤镜（CSS filter）不少前端人员知道，但大多数的用法十分单一，用得最多的就是黑白应用，其实还有很多高级的应用，对设计师来说也需要知道的，以后对图片特效处理又多一种设计方案选择了。 今天主要和大家介绍 CSSgram 这个CSS滤镜特效库，作者为其创建出很多美丽的图像效果，并且这个CSS滤镜库是小于1KB，效果的实现方法主要使用 CSS filter 和 CSS Blen Mode（混合模式）来实现。 使用教程 STEP 1: 下载 CSSgram 样式库 下载地址：cssgram.min.css ST…
任何网页设计师都会告诉你，一个用户体验不错并且非常干净整洁的网站来说，留白是很重要的。 Repossi Valdama Sam Dallyn Stockholm Design Lab Your Local Studio StokkeAustad Make Directory NTN Ben Ashman Skidmore, Owings & Merrill Hatch Inc. iArk Borheh Michaelis Boyd Norquayco Tusk Freytag Anderson Scanad…
图标文件来自：http://tylerbrooksdesigns.com/projects/icon-font/ 附百度网盘地址： 链接：http://pan.baidu.com/s/1hqm7EGc 密码：w4mv
你的设计机构建立网站了么？点击这些漂亮的设计工作室站点寻找灵感吧！ BrightByte Studio nclud Digital Kitchen W&Co creanet Weightshift Nine Sixty Acumenium Stockholm Design Lab Dogstudio Hum Creative ustwo AQuest Studio Brave Huncwot b.a.-ba Folch Ghostly Ferns C100 ManvsMachine MamboMambo 2…
Dashel Icon Set (45 Icons, SVG, PSD, PNG) Blockie Icon Set (48 Icons, PSD) Material Design Icons with Bounds (250 Icons, Sketch) Boldo Icon Set (70 Icons, PSD & AI) icono Pure CSS Icon Set (130 icons, CSS) Evil Icons (60 Icons, SVG) Subway Icon Set for iOS…
免费字体 Ozneo Light Font. Dreamers Brush Font. Charlevoix Free Typeface. Lumberman Font. Relancer Display Font. Hack – Typeface Designed for Source Code. Free Wireframe Templates & UI Kits iOS 9 UI Kit (PSD) iOS 9 Keyboard Kit (Sketch) Nerdial App UI (PSD &am…
今天给大家带来的是45个优质的HTML5+CSS3网站模板免费下载 1. Vivid Photo: Free Photography Template Demo Download 2. Template for Web Design Studio Demo Download 3. Template for Spa Salon with jQuery Slider and Zoomer Effect Demo Download 4. HTML5 Charity Center Templat…
视差效果已经在经典的视频游戏中出现有很多年，但它现在成为了网页设计的主流趋势。这个很酷的效果是现在常见的网页滚动一部分。它使用多个背景，以看起来不同速度移动来创造深度的感觉（创建一个3d效应）和一个有趣的浏览体验。 术语来自“parallaxis”，意思是“改变”。近距离的物体比远处的物体时，在不同位置观察到的视差较大，所以视差滚动可用于确定距离。 我们收集了30例视差滚动效果的网站，呈献给大家惊人效果 Melanie F. 点击访问网站 The Boat 点击访问网站 Giampiero Bodino 点击访问网…
Slides – 是一个简单的，容易定制和风格化，的jQuery幻灯片插件。 Slides提供褪色或幻灯片过渡效果，图像淡入淡出，图像预压，自动生成分页，循环，自动播放的自定义等很多选项。 用Slides插件，你可以随机播放幻灯片，设定那一套您想要开始幻灯片。它附带充分的说明和示例。 DEMO地址：http://slidesjs.com/ 官网地址：http://slidesjs.com/ 下载地址：http://slidesjs.com/downloads/slides.zip 基本的HTML结构 …
随着移动平台浏览量的增长越来越多，网站为了适应移动平台的浏览体验，大部分响应式网页都喜欢采用汉堡包菜单这种形式来展示网站的导航，然而如果都是一种汉堡包菜单风格，那实在太没新意了，今天设计达人网小编为大家整理21个汉堡包导航案例，或许会给你带来些设计灵感哦！ 下面来自小编亲自录制的GIF，实际效果请点击“查看演示”链接，案例中，还有菜单的实现代码，前端开发工程师可以去学习他们实现方式，Enjoy! Hamburger Menu (with cheese) 查看演示 The ultimate hambur…
众所周知，我们总是依据封面来判断书的好坏，聪明的设计师会创造实用有吸引力的界面。潜在用户可能会被吸引，但如何一直黏住他们呢？ 要试着回答这个问题，所有一切都指向人本设计，其中用户是最主要的考量。以人为本：你的应用应该使用日常用语，包括情绪、口语，外观还要有一丝“诱惑力”。界面应当成为你的好朋友，时刻准备给出建议提升你的体验，让你会心一笑。 现在揭幕：是微交互在起作用。精确的说，这主要是界面附带的交互动画，使它更具表现力。优秀的动画能够： 表达状态并提供反馈 提升直接的操纵感 将操作结果可视化 在用户体验中，关键是你…
今天带给大家一篇自己翻译的文章，3个简单的hover动效效果，初次翻译有不对的地方大家多多见谅。 现代网络中，很多技术形式可以实现有趣的动效，但最简单优雅的通常是CSS，特别是新增加的CSS3。 过去，我们不得不依靠JavaScript实现动效，但由于跨浏览器支持CSS3不断地升级，现在我们可以不通过任何脚本实现。但是很悲催，仍然有浏览器（IE9以下）不支持CSS3，所有你需要一个旧版的浏览器或设置渐进性效果来解决兼容性问题。 今天我们来看一个炫酷的悬停效果--图片和文字标题的隐藏、显示切换动效。 如果你需要示例代…
做网站是系统工程。首页的内容要层次分明，导航要结构清晰，子页面要排版均衡，相对而言自由度稍高一点的，应该是404页面了。虽然404本身就是一个告知用户内容访问出错的错误代码，但是富有创意的设计师会充分利用机会，展现网站的独特气质；重视用户体验的设计师，则会充分考虑此刻用户的心情，竭尽全力引导用户去对的页面。 所以，404页面可以做的很简单，但也可以创意十足。今天的酷站推荐，就推荐50个创意爆棚的404页面，每个页面配以相应的技巧说明，希望能给你帮助。 01. 有趣的设计 这是一个有趣的404页面，用陨石坑来表现40…
CodePen 是一个在线的前端代码编辑和展示网站，能够编写代码并即时预览效果。你在上面可以在线分享自己的 Web 作品，也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果。 今天这篇文章为大家挑选了15个超炫的 CSS 动画效果的例子，这些 Demo 可以说都是艺术品。（为保证最佳的效果，请在 Chrome、Firefox 和 Safari 等现代浏览器中浏览） 1. JavaScript Mickey Watch Apple watch like Mickey watch …
我们将向大家展示下网页动画的现状地图，并收集了一些具有多变表现力的类库、框架和插件。 图1：网络动画地图 下图分为三个区域，第一部分是一些容易理解的动画类库，撇开已经达到期望的通用动画方法外，还从简单的方法和函数到时间控制都提供了大家所希望的工具。我 们从JavaScript类库中分离了用CSS3过渡的动画元素，也挑选出了能够和SVG，WebGL或者HTML5 Canvas相连接的动画类库。 图2：工具列表 第二部分是专为文档模型中像滚动动画，视差，CSS sprite，3…
是时候为网页设计师的来一组便捷的辅助工具了。日新月异的网页技术革新催生了大量的设计与开发工具，HTML5/CSS3几乎成了设网页设计师的必修课，而强大的JS也为网页提供了更多的可能性。尤其是HTML5，作为一门极为有用且实用的标记语言，它赋予网页设计师创造更优秀网页的可能。 这也是为什么，身为网页设计师的你需要不停地了解最新的技术趋势和新兴工具，这些全新的库、框架、插件和技术能让你的网页如虎添翼。 HTML5使得设计师和开发者在各个不同领域都比之前更强大了。快速，漂亮，安全，响应式，这些特性使使得设计师和开发者可以…
随着近些年CSS与CSS3的发展，有些东西我们可以纯用CSS去实现，取代那些需要使用背景图片的老技术。在这篇教程中，我们将创建扁平化的面包屑导航链接，不再需要使用之前流行的“推拉门式的背景图片”。 我们将面包屑链接设计成类似雪佛龙的样式，表达向下获取内容的意思。过去我们用背景图片实现这一效果，现在我们将在边框border属性的帮助下，纯用CSS实现相同的效果。 第一步 1 2 3 4 5 <div id="crumbs"> <ul> <li><a href="…
承接上文《玩转HTML5移动页面（动效篇）》，上次说的是让页面动起来的一些小技巧。 而页面动起来的根基是功能可用的页面，因此有必要分享一些优化细节的技巧和方向，熟悉掌握一些方法论还是会对页面开发大大提高效率的，并且也能防止疏忽缺漏。 ====前方高能==== （1） 动画雪碧图 涉及的动画十分多，用的元素也十分多，请务必使用雪碧图（Sprite）！ 网上的工具有一些可以帮助你生成雪碧图的工具，例如CssGaga，GoPng等等，自动化构建工具Grunt和Gulp也提供了相应插件。 特别地，如果单张雪碧图面积实在太大…
