漂亮的网页字体与排版

原文:

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

样式

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

Car......

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

原文:

作者:

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

首先需要创建一个由SVG图形组成的背景。这里使用椭圆形斑点的形状。需要注意的是将矢量图软件中的画板/画布大小设置成和最终效果里的viewBox相同的尺寸。(Inkscape中在文档属性下的缩放选项)

目标......

[CSS Grid] Hogwarts ticket

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属性设置元素......

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。

其他API如Layout API来实现布局,Parser API解析CSS表达式等。不过整体来......

使用JavaScript修改CSS变量

原文地址:

随便看到的顺便记一下,虽然比较短小

这是一段css变量(通常称为自定义属性)

:root {

--mouse-x: 0px;

--mouse-y: 0px;

}

你可能用它来设置定位

.mover {

left: var(--mouse-x);

top: var(--mouse-y);

}

要使用JavaScript来修改变量值,可以这样:

l......

重新审视Css Shapes

原文地址:

CSS Shape Level 1规范在Chrome和Safari浏览器上获得支持已经有许多年了,本周(2018/9/4那周)Firefox发布的生产版本Firefox 62中添加了对它的支持,并让我们能在Firefox开发者工具中更好的使用它。 在本文中,我将介绍一些CSS Shapes的使用示例。或许,是时候给你的设计中添加一些弯曲形状了?

CSS Shapes是什......

使用css grid实现github贡献图

原文地址:

图表分为四个部分

整体图形网格

"days"列

“month”行

图形方格

整体网格

贡献图可以分为三部分 - 星期列,月份行,和独立的方格

在主要的 .grid元素中,有三个元素

<div class="graph">

<ul class="months">......