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">......

设备物理像素和设备独立像素

几个概念

设备像素,也称为物理像素,是设备能控制显示的最小单位;

CSS像素,写页面样式时候的像素单位,不是实际存在而是抽象的;

设备独立像素,计算机坐标系中的一个点,是可由程序控制使用的虚拟像素。(也有称设备逻辑像素)

screen对象的width和height属性可以返回显示屏的宽高,这个值其实是设备独立像素而不是屏幕分辨率,设备的屏幕分辨率是无法直接用代码获取的。在pc端看到的......

Media Query断点单位

之前做一个项目,用的pure css里的grids来做的栅格和响应式布局,css里处理断点的是使用的em单位,因为刚好和设计师那边给的断点位置不一样就直接改了并顺手写的px单位。最近又有类似的项目突然想到这个单位的问题,就稍微测试一下下,看看不一样的单位有什么区别。

IE看的ie9,因为虚拟机里只有这个..看之后能不能补一下

默认情况

三个div,在断点处更改背景色。

@media s......

SVG描边动画

See the Pen by NINE () on .

图标是在阿里的iconfont里面随便翻的,下载的svg格式,描边动画需要有stroke

SVG的stroke属性

stroke 颜色

stroke-width 宽度

stroke-linecap 端点的表现

stroke-dasharray 虚线

描边动画重点在最后这个属性,SVG本身也可以用......

[译]67个帮网页开发者节省时间的工具、库和资源

原文:

在本文中,我并不会谈论一些大型的前端框架,比如像React、Angular、Vue等,也不准备讲流行的代码编辑器如Atom,VS Code,Sublime等,我只是想分享一个我认为对提升开发者工作效率有帮助的工具列表。

一些朋友可能对其中的一些工具有所了解,但是如果你从中发现新的和有用的东西,我会感到很高兴。

这个列表包含很多不同的资源,所以为了方便......