Assalomu alaykum do'stlar👋.

Men ushbu maqolamda sizga o'zingizning portfoli ingizni yoki boshqa web saytingizni orqa fonini day/night button (kun va tun tugmasini) qo'yishni aytib o'tmoqchiman.

Faqat HTML va CSS orqali.

Ushbu maqolam sizga foydali bo'ladi deb o'ylayman.

Ho'sh tayyor bo'lsangiz boshlaymiz🚀.

Avval HTMLga checkboxni kiritamiz: <input type="checkbox">

Endi esa qolganini CSSda bajaramiz natijasini ham ko'rib chiqamiz.

CSSga avval quyidagicha still beramiz: 

body {                                                                      margin:0;                                                              padding:0;                                                              background-color: #000                                             }                 

bu kodni o'zingizning browser ingizda sinab ko'ring.

Endi esa biz input[type="checkbox"]ga ham margin beramiz avval o'lchamlarni to'g'rilab olish uchun margin-bottom:...px: va margin-top:...px. Siz o'zingiz o'lchamlarni  sozlashingiz mumkin.

Keyingi ishimiz esa quyidagicha (diqqat qiling):

overflow:hidden; position:relative;. Men faqat o'lchamlarni kattalashtirib oldim, yuqorida aytganimdek siz o'zingiz o'lchamini moslab olasiz("left" va "top").

left:50%; top:50%  endi esa transform:translate()ga masalan: -50%, -50%  . Keyin esa height bilan width

 border-radius:50px; ga men shunday o'lchamni belgiladim.

-webkit-appearance:none;                                         outline:none ;                                                   background-color: grey;                                         transition:.3s;

ushbu kodni sinab ko'rdingizmi? Ho'sh nima yetishmayotganini menimcha sezdingiz ;)

Bizga hozir buttonnig qora va oq fonga o'tkazuvchi tugmacha kerak😁. 

Avval ba'zi joylariga still bersak yanada yaxshiroq ko'rinar edi.

input[type="checkbox"]:checked {                                           box-shadow:0 0 0 1200-px #fffefe;                      }

Ho'sh endi esa biz bu orqali fonni qora va oq rangga aylantira olamiz lekin yana yuqorida aytilgan qo'shimcha narsa bizda yetishmayapti. Hozir esa buttonni ichini to'ldirsak.

Keyingi qilishimiz kerak bo'lgani:

input[type="checkbox"]:before {                                               content:"";                                                             position:absolute ;                                                     right:0;

height , width va border-radius ga o'zingiz o'lchamlarni kiritasiz. background-color: #fffefe; rang berib bo'lgach esa: transform:scale(.7); transition ga 5s yetarli.

input[type="checkbox"]:checked:before{                                        right:-100px                                       }

bunda biz tugmachani hosil qildik lekin hali to'liq emas.

Endi esa tugmacha chap tomonga harakatlanishi uchun uchun:

input[type="checkbox"]:afterga yuqoridagilarga ko'ra faqat left:100; qilib olamiz va rangni qoraga aylantiramiz backgroun-color:#000;

input[type="checkbox"]:checked:after {                                                  left:0px;                                             }

Nihoyat tayyorladik! Siz ham buni sinab ko'rdingiz deb o'ylayman. Bunday buttonni o'zingizning portfolio ingizga qo'ying juda ham zo'r chiqishi aniq👍.

Maqola so'ngida yana bir gap aytib o'tmoqchiman:

"Men OMUC ning rasmiy guruhida bir savolga duch keldim. Savol quyidagicha: menga IT sohasini o'rganishim uchun o'qitivchi kerakmi yoki mustaqil o'rganaymi?"

Mening fikrimcha IT sohasini o'rganish uchun sizga o'qituvchi yoki pedagogning yordami kerak emas. Chunki siz bu sohada katta qiyinchliklarga uchrashingiz aniq. Lekin har bir xatoyingizni o'zingiz tahlil qilib borishingiz kerak va bu sizni katta muvaffaqiyatga olib keladi. O'qitivchi sizga yo'l-yo'riq, yo'nalish ko'rsatadi bu to'g'ri lekin, katta qiyinchilik evaizga bu sohani egallasangiz albatta muvaffaqiyat qozonasiz.

Ushbu qisqa maqolam sizga "foydali bo'ldi" deb o'ylayman. Agar xato va kamchiliklar bo'lgan bo'lsa, vaqtingizni olgan bo'lsam uzr so'rayman.

# author fariz_coder/noob.