Colorful onay kutusu tasarımı

13Okunma
1 Yorum

ColorfulGuhe 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>
Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2020-07-05 tarihinde yayınlandı,Toplam 3006 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(1 Yorum)
Yükleniyor...
hasan Yorumcu LV.1
2016-11-25 21:26:57 回 Yanıtla

teşekkürler mimix