04 2014 档案
摘要：CSS 浮动，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局； 恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。也许很多人都有这样的疑问，浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？本文将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。
阅读全文
摘要：Permit.js 是一个 jQuery 插件，用于构建交互的，多态的网站原型和应用程序原型。也许你的网站有的功能仅适用于登录的成员，只有管理员才能使用或者你的应用程序会根据线上或离线有不同的功能，这些都是多状态原型的例子。
阅读全文
摘要：iHover 是一个令人印象深刻的图片悬停效果集合，完全基于 CSS3 实现，无依赖，能够搭配 Bootstrap 3 很好地工作。基于 SCSS 技术构建（包括文件），便于修改变量。有模块化的代码，无需包含整个文件。 把饭 30 多个悬停效果，满足各种需要。
阅读全文
摘要：你可能已经无意中听说过 Promises，很多人都在讨论它，使用它，但你不知道为什么它们如此特别。难道你不能使用回调么？有什么了特别的？在本文中，我们一起来看看 Promises 是什么以及如何使用它们写出更好的 JavaScript 代码。
阅读全文
摘要：GitBook 是一个命令行工具（也是 Node.js 库），让你能够使用 GitHub/Git 和 Markdown 构建出美丽的编程书籍，可以包含互动的练习。GitBook 支持使用多种语言构建书籍。每种语言都应该是按照正常 GitBook 格式的子目录，以及一个应该放在版本库根目录下的 LANGS.md 文件。
阅读全文
摘要：Flexbox 布局模块目前是 W3C 候选标准，旨在提供一个更有效的方式进行布局，对齐和为容器里的项目分配空间，即使它们的大小是未知的或者动态的。这里分享一个基于 Knockout.js 构建的互动教程，让你5分钟就掌握 Flexbox 布局模式。
阅读全文
摘要：Fixed Responsive Nav 是一个响应式的，固定的，触摸友好的单页网站导航插件，响应式导航，流畅的动画滚动。该项目采用渐进增强构建，支持工作在 IE6 及以上版本的浏览器。 你可以给导航打开的内容添加一个遮罩，自动突出显示当前位置。你可以自由地使用提供的 JavaScript，风格和图标字体用于商业或非商业项目。
阅读全文
摘要：
今天我们想与大家分享另一套过渡效果。这一次，我们将探讨如何实现侧边栏的过渡动画，就像我们已经在多级推出菜单中使用的。我们的想法是，以细微的过渡动画显示一些隐藏的侧边栏，其余的内容也是。通常侧边栏滑入，把其他内容推到一边。这个可过程中可以加入很多微妙而奇特的效果，而今天这篇文章能够给你一些启示。
阅读全文
今天我们想与大家分享另一套过渡效果。这一次，我们将探讨如何实现侧边栏的过渡动画，就像我们已经在多级推出菜单中使用的。我们的想法是，以细微的过渡动画显示一些隐藏的侧边栏，其余的内容也是。通常侧边栏滑入，把其他内容推到一边。这个可过程中可以加入很多微妙而奇特的效果，而今天这篇文章能够给你一些启示。
阅读全文
摘要：这里分享的12款完全采用响应式设计的 HTML5 & CSS3 网站设计模板。每一个细节都精心设计，以创建一个美妙的用户体验。这些响应主题和模板最适合用于电子商务，商业门户网站，个人作品集以及应用程序展示网站。
阅读全文
摘要：Twproject Gantt 是一款基于 jQuery 开发的甘特图组件，也可以创建其它图表，例如任务树（Task Trees）。内置编辑、缩放和 CSS 皮肤等功能。更重要的是，它是免费开源的。
阅读全文
摘要：如果您曾经访问过 Nicolas Zezuka 和 Active Theory 的出色的设计网站，你可能已经注意到在显示新内容之前动感的页面加载动画。这种风格的动画效果最近非常流行，这篇文章想给你带来一些启示。这个效果的核心是让一个形状在页面窗口中动画显示并有展示活动的指示。当新内容被加载时，形状将以动画显示返回显示的页面。
阅读全文
摘要：Method Draw 是一款在线 SVG 编辑器，是 SVG Edit 的一个分支。Method Draw 的目的是改进 SVG Edit 的可用性和用户体验。它移除了 line-caps/corners 等功能以提供一个简单愉悦操作体验。
阅读全文
摘要：CSS 是前端开发必备技能，入门容易，深入难。比如像 Pseudo-class、Pseudo-element、Media query、Media type 以及 Vendor prefix 的概念，很多人都还很模糊。CSS Vocabulary 是一个很全的 CSS 词汇表，能帮助你轻松了解这些词汇的含义。
阅读全文
摘要：BFC 已经是一个耳听熟闻的词语了，网上有许多关于BFC的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BFC 解决这些问题，但当别人问我 BFC 是什么，我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BF
阅读全文
摘要：Vis.js 是一个动态的，基于浏览器的可视化库。该库被设计为易于使用，能处理大量的动态数据。该库由以下几部分组成：一是数据集和数据视图，基于灵活的键/值数据集，可以添加，更新和删除项目，订阅数据集变化；二是时间轴，用于显示不同类型的时间轴数据，在时间轴上项目可以交互移动，缩放和操纵；三是图形，使用节点和边显示一个交互式图形或网络。
阅读全文
摘要：《Web 前端开发精华文章推荐》2014年第3期（总第24期）和大家见面了。梦想天空博客关注 前端开发 技术，分享各类能够提升网站用户体验的优秀 jQuery 插件，展示前沿的 HTML5 和 CSS3 技术应用，推荐优秀的 网页设计 案例，共享精美的设计素材和优秀的 Web 开发工具，希望这些精心整理的前端技术文章能够帮助到您。
阅读全文
摘要：正如语言风格指南一样，模式库有两个主要用途。首先，是它们提供了一组编码或设计标准，Web 开发团队可以在整个网站中应用，有助于保持一致的编码实践和外观；其次，对于要学习网页设计最佳实践来说是宝贵的财富。
阅读全文
摘要：TaggingJS 是一款 jQuery 插件，用来创建高度可定制的前端标签系统。这款插件不到3KB ，支持主流浏览器。有几种方法来定制 taggingJS 的默认行为：一是使用 custom_options 定制全局的 taggingJS 行为；二是给标签框加上 data 属性；三是结合前面两种方式。
阅读全文
摘要：决定何时实用黑色可能会非常棘手，但决定应始终关注时候能够加强内容和用户体验。如果黑色颜色被正确使用，可以产生大胆的冲击视觉，抓住网站访问者的注意力。在下面的展示中，你将看到在每个站点，黑色的运用都是恰到好处，值得借鉴。
阅读全文
摘要：复选框（Checkbox）在各个浏览器中的效果不一致，因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能。下面就给大家分享9款超炫的复选框（Checkbox）效果，纯 CSS3 实现，未使用任何图片。
阅读全文
摘要：JavaScript 加载器是非常强大和有用的工具。目前流行的几个加载器，像 curljs、LABjs 和 RequireJS 使用都很广泛。他们功能强大的，但有些情况下可以有更简单的方案。如果你正在使用 jQuery，有一个内置的方法可以用来加载脚本。如果你想延迟加载插件或任何其他类型的脚本，都可以使用这种方法。下面给大家介绍如何使用它。
阅读全文
摘要：响应式和现代设计风格的 WordPress 主题与能够非常灵活的适应所有设备。而高级主题能够更大可能性的轻松定制。所有的主题是完全响应式的，您可以从主题选项中禁用/启用响应模式。下面这个列表收集了10款响应式，支持视网膜显示的 Wordpress 主题。
阅读全文
摘要：创建吸引各种游客的注意力和兴趣有很多种，其中之一是视差滚动（Parallax Scrolling）技术。在网页设计中，视差滚动是当下流行的网页设计技术，通过让多层背景以不同的速度或者不同的方向移动形成 3D 运动效果，有很强的视觉冲击力。
阅读全文
摘要：jQuery File Uploader 是一个 jQuery 文件拖放上传插件，包括 Ajax 上传和进度条效果。作者编写这个插件的想法是要保持它非常简单，不像其他的插件，很多的标记，并提供一些 Hack 的方式使之兼容那些古老的浏览器。jQuery File Uploader 重点是现代浏览器，而且还提供了一个方法让你知道什时候插件不支持使用。
阅读全文
摘要：EnjoyCSS 是一款先进的 CSS3 代码生成工具，可以让你摆脱日常的编码。它方便和易于使用的用户界面允许您快速，无需编码就可以调节出丰富的图形样式。您将能够玩转所有的 EnjoyCSS 参数，就像在 Photoshop 或 illustarator 中一样，结合所有可能的 CSS3 样式功能。所有必需的 CSS 代码将被 EnjoyCSS 自动生成。
阅读全文
摘要：Google Analytics（谷歌分析）不仅仅是一个流量统计工具，你还可以用它来测量广告活动的有效性，跟踪用户多远到所需的页面流，并基于用户的信息设置浏览器和语言环境支持。但是，这一切东西都不是我们开发者所需要的。今天给大家介绍一个很另类的技巧，通过自定义事件跟踪 JavaScript 错误。下面就让我们来看看如何实现的错误检查的。
阅读全文
摘要：在这篇文章中，我们给大家收集了25套全新的 UI 设计素材。这些来自优秀设计师的 PSD 源文件素材让其它的设计师们在设计用户界面原型的时候能够非常便利。网站用户界面，移动应用程序用户界面和对设计师很有用，因为这些套件让他们使用快速和有效的方式完成用户界面的设计。
阅读全文
摘要：Framework7 是一个功能很全的 HTML 框架，用来构建 iOS7 应用程序。 Framework7 允许您灵活搭建列表视图（表视图） 。你可以让他们作为导航菜单，你可以在列表里面使用图标，输入框以及任何元素，甚至使它们嵌套。Framework7 使用 Ajax 在页面之间导航。赶紧体验一下。
阅读全文
摘要：CutJS 是轻量级的，快速的，基于 Canvas 开发的 HTML5 2D 渲染引擎，可以用于游戏开发。它是开源的，跨平台的，与现代的浏览器和移动设备兼容。CutJS 提供了一个类似 DOM 树的数据模型来编写应用程序，并在内部管理渲染周期，绘制你的应用程序。
阅读全文
摘要：这篇文章与大家分享一批高质量的的Node.js 中文资料。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台， 用来方便地搭建快速的， 易于扩展的网络应用· Node.js 借助事件驱动， 非阻塞 I/O 模型变得轻量和高效。
阅读全文
摘要：现代设计风格的网页设计通常基于强大，先进的网页设计技术，如 HTML5，CSS3 ，网格系统，元素等等。所有的网站都完全响应式设计，并所有设备能够很好的展现。今天，我们聚集了一组最新的设计例子，相信这些获奖网站设计能为您提供灵感。
阅读全文
摘要：Magic CSS3 Animations 动画是一个独特的 CSS3 动画特效包，你可以自由地使用您的 Web 项目中。只需简单的在页面上引入 CSS 样式: magic.css 或者压缩版本 magic.min.css 就可以使用了。 这个项目现在GitHub上，包含 bling, perspective, rotate, slide, tin, bomb 等众多特效。
阅读全文
摘要：这篇文章中接着给大家分享创意的手机应用程序界面设计示例，一组拥有出色的用户体验的注册和登录界面设计。能够帮助你的移动应用程序提升一个档次，希望你会喜欢它。
阅读全文
摘要：这篇文章给大家带来15个扁平风格网站作品。随着 LED 液晶显示器的像素密度和图像质量的提高以及平板电脑和智能手机的普及，以前在小型显示器或低分辨率显示器中使用的让细节更新清晰的阴影技术不再需要了。扁平化网页设计是指设计形式摒弃图案纹理背景，阴影文字以及网站盒模型的部分。一起欣赏：）
阅读全文
摘要：键盘事件是 Web 开发中最常用的事件之一，通过对键盘事件的捕获和处理可以提高网站的易用性和交互体验。下面，我们向大家介绍收集的20款优秀的 JavaScript 键盘事件处理库，帮助开发人员轻松处理各种键盘事件，赶紧收藏吧！
阅读全文
摘要：Bootflat 是一个开源的扁平化的 UI 工具包，基于 Bootstrap 3.1.0 CSS 框架。它为 Web 开发人员提供了一个创建优雅的 Web 应用程序的更快，更容易和更少的重复任务的途径。
阅读全文
摘要：响应式的 Web 设计方法的目的是制作一个更加灵活的网站，能够为用户提供最佳的视觉体验——方便阅读和导航，只需最少的调整就可实现缩放和滚动，支持更广泛的设备，从移动电话到手持设备到台式电脑。下面是一个优秀的网格工具清单，能够帮助更好的创建响应式布局。
阅读全文
摘要：Winjs 是由微软开源技术的开发者推出的一组 JavaScript 组件，包括 ListView、ListView、Tooltip、DatePicker、Ratings 等等，帮助 Web 开发人员使用最好的网站功能解决方案。
阅读全文
摘要：WordPress 无处不在，小到人博客，大到广受欢迎的各类特色网站，你都能发现 WordPress 的影子，因为它是创建和维护一个网站最容易使用的平台。今天我们要分享的这些网站极大地改变了 WordPress 的样子。看看下面20个基于 WordPress 的网站，你就会明白我在说什么。
阅读全文
摘要：slick 是一款完全响应式的 jQuery 传送带插件，能够根据容器自动适应宽度。在现代浏览器中会使用 CSS3 来实现特殊效果，可以使用扩展方法对项目进行添加、删除和过滤。这是你需要的最后一款 jQuery 传送带插件，赶紧收藏吧。
阅读全文
摘要：如果你是一个热爱大自然的人你肯定会喜欢这个集合。地球上有太多的地方和风景值得我们这辈子至少要去看一次。大多数自然摄影师喜欢没有人出现在他们的照片中，他们想获得纯净、完美的风景，没有人类的影响。这篇文章展示了20个地球上最惊人的地方的照片，你知道这些地方是哪里吗？
阅读全文
摘要：Web 技术的不断发展让我们能够开发各种好玩的功能。这里给大家分享一个使用 HTML5 技术实现的在线乐谱，可以播放的哦，也可以选择一个片段进行循环播放。赶紧来体验一下：）
阅读全文
摘要：在这篇文章中，你将看到一些创意、时尚的手机应用程序注册和登录界面设计示例。它们都拥有出色的用户体验，能够帮助你的移动应用程序提升一个档次，希望你会喜欢它。
阅读全文
摘要：Codrops 最近分享了一些很酷的图片切换灵感。有三种不同的用例：小的图像幻灯片，大标题幻灯片以及使用透明背景的产品幻灯片。状态转换使用 CSS 动画完成，我们能够定义从任何方向进来的图片的行为。
阅读全文
摘要：传统的设计正在慢慢地被丢弃，更多人的崇尚简单，简约的扁平化设计风格。扁平化设计对于印刷品设计、网页设计和移动操作系统的设计来都带去了新的变化。扁平化网页设计是指设计形式摒弃图案纹理背景，阴影文字以及网站盒模型的部分。
阅读全文
摘要：ZeroClipboard 库提供了一种把文本复制到剪贴板的简单方法。Zero 表示该库是不可见的，用户界面则完全取决于你。 该库完全兼容 Flash Player 10.0.0 或以上版本，这就要求剪贴板复制操作需要通过 Flash 影片内部的用户单击事件来初始化。支持 IE7+ 和所有的现代浏览器。
阅读全文
摘要：
网站的加载速度在一定程度上来说是决定网站能否成功的关键。如果您是网站所有者，一定知道网站速度的重要性。因为没有人愿意为了打开一个网页而等老半天，换句话说，如果你的网站打开速度很慢，将流失大量的访客，甚至出现多米诺效应的不良影响。
阅读全文
网站的加载速度在一定程度上来说是决定网站能否成功的关键。如果您是网站所有者，一定知道网站速度的重要性。因为没有人愿意为了打开一个网页而等老半天，换句话说，如果你的网站打开速度很慢，将流失大量的访客，甚至出现多米诺效应的不良影响。
阅读全文
摘要：skelJS 是一个轻量级的前端框架，用于构建响应式站点和应用程序。让设计人员和开发人员可能够使用四个强大的组件：CSS 网格系统，响应式处理程序，CSS的快捷方式和插件系统。
阅读全文
摘要：EpicEditor 是一款可以嵌入到网页中的 JavaScript Markdown 编辑器，支持全屏编辑、在线预览、自动保存草稿，离线支持等等。对于开发人员，它提供了一个健壮的API，可以很容易定制主题并允许你灵活使用绑定的 Markdown 解析器。
阅读全文
摘要：网络上有很多的 CSS 画廊站点供大家对各类网站作品进行打分和评论，每天有数以百计的优秀网站被推荐上面，这对于网页设计师来说是很好的灵感来源。今天，我们选择了15赢得 CSS 设计大奖的优秀作品，帮助你学习网站布局设计。enjoy!
阅读全文
摘要：用户界面工具包非常受追捧。他们能够帮助更好的完成正在进行的项目，减少时间和精力。界面是用户在浏览网站时注意到的第一件事。这就是为什么好的用户界面很重要，尤其是那些可以免费下载的素材。今天，我们很高兴为您呈现一批新的和优雅的扁平化设计的 UI 包。
阅读全文
摘要：JavaScriptOO.com 集合了目前 Web 开发中最常用的422（截至目前）款 JavaScript 框架，你可以根据功能类别（Ajax，动画，图表，游戏等）进行过滤和排序，快速找到你需要的框架。每个项目都有在线演示，源码下载以及 CDN 链接。
阅读全文