05 2017 档案
摘要：现在的网页设计中，饼图的运用极为普遍。如：简单的统计图表，进度指示器，定时器等等。饼图的技术实现方式也非常多，主要是使用JavaScript配合canvas来实现，从而诞生了一大批的图表绘制JS库。但是单纯使用CSS来实现饼图的技术还是在CSS3推出后才开始出现。 今天就来讲讲基于transform
阅读全文
摘要：梯形标签页是一种很常见的网页设计风格 然而现实中大部分实现方案都是利用伪元素来实现两边不平行的线条。 这种方式的弊端就在于可扩展性差，比如添加一圈边框，一层纹理背景，顶部设置圆角等。 今天就来介绍几种合理的解决方案 一、3D变换 当一个元素进行翻转时，如果加上景深perspective属性后会出现近
阅读全文
摘要：clip-path表示剪裁路径，也就是从某个物体上剪切一块内容。比如在图片上根据需要剪切一部分需要留下的区域。 这里涉及到两个概念: 裁剪路径clipping path，裁剪区域clipping region。 裁剪路径就是用来裁剪元素的路径，标记了需要裁剪的区域。可以是任意形状。 裁剪区域就是裁剪
阅读全文
摘要：将角切掉也是一种流行的设计风格 传统解决方案可能是使用三角形或者其他形状的图片来盖住边角从而模拟切角效果 有了CSS3,我们完全可以使用新技术来实现 第一种方案: CSS渐变 需求一: 一个矩形需要切掉一个45°角 使用线性渐变来实现 background: #58a linear-gradient
阅读全文
摘要：场景: 设计师设计了一个菱形区域用来展示图片 与平行四边形一节类似，可以采用将图片用容器包裹起来后旋转45度。同时将内部图片反方向旋转45度(因为容器旋转也会使得内部元素也旋转)。 方案一实现效果: 由于图片的宽度与容器的宽度一致，所以反方向旋转后会产生八边形。解决方案是将图片的宽度设置为容器宽度的
阅读全文
摘要：目的: 想给一个简单的小按钮扩大其热区在四个方向上均向外扩张10px 解决方案: 1. 常规的解决方案可能是设置一圈透明边框。 border: 10px solid transparent; 2. 但是如果按钮有背景色，那么边框很可能会扩大按钮的可视尺寸。于是可以采用background-clip属
阅读全文
摘要：鼠标指针可以用来告诉用户当前可以执行什么动作 目前已有的内置光标种类有: zoom-out 介绍几种常用光标 1. 提示禁用状态 not-allowed用于提示某个控件因为某种原因无法进行交互，常常用于表单 :disabled, [disabled], [aria-disabled='true']{
阅读全文
