原文：
展示了Google Web Fonts中一些高质量字体的使用实例，页面里没直接写字体名字，拉出来备注一下
样式
<link href='http://fonts.googleapis.com/css?family=xxxx' rel='stylesheet' type='text/css'>
Car......
原文：
作者：
大致思路是用SVG做背景，SVG text做裁切路径。使用SVG而不是用CSS裁剪图像，是因为要实现背景动画的话CSS就需要一个gif的动态图片。
首先需要创建一个由SVG图形组成的背景。这里使用椭圆形斑点的形状。需要注意的是将矢量图软件中的画板/画布大小设置成和最终效果里的viewBox相同的尺寸。（Inkscape中在文档属性下的缩放选项）
目标......
[CSS Grid] Hogwarts ticket
Feb 10, 2019
CSS
CSS-Tricks推送文章里看到的用CSS Grid实现的霍格沃茨黄牛票
See the Pen by Olivia Ng
() on .
CSS Grid网格布局，使用水平和垂直的线相交形成网格，然后将元素放置在他们形成的单元格上。
使用网格布局，需要在容器元素上定义display: grid或display: inline-grid，使用grid-template-colum......
<i class="fa fa-calendar"></i>
.fa::before {
background-image: linear-gradient(90deg, #51a0fc, #d2a2e6);
background-clip: text;
color: transparent;
}
badckground-clip属性设置元素......
效果：
See the Pen by NINE () on .
CSS PAINT API
CSS Paint API，是API集合Houdini中的一部分，可以用来绘制图像，并作为需要设置image的css属性的值，比如background-image，border-image。
其他API如Layout API来实现布局，Parser API解析CSS表达式等。不过整体来......
原文地址：
随便看到的顺便记一下，虽然比较短小
这是一段css变量（通常称为自定义属性）
:root {
--mouse-x: 0px;
--mouse-y: 0px;
}
你可能用它来设置定位
.mover {
left: var(--mouse-x);
top: var(--mouse-y);
}
要使用JavaScript来修改变量值，可以这样：
l......
重新审视Css Shapes
Sep 27, 2018
CSS
原文地址：
CSS Shape Level 1规范在Chrome和Safari浏览器上获得支持已经有许多年了，本周（2018/9/4那周）Firefox发布的生产版本Firefox 62中添加了对它的支持，并让我们能在Firefox开发者工具中更好的使用它。 在本文中，我将介绍一些CSS Shapes的使用示例。或许，是时候给你的设计中添加一些弯曲形状了？
CSS Shapes是什......
使用css grid实现github贡献图
Sep 25, 2018
CSS
原文地址：
图表分为四个部分
整体图形网格
"days"列
“month”行
图形方格
整体网格
贡献图可以分为三部分 - 星期列，月份行，和独立的方格
在主要的 .grid元素中，有三个元素
<div class="graph">
<ul class="months">......
Page 1 of 2
Older →