ЦСС3 је заиста почиње да окупи замах са многим команди наведених у ЦСС3 радни нацрт подржан од стране Фирефок, Сафари и Гоогле Цхроме. Мислили смо да бисмо саставили неке од наших омиљених. Пре него што почнете ЦСС3 команде захтевају претраживача одређену синтаксу за њих да раде.

За Мозилла Фирефок морамо да употребимо-моз-префикс, на пример:

-Моз-бордер-радиус:

И за Сафари ВебКит-префиксом, на пример:

-ВебКит-граница-полупречник:

1. Границе радијус

ЦСС3 граница радијус команда креира закривљене угловима на елеменат. Уместо да користите 4 или више слика да створи заобљени углови користите следеће команде:

/ * За Мозилла Фирефок * /
-Моз-бордер-радиус: 20пк;

/ * За Сафари и Гоогле Цхроме-у * /
-ВебКит-граница-домет: 20пк;
}

2. Кутија сенци

Сенка се може применити на елементе користећи ЦСС3 оквир сенке команду. Кутија сенка прихвата три нумеричке вредности, плус боја за примену овог ефекта. Ови бројеви су:

1. Растојање од хоризонталне офсет сенке - Позитивна вредност значи сенка ће баци на десно и негативну вредност са леве стране
2. Удаљености од вертикалне офсет сенке - Позитивна вредност значи сенка ће се у наставку баци и негативну вредност изнад
3. Како мутно желите сенке

Са додатком боје вредност сенке заврши:

/ * За Мозилла Фирефок * /
-Моз-бок-схадов: 5пк 5пк 5пк # б6ебф7;

/ * За Сафари и Гоогле Цхроме-у * /
-ВебКит-бок-схадов: 5к 5пк 5пк # б6ебф7;

3. Транспарентност или РГБА

Транспарентност је увек био лукав. Различитим претраживачима историјски су се пријавили транспарентност користе различите команде. У наставку тог крста претраживача недоследности имамо додавање нових ЦСС3 РГБА позадини имовине, али у принципу ова команда логичније. Команда се састоји од 4 вредности - први, други и трећи су црвене, зелене и плаве вредности (0-255), односно након алфа канал или транспарентност (0:1).

За РГБА команду претраживача специфичне префиксе (моз-,-ВебКит-) нису потребни:

# Бок3 {
бацкгроунд-цолор: РГБА (110, 142, 185, .5);
}

Боја позадине команда додаје лепо плаво-сивом позадином на .5 или 50% опацити у бровсерима који разумеју ЦСС3 РГБА имовине.

Нажалост, Интернет Екплорер ће покушати да пружи команду боју позадине, али не разумем РГБА. Да би се обезбедило да боја позадине је такође постављен у ИЕ ИЕ само хацк је потребно. У следећем примеру: последње дете псеудо селектор који Интернет Екплорер не разуме се користи да га искључи.

Тело: последње дете # бок3 {
/ * Искључи све ИЕ бровсер користећи: последње дете * /
бацкгроунд-цолор: РГБА (110, 142, 185, .5) важно;!
}

4.. Колоне

Могућност додавања колона је додат у ЦСС3. Уместо да лебди елемената унутар контејнера можемо одредити број колона, ширине и правило:

/ * За Мозилла Фирефок * /
-Моз-колона-Цоунт: 2;
-Моз-колона-јаз: 20пк;
-Моз-колона-правило: 1пк солид # 6е8еб9;

/ * За Сафари и Гоогле Цхроме-у * /
-ВебКит-колона-Цоунт: 2;
-ВебКит-колона-јаз: 20пк;
-ВебКит-колона-правило: 1пк солид # 6е8еб9;
}

5. Вишеструки слике за позадину

Позадина слике је увек био рестриктиван када је у питању ЦСС због чињенице само да примените један позадинску слику по елементу. То није случај са ЦСС3 који омогућује више слика по елементу једноставно их зарезима одваја.

Да бисте поставили слику на обе леве и десне стране елемента можете да користите следеће команде, са мало стила:

паддинг: 20пк 0;
}

Ова команда ће бити погрешно доноси Интернет Екплорер као што не прихвата 2 слике у позадини на један елемент. Искључује сваку ИЕ пијук је потребно.

# Бок5 блоцккуоте {
/ * За све претраживаче, само отворени цитат * /
бацкгроунд: урл (/ и / куотел.гиф) 0 0 но-репеат;
паддинг: 20пк 0;
}

Тело: последње дете # бок5 блоцккуоте {
/ * Искључи све ИЕ бровсер користећи: последње дете * /
/ * Затим две слике * /
бацкгроунд: урл (/ и / куотел.гиф) но-репеат 0 0, урл (/ и / куотер.гиф) но-репеат 100% 0;
}

6.. Позадина градијенти

ЦСС3 позадини градијенти су изузетно флексибилни и могу се користити за креирање сложених образаца. На свом најједноставнијем ЦСС-линеарни градијент омогућава градијент да се примењују на елемент са врха до дна и лева на десно.

Овај пример ЦСС3 градијент у Мозилла Фирефок примењује светло плаве градијент на дну кутије за само 20% од кутије 'висине

Сафари користи мање интуитиван, али флексибилнији приступ коришћењем боја заустави вредности. Пример Сафари специфичних код следи (обратите пажњу на линеарно је укључена у заградама уместо напољу):

# Бок8 {
у позадини:-ВебКит-градијент (линеарни, лево доле, лево горе, у боји-стоп (0, # б6ебф7), боја-стоп (0.20, # ффф));
}

7. Ротација

ЦСС3 такође омогућава ротацију елемената, који користе трансформишу команду, са имовином ротира прихватање степени као параметар.

<цоде> # бок9 {
-Моз-трансформација: ротирају (2дег);
-ВебКит-трансформација: ротирају (2дег);
} </ Цоде>

8. Истиче

Оутилинес су укључени у ЦСС3 спецификацију и омогућиће да обе границе и преглед да се примењују на један елемент.

Преглед имовине је идентичан границе команду. Додатне офсет имовину, међутим омогућава границе се помера даље унутар или ван елемента.

Подастрт испод: Цсс од админ