Како креирати ЦСС траку
Говоримо о ЦСС риббонс у веб дизајну када а стрип оф бок (зове се врпца) обавија другу кутију. То је прилично искориштена техника дизајна децорате тект, посебно наслови. На веб страници В3Ц-а можете провјерити како се исправно користе ЦСС врпце садржај структуре на суптилан начин.
Дакле, у овом посту ћемо видети како створити једноставну ЦСС врпцу које можете користити побољшајте наслове на вашој веб страници. Захваљујући ЦСС трансформације, можемо креирати овај дизајн са много једноставнијом базом кода него раније.
Можете завирити у коначни демо испод.
ХТМЛ и основни стилови
Прво, креирамо а означавамо ознаком .цард селектор који представља а кутија правоугаоника врпца врап око.
Такође смо поставили основне димензије анд тхе боја позадине витх ЦСС.
.карта бацкгроунд-цолор: беж; хеигхт: 300пк; маргин: 40пк; видтх: 500пк;
Средњи део траке
Користићемо а ЦСС варијабла (омогућава нам да чувамо и поново користимо ЦСС вредност) --п до похраните вриједност додатка. Вредност паддинг власништво користи вар (- п) синтаксу за леву и десну страну траке тако да може бити лако проширен. Тхе --п варијабла касније ће бити више пута; то чини наш код флексибилним.
.риббон --п: 15пк; бацкгроунд-цолор: ргб (170,170,170); хеигхт: 60пк; паддинг: 0 вар (- п); ширина: 100%;
На слици испод можете видети како би требало да изгледа ваш демо у овом тренутку:
Центрирање траке
И ми морамо центрирајте траку. Ми гурните га на лево од величине облоге (означено са --п варијаблу) помоћу релативног позиционирања.
.риббон --п: 15пк; бацкгроунд-цолор: ргб (170,170,170); хеигхт: 60пк; паддинг: 0 вар (- п); позиција: релативна; десно: вар (- п); ширина: 100%;
Ажурирани демо:
Стране траке
Сада креирамо лијеву и десну страну врпце то би требало наизглед да се савије око ивице картице. Да бисмо то урадили, користимо оба :пре него што и :после псеудо-елементи .риббон.
Оба псеудо-елемента наслеђују боју позадине .риббон, и ми користимо филтер: осветљеност (.5) правило да мало потамни боју. Они су такође апсолутно позициониран унутар њиховог (релативно позиционираног) родитеља.
Њихова ширина мора бити исти као и величина паддинг, и стављамо их на леви и десни крај траке помоћу лево: 0 и десно: 0 правила правила.
.риббон: бефоре, .риббон: афтер бацкгроунд-цолор: инхерит; цонтент: "; дисплаи: блоцк; филтер: бригхтнесс (.5); хеигхт: 100%; поситион: абсолуте; видтх: вар (- п); .риббон: бефоре лефт: 0; .риббон: афтер десно: 0;
Сада трака са странама које смо управо додали изгледа као испод:
Искривите стране
Направити стране врпце лоок бент, морамо да коси стране за 45 °. Тхе трансформ: скеви () ЦСС правило вертикално накошене елементе.
.риббон: бефоре лефт: 0; трансформ: скеви (45дег); .риббон: афтер ригхт: 0; трансформ: скеви (-45дег);
Као што видите рубове страна не поравнати након трансформације, тако да морамо повуци их доле.
Поравнај стране
До одредите правилну дужину по којој нам је потребно да померамо стране према доље, окрећемо се тригонометрији. Оно што треба да пронађемо је Икс, као и је ширина страна (једнака је величини паддина) .риббон), и угао θ је 45 ° (угао накошења).
Резултати Икс онда треба преполовити, као и лева и десна страна.
Ако користите било који ЦСС препроцесор, проверите да ли има тан функцију, иначе погледајте тангентни дијаграм или калкулатор сазнати тангентну вредност угла. Имамо среће тан 45 ° је 1, што значи да је вредност Икс једнако и у нашем случају.
.риббон: бефоре, .риббон: афтер бацкгроунд-цолор: инхерит; цонтент: "; дисплаи: блоцк; филтер: бригхтнесс (.5); хеигхт: 100%; поситион: абсолуте; топ: цалц (вар (- п) / 2); видтх: вар (- п);
Од Икс морали смо преполовити, користили смо цалц () ЦСС функција за обављање подјеле --п променљива.
Коначно морамо поравнајте стране дуж з-осе такође, хајде да додамо з-индекс: -1 правило странама да би се то постигло ставите их иза средине траке.
.риббон: бефоре, .риббон: афтер бацкгроунд-цолор: инхерит; цонтент: "; дисплаи: блоцк; филтер: бригхтнесс (.5); хеигхт: 100%; поситион: абсолуте; топ: цалц (вар (- п) / 2); видтх: вар (- п); индек: -1;
Сада када смо поравнали стране, наша ЦСС трака је готова.
Испод можете поново погледати демо, молим вас, имајте на уму да користи и неке додатне стилове.
