css span 右端对齐_使用 CSS 实现具有方面感知的幽灵按钮
Ghost Buttons
:幽灵按钮是指具备基本的按钮形状的透明按钮,有细实线的边框。在悬停时背景填充颜色以突出按钮。direction aware
:方向感知这里主要说的是能够判断鼠标是从按钮哪个方向过来的。
本文中,我们将构建一个幽灵按钮,实现按钮很简单,但有趣而棘手的部分是使按钮背景色从鼠标进入的方向开始填充。
下面是我们完成的一个按钮!
codepen-demo
多数情况下,鼠标悬停时,我们是把 background-color
过渡显示成与边框颜色一样。在某些设计中,按钮可能会从左到右,从上到下等填充,以增强视觉效果。如下例,从左到右填充:
codepen-demo
如果我们把鼠标从按钮右侧放上,而填充是从左侧开始,我们就会感觉体验不好!
如果按钮从我们的悬停点开始填充,体验效果会更好。
怎么才能使按钮具有方向感知性呢?我们首先想到的可能是使用 JavaScript 来实现,但我们也可以通过 CSS 配合一些标签来实现。
下面我们可以先看看最终实现的效果:
codepen-demo
接下来,我们把实现步骤分解开来。
基础
我们先创建一个按钮,很简单!
<button>Boo!</button>
我们使用 CSS 自定义属性完成样式,这样更易于维护。
button {--borderWidth: 5;--boxShadowDepth: 8;--buttonColor: #f00;--fontSize: 3;--horizontalPadding: 16;--verticalPadding: 8;background: transparent;border: calc(var(--borderWidth) * 1px) solid var(--buttonColor);box-shadow: calc(var(--boxShadowDepth) * 1px) calc(var(--boxShadowDepth) * 1px) 0 #888;color: var(--buttonColor);cursor: pointer;font-size: calc(var(--fontSize) * 1rem);font-weight: bold;outline: transparent;padding: calc(var(--verticalPadding) * 1px) calc(var(--horizontalPadding) * 1px);transition: box-shadow 0.15s ease;
}button:hover {box-shadow: calc(var(--boxShadowDepth) / 2 * 1px) calc(var(--boxShadowDepth) / 2 * 1px) 0 #888;
}button:active {box-shadow: 0 0 0 #888;
}
codepen-demo
我们实现了一个按钮及悬停效果,但是没有填充。我们继续进行!
添加填充
我们额外创建元素做为按钮填充时的状态。通过 clip-path
将它隐藏。当鼠标悬停在按钮上时设置 clip-path
将元素过渡显示出来。
它们必须与父按钮对齐。这里我们的 CSS 变量会显示出它的优势。
本来我们可以通过伪元素实现,但是它不满足我们需要的四个方面,而且它还会干扰可访问性…稍后我们再讲。
我们先添加一个从左到右填充的效果。首页我们要添加一个 span
标签,它与按钮具有相同的内容。
<button>Boo!<span>Boo!</span>
</button>
下面我们要将span
与按钮重叠对齐。
button span {background: var(--buttonColor);border: calc(var(--borderWidth) * 1px) solid var(--buttonColor);bottom: calc(var(--borderWidth) * -1px);color: var(--bg, #fafafa);left: calc(var(--borderWidth) * -1px);padding: calc(var(--verticalPadding) * 1px) calc(var(--horizontalPadding) * 1px);position: absolute;right: calc(var(--borderWidth) * -1px);top: calc(var(--borderWidth) * -1px);
}
最后,我们通过裁剪使元素隐藏,当悬停时更新裁剪规则使元素显示出来。
button span {--clip: inset(0 100% 0 0);-webkit-clip-path: var(--clip);clip-path: var(--clip);transition: clip-path 0.25s ease;// ...Remaining div styles
}button:hover span {--clip: inset(0 0 0 0);
}
codepen-demo
添加方向感知
那么,如何感知方向呢?我们需要四个要素。每个元素将负责检测悬停入口点。使用 clip-path
,我们可以将按钮区域分为四个部分。
我们在按钮里添加四个 span
,并放在四个方面以进行填充按钮。
<button>Boo!<span></span><span></span><span></span><span></span>
</button>
button span {background: var(--bg);bottom: calc(var(--borderWidth) * -1px);-webkit-clip-path: var(--clip);clip-path: var(--clip);left: calc(var(--borderWidth) * -1px);opacity: 0.5;position: absolute;right: calc(var(--borderWidth) * -1px);top: calc(var(--borderWidth) * -1px);z-index: 1;
}
我们将每个元素进行定位并使用 CSS 变量赋予它们背景色及裁剪规则。
button span:nth-of-type(1) {--bg: #00f;--clip: polygon(0 0, 100% 0, 50% 50%, 50% 50%);
}
button span:nth-of-type(2) {--bg: #f00;--clip: polygon(100% 0, 100% 100%, 50% 50%);
}
button span:nth-of-type(3) {--bg: #008000;--clip: polygon(0 100%, 100% 100%, 50% 50%);
}
button span:nth-of-type(4) {--bg: #800080;--clip: polygon(0 0, 0 100%, 50% 50%);
}
为了测试,悬停时我们改变一下元素的透明度。
button span:nth-of-type(1):hover,
button span:nth-of-type(2):hover,
button span:nth-of-type(3):hover,
button span:nth-of-type(4):hover {opacity: 1;
}
哎呀,这里有个问题。如果我们进入并悬停一个分段,然后悬停在另一分段上,则填充方向将会发生变化。这看起来很不对劲。要解决此问题,我们可以在悬停时设置z-index
和clip-path
来填充这一空间。
button span:nth-of-type(1):hover,
button span:nth-of-type(2):hover,
button span:nth-of-type(3):hover,
button span:nth-of-type(4):hover {--clip: polygon(0 0, 100% 0, 100% 100%, 0 100%);opacity: 1;z-index: 2;
}
codepen-demo
合到一起
现在我们知道如何创建填充动画了,也知道如何判断方向了。那我们应该如何将它们放到一起实现想要的效果呢?答案是同级选择器!
当我们将鼠标悬停在一方向块上时,我们可以填充指定的元素。
首先,我们要更新一下我们的代码:
<button>Boo!<span></span><span></span><span></span><span></span><b>Boo!</b><b>Boo!</b><b>Boo!</b><b>Boo!</b>
</button>
接下来,我们需要更新一下我们的 CSS,填充样式我们可以复用从左到右的样式。但需要为每个元素设置不同的clip-path
。我们按第一个在上,第二个在右,第三个在下,第四个在左的顺序设置。
button b:nth-of-type(1) {--clip: inset(0 0 100% 0);
}
button b:nth-of-type(2) {--clip: inset(0 0 0 100%);
}
button b:nth-of-type(3) {--clip: inset(100% 0 0 0);
}
button b:nth-of-type(4) {--clip: inset(0 100% 0 0);
}
最后一步是鼠标悬停在对应方向块时更新对应元素的clip-path
。
button span:nth-of-type(1):hover ~ b:nth-of-type(1),
button span:nth-of-type(2):hover ~ b:nth-of-type(2),
button span:nth-of-type(3):hover ~ b:nth-of-type(3),
button span:nth-of-type(4):hover ~ b:nth-of-type(4) {--clip: inset(0 0 0 0);
}
至此,我们具有方向感知性的幽灵按钮就实现了。
codepen-demo
可访问性
当按钮不可访问里,会显示如下状态。
这些额外的元素使屏幕阅读器重复阅读了四次。所以,我们需要将它们隐藏起来。
<button>Boo!<span></span><span></span><span></span><span></span><b aria-hidden="true">Boo!</b><b aria-hidden="true">Boo!</b><b aria-hidden="true">Boo!</b><b aria-hidden="true">Boo!</b>
</button>
这样就没有重复的内容了。
就是这样
通过额外元素及使用 CSS 我们可以实现具有方向感知性的幽灵按钮。使用预处理器或将它们做为一个组件放在应用里,这样我们就不用每次都写了。
- 这里是一个通过方向感知填充文本效果的例子,实现方式与本文思路基本一致:Direction aware filling text effect
- 这篇文章里汇总了好些鼠标悬停判断方向的例子,有纯 CSS 实现的,也有通过 JS 实现的。Direction Aware Hover Effects
原文链接:[译]使用 CSS 实现具有方面感知的幽灵按钮
译者:Mark Wong
css span 右端对齐_使用 CSS 实现具有方面感知的幽灵按钮相关推荐
- css span 右端对齐_CSS标准文档流
web页面的制作,是个"流",像水流一样,必须从上往下,一点点的编织,不像画画,可以这个地方画一个,另一个地方画一个,随意而为. 标准文档流的一些微观现象 1. 空白折叠现象 1) ...
- css颜色rgba代码对照表_改善 CSS 的 10 个最佳实践
戳蓝字「前端技术优选」关注我们哦! CSS 看起来是一种非常直接且不易犯错的语言.只需要添加规则以对网站进行样式设置就可以了,对吗?对于只需要几个 CSS 文件的小型站点,可能是这种情况.但是在 ...
- css菜单下拉菜单_在CSS中创建下拉菜单
css菜单下拉菜单 CSS | 创建下拉菜单 (CSS | Creating Dropdown) Trivia: 琐事: We know the importance of navigation ba ...
- 5种css隐藏元素的方法_在CSS中隐藏元素的10种方法
5种css隐藏元素的方法 There are multiple ways to hide an element in CSS, but they differ in the way they affe ...
- C语言输入输出(左端对齐,右端对齐,对齐补零……)
输入.输出函数的头文件是stdio.h 整数数据控制符 整型数据(格式控制说明) 数据类型 十进制 八进制 十六进制 int %d %o %x long %ld %lo %lx long long % ...
- css 最后一行文字对齐,如何在CSS中居中对齐最后一行文本?
9 个答案: 答案 0 :(得分:124) .center-justified { text-align: justify; text-align-last: center; } 适用于除Safari ...
- html 右端对齐,html标题右对齐
资产发布成功后,发布者可以进入详情页修改该资产的标题.封面图.描述,可以让您的资产更吸引人. 修改封面图和二级标题 在发布的资产详情页面,单击右侧的"编辑",选择上传新的封面图,为 ...
- css文本向左对齐怎么设置,css怎么设置文本左对齐
在css中,可以利用text-align属性来设置文本左对齐,只需要给文字所在标签添加"text-align:left"样式即可.text-align属性用于指定元素中的文本的水平 ...
- css设置图标居左_「css图片居中」css - 常用 垂直/水平居中 + 左右布局 - seo实验室...
css图片居中 主要内容 学习文献 元素居中 胡子哥 - 谈一谈我在阿里的成长 + 2 左右布局 几种常见的CSS布局 -- 掘金 BFC 实现三栏布局的几种方法-- github 实现多列等高布局 ...
最新文章
- centos7通过yum升级内核到最新版本
- Unet实现图像分割(四)
- Winsock服务器设计的四个关键问题
- JAVA程序员看C#的精华与糟粕
- 使用eclipse自带制作帮助系统
- Dotfuscator 4.9 破解版下载地址
- java url下载ics_使用Microsoft Graph API处理外部(Internet / .ics)日历URL
- c/c++连接mysql数据库设置及乱码问题(vs2013连接mysql数据库,使用Mysql API操作数据库)...
- 谷歌开源的 GAN 库--TFGAN
- 后Kubernetes时代的微服务
- Golang的协程池设计
- jenkins部署war包到容器(tomcat)
- Flask 参数简介
- 面向对象编程(十)——继承之Super关键字及内存分析
- 用Python操作PPT的办公自动化教程
- 日文翻译-在线免费日文翻译软件
- Python基础知识从hello world 开始(第三天)
- 真分数化简为最简分数(6/8==3/4)
- WPS中添加页眉和页脚
- Ubuntu 12.04更新源
热门文章
- python 声明不赋值_为什么Python赋值不返回值?
- stm32f407 spi3 mosi没有输出_正点原子STM32F407探索者开发板资料连载第56章 USB 读卡器实验
- oracle组合索引最左原则,复合索引最左原则 -- 实战
- beeline安装_Hive 系列 之 简介与安装
- python字典添加列表,将Python字典/列表插入到SQL数据库中最有效的方法是什么?...
- HALCON 21.11:深度学习笔记---设置超参数(5)
- 英文字符串过长,QLabel显示不全的问题
- 基于机器视觉的线圈检测
- 2018 年力扣高频算法面试题汇总-难题记录-鸡蛋掉落
- python(45)内置函数:os.system() 和 os.popen()