登录/注册

首页 › 活字格专区 › 格友杂谈 › 查看内容

1 主题	14 帖子	525 积分

积分: 525

17139
金币
1
主题
14
帖子

最新发帖

[资源分享] 【CSS美化专题】单选框组件美化——在拟物化的岔路上越走越远

阿凡佬
中级会员 / 发表于：2022-4-17 13:48 / 查看：23763 / 回复：3

本帖最后由阿凡佬于 2022-4-17 13:56 编辑

先来点题外话，不知道大家有没有跟我一样的感觉，自从苹果带了扁平化的节奏，互联网的世界似乎所有的UI都被“如来神掌”给压扁了，近乎所有你看到的用户界面，甚至连Winform的界面，都成了一张薄薄的纸。一开始的确有点新鲜感，但随着时间流逝，大家似乎也逐渐厌倦这种没有Z轴的界面，“轻拟物”、“新拟物”等设计风格也开始冒出来走上舞台。这次拟物化风潮，似乎仍旧保持着扁平化设计的克制，只是稍微用了一点渐变和阴影，就能使扁平的界面看起来没有那么地“扁平”，光源这一概念重新回到了设计师的视野。

我们回到正题，这次我们来对单选框组件“动刀子”。

让我们看下原生组件
image.png950451660.png

image.png950451660.png

image.png38248595.png

除了“系统样式”外，活字格有3个预设样式，“现代”、“开关”、“按钮”，这三个样式都有各自对应的使用场景，因此我们这次对这三个样式进行改造

先来看现代样式，它的类名是 fgc-radio-modern。它有4个状态：一般、鼠标停留、选中、选中时焦点
image.png152058714.png

image.png152058714.png

image.png820054931.png

为了让他看起来能够“跃然于纸上”，我们想象一下，假如它的三个选项是三个凹槽，然后我们把一块圆柱形的物体放在这个凹槽里，完成了选择。基于这样的一个想象，为让其有如实物般的质感，我们重构它的两个状态的样式

一般状态——凹下去，就像一个凹槽一样
选中状态——有一块带颜色的圆柱形物体放在这个凹槽里

但这时候怎么使一个平面的形状产生立体的质感呢？我们首先要定义一个光源角度，一般来讲，左上方45°角的光源是最常见的，也是最简单的。
image.png480950927.png

image.png480950927.png

我们假定我们的凹槽深度为1px，在45°角的光源下，我们很方便地就能得出阴影宽度也同样为1px，即Ws=d而因为光源不仅在Z轴上的角度是45°，在X Y轴上同样也是45°，因此我们同样可以得出X=Y
image.png940119018.png

image.png940119018.png

box-shadow: inset 1px 1px 0px 0px #000;

复制代码

因为这种效果在现实中不可能存在，除非光源无限强，所以看着实在生硬，我们需要给他加一个模糊(blur)

image.png785854491.png

image.png785854491.png

box-shadow: inset 1px 1px 1px 0px #000;

复制代码

但是加了模糊之后，似乎这个凹槽的深度更深了，所以为了减轻模糊带来的影响，我们稍微减少X和Y的值 image.png329707640.png

image.png329707640.png

box-shadow: inset 0.8px 0.8px 1px 0px #000;

复制代码

这时候这个凹槽已经看着比较自然了，但是自然界是不存在单纯的直射光源的，还有一系列漫反射、环境光等等。因此，我们至少要为这个凹槽再添加上一层无偏移的阴影，以使其尽可能地模拟自然界的光源，让它的边缘更加明显
image.png554941100.png

image.png554941100.png

box-shadow: inset 0.8px 0.8px 1px 0px #000,
inset 0px 0px 1px 0px #000;

复制代码

现在处理它的选中状态。按照我们之前的想象，选中状态的单选框它是一个圆柱体，嵌于这个凹槽内，这时候光线成了这样
image.png887126464.png

image.png887126464.png

这个圆柱体它将有一个外阴影，且直对光线的一角会有一个高光
image.png641439208.png

image.png641439208.png

box-shadow:1px 1px 1px 0 #000,
1px 1px 1px -1px #fff inset;

复制代码

这时候我们发现了一个问题，内阴影和外阴影之间还隔着一个边框，这使得这个圆柱体看起来有点变形。因此我们可以把border设置为none，并用阴影来模拟边框
image.png812048644.png

image.png812048644.png

box-shadow:1px 1px 1px 0 #000,
1px 1px 1px -1px #fff inset,
0 0 0 1px currentColor; /*这里的currentColor即设计器中定义的前景色*/

复制代码

image.png854738769.png

现在看起来，是不是已经有实物的质感了呢？

好了，方法论结束
上成品

image.png62781065.png

image.png62781065.png

附件demo和源码自取

游客，如果您要查看本帖隐藏内容请回复

评分

参与人数 4	金币 +1000	满意度 +15	收起理由
hs68469023		+ 5
Chelsey.Wang	+ 1000		赞一个!
一眼望天涯		+ 5
amtath		+ 5

查看全部评分

收藏

回复

3 个回复

倒序浏览

阿凡佬
中级会员 / 发表于：2022-4-17 13:50:03 沙发

本帖最后由阿凡佬于 2022-7-9 15:23 编辑

第一期：【CSS美化专题】用CSS美化表格删除按钮
第二期：【CSS美化专题】原生日历控件美化
第三期：【CSS美化专题】单选框组件美化——在拟物化的岔路上越走越远
第四期：【CSS美化专题】更美观的下拉窗口
第五期:  【CSS美化专题】不一样的菜单用法
第六期:  【CSS美化专题】图文列表的妙用

回复 使用道具举报

wwbb
初级会员 / 发表于：2024-9-20 10:45:42 板凳

学习学习，学习学习

回复 使用道具举报

ZDYW
金牌服务用户 / 发表于：8 小时前 地板

回复 使用道具举报