CSS scroll-snap

移动端页面常用的一种滚动效果,一般是使用JavaScript,但是也可以使用CSS的scroll-snap来实现。

Scroll Snap

scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proxi......

指定代码不使用lint

ESlint

可以给文件添加/* eslint-disable */,或者对某块代码禁用警告

/* eslint-disable */

alert(1);

/* eslint-enable */

/* eslint-disable no-alert, no-console */

alert(......

漂亮的网页字体与排版

原文:

展示了Google Web Fonts中一些高质量字体的使用实例,页面里没直接写字体名字,拉出来备注一下

样式

<link href='http://fonts.googleapis.com/css?family=xxxx' rel='......

使用SVG和裁剪实现文字斑点动画

原文:

作者:

大致思路是用SVG做背景,SVG text做裁切路径。使用SVG而不是用CSS裁剪图像,是因为要实现背景动画的话CSS就需要一个gif的动态图片。

首先需要创建一个由SVG图形组成的背景。这里使用椭圆形斑点的形状。需要注意的是将矢量图软件中的画板/画布大小设置......

[CSS Grid] Hogwarts ticket

CSS-Tricks推送文章里看到的用CSS Grid实现的霍格沃茨黄牛票

See the Pen by Olivia Ng

() on .

CSS Grid网格布局,使用水平和垂直的线相交形成网格,然后将元素放置在他们形成的单元格上。

使用网格布局,需要在容器元素上定义displa......

渐变图标字体

<i class="fa fa-calendar"></i>

.fa::before {

background-image: linear-gradient(90deg, #51a0fc, #d2a2e6);

background-clip: text......

CSS paint 实现Material Design Button

效果:

See the Pen by NINE () on .

CSS PAINT API

CSS Paint API,是API集合Houdini中的一部分,可以用来绘制图像,并作为需要设置image的css属性的值,比如background-image,border-image。

......