21.12.2014, 13:54 CSS— бу стиллар билан ишлаш учун мўлжалланган кодлар мажмуасидир. Ҳозирги кунга келиб янги CSS3версияси ишлаб чиқилмоқда, лекин ҳали кўп браузерлар бустилларни акс эттира олмаяпти. Шунинг учун CSS3 яратувчилари браузер ўртасида келишмовчиликларни олдини олиш мақсадида браузер турига қараб ҳар хил префикслар ишлаб чиқишди ва бу префикслардан CSS3 тўлиқ яратилмагунча ишлатиш тавсия этилган, CSS3тўлиқ яратилгандан сўнг бу префикслар олиб ташланади. Бу префикслар қуйдагилар:

Safari ва Chrome броузерлари учун -webkit-

Opera броузери учун -o-

Firefox броузери учун -moz-

Internet Explorer(IE) броузери учун эса -ms-

Ман бу префиксларниишлатмаган ҳолда мисоллар келтирдим, агар сизда бу мисоллар ишламаса олдига префиксларни қўйиб ишлатиб кўринг.

Css3 да энг асосий қўшилган стиллардан бири буанимациялардир, яъни стиллар алмашиниш жараёнибирданига эмас, балки секин асталик билан содир бўлишидир. Қуйида Css3 версиясига янги қўшилган баъзи стилларни мисол тариқасида кўрсатиб ўтаман.
Элементларни(матн, расм, фон,..) оч(прозрачный) кўринишда акс эттириш.
background-color: rgba(10,0,255,0.7);

Буерда саҳифа фонига ранг бериб, шу рангни 0.7 даражали оч тусга келтирилмоқда, танишинг CSS3 нинг янги элементи rgba.

Элементларнинг исталган бурчагига(қисмига) бир вақтнинг ўзида ҳар хил расмларни жойлаштириш. Бу сайтни верстка қилиш жараёнини енгиллаштиради.
background:
url(top.gif) top left no-repeat,
url(center.png) top 11px no-repeat,
url(bottom.png) bottom left no-repeat,
url(middle.png) left no-repeat;
Resize буйруғи. Бу буйруқ орқали фойдаланувчи исталган элементнинг ўлчамини ўзгартириш мумкинбўлади.
div.resize {
width: 25px;
height: 35px;
resize: both;
}
CSS3 нинг яна бир янгилиги бу – элементлар(шакллар, блоклар) бурчагини исталган радиусда буриш мумкинлигидир. Кўп веб сайтлар форма яратиш жараёнида, форманинг бурчакларини буришни верстка пайтида бирор расм орқали амалга оширишади, бу эса қўшимча иш ва вақт йўқотишга олиб келади, CSS3 да бу муаммобартараф этилган ва қуйидагича амалгаошириш мумкин бўлади.
#forma {
border-bottom-right-radius: 2em;
border-bottom-left-radius: 1em;
border-top-left-radius: 5em;
border-top-right-radius: 3em;
}
CSS3нинг соялар билан ишлаш қисми. Барча “p” теглари учун соялар ҳосид қилиш.
p {
text-shadow: #003471 /* соя ранги*/ 2px /* ўнг томонга сурилиши*/ 5px /* пастга сурилиш */ 2px /* размытие*/;
}
Шрифтлар. Интернетда кўп фойдаланувчилар verdana шрифти билан ишлайди. Нега? Чунки бу шрифт барча компьютерларда мавжуд ва броузерда чиройли кўринишга эга. Агар стилларда қўлланилган шрифт фойдаланувчи компьютерида мавжуд бўлмаса, броузер матнни исталган бошқа шрифтда кўрсатиши мумкин. Бу эса шрифтлар ранг баранглигига олиб келади. CSS3 да шрифтлар билан ишлаш учун янги команда @font-face.
@font-face {
font-family: shrift_akm;
src: url(‘http://blabla.uz/fonts/shrift_akm.ttf’);
}
h1 {
font-family: shrift_akm;
}
Веб саҳифада колонкалар. Бунисига нима дейсиз? Элемент ичидаги матнларни бир неча устунли колонкаларда чиқаришингиз мумкин.
div {
column-width: 15em;
column-gap: 2em; /* яшил рангда */
column-rule: 4px solid red; /* қизил рангда */
padding: 5px; /* қора рангда */
}———
———

42242 422 42 422 422
4565 56 5454 54565 456
…

Manba: Akmx.uz




Ko'rildi: 424 | Добавил: admin | Рейтинг: 0.0/0

Всего комментариев: 0