Bu yerni bosing!

Qadam 2. CSS
Keyingi qadam, bu eng qiziqarli narsa, bizning modal oynamiz uchun barcha kerakli uslublarni tayyorlash, tashqi ko'rinishini loyihalash va funksionallikni qo'shish muhimdir. Chalkashtirmaslik uchun sahifaning asosiy uslublarini tashladim va tushuntirish uchun ba'zi qoidalarni sharhlar bilan qo'shdim:

/ * Asosiy soyalash va modal qatlam uslublari * / ... qoplama (yuqori: 0; o'ngda: 0; pastki: 0; chapda: 0; z- indeks: 10; displey: yo'q; / * fonni o'chirish * / fon - rang: rgba (0, 0, 0, 0.65); pozitsiya: belgilangan; / * aniq joylashishni aniqlash * / kursor: sukut bo'yicha; / * kursor turi * /) / * soya qatlamini faollashtirish * / ... qoplama: maqsad (displey: blok;) / * modal oyna uslublari * / ... popup (yuqori: - 100%; o'ngda: 0; chapda: 50%; shrift hajmi: 14px; z- indeks: 20; margin: 0; kenglik: 85%; min- kenglik: 320px; maksimal- kenglik: 600px; / * sobit joylashishni aniqlash, o'tish paytida oyna barqaror * / pozitsiya: belgilangan; to'ldirish: 15px; chegara: 1px qattiq # 383838; fon: #fefefe; / * burchaklarni yaxlitlash * / - webkit- chegara- radiusi: 4px; - moz- chegara- radiusi: 4px; - ms- chegara- radiusi: 4px; chegara radiusi: 4px; shrift: 14px / 18px "Tahoma", Arial, sans-serif; / * tashqi soya * / - webkit-box-shadow: 0 15px 20px rgba (0, 0, 0, .22), 0 19px 60px rgba (0, 0, 0, .3); - moz- box- soya: 0 15px 20px rgba (0, 0, 0, .22), 0 19px 60px rgba (0, 0, 0, .3); - ms- box- soya: 0 15px 20px rgba (0, 0, 0, .22), 0 19px 60px rgba (0, 0, 0, .3); box- soya: 0 15px 20px rgba (0, 0, 0, .22), 0 19px 60px rgba (0, 0, 0, .3); - webkit- aylantirish: tarjima qilish (-50%, -500%); - ms- transform: translate (-50%, -500%); - o- aylantirish: tarjima qilish (-50%, -500%); aylantirish: tarjima qilish (- 50%, - 500%); - webkit-o'tish: - webkit-transformatsiya 0,6 soniyani osonlashtirish; - moz- o'tish: - moz- transformatsiya 0,6 soniyani osonlashtirish; - o- o'tish: - o- aylantirish 0. 6 soniyani osonlashtirish; o'tish: 0,6 soniyani osonlikcha o'zgartirish; ) / * modalni yoqing * / ... qoplama: maqsad +. popup (- webkit- transform: translate (- 50%, 0); - ms- transform: translate (- 50%, 0); - o- transform: translate (- 50%, 0); transform: translate (- 50) %, 0); yuqori: 20%;) / * yopish tugmachasini yaratish * / ... yopish (yuqori: - 10px; o'ngda: - 10px; kenglik: 20px; balandlik: 20px; pozitsiya: mutlaq; to'ldirish: 0; chegara: 2px qattiq #ccc; - webkit- chegara- radius: 15px; - moz- chegara- radius : 15px; - ms- border- radius: 15px; - o- border- radius: 15px; border- radius: 15px; background- color: rgba (61, 61, 61, 0.8); - webkit- box- soya: 0px 0px 10px # 000; - moz-box-shadow: 0px 0px 10px # 000; box-shadow: 0px 0px 10px # 000; text- align: center; text- decor: none; font: 13px / 20px "Tahoma", Arial , sans- serif; shrift - vazn: qalin; - webkit- o'tish: hamma osonlik.8s; - moz- o'tish: barcha osonlik.8s; - ms- o'tish: barcha osonlik.8s; - o- o'tish: barcha osonlik.8s ; o'tish: hamma osonlik.8s;). yaqin: oldin (rang: rgba (255, 255, 255, 0.9); tarkib: "X"; matn soyasi: 0 - 1px rgba (0, 0, 0, 0.9); shrift hajmi: 12px;). Yopish: hover (fon - rang: rgba (252, 20, 0, 0.8); - webkit - konvertatsiya qilish: aylantirish (360deg); - moz- konvertatsiya qilish: aylantirish (360deg); - ms- aylantirish: aylantirish (360deg); - o - aylantirish: aylantirish (360deg); aylantirish: aylantirish (360deg);) / * oyna ichidagi rasmlar * / ... popup img (kengligi: 100%; balandligi: avtomatik;) / * eskizlar chapga / o'ngga * / ... pic- chap,. pic- o'ng (kenglik: 25%; balandlik: avtomatik;). pic- chap (float: left; margin: 5px 15px 5px 0;). pic- o'ng (float: right; margin: 5px 0 5px 15px;) / * m-media elementlari, ramkalar * / ... popup joylashtirish,. popup iframe (yuqori: 0; o'ng: 0; pastki: 0; chap: 0; displey: blok; margin: auto; min- width: 320px; max- width: 600px; width: 100%;). popup h2 (/ * heading 2 * / margin: 0; color: # 008000; padding: 5px 0px 10px; text- align: left; text- shadow: 1px 1px 3px #adadad; shrift - vazn: 500; shriftning o'lchami: 1.4em; font-family: "Tahoma", Arial, sans-serif; satr balandligi: 1.3;) / * paragraflar * /. popup p (margin: 0; padding: 5px 0)

/ * Asosiy qorayish va modal qatlam uslublari * / .overlay (yuqori: 0; o'ng: 0; pastki: 0; chap: 0; z-indeks: 10; displey: yo'q; / * qorong'i fon * / fon-rang: rgba (0, 0, 0, 0.65); pozitsiya: sobit; / * sobit joylashishni aniqlash * / kursor: sukut bo'yicha; / * kursor turi * /) / * soyalash qatlamini faollashtirish * / .overlay: target (displey: blok;) / * modal uslublar * / .popup (yuqori: -100%; o'ng: 0; chap: 50%; shrift hajmi: 14px; z-index: 20; margin: 0; width: 85%; min-width: 320px ; max-width: 600px; / * sobit joylashishni aniqlash, * / holati: biriktirilgan; to'ldirish: 15px; chegara: 1px qattiq # 383838; fon: #fefefe; / * burchaklarni yumaloqlash * / -webkit-border-radius : 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; shrift: 14px / 18px "Tahoma", Arial, sans-serif; / * tashqi soya * / -webkit -box-shadow: 0 15px 20px rgba (0,0,0, .22), 0 19px 60px rgba (0,0,0, .3); -moz-box-shadow: 0 15px 20px rgba (0,0) , 0, .22), 0 19px 6 0px rgba (0,0,0, .3); -ms-box-shadow: 0 15px 20px rgba (0,0,0, .22), 0 19px 60px rgba (0,0,0, .3); soya-soya: 0 15px 20px rgba (0,0,0, .22), 0 19px 60px rgba (0,0,0, .3); -webkit-transform: tarjima (-50%, -500%); -ms-transform: tarjima (-50%, -500%); -o-transformatsiya qiling: tarjima qiling (-50%, -500%); aylantirish: tarjima qilish (-50%, -500%); -webkit-o'tish: -webkit-transformatsiya 0.6 soniyani osonlashtirish; -moz-o'tish: -moz-transformatsiya 0.6 soniyani osonlashtirish; -o-o'tish: -o-transformatsiya 0.6s-ni osonlashtirish; o'tish: 0,6 soniyani o'zgartirish; ) / * modal blokni faollashtiring * / .overlay: target + .popup (-webkit-transform: translate (-50%, 0); -ms-transform: translate (-50%, 0); -o-transform: translate ( -50%, 0); aylantirish: tarjima qilish (-50%, 0); yuqori: 20%;) / * yopish tugmachasini hosil qilish * / .close (yuqori: -10px; o'ng: -10px; kenglik: 20px; balandlik: 20px; pozitsiya: mutlaq; to'ldirish: 0; chegara: 2px qattiq #ccc; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius : 15px; chegara radiusi: 15px; fon rangi: rgba (61, 61, 61, 0.8); -webkit-box-shadow: 0px 0px 10px # 000; -moz-box-shadow: 0px 0px 10px # 000; box-shadow: 0px 0px 10px # 000; matnni tekislash: markaz; matnni bezatish: yo'q; shrift: 13px / 20px "Tahoma", Arial, sans-serif; shrift-vazn: qalin; -webkit-o'tish: barchasi oson .8s; -moz-o'tish: hamma osonlik .8s; -ms-o'tish: hamma osonlik .8s; -o-o'tish: hamma osonlik .8s; o'tish: hamma osonlik .8s;). Yaqin: oldin (rang: rgba ( 255, 255, 255, 0. to'qqiz); tarkibi: "X"; matn soyasi: 0 -1px rgba (0, 0, 0, 0.9); shrift hajmi: 12px; Yaqin: hover (fon rang: rgba (252, 20, 0, 0.8); -webkit-transform: aylantirish (360deg); -moz-transform: aylantirish (360deg); -ms-transform: aylantirish (360deg) ; -o-transform: rotate (360deg); transform: rotate (360deg);) / * deraza ichidagi rasmlar * / .popup img (kenglik: 100%; balandlik: avtomatik;) / * chap / o'ng eskizlar * / .pic -chap, .pic-o'ng (kenglik: 25%; balandlik: avtomatik;). pik-chap (suzuvchi: chap; margin: 5px 15px 5px 0;) .pic-right (suzish: o'ng; margin: 5px 0 5px 15px ;) / * m-media elementlari, ramkalar * / .popup embed, .popup iframe (yuqori: 0; o'ng: 0; pastki: 0; chap: 0; displey: blok; margin: auto; min-width: 320px; max-width: 600px; width: 100%;). popup h2 (/ * heading 2 * / margin: 0; color: # 008000; padding: 5px 0px 10px; text-align: left; text-shadow: 1px 1px 3px #adadad; shrift og'irligi: 500; shrift hajmi: 1.4em; shrift oilasi: "Tahoma", Arial, sans-serif; satr balandligi: 1.3;) / * paragraflar * / .popup p (margin: 0; to'ldirish: 5px 0)
Ko'rib turganingizdek, aziz do'stlar, hamma narsa juda oddiy va keraksiz tartibsizliklarsiz. Agar siz hamma narsani to'g'ri bajaradigan bo'lsangiz, siz o'zingizning qurol-yarog 'arsenaliga ega bo'lasiz, unda siz har qanday tarkibni joylashtirishingiz mumkin, xoh matnli tarkib, xoh fotosuratlar, ham ro'yxatdan o'tish va mulohazalarning turli shakllari, yoki har qanday uchinchi tomon manbalaridan olingan videolar. Parametrlar bilan tajriba qiling, derazani qalbingiz xohlagancha o'zgartiring. Agar iloji bo'lsa, sharhlaringizda birdan paydo bo'lgan eng yaxshi tajribangiz yoki muammolaringizni baham ko'ring.