常用代码
in 设计技术 with 0 comment

常用代码

in 设计技术 with 0 comment

特效

模糊、投影

名称代码
外投影box-shadow: 0px 4px 4pxrgba(0, 0, 0, 0.25);
内投影box-shadow: inset 1px 1px2px rgba(255, 255, 255, 0.25);
图层模糊filter: blur(2px);
高斯模糊backdrop-filter: saturate(180%) blur(20px);

滤镜

名称代码
正常 - Normalmix-blend-mode: normal;
变暗 - Darkenmix-blend-mode: darken;
叠加 - Multiplymix-blend-mode: multiply;
颜色加深 - Color Burnmix-blend-mode: color-burn;
变亮 - Lightenmix-blend-mode: lighten;
滤色 - Screenmix-blend-mode: screen;
颜色减淡 - Color Dodgemix-blend-mode: color-dodge;
叠加 - Overlaymix-blend-mode: overlay;
柔光 - Soft Lightmix-blend-mode: soft-light;
强光 - Hard Lightmix-blend-mode: hard-light;
差值 - Differencemix-blend-mode: difference;
排除- Exclusionmix-blend-mode: exclusion;
色相 - Huemix-blend-mode: hue;
饱和度 - Saturationmix-blend-mode: saturation;
颜色 - Colormix-blend-mode: color;
明度 - Luminositymix-blend-mode: luminosity;
查看效果

鼠标

描述
cursor需使用的自定义光标的 URL。
注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。
箭头 - default默认光标(通常是一个箭头)
默认 - auto默认。浏览器设置的光标。
十字 - crosshair光标呈现为十字线。
小手 - pointer光标呈现为指示链接的指针(一只手)
移动 - move此光标指示某对象可被移动。
禁止 - not-allowedcursor:not-allowed;
向右移动 - e-resize此光标指示矩形框的边缘可被向右(东)移动。
向上+向右移动 - ne-resize此光标指示矩形框的边缘可被向上及向右移动(北/东)。
向上+向左移动 - nw-resize此光标指示矩形框的边缘可被向上及向左移动(北/西)。
向上移动 - n-resize此光标指示矩形框的边缘可被向上(北)移动。
向下+向右移动 - se-resize此光标指示矩形框的边缘可被向下及向右移动(南/东)。
向下+向左移动 - sw-resize此光标指示矩形框的边缘可被向下及向左移动(南/西)。
向下移动 - s-resize此光标指示矩形框的边缘可被向下移动(南)。
向左移动 - w-resize此光标指示矩形框的边缘可被向左移动(西)。
文本 - text此光标指示文本。
忙 稍等 - wait此光标指示程序正忙(通常是一只表或沙漏)。
帮助 - help此光标指示可用的帮助(通常是一个问号或一个气球)。
使用:cursor: help;

文字

常用属性

描述
首行缩进2字符text-indent:2em; (使用百分比:text-indent: 5%;)
间距word-spacing: 30px;   word-spacing: 0.5em;
去下划线text-decoration: none;
不换行white-space: nowrap;
按钮多点不选中onselectstart="return false;" style="-moz-user-select:none;" 
优雅的换行letter-spacing: .005em;
英文大些text-transform: uppercase;

彩色文字

color: #fff;
background: linear-gradient(135deg, #FF5C53 0%, #EF5C6E 25%, #A34DF3 49%, #905EFF 57%, #26CAFA 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;

a 标签

a { 
    color: #0070c9; 
    }

a:hover, a:active, a:focus {
    text-decoration: underline;
    }

a:visited {
    color: #003763;

文字

多平台对比

AndroidiOSWeb
10sp10pt0.625rem
12sp12pt0.75rem
14sp14pt0.875rem
16sp16pt1rem
18sp18pt1.125rem
20sp20pt1.25rem
22sp22pt1.375rem
24sp24pt1.5rem
60sp60pt3.75rem

Web浏览器根据根元素大小计算REM(根em大小)。现代Web浏览器的默认值为16px,因此转换为SP_SIZE / 16 = rem。

图片

常用属性

描述
顶图background: url('https://huobi-1252264550.file.myqcloud.com/bit/banner/f96ede84-6218-4e13-97c4-6084d0191ebe.jpg') no-repeat center ;
剧中 - 适应background: url(https://img-cdn.bitforex.vip/sb_bjt.jpg) no-repeat;

background-size: cover;
background-position: 50%; |

Google Material效果

Google Material 鼠标移入卡牌

background-color: #fff;
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
transition-property: box-shadow;
transition-duration: .25s;
transition-timing-function: linear;
border-radius: 2px;

鼠标移入卡牌整行的链接文字时,背景色变化

a.cfc-info-card-item[_ngcontent-c56]:hover{ 
    background-color: rgba(0,0,0,.04); 
    }

    

a.cfc-info-card-item[_ngcontent-c56] {
    color: #000;
    border: 0;
    text-decoration: none;
    transition: background-color .3s cubic-bezier(0.215, 0.61, 0.355, 1);
    }

抗锯齿

一般要给"加粗的文字"添加抗锯齿属性

b {
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
}

块块

整体缩放 / 360旋转

将配置区域的块块大小整体变为之前的0.72倍
transform: scale(0.72);

将块块进行360度旋转
transform: scale(-1);

不错的顶部抬高块块

.divbg1{
    background-image: linear-gradient(180deg,hsla(0,0%,100%,0) 50%,#fff),linear-gradient(70deg,#eaf5ff 32%,#f6fff8);
    box-shadow: 0 3px 6px rgba(0,0,0,.05);
}
评论