Amazing CSS

一些牛逼哄哄的CSS的玩法。

设置选中文字的背景色。现在选中后为马卡龙绿色。

1
2
3
4
5
::selection {
    background: #DB4F33;
    color: white;
    text-shadow: none;
}

-webkit-perspective可以用来设置透视的度数，呈现3D立体感。

origin为透视原点（底部位置）。

1
2
3
4
.cls{
  -webkit-perspective: 800;
  -webkit-perspective-origin: 50% 200px;
}

perspective的最佳大小为显示器宽像素*（人眼距显示器距离/显示器宽度）。
当translateZ极限接近perspective值的时候，元素会占满整个屏幕。
在3D的世界里，rotate是沿着中轴线旋转的（此时另两个坐标的轴线一起转移），translate是沿着轴方向位移。
当元素是一个边长为200px的正方体。每个面都在旋转后z位移100px（因为是沿重点转），就能组成一个立方体。
这是我的demo。
此外，perspective应用在“舞台”和“元素”二者身上的表现是不同的。见大牛的demo。

box-shadow是个很神奇的东西，同border和background这类一起应用好直接能画图。

见大牛的一个把box-shadow发挥到极致的网站。
你可以试试这么写border出来分别是什么东东。

1
2
3
4
5
6
7
8
9
10
11
12
13
.triangle {
  height: 0px;
  width: 0px;
  border:100px solid;
  /*  Add color now */
  border-color: pink green yellow purple;
}
.triangle2 {
  height: 0px;
  width: 0px;
  border:100px solid;
  border-color: transparent transparent #DB4F33 transparent;
}

自定义字体：

1
2
3
4
5
6
7
8
9
10
11
12
@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
/* 这么调用 */
body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

剪裁路径clip-path

来看看这个。

1
2
3
4
5
6
7
8
9
10
11
a{
  display:block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 115.625vw;
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background:#f00;
}

有时候美术就是会有一些棒棒的设计，比如说三角形的选块，这在传统意义上的盒模型里是不好实现的，好在有CSS和SVG这种神一般的存在。
clip-path除了作为clip的替身，还是SVG clip-path属性的延伸。想要了解更多见大牛的demo中的解析。