西宁做网站:10免费定制的用于无线电开关和交换机的CSS代码段

西宁做网站

单选按钮最近才被打开,用于使用CSS进行深度自定义。开/关开关设计是从苹果最初的iOS系统中提出来的,并使用收音机和切换开关的复选框转移到了网络上。

1.无障碍开关

在Web上,可访问性是一个非常重要的问题,在重新设计HTML元素时,您必须考虑到这一点。这些由ChrisHart提供的可访问切换显示了您可以使用一个小CSS进行多大的更改。

每个开关都有自己独特的风格,包括自定义动画效果。您可以单击开关的任何一边来切换结果,这对于更小屏幕上的可用性来说是完美的。

总的来说,这些开关是您可以使用的最好的开关之一,它们非常容易定制。然而,它们确实依赖于复选框,因此表单提交与单选按钮的工作方式略有不同。

2.开关CSS开关

如果你喜欢一种极简主义的设计方法,那么就看看这些由尼克·博托姆利(NickBottomley)创建的收音机。他们是最简单的,他们的工作完美无瑕。

二次样式甚至添加自定义动画效果到开关,在那里它展开像一个斑点在动画之前。您可以添加可选标签,当打开/关闭时亮起,您有足够的空间来添加颜色和改变样式。

我想说,这些开关是最坚固的基础,用于自定义开/关按钮,而无需从头开始构建它们。

3.iOS 7开关

当苹果发布iOS 7时,它带来了许多更新,包括更平淡的设计和新的开/关开关。这些iOS 7开关是由熟练的开发人员Bandar Raffah使用复选框和CSS 3重新创建的。

背景有一个有趣的动画效果,他们滑入和退出的视野连同开关按钮。这是一种非常独特的设计方法,而且它都是由CSS驱动的,这一点更令人印象深刻。

如果你在你的网站上寻找一个苹果启发的设计,那么这些复选框开关就拿蛋糕。

4.纯CSS圆

要获得稍微定制的解决方案,请看杰西·库奇(JesseCouch)的这些iOS开关。这些标签主要是为Chrome和Firefox而设计的,所以它们可能不会在Opera或Safari等所有浏览器中工作。

但是,它们确实支持在单击时可以在值之间自动切换的收音机的“标签”元素。这样,用户甚至不需要打无线电,而是只需要标签来接通/关断开关。

5.Win10交换机

Windows 10用户将知道他们最新的变化是好是坏。新的Win 10设置包括在此笔中复制的许多自定义开关。

可以在CoDepen中编辑所有通过SCSS变量的大小、颜色和填充。这些交换机都使用HTML复选框元素,这使它们优于移动用户。它们没有太多的动画,但它们看起来很好,而且很好地工作,这两个因素总是销售质量界面元素。

6.清洁开关

对于可访问性,您必须考虑在旧浏览器中复选框是如何处理的,以及属性(如aria-隐藏)是如何操作的。这是费利佩·菲亚略(FelipeFialho)创作的这支笔的基础。

他使用HTML标签和自定义样式来支持这个开关,并优雅地降低了支持的级别。这也是一个漂亮的开关,并给予简单的设置,它工作良好的任何网站。

7. Switchboxes

这些巧妙设计的开关箱输入是由Victor Knust创建的,是一种普遍支持的解决方案。每个开关工作在所有主要浏览器,包括IE7和更高版本。

由于这种广泛的浏览器支持,您必须使用JavaScript进行工作。它不是很大的JavaScript,但是当决定这些交换机是否可以在您的站点上工西宁做网站作时,它是一个因素。

但是它们看起来很棒,并且提供了比大多数基于CSS的开关更多的通用支持。

8.自定义方格开关

如果你真的想要定制,那就看看安德鲁·盖曼(AndrewGehman)的这些方格开关吧。他们完全西宁做网站重新设计了复选框设计的正方形角,一个方形开关,和自定义文本。

我无法想象这会很好地融入许多网站。然而,它显示了使用纯CSS 3可以走多远,如果您想要自定义您自己的复选框,这可能是一个很好的代码库。

9.发光开关

由于开发人员ValentinGalmand,尼克Vasle的原始设计变成了全功能的发光CSS开关。

这个界面几乎完全匹配原始的Dribbble镜头,这使得切换更加令人印象深刻。它完全依赖CSS 3来重新创建阴影效果和中间的图标。这是一个很好的例子,说明了使用纯CSS可以做多少事情。

10.滑动单选按钮

这个例子可能是我最喜欢的,因为它有这样一个令人愉快的梯度附加到每个按钮。这些滑动无线电由Oguzhan Cansever创建使用CSS 3梯度和自定义标签连接到开关的每一边。

然而,这些都是纯西宁做网站单选按钮,因此一次只能选择一个。这意味着,如果您单击活动侧,它将不会切换。

但是,如果你喜欢这种风格,那么这更适用于任何网西宁做网站站。您甚至可以通过CSS自定义渐变颜色并增加开关中的间距。

包起来

您可以在CodePen找到几十个令人惊叹的收音机,并提供免费的代码片段进行复制和编辑。

如果你喜欢这些例子,一定要保存你的收藏夹,可以随意浏览“开关”标签来获取更多的例子。

您应该看看下面创建漂亮CSS按钮的这些代码片段,或者这个复制和粘贴响应性导航片段的集合。




二维码