onaykutusuGuhe Louis tarafından Fontawesome kullanılarak hazırlanmış Css3 animasyonlu checkbox örnekleri. Bütün checkbox örneklerinin şekli aynı olsada farklı farklı renkler kllanılarak hazırlanmış. İşaretleyeceğiniz checkbox alanlarında görünmesi gereken okey işareti animasyonlu bir şekilde adeta kalemle yazarmış gibi görüntüleniyor.  Checkboxların görünümü Fontawesome kullanılarak biraz farklı şekilde görünüyor.  Bunun için label içeriği onay kutusu dediğimiz checkbox ile eşleşen f096 kodu kullanılmış css kodlar içinde.  Tıklanmış olan checkbox örneğinin içinde okey işareti görünmesi içinde  labek içeriği Fontawesomede f046 ile eşleşen okey işareti kullanılmış. Bu rakamları değiştirmemenizde fayda var ama merak ediyorsanız eğer  rakamlarda değişiklik yapabilirsiniz. Eklediğiniz  değişik numaralar Fontawesomdeki ikonlar ile eşleşiyorsa eğer checkbox alanında farlı ikonlar göreceksiniz.

 

 Kullanım

  • Head etiketleri arasına eklemeniz gereken bölümler.

Fontawesome adresi : 

<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

 Css : 

/*Montserrat for the text*/
@import url(http://fonts.googleapis.com/css?family=Montserrat); 

/*basic reset*/
* {margin: 0; padding: 0;}

body {
	font-family: montserrat;
	padding-top: 100px;
	color: #333;
}

h1 {
	font-size: 16px;
	padding: 15px;
	text-align: center;
}

ul {
	width: 290px;
	margin: 0 auto;
}
ul li {
	list-style-type: none;
	padding: 10px;
}

/*Adding custom checkbox icons*/
label {
	position: relative;
	padding-left: 30px;
	font-size: 14px;
	cursor: pointer;
}
label:before, label:after {
	font-family: FontAwesome;
	font-size: 21px;
	/*absolutely positioned*/
	position: absolute; top: 0; left: 0;
}
label:before {
	content: 'f096'; /*unchecked*/
}
label:after {
	content: 'f046'; /*checked*/
	/*checked icon will be hidden by default by using 0 max-width and overflow hidden*/
	max-width: 0;
	overflow: hidden;
	opacity: 0.5;
	/*CSS3 transitions for animated effect*/
	transition: all 0.35s;
}

/*hiding the original checkboxes*/
input[type="checkbox"] {
	display: none;
}
/*when the user checks the checkbox the checked icon will animate in*/
input[type="checkbox"]:checked + label:after {
	max-width: 25px; /*an arbitratry number more than the icon's width*/
	opacity: 1; /*for fade in effect*/
}

/*adding some colors for fun*/
#one+label:before, #one+label:after {color: hsl(0, 45%, 40%);}
#two+label:before, #two+label:after {color: hsl(60, 45%, 40%);}
#three+label:before, #three+label:after {color: hsl(120, 45%, 40%);}
#four+label:before, #four+label:after {color: hsl(180, 45%, 40%);}
#five+label:before, #five+label:after {color: hsl(240, 45%, 40%);}
#six+label:before, #six+label:after {color: hsl(300, 45%, 40%);}
  •  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<ul>
	<li>
		<input type="checkbox" name="one" id="one" />
		<label for="one">Create checkbox</label>
	</li>
	<li>
		<input type="checkbox" name="two" id="two" />
		<label for="two">Assign label</label>
	</li>
	<li>
		<input type="checkbox" name="three" id="three" />
		<label for="three">Import iconfont</label>
	</li>
	<li>
		<input type="checkbox" name="four" id="four" />
		<label for="four">Iconify label pseudo elements</label>
	</li>
	<li>
		<input type="checkbox" name="five" id="five" />
		<label for="five">Animate icon widths</label>
	</li>
	<li>
		<input type="checkbox" name="six" id="six" />
		<label for="six">Color the icons</label>
	</li>
</ul>

Bu Yazıyı Paylaş

1 yorum "Colorful onay kutusu tasarımı"

  1. hasan dedi ki:

    teşekkürler mimix

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • Ali:

    Pardon Yuyyu olacaktı...

  • Ali:

    Tamam yuyu da olsun :)...

  • Arkadaşlık Uygulaması:

    Yuyyu Online Arkadaşlık Sitesi – Sohbet Et ve Yeni İnsanlarla Tanış Yuy...

  • Ali:

    Üşenmeden web arşivi linkini arayıp bulmuşsun teşekkürler :)...

  • ibrahim:

    türkiyeden de bırakan olmuş oyunu. dünya geneli de bırakan epey olmuş. wi...

  • Araç çubuğuna atla