CSS技术学习

1

一次搞懂CSS字体单位：px、em、rem和%

• 果冻   4月17日发布
• 1 收藏

对于绘图和印刷而言，“单位”相当重要，然而在网页排版里，单位也是同样具有重要性，在CSS3普及以来，更支持了一些方便好用的单位（px、em、rem…等），这篇文章将整理这些常用的CSS单位，也帮助自己未来在使用上能...

0

css伪元素（before与after）

• 果冻   4月17日发布
• 收藏

最近因为一些网页的需要，比较深入的使用了CSS的“伪元素”（Pseudo Element），发现原来不只是用用before或after而已，可以玩的东西还真是不少，所以就来篇文章，把这些比较不常玩的用法纪录一下。

0

Vertical-Align，你应该知道的一切

• 果冻   4月17日发布
• 收藏

好，我们聊聊vertical-align。这个属性主要目的用于将相邻的文本与元素对齐。而实际上，verticle-algin可以在不同上下文中灵活地对齐元素，以及进行细粒度的控制，不必知道元素的大小。元素仍然在文档流中，因而...

0

Flexbox 很棒，但有些情况不适用

• 果冻   4月17日发布
• 收藏

顺便说一句，本人是 Flexbox 的忠实粉丝，曾写过一篇 Flexbox 详解 ，可以算得上最全面的文章了。

1

玩转CSS 3D -正八面体与正十二面体

• 果冻   4月18日发布
• 1 收藏

正八面体与正十二面体，这两个正多面体虽然组合的面比较多，不过因为具备了对称性，所以只需要制作出一半的结构，另外一半再用反转的方式接在一起即可。

0

CSS 实现三角形，非 Hack

• 果冻   4月18日发布
• 收藏

写过 HTML upvote arrow（向上箭头），speech bubble（对话气泡）或其他类似的尖角元素的人都知道，为了创建一个纯 CSS 实现的三角形，必须使用某些 Hack。最流行的两种方式是通过 边框实现，或 Unicode 字符。

27

你从来没了解过的CSS浮动 | Design Shack

• 果冻   4月18日发布
• 18 收藏

浮动到底是做什么呢？他们是如何影响相关元素的盒模型的呢？浮动的元素与内联元素有什么不同呢？制定浮动元素的位置的具体规则是什么？clear属性是如何工作的，并且它的作用是什么？

0

CSS伪元素（content与counter）

• 果冻   4月18日发布
• 收藏

前面介绍过CSS里的::before和::after这两个伪元素，以及content相关的用法，这篇将针对content搭配counter（计数器）进行一些有趣的应用，相信熟练之后搞不好很好玩也说不定。

0

Web真相: CSS不是真正的编程 | Christian Heilmann

• 果冻   4月19日发布
• 收藏

每隔几个月就会出现一篇文章表明：CSS并不是真正的编程语言。以编程语言的标准来说，CSS过于困难。使用这门语言会很有创造性：

0

CSS技巧之'text-justify'

• 果冻   4月19日发布
• 收藏

CSS中,当text-align属性被赋值为justify时,text-justify属性经常被用来和text-align属性一起设置文本两端对齐的方式。

0

玩转CSS 3D -正四面体与正六面体

• 果冻   4月19日发布
• 收藏

我们理解了CSS 3D的个中原理之后，废话就不用多说，直接来画正多面体吧！只要正多面体可以画出来，基本上在CSS 3D的领域里，大概就没甚么难得倒我们了。

2

运用clip-path的纯CSS形状变换

• 果冻   4月19日发布
• 2 收藏

在之前所提到绘制正多边形的方法，算是纯粹利用伪元素来完成，不过坦白说还有另外一种方法，可以将单一div做更多形状的变换，这种方法就是CSS3的“clip-path”，这个“clip-path”看起来有点眼熟，因为它原本就存在于...

1

利用CSS变量实现炫酷的悬浮效果

• 果冻   4月25日发布
• 1 收藏

最近，我从 Grover网站上发现以一个好玩儿的悬停动画，也有了些自己的灵感。这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变。这个想法很简单，但是它能使这个按钮脱颖而出，人们一下子就注意到它...

1

CSS变量（自定义属性）使用指南 — SitePoint

• 果冻   4月26日发布
• 收藏

CSS预处理器，如Sass和Less，使得CSS代码易于组织和维护。通过提供变量、混合、循环等特性，使得CSS具有动态编写的能力，从而减少重复性工作，提高开发速度。

2

纯CSS Material Design风格按钮

• 果冻   4月26日发布
• 1 收藏

其实Material Design的扁平化icon按钮，这类型的按钮往往只利用几何色块的变化，就能抓住使用者的眼光，并且从几何形状中明白按钮的含意，这也是Material Design非常强调的设计理念和精髓。

5

送给CSS初学者的悬停过渡动画三部曲

• 果冻   4月28日发布
• 4 收藏

CSS不一定要写得多么复杂才能实现特殊效果。如下就是三个超级简单的过渡的例子，可能只是几行代码，但是添加到Web应用程序中，却会让它增色不少。如下是我们将在本教程中构建的代码

1

单一div的正多边形变换（纯CSS）

• 果冻   4月28日发布
• 1 收藏

上一篇我们介绍了如何利用before和after伪元素来做Material Design风格的按钮，里头关键的技术就在于活用边框宽度和div本体宽高，因此这篇再加码一个效果，就是纯粹利用CSS，让“单一个”div，从正三角形变换为正八...

172

【基础】这15种CSS居中的方式，你都用过哪几种？

• 果冻   4月29日发布
• 129 收藏

CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。如有漏掉的，还会陆续的补充进来，算做是一个备忘录吧。

6

CSS通用数据类型

• 果冻   4月29日发布
• 5 收藏

CSS中属性的值有着许多种格式。为了让用户代理（即浏览器）能够识别一个值是否有效，则需要确认该值是否符合该类值支持的格式的其中一种。这些属性值所支持的格式叫做数据类型，在规范中用<this>的形式标识。

12

关于CSS中的背景属性background简述

• 果冻   4月30日发布
• 7 收藏

像我之前提到的那样，文档树中的每个元素只是一个矩形盒子。这些盒子都有一个背景层，背景层可以是完全透明或者其它颜色，也可以是一张图片。此背景层由8个CSS属性（加上1个简写的属性）控制。