随笔分类 - CSS3
样式设置
摘要：CSS3 规范让前端开发人员能够创建出各种复杂的视觉效果，使网站更好看，更能够吸引用户访问。这篇文章中，我收集了一组实用的 CSS3 技巧，能够帮助你美化您的网站，并给它一个更专业的外观和感觉。
阅读全文
摘要：《CSS3 实用技巧》之实现黑白图像效果。CSS3 规范让前端开发人员能够创建出各种复杂的视觉效果，使网站更好看，更能够吸引用户访问。
阅读全文
摘要：CSS3 Gradient 分为 linear-gradient（线性渐变）和 radial-gradient（径向渐变）。而我们今天主要是针对线性渐变来剖析其具体的用法。其共有三个参数，第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。
阅读全文
摘要：text-shadow 曾经在 CSS2 中就出现过，但在 CSS 2.1版本中又被抛弃了，现在 CSS3 版本又重新捡回来了。这说明 text-shadow 这个属性非常值得我们做前端的人员重视，而且 CSS3 这么多属性中，我个人觉得 text-shadow 运用得是最多的一个属性，作为我们前端人员我觉得有必要学习并掌握这个 text-shadow 属性。
阅读全文
摘要：前一篇文章详细介绍了CSS3 RGBA 的用法，今天这篇文章我们在一起来看看 CSS3 中用于实现圆角效果的 border-radius 属性的具体用法。以前制作圆角效果，我们都需要使用多张圆角图片做为背景分别应用到每个角上，我应用最多的就是在需要圆角的元素标签中加四个空标签，然后在每个空标签中应用一个圆角的背景位置，然后在对这几个应用了圆角的标签进行定位到相应的位置，非常繁琐。
阅读全文
摘要：颜色在 CSS 中有三种定义方式：使用颜色方法（RGB、RGBA、HSL、HSLA），十六进制颜色值和预定义的颜色名称。RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）的色彩空间。虽然它有的时候被描述为一个颜色空间，但是它其实仅仅是 RGB 模型附加了额外的信息从而形成了我们今天需要讨论的 RGBA。如果需要更详细的解说，大家就跟着我一起往下看吧。
阅读全文
摘要：这篇文章收集了Google 前端工程师 Addy Osmani 分享在 Speaker Deck 的15个精彩幻灯片，每个都是精华中的精华，真正的干货！相信你认真阅读之后一定会有收获！Addy Osmani 创建了 TodoMVC、jQuery UI Bootstrap、jQuery Plugin Patterns 和 Backbone Paginator，出版了《Learning JavaScript Design Patterns》和《Developing Backbone.js Applications》两本书籍，还是著名 jQuery、Modernizr 以及 Backbone.js 框架的贡献者。
阅读全文
摘要：这篇文章是前端优秀讲座和讨论列表系列连载第二篇，包含未来的前端开发趋势和 CSS 开发两部分内容。前端领域发展迅速，只有时刻掌握前端发展趋势和技术动态，学习前沿的开发思想和理念才能让自己跟上时代的步伐，保持自己的技术优势。
阅读全文
摘要：这是《CSS3 探索发现》系列文章的第二篇，分享一组闪亮的半透明 CSS3 按钮效果。CSS3 为网页设计引入了众多强大的新功能，让设计和开发人员能够轻松的创作出精美的界面效果。推荐阅读：《CSS3 探索发现系列一：一组梦幻般的 CSS3 动画按钮效果》。这些闪亮的按钮使用了两个 DIV 实现，一个是按钮主要部分，一个是用来显示光泽。下面是在线演示，很漂亮吧？把鼠标放在按钮上试试，有惊喜哦！（温馨提示：在 Chrome，Firefox 和 Safari 浏览器中效果最佳。
阅读全文
摘要：Profound Grid 是一个实现固定和流动布局的网格系统。内置 SCSS，带给你灵活性和全面的控制。你可以让让个流动或者固定，还可以根据需要为每个媒体添加布局。更改列和间隔宽度，并根据需要删除或添加列。这个网格系统让您的的标记语义化，没有任何“grid_x”类。除非你想使用它们，在这种情况下，它们也可以包括在内。深刻的网格使用负外边距计算列。与其他网格系统不同，流体布局在每一个浏览器看起来几乎完全一样。
阅读全文
摘要：过去的这一年，CSS3 被更多的人关注和学习，应用得越来越多。这篇文章挑选出的2012年最值得关注的 CSS3 教程能够帮助你更好的掌握 CSS3 的实际使用。CSS3 提供了众多强大的视觉效果特性，它使得 Web 开发人员可以很容易的在网站中加入时尚的效果。以前很多需要编写 JavaScript 才能实现的效果，如今只需要简单的写几句 CSS3 代码就能实现。
阅读全文
摘要：2012年，Web 开发领域继续在快速的发展，HTML5 仍然在展示其跨平台的优越性，CSS3 被人们更多的应用到实际项目中，响应式设计（Responsive Design）技巧也被人越来越多的人熟知和使用。技术的快速发展让 Web 开发人员学习起来不知所措，幸运的是，很多优秀的开发者和设计人员在努力寻找各种有特色的解决方案。 因此，我们有了很多优秀的小工具和库，每一个都是用来解决特定的问题或维护一组特定的项目。这篇文章收集了2012年度新发布的最具有代表性 Web 前端开发工具和框架，这是一个非常值得收藏的工具列表。
阅读全文
摘要：梦想天空博客即日起推出《CSS3 探索发现》系列文章，分享和展示各种让人惊奇的 CSS3 示例。梦天空博客关注 前端开发 技术，分享各种增强网站用户体验的 jQuery 插件，展示前沿的 HTML5 和 CSS3 技术应用，推荐优秀的 网页设计 案例，共享精美的设计素材和优秀的 Web 开发工具。
阅读全文
摘要：2012年，Web 开发领域继续在快速的发展，HTML5 仍然在展示其跨平台的优越性，CSS3 被人们更多的应用到实际项目中，响应式设计（Responsive Design）技巧也被人越来越多的人熟知和使用。这篇文章收集了2012年度新发布的最具有代表性 Web 前端开发工具和框架，这是一个非常值得收藏的工具列表，从功能全面的 IDE 到美观、充满异国情调的小框架，小工具等等。他们能够帮助你降低 Web 开发过程中的复杂度，节省时间和精力。
阅读全文
摘要：2012年涌现出众多独特的，令人印象深刻的 CSS 网站作品，要从中挑选出年度应用 CSS 的最佳网站列表一个严峻的挑战，因为 CSS 涵盖了媒体查询（CSS3 Media Queries）、CSS 动画和3D转换等众多特性。我根据过去 CSS 典型的应用场景挑选了其中的优秀作品组成一个列表，如果你有收藏更好的作品，欢迎留言向大家分享。
阅读全文
摘要：
2012年12月12日，【《Web 前端开发人员和设计师必读文章》系列十二】和大家见面了。梦想天空博客关注 前端开发 技术，分享各种增强网站用户体验的 jQuery 插件，展示前沿的 HTML5 和 CSS3 技术应用，推荐优秀的 网页设计 案例，共享精美的设计素材和优秀的 Web 开发工具，希望这些精心推荐的文章能够帮助到您。
阅读全文
2012年12月12日，【《Web 前端开发人员和设计师必读文章》系列十二】和大家见面了。梦想天空博客关注 前端开发 技术，分享各种增强网站用户体验的 jQuery 插件，展示前沿的 HTML5 和 CSS3 技术应用，推荐优秀的 网页设计 案例，共享精美的设计素材和优秀的 Web 开发工具，希望这些精心推荐的文章能够帮助到您。
阅读全文
摘要：在 CSS2 中，你可以为不同的媒介设备（如屏幕、打印机）指定专用的样式表，而现在借助 CSS3 的 Media Queries 特性，可以更为有效的实现这个功能。你可以为媒介类型添加某些条件，检测设备并采用不同的样式表。例如，你可以把用于大屏幕上显示的样式和用于移动设备的专用样式放在一个样式文档中，这样，在不改变文档内容的情况下，不同的设备可以使用不同的界面外观。阅读这篇文章学习 CSS3 Media Queries 的基本功能和国外使用 CSS3 Media Queries 的优秀网站案例。
阅读全文
摘要：之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件，今天这篇文章向大家推荐10个纯 CSS3 实现精美加载进度条动画效果的方案。加载动画和进度条在网站和 Web 应用中的使用非常流行，特别是在使用 Ajax 技术加载内容的应用场景中，使用时尚的加载动画和进度条告诉用户内容正在加载中是一种非常友好的方式。
阅读全文
摘要：这篇文章收集了7个非常绚丽的 CSS3 效果应用演示，这些示例演示了 CSS3 各种新特性的强大能力。随着越来越多的浏览器对 CSS3 支持的不断完善，设计师和开发者们有了更多的选择，以前需要使用 JavaScript 才能实现的各种很酷的界面效果和动画，如今使用纯 CSS 代码就可以很容易实现。相信下面这些 CSS3 演示会让你感到吃惊！
阅读全文
摘要：CSS3 是对 CSS 规范的一个很大的改善和增强，它使得 Web 开发人员可以很容易的在网站中加入时尚的效果。以前很多需要编写复杂的 JavaScript 代码才能实现的效果，如今只需要简单的写几句 CSS3 代码就能实现。今天这篇文章就向大家分享14个让人惊叹的 CSS3 特性应用演示，让大家感受一下 CSS3 的魅力。
阅读全文