{"id":7580,"date":"2018-08-10T08:04:40","date_gmt":"2018-08-10T08:04:40","guid":{"rendered":"https:\/\/www.templatemonster.com\/tr\/blog\/?p=7580"},"modified":"2018-08-10T08:04:40","modified_gmt":"2018-08-10T08:04:40","slug":"css3-ile-guzel-onay-kutulari-ve-radyo-dugmeleri-nasil-yapilir","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/tr\/css3-ile-guzel-onay-kutulari-ve-radyo-dugmeleri-nasil-yapilir\/","title":{"rendered":"CSS3 ile G\u00fczel Onay Kutular\u0131 ve Radyo D\u00fc\u011fmeleri Nas\u0131l Yap\u0131l\u0131r?"},"content":{"rendered":"

Hepimiz HTML Onay kutular\u0131n\u0131 ve Radyo D\u00fc\u011fmeleri<\/strong>ninin ne oldu\u011funu biliyoruz. Sinir bozucu olan \u015fey, onlar\u0131n g\u00f6r\u00fcn\u00fc\u015f\u00fcn\u00fc de\u011fi\u015ftirmenin bir yolu yoktur. \u0130\u015fletim sisteminize ve taray\u0131c\u0131n\u0131za ba\u011fl\u0131 olarak farkl\u0131 g\u00f6r\u00fcn\u00fcr ve CSS kullanarak onlar\u0131 stillemiyoruz. Tasar\u0131mlar\u0131 bozmadan bu unsurlar\u0131 \u00e7ekici k\u0131lmak isteyen \u00e7o\u011fu tasar\u0131mc\u0131 i\u00e7in s\u0131k\u0131c\u0131 bir i\u015f olabilir. Bu blog yaz\u0131da onlar\u0131 nas\u0131l ger\u00e7ekten ho\u015f yapabilece\u011finizi g\u00f6sterece\u011fim. Hadi kazal\u0131m!<\/p>\n

G\u00fc\u00e7l\u00fc olun. Onay Kutlar\u0131n\u0131z\u0131 gizleyin<\/h3>\n

Bu mant\u0131ks\u0131z gelebilir, ancak onay kutular\u0131m\u0131z\u0131 ve radyo d\u00fc\u011fmelerinin harika g\u00f6r\u00fcnmesini sa\u011flamak i\u00e7in onlar\u0131 gizlememiz gerekir. Bunun i\u00e7in basit bit kural uygular\u0131z:<\/p>\n

.section<\/span><\/span> input<\/span><\/span>[type=\"radio\"],\r\n<\/span>.section<\/span><\/span> input<\/span><\/span>[type=\"checkbox\"]{\r\n  <\/span>display<\/span><\/span>: <\/span>none<\/span><\/span>;\r\n}1<\/span><\/span>\r\n<\/pre>\n
Ama onlars\u0131z ne yapaca\u011fiz? Endi\u015felenmeyin, blackjack ile kendi onay kutlar\u0131m\u0131z\u0131 olu\u015fturaca\u011fiz ve...<\/strong>.hadi, sadece i\u00e7ine girelim.<\/p>\n
Radyo D\u00fc\u011fmeleri<\/h3>\n
\u0130lk olarak, i\u015faretlememiz var:<\/p>\n
<section<\/span> id<\/span>=\"first\"<\/span> class<\/span>=\"section\"<\/span>><\/span>\r\n    <div<\/span> class<\/span>=\"container\"<\/span>><\/span>\r\n      <input<\/span> type<\/span>=\"radio\"<\/span> name<\/span>=\"group1\"<\/span> id<\/span>=\"radio-1\"<\/span>><\/span>\r\n      <label<\/span> for<\/span>=\"radio-1\"<\/span>><\/span><span<\/span> class<\/span>=\"radio\"<\/span>><\/span>Coffee<\/span<\/span>><\/span><\/label<\/span>><\/span>\r\n    <\/div<\/span>><\/span>\r\n    <div<\/span> class<\/span>=\"container\"<\/span>><\/span>\r\n      <input<\/span> type<\/span>=\"radio\"<\/span> name<\/span>=\"group1\"<\/span> id<\/span>=\"radio-2\"<\/span>><\/span>\r\n      <label<\/span> for<\/span>=\"radio-2\"<\/span>><\/span><span<\/span> class<\/span>=\"radio\"<\/span>><\/span>Tea<\/span<\/span>><\/span><\/label<\/span>><\/span>\r\n    <\/div<\/span>><\/span>\r\n    <div<\/span> class<\/span>=\"container\"<\/span>><\/span>\r\n      <input<\/span> type<\/span>=\"radio\"<\/span> name<\/span>=\"group1\"<\/span> id<\/span>=\"radio-3\"<\/span>><\/span>\r\n      <label<\/span> for<\/span>=\"radio-3\"<\/span>><\/span><span<\/span> class<\/span>=\"radio\"<\/span>><\/span>Cappuccino<\/span<\/span>><\/span><\/label<\/span>><\/span>\r\n    <\/div<\/span>><\/span>\r\n<\/section<\/span>><\/span>\r\n<\/pre>\n
\u00dc\u00e7 radyo d\u00fc\u011fmesi i\u00e7eren b\u00f6l\u00fcm\u00fcm\u00fcz var. Bu derste onay kutular\u0131n\u0131 daha ayr\u0131nt\u0131l\u0131 olarak inceleyece\u011fiz. \u0130lke ayn\u0131. Her giri\u015f, bir div i\u00e7ine sar\u0131l\u0131r. Ayr\u0131ca, her giri\u015fte bir a\u00e7\u0131\u0131kl\u0131k i\u00e7eren bir etiket bulunur.<\/p>\n
\u00d6nemli!<\/h3>\n
Radyo ve onay kutusu giri\u015flerini gizledi\u011fimiz i\u00e7in bunlara eri\u015fmemizin tek yolu bir etiketi kullanmakt\u0131r. D\u00fczg\u00fcn \u00e7al\u0131\u015fmas\u0131 i\u00e7in etiketinin, kar\u015f\u0131l\u0131k gelen benzersiz bir giri\u015f kimli\u011fine sahip \"for\" \u00f6zniteli\u011fini i\u00e7ermesi gerekir. Bir giri\u015fin \"radio-1\" kimli\u011fi varsa, o zaman \"for\" \u00f6zelli\u011fi de \"radio-1\"ye sahip olmal\u0131. Her bir etiketin i\u00e7indeki metni neden bir a\u00e7\u0131kl\u0131\u011fa d\u00f6n\u00fc\u015ft\u00fcrd\u00fc\u011f\u00fcm\u00fc merak ediyor olabilirsiniz:<\/p>\n
<div<\/span> class<\/span>=\"container\"<\/span>><\/span>\r\n      <input<\/span> type<\/span>=\"radio\"<\/span> name<\/span>=\"group1\"<\/span> id<\/span>=\"radio-1\"<\/span>><\/span>\r\n      <label<\/span> for<\/span>=\"radio-1\"<\/span>><\/span><span<\/span> class<\/span>=\"radio\"<\/span>><\/span>Coffee<\/span<\/span>><\/span><\/label<\/span>><\/span>\r\n<\/div<\/span>><\/span>\r\n<\/pre>\n
\":: before and\" :: ile radyo d\u00fc\u011fmelerinin stilini yapaca\u011f\u0131m\u0131z i\u00e7in konumland\u0131r\u0131labilecek bir ana \u00f6\u011feye ihtiyac\u0131m\u0131z var. Bu durumda, bu bizim etiketimiz olacak:<\/p>\n
.container<\/span> label<\/span> {\r\n  position<\/span>: relative<\/span>;\r\n}\r\n<\/pre>\n
Burada hem onay kutular\u0131nda hem de radyo d\u00fc\u011fmelerinde payla\u015f\u0131lan stilleri bulabilirsiniz:<\/p>\n
.container<\/span> span<\/span>::before<\/span>,\r\n.container<\/span> span<\/span>::after<\/span> {\r\n  content<\/span>: ''<\/span>;\r\n  position<\/span>: absolute<\/span>;\r\n  top<\/span>: 0<\/span>;\r\n  bottom<\/span>: 0<\/span>;\r\n  margin<\/span>: auto<\/span>;\r\n}\r\n<\/pre>\n
\u00dcst ve alt \u00f6zellikleri s\u0131f\u0131rlay\u0131n ve \"kenar bo\u015flu\u011fu: otomatik\" ile birle\u015ftirilen \u00f6\u011felerimizin merkezelenmi\u015f bir yatay konuma sahip olmas\u0131na izin verin. Ba\u015fka stilleri \u015f\u00f6yle g\u00f6r\u00fcn\u00fcr:<\/p>\n
.container<\/span> span<\/span>.radio<\/span>:hover<\/span> {\r\n  cursor<\/span><\/span>: <\/span>pointer<\/span><\/span>;1<\/span><\/span>\r\n}\r\n.container<\/span> span<\/span>.radio<\/span>::before<\/span> {\r\n  left<\/span>: -52px<\/span><\/span>;\r\n  width<\/span>: 45px<\/span><\/span>;\r\n  height<\/span>: 25px<\/span><\/span>;\r\n  background-color<\/span>: #A8AAC1<\/span>;\r\n  border-radius<\/span>: 50px<\/span><\/span>;\r\n}\r\n.container<\/span> span<\/span>.radio<\/span>::after<\/span> {\r\n  left<\/span>: -49px<\/span><\/span>;\r\n  width<\/span>: 17px<\/span><\/span>;\r\n  height<\/span>: 17px<\/span><\/span>;\r\n  border-radius<\/span>: 10px<\/span><\/span>;\r\n  background-color<\/span>: #6C788A<\/span>;\r\n  transition: left<\/span> .25s<\/span><\/span>, background-color .25s<\/span><\/span>;\r\n}\r\ninput<\/span><\/span>[type=\"radio\"]<\/span>:checked<\/span><\/span> + <\/span>label<\/span><\/span> span<\/span><\/span>.radio<\/span><\/span>::after<\/span><\/span> {\r\n  <\/span>left<\/span><\/span>: <\/span>-27<\/span>px<\/span><\/span><\/span>;\r\n  <\/span>background-color<\/span><\/span>: <\/span>#EBFF43<\/span><\/span>;\r\n}2<\/span><\/span>\r\n<\/pre>\n
En \u00f6nemli k\u0131sm\u0131, temel olarak t\u00fcm i\u015flemleri yapan son kurallar dizisidir. \": Checked\" s\u00f6zde s\u0131n\u0131f\u0131, elemanlarda de\u011fi\u015fiklik yapmam\u0131za izin verir. Bir '+' se\u00e7icisiyle, sonraki karde\u015f \u00f6\u011feyi se\u00e7ebilir ve \":: sonra\" s\u00f6zde eleman\u0131na yeni kuralar uygulayaca\u011f\u0131m\u0131z span.radio'm\u0131z\u0131 hedefleyin. Bu durumda yatay pozisyonunu ve rengini de\u011fi\u015ftiriyoruz.<\/p>\n
Onay Kutular\u0131<\/h3>\n
\u00d6zel onay kutular\u0131 olu\u015fturman\u0131z gerekiyorsa, y\u00f6ntem ayn\u0131d\u0131r. Stillere g\u00f6z at\u0131n:<\/p>\n
.container<\/span> span<\/span>.checkbox<\/span>::before<\/span> {\r\n  width<\/span>: 27px<\/span><\/span>;\r\n  height<\/span>: 27px<\/span><\/span>;\r\n  background-color<\/span>: #fff<\/span>;\r\n  left<\/span>: -35px<\/span><\/span>;\r\n  box-sizing: border-box;\r\n  border<\/span>: 3px<\/span><\/span> solid<\/span> transparent<\/span>;\r\n  transition: border-color .2s<\/span><\/span>;\r\n}\r\n.container<\/span> span<\/span>.checkbox<\/span>:hover<\/span>::before<\/span> {\r\n  border<\/span>: 3px<\/span><\/span> solid<\/span> #F0FF76<\/span>;\r\n}\r\n.container<\/span> span<\/span>.checkbox<\/span>::after<\/span> {\r\n  content<\/span>: '\\f<\/span>00c'<\/span>;\r\n  font-family<\/span>: 'FontAwesome'<\/span>;\r\n  left<\/span>: -31px<\/span><\/span>;\r\n  top<\/span>: 2px<\/span><\/span>;\r\n  color<\/span>: transparent<\/span>;\r\n  transition: color .2s<\/span><\/span>;\r\n}\r\ninput<\/span>[type=\"checkbox\"]:checked<\/span> + label<\/span> span<\/span>.checkbox<\/span>::after<\/span> {\r\n  color<\/span>: #62AFFF<\/span>;\r\n}\r\n<\/pre>\n
Tek fark, FontAwesome ikonlar\u0131ndan :: after\" ps\u00f6do-element olarak bir simge kullanmam\u0131zd\u0131r. Varsay\u0131lan olarak a\u00e7\u0131k, ancak onay kutusu i\u015faretlendi\u011finde simge mavi olur.<\/p>\n
Bir tarafa bakarsak<\/h3>\n
S\u00f6zde eleman\u0131n\u0131zda bir FontAwesome simgesi kullanmak istiyorsan\u0131z, kodunu i\u00e7erik \u00f6zelli\u011fine eklemeniz ve font-family \u00f6zelli\u011fini \"FontAwesome\" olarak belirtmeniz gerekiyor. \u00d6rne\u011fin:<\/p>\n
{\r\ncontent<\/span>: '\\f<\/span>00c'<\/span>;\r\nfont-family<\/span>: 'FontAwesome'<\/span>;\r\n}\r\n<\/pre>\n
Unicode karakterinden kurtulmak i\u00e7in gerekli olan ters e\u011fik \u00e7izgisinden \u00f6nce gelir. Unicode, se\u00e7ti\u011finiz simgenin sayfas\u0131nda bulunabilir:<\/p>\n
\"\"<\/p>\n
Son sonu\u00e7<\/h3>\n
Bu kadar. \u015eimdi, kendi projeleriniz i\u00e7in ayarlayabilece\u011finiz ve kullanabilece\u011finiz tam fonksiyonlu g\u00fczel onay kutular\u0131 ve radyo d\u00fc\u011fmeleri olu\u015fturduk. CodePen demosunda tam kaynak kodunu g\u00f6rebilirsiniz:<\/p>\n