CSS3 haqida
CSS – bu stillar bilan ishlash uchun mo‘ljallangan kodlar majmuasidir. Hozirgi kunga kelib yangi CSS3 versiyasi ishlab chiqilmoqda, lekin hali ko‘p brouzerlar bu stillarni aks ettira olmayapti. Shuning uchun CSS3 yaratuvchilari brauzer o‘rtasida kelishmovchiliklarni oldini olish maqsadida brauzer turiga qarab har xil prefikslar ishlab chiqishdi va bu prefikslardan CSS3 to‘liq yaratilmaguncha ishlatish tavsiya etilgan, CSS3 to‘liq yaratilgandan so‘ng bu prefikslar olib tashlanadi. Bu prefikslar quydagilar:
Safari va Chrome brouzerlari uchun -webkit-
Opera brouzeri uchun -o-
Firefox brouzeri uchun -moz-
Internet Explorer (IE) brouzeri uchun esa -ms-
Man bu prefikslarni ishlatmagan holda misollar keltirdim, agar sizda bu misollar ishlamasa oldiga prefikslarni qo‘yib ishlatib ko‘ring.
CSS3 da eng asosiy qo‘shilgan stillardan biri bu animatsiyalardir, ya’ni stillar almashinish jarayoni birdaniga emas, balki sekin astalik bilan sodir bo‘lishidir. Quyida CSS3 versiyasiga yangi qo‘shilgan ba’zi stillarni misol tariqasida ko‘rsatib o‘taman.
Elementlarni (matn, rasm, fon,..) och(prozrachniy) ko‘rinishda aks ettirish.
1. background-color
: rgba(
10
,
0
,
255
,
0.7
);
Bu erda sahifa foniga rang berib, shu rangni 0.7 darajali och tusga keltirilmoqda, tanishing CSS3’ning yangi elementi rg’ba.
Elementlarning istalgan burchagiga (qismiga) bir vaqtning o‘zida har xil rasmlarni joylashtirish. Bu saytni verstka qilish jarayonini yengillashtiradi.
1. background
:
2. url
(
top
.gif)
top
left
no-repeat
,
3. url
(
center
.png)
top
11px
no-repeat
,
4. url
(
bottom
.png)
bottom
left
no-repeat
,
5. url
(
middle
.png)
left
no-repeat
;
1
2
3
4
5
|
div.resize { width : 25px ; height : 35px ; resize: both ; } |
CSS3’ning yana bir yangiligi bu – elementlar(shakllar, bloklar) burchagini istalgan radiusda burish mumkinligidir. Ko‘p web saytlar forma yaratish jarayonida, formaning burchaklarini burishni verstka paytida biror rasm orqali amalga oshirishadi, bu esa qo‘shimcha ish va vaqt yo‘qotishga olib keladi, CSS3’da bu muammo bartaraf etilgan va quyidagicha amalga oshirish mumkin bo‘ladi.
1
2
3
4
5
6
|
#forma { border-bottom-right-radius: 2em ; border-bottom-left-radius: 1em ; border-top-left-radius: 5em ; border-top-right-radius: 3em ; } |
CSS3’ning soyalar bilan ishlash qismi. Barcha “p” teglari uchun soyalar hosil qilish.
2. text-shadow
:
#003471
/* soya rangi */
2px
/* o’ng tomonga surilishi*/
5px
/* 3. pastga surilish */
2px
/* razmitiye*/
;
}
1
2
3
4
5
6
7
|
@font-face { font-family : shrift_akm; src : url ( 'http://blabla.uz/fonts/shrift_akm.ttf' ); } h 1 { font-family : shrift_akm; } |
Web sahifada kolonkalar. Bunisiga nima deysiz? Element ichidagi matnlarni bir necha ustunli kolonkalarda chiqarishingiz mumkin.
2. column-
width
:
15em
;
3. column-gap:
2em
;
/* yashil rangda */
4. column-rule:
4px
solid
red
;
/* qizil rangda */
5. padding
:
5px
;
/* qora rangda */
6. }--------
7. --------
8.
9. 42242
422
42
422
422
10. 4565
56
5454
54565
456
11. ...
12.