随笔分类 - CSS3
样式设置
摘要：在显示复杂的表格数据的时候，相信 Web 开发人员都碰到过显示不下的情况。RWD Table Patterns 是一个很好的响应式表格解决方案。它采用移动优先以及渐进增强的设计理念，在不支持响应式的浏览器会使用滚动条代替。
阅读全文
摘要：如果你看过三星企业设计中心网站，你肯定已经注意到了时尚的网格加载效果。在这篇文章中，我们想向您展示了如何使用 Masonry 网格砌体插件，结合 CSS 动画重现这种效果。另外在这里，我们还借助了 ColorFinder 来获得的图像的最突出的颜色来作为初始的加载背景色使用。
阅读全文
摘要：今天我们想与大家分享一个小的动画概念。这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的。实现的基本思路是对网格项目进行 3D 旋转，扩展成全屏，并呈现内容。我们试图模仿应用程序的行为，因此创建了两个演示，分别演示垂直和水平旋转网格项。
阅读全文
摘要：WTF forms 借助 CSS 提供友好的 HTML 表单控件，专为 IE9+ 以及最新的 Chrome、Safari 和 Firefox 浏览器。以文件输入控件的改进，使用 label 包裹在 input 的外贸，所以自定义控件可以正确触发文件浏览器，并且定义了点击时的样式，像复选框和单选框还有选中状态的样式。
阅读全文
摘要：《Web 前端开发精华文章推荐》2014年第5期（总第26期）和大家见面了。梦想天空博客关注 前端开发 技术，分享各类能够提升网站用户体验的优秀 jQuery 插件，展示前沿的 HTML5 和 CSS3 技术应用，推荐优秀的 网页设计 案例，共享精美的设计素材和优秀的 Web 开发工具，希望这些精心整理的前端技术文章能够帮助到您。
阅读全文
摘要：LESS 是一个编写 CSS 的很好的方式 ，使您可以使用变量，嵌套规则，混入以及其它许多有用的功能，它可以帮助您更好地组织你的 CSS 代码。最近我一直在研究 Node.js ，并想用 less-middleware 中间件，这样我可以很容易的在我的应用程序中使用 LESS 了。配置好以后，LESS-Middleware 能够自动处理编译你的 LESS 代码为 CSS 代码。
阅读全文
摘要：对于我来说，Web 前端开发是最酷的职业之一，因为你可以用新的技术发挥，创造出一些惊人的东西。唯一的问题是，你需要跟上这个领域的发展脚本，因此，你必须不断的学习，不断的前进。本文将分享能够帮助您快速掌握 HTML5 的实例教程，值得好好学习。
阅读全文
摘要：Crumpet 是一个简单的响应式的基于 SASS/SCSS 的响应式前端框架，保持你的 HTML 代码简洁。内置尽量使用占位符选择器，以减少你的 HTML 标记的大小，没有凌乱的 HTML 代码。快速创建网站的布局响应式将变成一件轻而易举的事。
阅读全文
摘要：
今天我们想与大家分享一组创意的页面切换熊效果集合。我们已经在示例中罗列了一组动画，可以被应用到页面切换过程中，创造出很有趣的导航效果。虽然有些效果非常简单，只是简单的滑动动作，但另外的一些则是利用了视角和 3D 转换来创造一些立体动感的效果。
阅读全文
今天我们想与大家分享一组创意的页面切换熊效果集合。我们已经在示例中罗列了一组动画，可以被应用到页面切换过程中，创造出很有趣的导航效果。虽然有些效果非常简单，只是简单的滑动动作，但另外的一些则是利用了视角和 3D 转换来创造一些立体动感的效果。
阅读全文
摘要：Jeet 是一个先进的，直观的 CSS 网格系统。通过使用预处理器的强大功能，我们现在可以通过实际分数（或者浮点数）来生成一个基于百分比宽度和间隔的网格。让你用更少的代码，更快的速度构建页面布局。
阅读全文
摘要：Twitter Bootstrap 自从2011年最初发布到网上后，迅速成为 Web 领域最流行的响应式前端开发框架之一，是网页设计的优秀实践。Twitter Bootstrap 框架包含了众多的预定义风格的组件，插件和加载项。在这篇文章中，我们想向大家介绍15款最好的 Twitter Bootstrap 开发工具以更好地满足要求以及帮助提高他们的 Web 开发的生产力。
阅读全文
摘要：《Web 前端开发精华文章推荐》2014年第4期（总第25期）和大家见面了。梦想天空博客关注 前端开发 技术，分享各类能够提升网站用户体验的优秀 jQuery 插件，展示前沿的 HTML5 和 CSS3 技术应用，推荐优秀的 网页设计 案例，共享精美的设计素材和优秀的 Web 开发工具，希望这些精心整理的前端技术文章能够帮助到您。
阅读全文
摘要：CSS 浮动，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局； 恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。也许很多人都有这样的疑问，浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？本文将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。
阅读全文
摘要：iHover 是一个令人印象深刻的图片悬停效果集合，完全基于 CSS3 实现，无依赖，能够搭配 Bootstrap 3 很好地工作。基于 SCSS 技术构建（包括文件），便于修改变量。有模块化的代码，无需包含整个文件。 把饭 30 多个悬停效果，满足各种需要。
阅读全文
摘要：Flexbox 布局模块目前是 W3C 候选标准，旨在提供一个更有效的方式进行布局，对齐和为容器里的项目分配空间，即使它们的大小是未知的或者动态的。这里分享一个基于 Knockout.js 构建的互动教程，让你5分钟就掌握 Flexbox 布局模式。
阅读全文
摘要：
今天我们想与大家分享另一套过渡效果。这一次，我们将探讨如何实现侧边栏的过渡动画，就像我们已经在多级推出菜单中使用的。我们的想法是，以细微的过渡动画显示一些隐藏的侧边栏，其余的内容也是。通常侧边栏滑入，把其他内容推到一边。这个可过程中可以加入很多微妙而奇特的效果，而今天这篇文章能够给你一些启示。
阅读全文
今天我们想与大家分享另一套过渡效果。这一次，我们将探讨如何实现侧边栏的过渡动画，就像我们已经在多级推出菜单中使用的。我们的想法是，以细微的过渡动画显示一些隐藏的侧边栏，其余的内容也是。通常侧边栏滑入，把其他内容推到一边。这个可过程中可以加入很多微妙而奇特的效果，而今天这篇文章能够给你一些启示。
阅读全文
摘要：这里分享的12款完全采用响应式设计的 HTML5 & CSS3 网站设计模板。每一个细节都精心设计，以创建一个美妙的用户体验。这些响应主题和模板最适合用于电子商务，商业门户网站，个人作品集以及应用程序展示网站。
阅读全文
摘要：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
阅读全文
摘要：《Web 前端开发精华文章推荐》2014年第3期（总第24期）和大家见面了。梦想天空博客关注 前端开发 技术，分享各类能够提升网站用户体验的优秀 jQuery 插件，展示前沿的 HTML5 和 CSS3 技术应用，推荐优秀的 网页设计 案例，共享精美的设计素材和优秀的 Web 开发工具，希望这些精心整理的前端技术文章能够帮助到您。
阅读全文