标签目录：css

2016
08-22

试试这４个CSS动画解决方案和资源

试试这４个CSS动画解决方案和资源 随着移动设备的大量使用和CSS3兼容性在浏览器中的普及，越来越多的程序猿开始设计和使用基于CSS3的动画效果解决方案，但是自己编写基于CSS3的动画效果也是一件比较让人纠结的事情，为了快速的完成项目，大家也可以考虑使用一些现成的CSS3的动画效果库，今天这篇文章中，给大家介绍五款比较流行的CSS3类库和资源，希望大家能够喜欢~~Animate.cssanimate.css是我经常在项目中使用的动画效果类库，包含了很丰富的动画过... 继续阅读 >
2016
08-19

前端CSS一些小细节

英文原文：LearningtoLovetheBoringBitsofCSS未来的CSS太让人兴奋了：一方面，是全新的页面布局方式；另一方面，是酷炫的滤镜、颜色等视觉效果。这些CSS，受开发者追捧，被杂志和博客文章铺天盖地地介绍。如果说这些特性是CSS华丽的一面，那我们来看看它朴实的一面：很不起眼的东西，如选择器、单位、函数（方法）。我经常说这是繁琐的东西，但我意思是它们能干漂亮的活，这就是我要分享的。怎么说呢，让... 继续阅读 >
2016
08-01

扒一扒 CSS 语言的诞生史

扒一扒 CSS 语言的诞生史 实话说，在过去这一年，这已经成为我好心情的固定来源。即不断地告诉一波波想要像在TeX、MicrosoftWord等常见的文档处理工具中那样方便地控制HTML文档的样式的人们说——安全带系好，受伤别怪我：“很不好意思，你完蛋了！”——马克·安德森1994年在1991年，蒂姆·伯纳斯·李首次提出HTML的时候，并没有给页面添加样式的方法。给定的HTML该如何渲染决定... 继续阅读 >
2016
07-15

提高CSS技术技巧

前言在今天的文章中，我将要聊聊我在一年半的实践中，总结出来的css经验。首先让我提醒你，css是极其简单的一门语言，简单到可以用三个词概括：选择器，属性以及属性的值。这也是一些人不喜欢css的原因：他们觉得写css像孩子玩乐高玩具一样简单。是这样的。。如果你给一个9岁的孩子介绍css的基本原理，他就会搭建一个网站。不过这个网站不会很复杂，也就是一些包含头部，链接，内容图片的页面而已。事实上，css是一门简单的语... 继续阅读 >
2016
06-18

用 CSS 隐藏页面元素的 5 种方法

用 CSS 隐藏页面元素的 5 种方法 用CSS隐藏页面元素有许多种方法。你可以将opacity设为0、将visibility设为hidden、将display设为none或者将position设为absolute然后将位置设到不可见区域。你有没有想过，为什么我们要有这么多技术来隐藏元素，而它们看起来都实现的是同样的效果？每一种方法实际上与其他方法之间都有一些细微的不同，这些不同决定了在一个特定的场合下使用哪一个方法。这篇教程将覆盖到那些你需要记住的细小不同点，让... 继续阅读 >
2016
04-24

CSS之父：Web事业未竞，尚需前赴后继

CSS之父：Web事业未竞，尚需前赴后继 提到Web设计，很少有人的影响会超过HåkonWiumLie。在CERN与Web之父TimBerners-Lee一起工作的Lie，发明了CSS。如果没有那次大胆的提议，我们今天谈论的Web设计很可能是完全不同的一回事。正如Lie所说：“这个技术可能会被一家公司占有，比如法国电信，比如微软。很可能会掌控在私人手中。”“当时的Web还比较混乱，有不少乱七八糟的东西，但同时那也正是人性的反映。而且所有人都可以免费使... 继续阅读 >
2016
04-11

CSS Grid布局指南

CSS Grid布局指南 简介CSSGrid布局（又名"网格"），是一个基于二维网格布局的系统，主要目的是改变我们基于网格设计的用户接口方式。如我们所知，CSS总是用于网页的样式设置，但它并没有起到很好的作用。刚开始的时候我们使用表格(table)，然后使用浮动(float)、定位(position)和内联块(inline-block)，但所有这些方法本质上来讲都是hacks，存留了很多需要实现的重要功能问题(例如，垂直居中)。虽然Flexbox可以起到一定的补救作用，但是它只可... 继续阅读 >
2015
12-20

30+有用的CSS代码片段

30+有用的CSS代码片段 在一篇文章中收集所有的CSS代码片段几乎是不可能的事情，但是我们这里列出了一些相对于其他的更有用的代码片段，不要被这些代码的长度所吓到，因为它们都很容易实现，并且具有良好的文档。除了那些解决常见的恼人的问题外，也包含了一些解决新问题的新技术。1.垂直对齐如果你之前遇到过这个问题，你就应该知道它是多么的烦人，幸运的是，现在你可以使用CSS3变换来解决这个问题：.vc{position:relative;top... 继续阅读 >
2015
11-09

css设计中的不变与可变

css设计中的不变与可变 “人活一世,有人成了面子,有人成了里子,都是时势使然。”——《一代宗师》如果重构分里子与面子的话，那么html应该是负责里子的，而css就是负责面子了。在上篇html结构的拆与合说了html之后，我们继续来说下css，这次我们从可变与不变的角度分析。一个面试题首先这是一个面试题，其次反正我是没做过这个面试题，最后忘了是哪个厂的面试题。具体的要求我忘了，大概的意思就是要这个内容在视窗内垂直方向居中，以图片为参考，文... 继续阅读 >
2015
09-30

使用字符串(STRINGS)设置样式

使用字符串(STRINGS)设置样式 今年在墨尔本(澳大利亚)举办的CSSConf中，我有一个主题需要演讲——"StylingWithSTRINGS"。该讲座主要介绍的是在组件中如何使用Flexbox、currentColor和em，在浏览器中快速实现Web应用程序所需要的风格。特别提醒：原文提供了一个视频，不过需要翻。大家都懂的。这里归纳了几个要点：布局(Layout)当你创建一个移动应用的布局时，并不是整个页面滑动，而只是某些部分。比如说，页面的头部和脚部是固定的，只是中间的主内容区... 继续阅读 >
2015
09-30

CSS中你不知道的小技巧

CSS中你不知道的小技巧 CSS中的级联(cascade)在同一时间可谓是幸福的，也可以说是痛苦不堪的。通常能工作得非常好，但有问题的时候，也让人们都很激动，甚至事件中也离开不CSS。我们所涉及的不仅是CSS的级联也还涉及到CSS的权重。不是说碰到特殊问题才显得困难，可以说CSS的困难无处不在。在这篇文章中，我将通过一些示例来向大家展示一些CSS的小技巧，让你知道如何使用CSS的级联能变得更友好，也减少一些不必要的需求，从而也减少权重上遇到的麻烦。... 继续阅读 >
2015
08-20

18个你可能不相信是用CSS制作出来的东西

18个你可能不相信是用CSS制作出来的东西 与流行的看法相反，CSS不仅仅是用来提供一个WEB页面的基本风格，以使它看起来更有吸引力。还有很多其他的事情，CSS也可以做的很好。由于它创建动画和交互的能力，CSS集合HTML以及JavaScript给WEB开发者提供了尝试不同方法的机会。浏览器就像一个空的画布，WEB开发者可以在这里尽情的发挥。下面是18个人们用CSS创建的又酷又有创造性的东西的例子，从原始字符到有趣的动画，有很多激励你自己将时间花费在CSS上。1.&nbs... 继续阅读 >
2015
08-06

几个CSS的黑科技

这里的黑科技其实就是一些CSS中不怎么为人所知但在解决某些问题的时候很溜的属性。border-radius很多开发者估计都没有正确认识这个border-radius，因为基本上很多人都是这么用的：.box{border-radius:4px;}稍微高端一点的是这样的：.box{border-radius:4px6px6px4px;}然而，终极黑科技是这样用的：.box{border-radius:5px5px3px2px/5px5px1px3px;}对，它可以赋8个值，没见过？... 继续阅读 >
2015
08-01

Web 设计师不可错过的 25+ CSS 工具

Web 设计师不可错过的 25+ CSS 工具 当涉及到简化CSS设计和开发相关的工作时，工具总能创造奇迹。值得指出的是，绝大多数的网页设计者和开发人员对不同的CSS工具都感到兴奋，这些工具能帮助他们更快的制作功能完善又十分完美的网站和网页应用。当涉及到执行一些重复的CSS标签时，这些值得推荐的CSS工具是最好的选择。在本文中，我为你收集25+个CSS工具，它们将通过最大限度的发挥CSS的功能来帮助你建立神奇的网站。来，让我们一起来看看吧！... 继续阅读 >