资讯专栏INFORMATION COLUMN

checkbox样式研究——按钮

cfanr / 3003人阅读

摘要:假如把的都删除,就是这样当这个是,子级是时,子级的是根据这个的原始点为原始点。的子节点我观察到就是按钮中间的黑色点点。总之它就是定义了一个黑色的圆形。的只有一点要注意不透明度为,也就是不显示。的加号,是相邻兄弟选择器。

本源代码来自http://cssdeck.com/labs/css-checkbox-styles
我只是将其进行分析。

Rounded ONE HTML
   
   
效果图

点击前 点击后

CSS

在这里我只一段段分析。源地址有源代码,我就不粘了。

根节点 roundedOne

在这里我只一段段分析。源地址有源代码,我就不粘了。

.roundedOne {
               width: 28px;
               height: 28px;
               background: #fcfff4;

               background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
               background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
               background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
               background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
               background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
               filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#fcfff4", endColorstr="#b3bead",GradientType=0 );
               margin: 20px auto;

               -webkit-border-radius: 50px;
               -moz-border-radius: 50px;
               border-radius: 50px;

               -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
               -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
               box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
               position: relative;// 当这个是relative,子级是absolute时,子级的TLBR是根据这个的原始点为原始点。
           }

.roundedOne只是给了它一个那个白色的圈。
假如把.roundedOnewidth,height,background都删除,就是这样:

position: relative;// 当这个是relative,子级是absolute时,子级的TLBR是根据这个的原始点为原始点。

roundedOne的子节点label

.roundedOne label {
               cursor: pointer;
               position: absolute;
               width: 20px;
               height: 20px;

               -webkit-border-radius: 50px;
               -moz-border-radius: 50px;
               border-radius: 50px;
               left: 4px;
               top: 4px;

               -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
               -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
               box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);

               background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
               background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
               background: -o-linear-gradient(top, #222 0%, #45484d 100%);
               background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
               background: linear-gradient(top, #222 0%, #45484d 100%);
               filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#222", endColorstr="#45484d",GradientType=0 );
           }

我观察到,label就是按钮中间的黑色点点。
cursor: pointer;这个属性是定义了鼠标移动上去的光标;
position: absolute;上一步已经说过了;
width: 20px;height: 20px;定义这个块的大小;
border-radius: 50px; 圆角;
left: 4px;top: 4px;不多说;
background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);颜色为线性渐变。
总之它就是定义了一个黑色的圆形。
roundedOne的label:after

.roundedOne label:after {
               -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
               filter: alpha(opacity=0);
               opacity: 0;
               content: "";
               position: absolute;
               width: 16px;
               height: 16px;
               background: #00bf00;

               background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
               background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
               background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
               background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
               background: linear-gradient(top, #00bf00 0%, #009400 100%);

               -webkit-border-radius: 50px;
               -moz-border-radius: 50px;
               border-radius: 50px;
               top: 2px;
               left: 2px;

               -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
               -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
               box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
           }

只有一点要注意opacity: 0;不透明度为0,也就是不显示。而在后面应该会看到有一个地方把这个设置为1,我觉得应该就是当被checked时,opacity就会被设置为1.

.roundedOne input[type=checkbox]:checked + label:after {
            opacity: 1;
}

roundedOne的label:hover::after

.roundedOne label:hover::after {
               -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
               filter: alpha(opacity=30);
               opacity: 0.3;
           }

不多说。
roundedOne的input

.roundedOne input[type=checkbox]:checked + label:after {
               -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
               filter: alpha(opacity=100);
               opacity: 1;
           }

加号,是CSS 相邻兄弟选择器。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/115032.html

相关文章

  • checkbox样式研究——按钮

    摘要:假如把的都删除,就是这样当这个是,子级是时,子级的是根据这个的原始点为原始点。的子节点我观察到就是按钮中间的黑色点点。总之它就是定义了一个黑色的圆形。的只有一点要注意不透明度为,也就是不显示。的加号,是相邻兄弟选择器。 本源代码来自http://cssdeck.com/labs/css-checkbox-styles我只是将其进行分析。 Rounded ONE HTML ...

    marek 评论0 收藏0
  • 自定义按钮样式

    摘要:在一些网站上经常可以看到改造过的按钮选项比如这样由于之前一直在端企业,样式差不多就了所以也没去研究。 在一些网站上经常可以看到改造过的按钮选项比如这样 showImg(https://segmentfault.com/img/bV9VaQ?w=409&h=82); showImg(https://segmentfault.com/img/bV9VaS?w=259&h=67); 由于之前...

    fuyi501 评论0 收藏0
  • CSS学习摘要-定位实例

    摘要:学习摘要定位实例学习摘要定位实例注全文摘自定位实例列表消息盒子列表消息盒子我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征。删除你的不需要居中显示,添加定位调整属性把她粘在浏览器的视域。CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非...

    kuangcaibao 评论0 收藏0
  • CSS美化上传按钮checkbox和radio样式

    摘要:思路美化思路是,先把之前的按钮透明度设置为然后,外层用包裹,就实现了美化功能。上传按钮美化代码如下样式一样式二点击这里上传文件选择文件结果样式一样式二美化代码如下背景图片样式结果美化代码如下背景图片样式结果 思路: 美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能。 input[type=file]上传按钮美化 代码如下: 样式一: /*...

    gghyoo 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<