CSS新特性

CSS在Web设计领域有着举足轻重的地位,它的跃进带来了Web体验的革命。
最近看到一些新特性让人眼前一亮!

它们是:
CSS栅格/格子(Grid),CSS形状(shapes),CSS写作/书写模式(writing-mode)。
接下来分别看看它们的真容。

Grid

.grid {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
  grid-column-gap: 20px;
}

grid-template-columns 与 grid-template-rows 属性


1. 作用
指定的每个值可以创建每行的高度。行的高度可以是任何非负值,长度可以是px、%、em、fr等

2.【fr】单位:fr用来创建一个弹列的网格轨道。它代表了网格容器中可用的空间(就像flex中无单位的值)。可以理解为1份。
例如,grid-template-columns: 1fr 1fr 2fr,代表网格分成了3份,三份的宽度比例是 1:1:2。
fr的出现,让grid支持弹性布局,用起来比较灵活。

  1. 函数

– minmax(min,max) :通过minmax()函数来创建网格轨道的最小或最大尺寸
例如, grid-template-columns: minmax(auto, 50%) 1fr 3em;
– repeat(count, size) : repeat()可以创建重复的网格轨道。这个适用于创建相等尺寸的网格项目和多个网格项目。
例如, grid-template-rows: repeat(3, 1fr); grid-template-columns: 30px repeat(3, 1fr) 30px;

grid-column 属性

.grid-item {
  /* 从第二列开始,跨两列 */
  grid-column: 2 / span 2;
}

span是个关键字,也可以用 odds 或 even指定奇偶列。

关于Grid的应用,有个酷站推荐–> http://labs.jensimmons.com/

Clip-path 形状


Clip-path 属性可以通过定义裁剪区域来决定目标元素哪个区域可见,哪个区域不可见,也就是只有在闭合路径内的部分才显示,区域以外的部分就不显示。
Clip-path 实现裁剪的原理也非常简单,clip-path 属性为我们提供了一系列的坐标来创建路径也就是我们常常说的X,Y。当创建完一个闭合的路径时,位于路径内部的区域就可见,而路径外的区域就不可见。这样就实现了裁剪效果。我们可以用这个属性来创建各种图形,如圆形,多边形,三角形,椭圆形等等。
举个栗子

<style>
.path {
-webkit-clip-path: polygon(50% 0, 0 100% ,100% 100%);
}
</style>
</head>
<body>
<img class="path" src="xxx.jpg" alt="">

Clip-path 是除了利用canvas、svg以外实现特殊形状的利器!用法不用太多解释,官方文档很详细。
但要说一点,clip-path定义了物体的可见区域,同样也是可触发区域。就像图片的map用法一样。当然clip-path功能更强大。

Writing-mode


writing-mode原本设计的是控制内联元素的显示的(即所谓的文本布局-Text Layout)。因为在亚洲,尤其像中国这样的东亚国家,存在文字的排版不是水平式的,而是垂直的,例如中国的古诗古文。因此,writing-mode就是用来实现文字可以竖着呈现的。

.w-m {
/* 关键字值 */
  writing-mode: horizontal-tb;    /* 默认值 */
  writing-mode: vertical-rl;
  writing-mode: vertical-lr;
}

引用一个案例,充分利用了这个特性:
http://penang-hokkien.gitlab.io/

参考

future-of-web-design
clip-path

发表评论

电子邮件地址不会被公开。 必填项已用*标注