checkbox樣式研究——按鈕

weixin_33766168發表於2016-01-26

本原始碼來自http://cssdeck.com/labs/css-checkbox-styles
我只是將其進行分析。

Rounded ONE

HTML

   <!-- Rounded ONE -->
   <div class="roundedOne">
       <input type="checkbox" value="None" id="roundedOne" name="check" />
       <label for="roundedOne"></label>
   </div>

效果圖

點選前圖片描述 點選後圖片描述

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只是給了它一個那個白色的圈。
假如把.roundedOne的width,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 相鄰兄弟選擇器。

相關文章