10 2013 档案
摘要：长阴影（Long Shadow）概念来自于最新非常流行的扁平化设计（Flat Design）。扁平化设计趋势影响最大的是用户界面元素和图标，但它也开始蔓延到其他网页设计的其他部分。长阴影其实就是扩展了对象的投影，感觉是一种光线照射下的影子，通常采用角度为 45 度的投影，给对象添加了一份立体感。
阅读全文
摘要：在今天在移动 App 界面设计中，你可以看到不同创意类型的视觉效果。特别是在 Dribbble 上面，有有很多应用程序的 UI 概念设计，让你惊叹。当然，他们大多只是作为一个概念设计，可能永远也不会成为一个真正的应用程序。但如果你想获得灵感，那很有必要看看下面这些创意的折叠效果的移动应用程序界面设计。
阅读全文
摘要：RequireJS Optimizer 是 RequireJS 自带的前端优化工具，可以对 RequireJS 项目中的 JavaScript 代码使用 UglifyJS 或者 Closure Compiler 进行压缩合并，也可以对 CSS 文件进行压缩合并。这篇文章介绍RequireJS Optimizer 的使用和配置方法，帮助大家解决使用中碰到的问题。
阅读全文
摘要：
《Web 前端开发精华文章推荐》2013年第七期（总第十九期）和大家见面了。梦想天空博客关注 前端开发 技术，分享各种增强网站用户体验的 jQuery 插件，展示前沿的 HTML5 和 CSS3 技术应用，推荐优秀的 网页设计 案例，共享精美的设计素材和优秀的 Web 开发工具，希望这些精心整理的前端技术文章能够帮助到您。
阅读全文
《Web 前端开发精华文章推荐》2013年第七期（总第十九期）和大家见面了。梦想天空博客关注 前端开发 技术，分享各种增强网站用户体验的 jQuery 插件，展示前沿的 HTML5 和 CSS3 技术应用，推荐优秀的 网页设计 案例，共享精美的设计素材和优秀的 Web 开发工具，希望这些精心整理的前端技术文章能够帮助到您。
阅读全文
摘要：Offline.js 是一个在用户失去互联网连接的时候自动提醒用户的 JavaScript 库，类似 Gmail 中的效果。它能够捕捉到断网时的 AJAX 请求，在网络连接恢复的时候重新发送请求，这样您的应用程序能够完美的恢复使用。
阅读全文
摘要：大家都都知道，HTML5 具备所有最新的技术和功能，帮助我们创造平滑过渡，花式图像滑块和动画。如果你正在考虑使用HTML5 来设计自己的网站，那么这个集合能够帮助你。在过去的10年里，网页设计师使用 Flash、JavaScript 或其他难用的软件创建网站。但现在你可以前所未有的快速、轻松地设计或创造互动的、有趣好看的网站。
阅读全文
摘要：SVG 是一种很好的 Web 技术方案，可以用来创建互动，在任何大小的屏幕上都会很好看、与分辨率无关的矢量图形。而 Snap.svg 这个 JavaScript 可以让你像 jQuery 操作 DOM 一样操作 SVG 资源。Snap.svg 是专为现代浏览器打造，支持剪裁，遮罩，纹理，渐变，分组等功能。凭借丰富的动画库和易于的事件处理，Snap.svg 可以帮助你轻松实现 SVG 功能。
阅读全文
摘要：有时候，我们觉得，没有什么可以让我们快乐，我们甚至忘记了如何微笑。但是，当我们被一群乐观、欢乐的人包围的时候，他们从内心深处散发出来的欢迎一定会感染你。在这里，我与大家分享一组精美的表达人类情感的照片，真实地表达幸福。我希望你能得到照片中的那些人的态度，在你的生活中享受每一刻。
阅读全文
摘要：在这篇文章中，我们展示的是自由和清新的 UI 设计素材套件。这些线框图和 UI 设计工具包让设计师在设计用户界面原型的时候能够非常便利。 Web 用户界面，移动用户界面和线框套件对设计师很有用。所以，这些集合了一组免费的 Web 和移动用户界面，线框套件和资源供您使用。
阅读全文
摘要：我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活，只要你发挥创意就能实现很多比人想象不到的效果。今天这篇文章开始推出《百变 CSS 系列》，给大家带来 CSS 在网页中以及图形绘制中的使用。首先给大家打来的是流行的 CSS 三角形绘制方法。
阅读全文
摘要：我们经常给网站设计人员和开发人员分享有用的网站，工具和插件。今天的文章中，我们为大家带来了最近发布的 jQuery 插件，对于你即将到来的项目可能是真正有用的。这是10款最新流行的 jQuery 插件，值得你收藏。
阅读全文
摘要：我们看到越来越多的网页设计师意识到排版的重要性。现在有了 Typekit, Google Fonts, 和 Fontdeck 这些优秀的字体服务，如网页设计师设计创意类型比以往任何时候都有更多的自由。所以这篇文章中，我集合了一组鼓舞人心的网页版式设计作品展示给大家，希望你喜欢！
阅读全文
摘要：在这个集合中，我向大家分享一组精美抽象背景图片素材，可以免费下载。我们都知道，通过使用美观和瞩目的背景，可以创建出有绝对的吸引力的设计。这是设计师花费那么多的时间创建创造性网页背景的最主要的原因。在这里收集了24个精美的抽象背景图片素材，可以免费下载。
阅读全文
摘要：Responsive Elements 可以使任何元素来适应和应对他们所占据的区域。这是一个轻量的 JavaScript 库，你可以轻松嵌入到你的项目。元素会更具自己的宽度，自动响应和适应空间的增加或减少。您可以通过指定 data-respond 属性来明确哪些元素你想使用响应式。
阅读全文
摘要：网络上众多优秀的 Photoshop 实例教程是提高 Photoshop 技能的最佳学习途径。今天，我向大家分享25个新鲜出炉的 Photoshop 高级教程，提高你的设计技巧，制作时尚的图片效果。这些教程可以帮助把你的想法变成现实，并创造新的东西。
阅读全文
摘要：这篇文章与大家分享一批优秀的 Node.js 入门教程和学习资源。Node 是一个服务器端的 JavaScript 解释器，它将改变服务器应该如何工作的概念。它的目标是帮助程序员构建高度可伸缩的应用程序，编写能够处理数万条同时连接到一个（只有一个）物理机的连接代码。
阅读全文
摘要：十一月是属于秋的季节，大自然的颜色在这个特殊的时节神奇变化。进入秋季，太阳高度角渐低，温度渐降；秋风送爽、炎暑顿消、硕果满枝、田野金黄。这篇文章向大家分享一组精美的2013年11月桌面日历壁纸供大家免费下载。这些高清日历桌面壁纸都是精心挑选的，赶紧挑选一张为你的桌面换上吧。
阅读全文
摘要：在这篇文章中，你会看到一组充满创意的404错误页面设计。我希望这个集合能够启发和帮助你设计自己的 404 错误页面。一个自定义的404错误页面将鼓励用户在您的网站上停留更长的时间。404页面必须让访客容易理解，最好有有一些互动。你会看到下面的例子中一些网站在404页面中添加用户可以参与的小游戏，这是一种很好的设计方式。
阅读全文
摘要：在 Web 项目中，有时候我们需要根据程序运行的环境采取特定操作。Device.js 是一个很小的 JavaScript 库，它简化了编写和平台，操作系统或浏览器相关的条件 CSS 或 JavaScript 代码。
阅读全文
摘要：今天这篇文章收集了25套非常精美的 PSD 网页设计素材，你可以免费下载使用。设计师经常会去网上搜罗各种各样的素材，这些免费素材不仅能帮助他们节省大量的时间，而且能有很好的效果。非常感谢那些很有才华的设计师分享它们的劳动成果，让更多的人可以使用他们的创意设计。记得分享和推荐一下哦 :)
阅读全文
摘要：任何类型的文件（无论是否代码），我们可能要比较不同的版本，看发生了什么变化。 有些编辑器都有这个内置功能，其中一些则没有。 Mergely 是一个免费使用的 Web 应用程序，帮你你迅速作出文档的差异分析。
阅读全文
摘要：网页设计师努力寻找新的方式来展现内容。其中一个大的趋势是单页网站，现在被世界上的一些大的品牌广泛采用，使用它们来为用户提供一个快速，干净和简单的而且美丽的网站。下面是10个令人惊叹的单页 HTML5 的网站，涵盖了简约设计，简单导航和视差滚动的综合应用。
阅读全文
摘要：单页滚动网站已经被广泛使用了有一段时间了，它们对于快速提供信息是很有用的。One Page Scroll 是一个 jQuery 插件，简化了创建此类网站的步骤，只需创建 HTML 结构，进行简单设置，然后调用函数就可以了。
阅读全文
摘要：一个自定义的404错误页面将鼓励用户在您的网站上停留更长的时间。这种页面必须容易理解，友好（保持网站的整体感觉）以及有一些互动。你会看到下面的例子中，有的网站会在404页面中添加用户可以参与的小游戏。在这篇文章中，你会发现一些充满创意的404错误页面设计。我希望这个集合能够启发和帮助你设计自己的 404 错误页面。
阅读全文
摘要：Rainyday.js 是一个轻量的 JavaScript 库，利用 HTML5 Canvas 实现雨滴下落在玻璃表面的动画效果。Rainyday.js 尽可能的模拟现实的雨滴效果，几乎可以以假乱真了。赶紧来瞅瞅吧！
阅读全文
摘要：前端开发人员大都喜欢 Underscore，它的工具函数很实用，用法简单。这里给大家推荐另外一个功能更全面的 JavaScript 工具——Lo-Dash，帮助你更好的开发网站和 Web 应用程序。
阅读全文
摘要：这篇文章向设计师们分享30个实用的 Photoshop 动作下载。Photoshop的动作是用集合了许多步的操作的集合，使执行任务自动化，这为设计者在进行图像处理的操作上带来很多方便。同时用户还可以通过记录并保存一系列的操作来创建和使用动作，以方便日后可直接从动作面板中调出运用。
阅读全文
摘要：Wrangle 是一个响应式，触摸友好的选择插件，支持 jQuery 以及 Zepto。Wrangle 为多项选择提供了一个独特的方法：通过画一条贯穿项目的线条来选择项目。它给你的应用程序的一种新的方式进行多重选择：可以用鼠标、手指或手写笔。
阅读全文
摘要：在过去的10年里，网页设计师使用 Flash、JavaScript 或其他复杂的软件和技术来创建网站。但现在你可以前所未有的快速、轻松地设计或创造互动的、有趣好看的网站。如何创建？答案是 HTML5 。这篇文章向大家展示20个创新的 HTML5 网站。看看这些惊人的 HTML5 网站，从这些优秀的 HTML5 网站获取灵感并应用在自己的网站中。希望你会喜欢这个集合。
阅读全文
摘要：Flatic 是一个庞大的用户界面工具包，包含数以百计的网页元素，这将有助于你在 Photoshop 中轻松设计整个网站。成套的图标和动作都已包含在套件中。该素材包包括超过100个 PSD 元素。您可以通过在线预览查看所有的元素效果。
阅读全文
摘要：简历是很重要的，因为它可以使你成功应聘也同样可以让你面临失败。在今天的就业市场，招聘人员将更加注重求职者的潜力，而创意的简历要比简单的罗列职业精力有用很多。这单薄的一页纸比很多人都认为的更重要，因为简历设计是潜在雇主看到的你的第一个作品，如果他们没有留下深刻的印象，很可能是他们不会在意你的作品的其余部分。
阅读全文
摘要：选择正确的 JavaScript 框架，对于开发移动 Web 应用程序是至关重要的，也是移动应用程序开发的一项重要任务。开发人员可以使用框架实现的功能高效地达到他们的开发目标。这些预实现的组件采用优秀的设计模式和最佳实践，促进应用程序以标准化的方式开发。最重要的是，它让开人员在开发过程中得心应手。
阅读全文
摘要：对于视差滚动（Parallax Scrolling），关注网页设计的朋友都不会陌生。在网页设计中，视差滚动是一种很特别的网页设计技术，通过让多层背景以不同的速度或者不同的方向移动形成 3D 运动效果，有很强的视觉冲击力。 前阵子视差被用来提供一个漂浮在屏幕周围的元素，有很多的网站使用这种效果，有点势不可挡的趋势。
阅读全文
摘要：在这里，我们给大家分享一组精美的 PSD 源文件素材，可以免费下载使用。PSD 素材是很好的资源，对于每个设计师都非常有用，这是设计师之所以不断发布新的和有用的 PSD 文件的原因。高品质的 PSD 文件可以帮助设计师节省大量的时间，因为当一个设计师有相关的 PSD 文件，他不需要让设计从零做起。
阅读全文
摘要：Google Web Designer 可以帮助你创建引人入胜，互动的基于 HTML5 的设计和动画，可以在任何设备上运行。如果你喜欢自己动手，设计背后的所有的代码都是可以手工编辑的。虽然可视化工具是很有帮助的，但它永远不能代表你的创造力，想象力。这就是为什么你可以来回翻转设计“视图和”代码“视图，可以立即看到设计中所做的任何更改的都能在代码中体现。
阅读全文
摘要：Clank 是一个自由和开放源码的 HTML/CSS 框架，可以帮助你轻松创建本地手机或平板电脑应用程序的原型。它着重于提供一致的用户界面，不会刻意去模仿一个特定的 OS 。该框架是基于组件的，这样我们就可以选择和使用所需的部分，组件包括按钮，表格，滑块，切换等等。
阅读全文
摘要：如果您已经使用了 CSS 或前端框架，创建响应式布局应该不难。 然而，如果你刚涉足这类布局，Responsive Web CSS 可以帮助你快速上手。这是一个基于 Web 的工具，使任何人都可以通过拖放创建一个具有响应性的布局原型。你可以简单地添加任意数量的页面，DIV，定义百分比的宽度，也支持嵌套网格，还可以自动生成下载文件。
阅读全文
摘要：Dripicons 是一个好看的免费图标集，有超过 90 个扁平风格的图标，适用在 Web 应用程序中使用，如：箭头，媒体，图表等等。 集合多种矢量格式（PSD，AI，EPS，PDF，SVG），也可以作为网络字体。
阅读全文
摘要：Vim 是从 vi 发展出来的一个文本编辑器。代码补完、编译及错误跳转等方便编程的功能特别丰富，在程序员中被广泛使用。和 Emacs 并列成为类 Unix 系统用户最喜欢的编辑器。这里收录了130+程序员必备的 vim 命令，帮助你提高开发效率。
阅读全文
摘要：RulersGuides.js 是一个 JavaScript 库，在网页上添加类似 Photoshop 中的标尺和辅助网格线。要创建创建网格线线，请单击垂直或水平的标尺，然后推动就可以。还可以使用相应的热键打开/保存网格创建网格线。
阅读全文
摘要：WordPress 作为最流行的博客系统，插件众多，易于扩充功能。安装和使用都非常方便，而且有许多第三方开发的免费模板，安装方式简单易用。复古风格可以应用于任何东西，从服装到室内设计，那么复古风格的网页设计会是怎么样？这篇文章收集了27款最佳的复古风格 WordPress 主题分享给大家。
阅读全文
摘要：之前已经分享过一些帮助 Web 开发人员和设计师的 Chrome 扩展，这次我们继续展示一组很有用的 Chrome 应用程序。这些免费的 Chrome 应用程序可以简化您的工作流程，为了加快您的工作流程，从而快速帮助你提高你的工作效率。
阅读全文
摘要：扁平化设计对于印刷品设计、网页设计和移动操作系统的设计来都带去了新的变化。扁平化网页设计是指设计形式摒弃图案纹理背景，阴影文字以及网站盒模型的部分。谷歌是第一个使用扁平化设计准备对重构 Web 应用程序的公司，现在越来越多的公司正在效仿。这里收集了43个鼓舞人心的扁平化网页设计作品，值得网站开发人员借鉴。
阅读全文
摘要：Sublime Text 是程序员们公认的编码神奇，拥有漂亮的用户界面和强大的功能，例如代码缩略图，多重选择，快捷命令等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，即时项目切换，多选择，多窗口等等。更重要的是，Sublime Text 易于扩展，众多开发人员为其贡献插件，而且通过包管理工具——Package Control 可以方便安装和管理。
阅读全文
摘要：在这里，我们向大家呈现20个新鲜出炉的矢量的免费 PSD 素材。这些素材来自著名的设计社区——Dribbbl，这个网站的用户不断发布各种精美的用户界面，图标和网站布局，以帮助激励他人。这些免费素材不仅能帮助他们节省大量的时间，而且能有很好的效果。
阅读全文
摘要：来自谷歌的 Web Tracing Framework 是一组工具和脚本，用于 JavaScript 相关代码的性能分析。它是重 JavaScript 应用程序的理想选择，而 JavaScript 仅用于简单的交互的网页可能没有必要。有一个手动嵌入选项和一个 Chrome 扩展，用于获取内部浏览器的数据和处理这些数据的命令行工具。
阅读全文
摘要：HTML5 Canvas 元素给网页中的视觉展示带来了革命性的变化。Canvas 能够实现各种让人惊叹的视觉效果和高效的动画，在这以前是需要 Flash 支持或者 JavaScript 才能实现的。HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法，功能强大。今天这篇文章向大家展示9个让人难以置信的 HTML5 Canvas 应用演示。
阅读全文
摘要：Owl Carousel 是一个 jQuery 插件，使我们能够迅速地创建响应式传送带滑块。这个插件是触摸友好的，能与几乎任何的 HTML 内容兼容使用。另外，强大的选项设置支持分页/滑动速度，启用/禁用自动播放，显示子弹导航等等。
阅读全文
摘要：扁平化设计对于印刷品设计、网页设计和移动操作系统的设计来都带去了新的变化。扁平化网页设计是指设计形式摒弃图案纹理背景，阴影文字以及网站盒模型的部分。谷歌是第一个使用扁平化设计准备对重构 Web 应用程序的公司，现在越来越多的公司正在效仿。这里收集了43个鼓舞人心的扁平化网页设计作品，值得网站开发人员借鉴。
阅读全文
摘要：HTML(.js) 是一个轻量的（压缩后~2kb） JavaScript 库，简化了与 DOM 交互的方法。 这个 JavaScript 库的方法可读性很好，并具有搜索和遍历 DOM 的方法。相比 jQuery、YUI、MooTools 等 JavaScript 库已经有这样的功能，这个框架不包裹或隐藏原生 DOM，而是暴露和增强，而且非常轻量。
阅读全文
摘要：在网络上能找很多免费的 PSD 格式素材，但是很少有 HTML/CSS 界面组件下载。在这篇文章中，收集了14套免费的 HTML/CSS 界面源码分享给前端设计师和开发者们。这些组件包括按钮、滑块、表单、搜索栏、进度条等。
阅读全文
摘要：传统的涂鸦艺术家一般使用油漆来实现自己的作品，“街头艺术”包含了许多其他的媒体和技术，包括：LED艺术，马赛克瓷砖，壁画，模板艺术，贴纸艺术，街头雕塑，街道装置，视频投影等等。投影到大型城市建筑形式的涂鸦是一种新的媒体形式，越来越流行。
阅读全文
摘要：设计是不断发展的，你最近在访问 Dribbble 的时候，你会惊讶地看到许多设计师使用模糊背景来显示产品。今天这里收集了15套高品质的时尚纹理素材，可以免费下载使用。这些精美的纹理背景素材可以帮助你让设计项目更出众，赶紧来下载吧！
阅读全文
摘要：Keypress 是一个强大的 JavaScript 库，用于捕获键盘输入。这是一个有非常特殊的功能的输入捕获库，它是很容易掌握和使用，并且不依赖第三方库。在网站开发中，经常会碰到需要处理键盘输入的场景，处理起来繁琐。现在有了这个键盘输入处理的库就很方便了。
阅读全文
摘要：Photoshop 实例教程是提高 Photoshop 技能的最佳学习途径。今天，我向大家分享最新20个 Photoshop 进阶教程，提高你的图片处理技巧，制作时尚的效果。这些教程可以帮助把你的想法变成现实，并创造新的东西。
阅读全文
摘要：设计师在很多时候想通过使用很多的设计元素或复杂的调色板使一个网站脱颖而出，往往会导致一个网站过度设计，而忽视了最重要的内容。大多数时候，你会发现它更好的做法是采取简约的做法。因此，今天，我们收集了15个新鲜的简约设计的网站例子激发你的灵感。
阅读全文
摘要：正则表达式是每个程序开发人员的必备技能。任何开发项目，不管使用什么编程语言，都需要从给定的数据提取值并进行验证。例如对输入内容的验证，过滤 URL 变量等等，正则表达式处理这样的任务很容易，而且只需要很少的代码。另一方面，正则表达式被很多人认为是很难掌握的。但事实不是这样的，他们只是看起来复杂而已。这里有12个伟大的资源，能够帮助你学习和掌握正则表达式。
阅读全文
摘要：FullPage.js 是一个简单而易于使用的插件，用来创建全屏滚动网站（也被称为单页网站）。除了可以创建全屏滚动效果以外，也可以给网站添加一些水平的滑块效果。能够自适应不同的屏幕尺寸，包括平板电脑和移动设备。
阅读全文
摘要：extractCSS 是一个免费的基于 Web 的应用程序，能够从 HTML 中提取风格相关的信息，包括 id、class 和内联样式，而且输出可以定制（缩进和括号的用法）。该工具非常有用，当我们快速创建一个使用了内联样式的 HTML 文件时，如果要分离就会很方便。
阅读全文
摘要：在这里，我们向大家呈现一些有用的和免费的 Android 用户界面 PSD 素材。由于 Android 市场迅速增长，设计人员和开发人员正在寻找一些快速和容易的方法来创建 Android 友好的应用和网站。免费的 PSD 资源可以帮助设计人员和开发人员节省时间和提高工作效率。
阅读全文
摘要：HTML5 规范引进了很多新特性，其中最令人期待的之一就是 Canvas 元素，HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法，非常强大。这里向大家展示一个使用 Canvas 和 JavaScript 创建逼真的下雨效果。
阅读全文
摘要：这篇文章，给大家带来的同样是字体在网页设计中的使用案例展示。除了图像上的文字使用之外，还有很多其它的在网页设计制作漂亮的印刷字体的选择。从干净简单的设计到丰富多彩的设计，众多的灵感能够激发你的想象力。
阅读全文
摘要：koala 是一个前端预处理器语言图形编译工具，支持 Less、Sass、Compass、CoffeeScript，帮助 Web 开发者更高效地使用它们进行开发。跨平台运行，完美兼容 Windows、Linux、Mac。
阅读全文