使用CSS切换不同背景的字体颜色

曾经获得其中的一个,“我可以使用CSS做到这一点!” 看着某人展示自己JavaScript肌肉的片刻? 这正是我在CSSconf EU 2018上观看Dag-Inge Aas和Ida Aalen演讲时的感受

他们设在挪威, WCAG的可访问性不仅是一种良好的做法,而且实际上是法律所要求的(去,挪威!)。 在开发允许用户选择其主要产品的颜色主​​题的功能时,他们面临一个挑战:根据容器的选定背景颜色自动调整字体颜色。 如果背景较暗,则最好使用白色文本以使其符合WCAG对比度 。 但是,如果选择浅背景色会怎样呢? 文本难以辨认并且无法访问。

他们采用了一种优雅的方法,并使用“ color” npm软件包解决了该问题,添加了有条件的边框并自动生成第二色。

但这是一个JavaScript解决方案。 这是我的纯CSS替代方法。

挑战

这是我要完成的标准:

  • 根据背景颜色将字体color更改为黑色或白色
  • 仅当背景真的很浅时 ,才对边框应用相同的逻辑,使用较深的背景基色变化来提高按钮的可见性
  • 自动生成60°色相旋转的辅助颜色

使用HSL颜色和CSS变量

为此,我想到的最简单的方法就是运行HSL颜色。 将背景声明设置为HSL,其中每个参数都是CSS定制属性,这允许使用一种非常简单的方法来确定亮度并将其用作条件语句的基础。

:root {
  --hue: 220;
  --sat: 100;
  --light: 81;
}

.btn {
  background: hsl(var(--hue), calc(var(--sat) * 1%), calc(var(--light) * 1%));
}

这应该允许我们通过更改变量并运行if / else语句更改前景色来将背景交换为运行时所需的任何颜色。

除了……我们在CSS上没有if / else语句…… 还是我们?

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Tab背景切换的动态效果是一种常见的纯CSS3动画实例,可以通过使用CSS3的属性和过渡效果来实现。 首先,HTML结构中需要有切换的Tab标签和对应的内容区域。可以使用无序列表(`<ul>`)来创建Tab标签,每个标签使用列表项(`<li>`)表示,每个内容区域使用`<div>`来表示。 接下来,使用CSS选择器来设置Tab标签的样式,包括背景颜色、字体样式、边框等。为了实现背景切换的效果,可以利用伪类(:hover)来设置悬停时的效果。 同时,为每个标签添加过渡效果,使背景颜色的切换具有动画效果。可以使用`transition`属性来设置过渡的属性和时间。例如,设置背景颜色在0.3秒内从透明度为0到1的过渡效果:`transition: background-color 0.3s;` 最后,使用CSS选择器来设置内容区域的样式,包括背景颜色、字体样式、边框等。内容区域的样式和Tab标签的样式可以根据需要自行定义。 通过以上步骤,即可实现Tab背景切换的动态效果。当鼠标悬停在某个Tab标签上时,背景颜色会渐变地切换,给用户一种动态的效果。 需要注意的是,为了兼容不同的浏览器,可以使用CSS3的前缀来添加浏览器私有属性,例如 `-webkit-`、`-moz-`等。 示例如下(假设有三个Tab标签): HTML代码: ```html <ul class="tabs"> <li class="tab">Tab 1</li> <li class="tab">Tab 2</li> <li class="tab">Tab 3</li> </ul> <div class="content">Content 1</div> <div class="content">Content 2</div> <div class="content">Content 3</div> ``` CSS代码: ```css .tab { display: inline-block; padding: 10px 20px; background-color: #ccc; cursor: pointer; transition: background-color 0.3s; } .tab:hover { background-color: #f00; } .content { display: none; padding: 20px; background-color: #f00; color: #fff; } .content.active { display: block; } ``` 通过以上代码,当鼠标悬停在Tab标签上时,背景颜色会从灰色渐变为红色。同时,对应的内容区域会显示,其他内容区域会隐藏。这样就实现了Tab背景切换的动态效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值