2015年,emoji里的Face with Tears of Joy被选进了年度,那么,我们就用这个表情来做一个按钮切换样例,拒绝枯燥无聊的checkbox。
我们知道使用的for属性可以绑定checkbox的选择框,可以来回切换选择和不选择。现在,结合css中的选择器
:checked
和它的兄弟Checkbox Hack,让我们做点好玩的事情。
先放样例
See the Pen yeVNrN by cyseria (@cyseria) on CodePen.
html:
基本的css (scss):
.emoji-toggle {
position: relative;
.well { // the label
cursor: pointer;
}
.toggle { // the checkbox
appearance: none;
background: transparent;
position: absolute;
width: 100%;
height: 100%;
cursor: pointer;
z-index: 100;
// "off"
~.emoji:before {
content: "emoji unicode here";
position: absolute;
left: 0;
top: -15px;
font-size: 40px;
z-index: 1;
transition: 0.2s;
}
// "on"
&:checked {
~.emoji:before {
content: "different emoji unicode here";
left: 100%;
margin-left: -1em;
}
}
}
}
其中,input
选择框表面上看是隐藏起来的,实际上他覆盖了整个div层,所以我们可以完美的点击这块地方去进行选择的切换,并且改变emoji表情和它的位置。
使用sass来书写不同样式
为了更方便的使用该样式,我们想让它可以定义四个不同的伪元素内容(两个表情和两个label)
,这听起来令人兴奋,所以我决定用sass的@mixin
来实现。这是我喜欢用的一个预处理器,不会太复杂但可以把一些冗余的东西抽取起来。
@mixin emojiType($leftEmoji, $rightEmoji, $leftLabel, $rightLabel) {
.toggle {
~.emoji:before {
content: $leftEmoji;
}
&:checked {
~.emoji:before {
content: $rightEmoji;
}
}
~label {
&:before {
content: $leftLabel;
}
&:after {
content: $rightLabel;
}
}
}
}
// Usage
.emoji-happy {
@include emojiType(
"\01F604", "\01F620", "Happy", "Mad"
);
}
获取emojis的unicode
你可能已经在css里面注意到emojis的unicode像“\01F604”,很幸运,Tim Whitlock做了一个关于这些信息的可靠的参考页
ps:“grinning face“的unicode码为“U+1F601”,因此在css中的content就应该为”01F601“具体原因戳这里(英文版)
最后
emoji是一个奇怪的东西,不同的浏览器不同的平台有不同的emoji样式,嗯相信大家已经习惯了….
本文根据@CHRIS COYIER的文章所译,整篇译文带有我们自己的理解和意思,如果有译得不好的地方或者不对之处,还请大家指点。英文出处:emoji-toggles
如需转载,请注明出处:http://w3ctrain.com/2015/12/29/use-emoji-toggles/