Daha önceleri buna benzer paylaştığımız örneklerde tam açıklayıcı olmasada başlık olarak açma kapama düğmesi adını vermiştik. Switch kelimesinin Türkçe’deki anlamı şalter elektirik düğmesi olduğu için daha yakın bir kelime bulamamıştım örneği açıklamak için. Yine en iyisi herkesin söylediği dille paylaşmak sanırım dah doğru olur.
Checkboxları bilirsiniz mouse ile tıklandıktan sonra içinde okey işareti beliren küçük kutucuklar. Css3 ile bu checkboxların şeklini değiştirebilmek mümkündü ve her tasarımcıda kendine göre değişik değişik örnekler hazırlar buna benzer. Genelde üyelik bilgileri doldurulduğunda cinsiyet kısımları ve kullanıcı sözleşmeleri gibi bölümlerde kullanılır bu küçük kutucuklar. Sizde sitenizde bu gibi yerlerde farklı bir checkbox örneği kullanabilirsiniz.
Css3 örneğinin çalışma şeklii gayet basit. Demo örneğinde bulunan kırmızı ve yeşil renkli ışıklara tıkladığınızda metal benzeri hazırlanmış olan yuvarlak bölüm tıklamış olduğunuz rengin üzerine doğru slayt br şekilde hareket eder.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölüm.
Css :
*{
-webkit-font-smoothing:antialiased;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
font-family:"Raleway",Helvetica;
}
body,html{
width:100%;
padding:0;
margin:0;
background:#2f3437 url(noise.jpg);
}
/*=== Let's style the elements ===*/
::selection{
background:transparent;
}
P{
text-align:center;
}
#content{
width:100px;
margin:100px auto;
}
/* 1 -Hide the inputs */
input[type=checkbox]{
display:none;
}
/* 2 -Prepare labels */
#thumb{
content:'';
height:28px;
display:block;
float:left;
width:28px;
padding:0px;
margin:-3px 0px;
/*border-radius*/
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
box-shadow:0 0 2px rgba(0,0,0,1),0 0 10px rgba(0,0,0,.2), -5px 5px 10px rgba(0,0,0,.2), -10px 10px 10px rgba(0,0,0,.1), 0 0 2px rgba(0,0,0,.6);
position:absolute;
z-index:1;
}
label{
display:block;
width:70px;
height:30px;
margin:40px 0;
padding:4px 0;
background:#232629;
border-radius:50px;
box-shadow:0 1px 0 rgba(255,255,255,.1), inset 0 4px 5px rgba(0,0,0,.4),inset 0 0px 1px #000;
}
label:before{
content:'';
display:block;
position:absolute;
margin: 7px 12px;
width: 10px;
height: 10px;
background: -webkit-radial-gradient(#31bf49 ,#39c252);
border-radius: 50%;
box-shadow:#000 0px 0px 1px,
inset #000 0px 0px 1px,
inset #000 0px 0px 1px,
inset #460 0 -1px 9px,
inset #fff 0 1px 1px ,
inset rgba(255,255,255,.4) 0 3px 4px ,
inset rgba(255,255,255,.6) 0 -2px 4px ,
0 0 5px #39c252,
0 0 15px #39c252;
}
label:after{
content:'';
display:block;
margin: 7px 48px;
width: 10px;
height: 10px;
background: -webkit-radial-gradient(#f00,#e04145);
border-radius: 50%;
box-shadow:#000 0px 0px 1px,
inset #000 0px 0px 1px,
inset #000 0px 0px 1px,
inset #000 0px 0px 1px,
inset #e04145 0 -1px 9px,
inset #fff 0 1px 1px ,
inset rgba(255,255,255,.4) 0 3px 4px ,
inset rgba(255,255,255,.6) 0 -2px 4px ,
0 0 5px #e04145,
0 0 15px #e04145;}
/* Now, make it move */
#one:checked ~ label[for=one] #thumb {
margin: -3px 42px;
}
#two:checked ~ label[for=two] #thumb {
margin: -3px 42px;
}
label:before,
#thumb,
#one:checked ~ label[for=one]:before,
#two:checked ~ label[for=two]:before {
-webkit-transition: all .2s;
-moz-transition: all .2s;
transition: all .2s;
}
/*=== Classes ===*/
/* Metal ------------------------- */
.metal{
position:relative;
margin:40px auto;
background-color:hsl(0,0%,10%);
/* border */
inset hsla(0,0%,15%, .8) 0 -1px 5px 4px, /* soft SD */
inset hsla(0,0%,0%, .25) 0 -1px 0px 7px, /* bottom SD */
inset hsla(0,0%,100%,.7) 0 2px 1px 7px, /* top HL */
hsla(0,0%, 0%,.15) 0 -5px 6px 4px, /* outer SD */
hsla(0,0%,100%,.9) 0 5px 6px 4px;
/* outer HL */
}
/* Radial ------------------------- */
.radial.metal{
line-height:160px;
/*border-radius*/
-webkit-border-radius:80px;
-moz-border-radius:80px;
border-radius:80px;
background-image:-webkit-radial-gradient( 50% 0%, 8% 50%, hsla(0,0%,100%,1) 0%, hsla(0,0%,100%,.1) 100%), -webkit-radial-gradient( 50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%), -webkit-radial-gradient( 0% 50%, 50% 7%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%), -webkit-radial-gradient( 100% 50%, 50% 5%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%), -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 3%, hsla(0,0%, 0%,.1) 3.5%), -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%,.1) 7.5%), -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%), -webkit-radial-gradient( 50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
}
.metal.radial:before, .metal.radial:after{
content:"";
top:0;
left:0;
position:absolute;
width:inherit;
height:inherit;
/*border-radius*/
-webkit-border-radius:inherit;
-moz-border-radius:inherit;
border-radius:inherit;
/* fake conical gradients */
background-image:-webkit-radial-gradient(
50% 0%, 10% 50%,
hsla(0,0%,0%,.5) 0%,
hsla(0,0%,0%,.1) 100%
),
-webkit-radial-gradient(
50% 100%, 10% 50%,
hsla(0,0%,0%,.2) 0%,
hsla(0,0%,0%,0) 100%
),
-webkit-radial-gradient(
0% 50%, 50% 10%,
hsla(0,0%,0%,.1) 0%,
hsla(0,0%,0%,0) 100%
),
-webkit-radial-gradient(
100% 50%, 50% 06%,
hsla(0,0%,0%,.1) 0%,
hsla(0,0%,0%,0) 100%
);
}
.metal.radial:before{
/*transform*/
-webkit-transform:rotate( 65deg);
-moz-transform:rotate( 65deg);
-ms-transform:rotate( 65deg);
-o-transform:rotate( 65deg);
transform:rotate( 65deg);
}
.metal.radial:after{
/*transform*/
-webkit-transform:rotate(-65deg);
-moz-transform:rotate(-65deg);
-ms-transform:rotate(-65deg);
-o-transform:rotate(-65deg);
transform:rotate(-65deg);
}
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<div id="content" >
<input type="checkbox" class="check" id="one" name="check_one" checked/>
<label for="one">
<div id="thumb" class="metal radial"></div>
</label>
<input type="checkbox" class="check" id="two" name="check_two" />
<label for="two">
<div id="thumb" class="metal radial"></div>
</label>
</div>