Tıklandığında kayan metal görünümlü onay kutuları

By

pure css3 switch button
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 : 



Leave a Comment

Your email address will not be published.

You may also like

Trend