罡风小天
如何编写一个原生 Web Components 组件
在今天的前端编程中,利用语义化的 HTML 结合 CSS 来完一个组件并不是一件难事,这也意味着无论在 React、Vue 中都可以插入,不过它俩不是今天的主角,接下来我将用一个例子来介绍如何封装一个完整的原生 HTML 的 Web Components 组件,让我们开始吧!
2022-10-07 14:43:20阅读全文
在Chrome浏览器中最快速实现拾色器(颜色吸管)的方法
说到网页拾色器(颜色吸管工具)在前端的实现方法,通常我们会想到先进行网页截图,然后通过Canvas绘制截图,此时利用Canvas所提供的的API即可解析出图片每个像素点颜色,最后通过获取鼠标定位,得到当前的坐标来进行颜色选择。
2022-10-07 21:50:34阅读全文
当UI走查说页面色值错误时,先别急着检查代码
颜色一直是UI设计师们非常敏感的问题,我至今仍忘不了那天,一位萌新设计师在走查UI时,给我提了好几个Bug,大多是颜色有差异问题,我当时的第一反应是去检查代码,排查了半天确认自己没有写错色值后,我就在想会不会是取色的问题?于是我做了个试验,在网页上设置一个背景色,然后用Chrome自带的取色器吸了一
2022-10-08 03:08:07阅读全文
用纯CSS实现优惠券剪卡风格
在做商城类项目的时候,我们可能都会经历过“优惠券”这类需求,笔者在过往工作中,都是直接要求UI切图来实现,直到有一天产品告诉我一个奇思妙想:这个优惠券的宽度会随内容变化的!一下子让我陷入了人生的大思考,这样图片方式可不好整呐,因此萌生一个想法:能不能用纯css实现这些效果呢?
2022-10-08 02:13:14阅读全文
Vue实现无限级树形选择器(无第三方依赖)
2022-10-07 22:06:26阅读全文
为什么大家偏爱怪异盒模型border-box?
我们都知道有两种盒模型,w3c盒模型和IE盒模型,IE是业界毒瘤所以IE盒模型又叫怪异盒模型(好吧我瞎说的)。content-box,顾名思义,即width就是内容宽度,和边框边距相互独立,反过来 border-box 就是宽度包含了padding和border,相互影响。
2022-10-07 13:57:09阅读全文