随笔分类 - css和ui组件库
摘要:一、unicode-range是什么? 一看名称,很多小伙伴可能认为是个什么生僻的东西,实际上,这玩意只是名字怪怪的,功能关键时刻还是很管用的。 unicode-range是一个CSS属性,一般和@font-face规则一起使用。 大家应该不赶时间吧,那我们一点一点往下深入,现在很多网站会使用微软雅
阅读全文
摘要:在介绍新的 CSS 属性 contain 之前,读者首先需要了解什么是页面的重绘与重排。 之前已经描述过很多次了,还不太了解的可以先看看这个提高 CSS 动画性能的正确姿势。 OK,下面进入本文正题, contain 为何? contain 属性允许我们指定特定的 DOM 元素和它的子元素,让它们能
阅读全文
摘要:conic-gradient 是个什么?说到 conic-gradient ,就不得不提的它的另外两个兄弟: linear-gradient : 线性渐变 radial-gradient : 径向渐变 说这两个应该还是有很多人了解并且使用过的。CSS3 新增的线性渐变及径向渐变给 CSS 世界带来了
阅读全文
摘要:本文主要讲讲 CSS 非常新的一个特性,CSS @property,它的出现,极大地增强的 CSS 的能力!根据MDN -- CSS Property[1],@property CSS at-rule 是 CSS Houdini API 的一部分, 它允许开发者显式地定义他们的 CSS 自定义属性,
阅读全文
摘要:CSS 中有一个非常有意思的模块 -- CSS Motion Path Module Level 1,翻译过来也就是运动路径。本文将对 motion path 一探究竟,通过本文,你可以了解到: 什么是 CSS motion path 使用 CSS motion path 制作简单路径动画 使用 C
阅读全文
摘要:在编写网站的时候,或多或少都会用到一些网络上的字体,CSS 3 中虽然加入了对 Web Fonts(网络字体)的支持,但是浏览器对它们的加载和默认处理方式会极大的影响网站的性能和用户体验。例如默认情况下,在 Web Fonts 加载时,使用该字体的地方会显示空白,直到字体下载完成之后才会显示,这时通
阅读全文
摘要:一、CSS mask遮罩的过往和现状CSS mask遮罩属性的历史非常久远了,远到比CSS3 border-radius等属性还要久远,最早是出现在Safari浏览器上的,差不多可以追溯到09年。 不过那个时候,遮罩只能作为实验性的属性,做一些特效使用。毕竟那个年代还是IE浏览器的时代,属性虽好,但
阅读全文
摘要:解决思路: 要真正禁止打印页面是办不到的,但是如果能设置让用户打印到的是空白,也算是实现禁止打印的目的了。 具体步骤: 代码示例: <html> <head><title>不可打印的页面</title> <style> @media print{ body{display:none} } </sty
阅读全文
摘要:进阶 组件库按需引入 在目前,所有的组件会被打包进一个文件,组件库是一骨碌加载完所有组件,同时也会打包和加载多余的代码。对于小项目这样没有问题,但是当组件库越来越庞大、丰富,特别是像我们带业务逻辑的非js库,代码量会更大,如果不管不顾的一通加载完所有资源,后期肯定会带来业务方面的体验问题。 所以首要
阅读全文
摘要:本文梳理如何搭建和构建前端组件库. 了解几个问题 为何需要组件化? 大部分项目起源都是源于业务方的各种各样的奇葩需求。随着公司的业务发展,公司内部开始衍生出很多的B2C系统、后台系统,前端部门也疲于应对越来越多同质化的项目,这些项目在很多基础模块层、源代码存在不小的相似,甚至存在相似的业务模块。 笔
阅读全文
摘要:1、deg 度(Degress)。一个圆共360度 90deg = 100grad = 0.25turn ≈ 1.570796326794897rad -moz-transform: rotate(2deg);-webkit-transform: rotate(2deg);transform: ro
阅读全文
摘要:博主最近在做网站的过程中发现了一个非常强大的CSS3属性,就是filter(滤镜)属性,喜欢p图的朋友看名字都应该知道这是什么神器了吧。当然,这个属性的效果肯定不能跟ps相比,但是利用的好的话可以在节约很多空间下,把一张图做成两张图的效果。 1定义 filter,从字面意思来看就是滤镜,官方定义fi
阅读全文
摘要:CSS 形状模块标准1(CSS Shapes Module Level 1)这个规范打破了 WEB 中的矩形盒模型的限制,并且将网页设计提升到一个新的高度。 关于 Shapes 规范 shape-outside shape-outside CSS 属性可以来设置行内内容应该包裹的形状,默认形状为:m
阅读全文
摘要:简介 CSS Variables,一个并不是那么新的东西,但对css来说绝对是一场革命。 之前使用变量的时候,需要借助sass、less等预处理工具来实现,现在我们可以直接使用css来声明变量。 兼容性 老规矩,先来看下兼容性 兼容性 兼容性一片绿,红的那不是还有两个吗?做大事怎么能拘小节呢,让它咕
阅读全文
摘要:作者:老姚,《JS正则迷你书》的作者 https://github.com/qdlaoyao/css-gif 本文的每一条,都是我曾经发过的掘金沸点,其中有很多条超过了百赞(窃喜)。鉴于时不时有童鞋翻我以前的沸点,因此,本文收集了个人目前发过的所有CSS知识点动图,以便阅读。 需要说明的是,顺序仍是
阅读全文
摘要:一)第一种方法 (1)HTML结构 1 <body> 2 <div class="animate wave"> 3 <div class="w1"></div> 4 <div class="w2"></div> 5 <div class="w3"></div> 6 <div class="w4"><
阅读全文
摘要:1.vux 官网:https://doc.vux.li/zh-CN/ Github:https://github.com/airyland/vux 13818 Stars 3064 Forks VUX(读音 [v’ju:z],同 views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主
阅读全文
摘要:简介 CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式。如我们所知,CSS 总是用于网页的样式设置,但它并没有起到很好的作用。刚开始的时候我们使用表格(table),然后使用浮动(float)、 定位(position)和内联块(in
阅读全文
摘要:1.申明和使用变量 sass使用$符号来标识变量(老版本的sass使用!来标识变量),比如$highlight-color和$sidebar-width。 与CSS属性不同,变量可以在css规则块定义之外存在。当变量定义在css规则块内,那么该变量只能在此规则块内使用。如果它们出现在任何形式的{..
阅读全文