ЦСС3 Цирцулар анд Еллиптицал Градиентс [ЦСС3 Типс] т
Данас ћемо наставити нашу дискусију ЦСС3 Градиентс. У претходном посту смо вам показали како да креирате Линеар Градиентс. Овај пут ћемо покрити њиховог рођака, Кружни и елиптични градијенти.
Градијентна синтакса
Градијент у ЦСС3 се декларише користећи позадинска слика својство. Ово је за бољу компатибилност када је потребно додати боја позадине у једном скупу правила, тако да се не сударају један с другим. Затим, да бисмо створили радијални градијент, једноставно га назовемо са овим радијални градијент () функције. Постоје четири вредности које треба укључити у функцију за правилно подешавање градијента.
Прва вредност дефинише градијентна позиција. Можемо да користимо описну кључну реч, као што су врх, дно, центар и лево, или можемо да будемо специфичнији, 50% 50% да бисте подесили нагиб у центру или 0% 0% да бисте подесили да се градијент стартује горе лево.
Друга вредност дефинише облик и величину градијента, постоје два аргумента да би се обликовали градијенти, прво елипса која је подразумевана, а друга је круг.
И за градиент сизе, можемо изабрати један од следећих шест аргумената.
| Вредности | Опис |
|---|---|
најближа страна | Облик градијента испуњава страну кутије која је најближа његовом центру (за кругове) или задовољава и вертикалне и хоризонталне стране најближе центру (за елипса). |
најближи угао | Облик градијента је димензиониран тако да тачно одговара најближем углу кутије од његовог центра. |
најудаљенијој страни | Слично најближој страни, осим што је облик димензионисан тако да задовољава страну кутије најудаљеније од њеног центра (или вертикалне и хоризонталне стране). |
најудаљенији угао | Облик градијента је димензиониран тако да се тачно поклапа са најудаљенијим кутом кутије од његовог центра. |
садржати | Синоним за |
цовер | Синоним за |
Извор табеле: Мозилла Девелопер Нетворк.
На крају, трећи и четврти дефинишу комбинација боја. Дакле, ево како пишемо синтаксу за креирање Еллиптицал градијентима, и овај пут ћемо користити цовер за величину градијента, тако да се она широко шири, покривајући контејнер;
боди бацкгроунд-имаге: радиал-градиент (средниј центр, покритие елипси, # ффеда3, # ффц800);
За креирање Цирцулар градијент можемо једноставно урадити на овај начин:
боди бацкгроунд-имаге: радиал-градиент (централни центар, поклопац круга, # ффеда3, # ффц800);
Као што име имплицира, облик градијента ће бити круг.
Бровсер Суппорт
Само узмите у обзир, међутим, сви претраживачи су још увијек у процесу пружања потпуне подршке за ову значајку, тако да им и даље треба префикс произвођача. Дакле, комплетна синтакса која ће радити у свим модерним претраживачима - ИЕ10 +, Фирефок 3.6+, Цхроме 4.0+, Сафари 4.0+ и Опера 11+ - ће изгледати овако;
боди бацкгроунд-имаге: радиал-градиент (средное дно, покритие елипси, # ффеда3, # ффц800); бацкгроунд-имаге: -о-радиал-градиент (централно дно, поклопац елипсе, # ффеда3, # ффц800); бацкгроунд-имаге: -мс-радиал-градиент (централно дно, покривало елипса, # ффеда3, # ффц800); бацкгроунд-имаге: -моз-радиал-градиент (централно дно, поклопац елипсе, # ффеда3, # ффц800); бацкгроунд-имаге: -вебкит-радиал-градиент (централно дно, поклопац елипсе, # ффеда3, # ффц800);
Погледајте демо или преузмите извор да бисте се играли са градијентима.
- Демо
- Довнлоад Соурце
Финал Вордс
Креирање ЦСС3 радијалног градијента није толико тешко као што мислите, а посебно када добијете помоћ од ових алата за генерисање кода:
- Цолорзилла Градиентс
- Градиентоо
Радијални градијент је само један тип ЦСС3 гадиента, наставићемо нашу дискусију на тему у будућим постовима, тако да останите у току са Хонгкиат.цом
