Како да креирате дизајн граничне линије са ЦСС-ом
Са гранични дизајн можемо показати корисницима шта се може наћи испод граничног подручја ХТМЛ елемента. Овај задатак се обично решава слагање два или више блокова (у већини случајева дивс) различитих величина један на други. Прво ово изгледа као рјешење без напора, али постаје све више фрустрирајуће када желите поново користити изглед више пута, кретати се по елементима, оптимизирати дизајн за мобилне уређаје или одржавати код.
У овом посту ћу вам показати елегантно ЦСС-рјешење које користи само један ХТМЛ елемент за постизање истог ефекта. Ова техника је такође одлична за приступачност, као и за њу учитава позадинску слику у ЦСС, одвојено од ХТМЛ-а.
До краја овог поста, ви ћете знати како приказује позадинску слику у пограничном подручју у циљу стварања гранични дизајн можете погледати испод. Такође ћу вам показати како можете да учините да дизајн одговара користећи јединице приказа.
Инитиал Цоде
Једини захтев у ХТМЛ фронту је а блоцк елемент:
Морамо реусе димензије (ширина и висина) и ширина границе див, па их представљам као ЦСС варијабле. Тхе вариабле --в означава видтх од .цб блоцк елемент, --х означава његово хеигхт, --б иде за бордер видтх, и --б2 за ширину границе помножену са 2. Касније ћемо видети употребу последње променљиве.
Димензионишем Јединица Хајде да побољшамо горњи код додавањем позадине и подешавањем границе, висине и ширине користећи наше предефинисане ЦСС варијабле. Ево како ће изгледати демо управо сада: Потребна нам је позадинска слика покривају цијело подручје Ако желите да позадинској слици дате фиксну величину, само проверите да ли је величина коју дајете омогућена да покрије гранично подручје Тхе ширина позадинске слике [ Слично томе, висина позадинске слике [ На овај начин смо одредили величину позадинске слике за подручје које је једнако величини Тхе Белешка: Ако додајете паддинг у То је оно што сада имамо: Сада када смо покрили граничну област са позадинском сликом, остаје само то покривају централну област унутар границе (подручје без граница) са солидном бојом, за коју стижемо до Хоризонтална сенка са вредношћу У демо Цодепен-у можете видети белу границу око слике. Постоји чувени трик користећи бок-схадовс за креирање више граница-можемо користити исту технику додајте једну или више обојених граница нашем дизајну. Тхе упдатед Тхе У мом финалном демо Цодепен-у, поставила сам код за позадинску слику и боју у боји у посебну класу. Ово је опционо, али може бити изузетно корисно ако желите Поново искористите изглед дизајна граничне линије у више елемената, и додају естетику (позадинска слика + боја) за сваки елемент независно. Додао сам име класе Од Да бисте подесили вредност Пошто су димензије у јединици Белешка: Не заборави додајте мета ознаку видокруга на своју ХТМЛ страницу ако сте одлучили да је оптимизујете за мобилни приказ.вв јединица (можете користити фиксне јединице ако желите). .цб --в: 35вв; -х: 40вв; --б: 4вв; --б2: цалц (вар (- б) * 2);
Брзо објашњење -
вв и вх јединицевв представља 1/100тх ширине оквира за приказ. На пример, 50вв је 50 делова ширине приказа сече вертикално на 100 једнаких делова, док 50вх је 50 делова висине прозора сече хоризонтално у 100 једнаких делова. .цб --в: 35вв; -х: 40вв; --б: 4вв; --б2: цалц (вар (- б) * 2); бацкгроунд: урл (бг.јпг); бордер: вар (- б) солид транспарент; хеигхт: вар (- х); видтх: вар (- в);
Величина позадинске слике
позадини вредност коју дајем: .цб --в: 35вв; -х: 40вв; --б: 4вв; --б2: цалц (вар (- б) * 2); бацкгроунд: урл (бг.јпг) центер / цалц (вар (- в) + вар (- б2)) цалц (вар (- х) + вар (- б2)); бордер: вар (- б) солид транспарент; хеигхт: вар (- х); видтх: вар (- в);
цалц (вар (- в) + вар (- б2))] је сума ширина див [вар (- в)] и ширина леве и десне границе [вар (- б2)].цалц (вар (- х) + вар (- б2))] је сума висина див [вар (- х)] и ширина горње и доње границе [вар (- б2)].див (укључујући и пограничну област).центар кључне речи поравнава позадинску слику до центра див.див, не заборавите да укључити подручје за облагање и на величину позадине, исто као и на граничну област.
Покријте подручје које искључује границе
бок-схадов инсет. .цб --в: 35вв; -х: 40вв; --б: 4вв; --б2: цалц (вар (- б) * 2); бацкгроунд: урл (бг.јпг) центер / цалц (вар (- в) + вар (- б2)) цалц (вар (- х) + вар (- б2)); бордер: вар (- б) солид транспарент; бок-схадов: инсет вар (- в) 0 0 ргба (0,120,237, .5); хеигхт: вар (- х); видтх: вар (- в);
вар (- в) покрива целу ширину див. Употреба ргба функција боје омогућава нека транспарентност да бисте додали у микс, међутим, можете користити и непрозирну боју ако желите да у потпуности покријете централну област.
Додајте додатну границу са
бок-схадовбок-схадов вредност је: .цб --в: 35вв; -х: 40вв; --б: 4вв; --б2: цалц (вар (- б) * 2); бацкгроунд: урл (бг.јпг) центер / цалц (вар (- в) + вар (- б2)) цалц (вар (- х) + вар (- б2)); бордер: вар (- б) солид транспарент; бок-схадов: инсет вар (- в) 0 0 ргба (0,120,237, .5), 0 0 0 цалц (вар (- б) / 2) бела; хеигхт: вар (- х); видтх: вар (- в);
цалц (вар (- б) / 2) функција ствара сенку пола ширине границе.
Опционално: Одвојени распоред и естетика
.постер1 до .постер1 --тбгц: ргба (0,120,237, .5); бацкгроунд-имаге: урл ("хттп://бит.ли/2еКБиј2"); позадини је скраћена имовина, њена дуготрајна својства могу се поништити / подесити појединачно. Дакле, можемо поставити позадинска слика у .постер1, и уклоните урл вредност из позадини имовине у .цб.бок-схадов, можемо користити другу ЦСС варијаблу. Тхе --тбгц променљива задржава вредност боје желимо да дамо бок-схадов (лигхтблуе у демо-у), тако да је међу правилима стила .цб ми замените вредност боје бок-схадов са вар (- тбгц). .цб --в: 35вв; -х: 40вв; --б: 4вв; --б2: цалц (вар (- б) * 2); бацкгроунд: центер / цалц (вар (- в) + вар (- б2)) цалц (вар (- х) + вар (- б2)); бордер: вар (- б) солид транспарент; бок-схадов: инсет вар (- в) 0 0 вар (- тбгц), 0 0 0 цалц (вар (- б) / 2) бела; хеигхт: вар (- х); видтх: вар (- в);
Шифра за портретни режим
вв, ће изгледати премало када гледате дизајн у портретном режиму (мања ширина у односу на висину) - у шта су сви мобилни уређаји подразумевано укључени. Да решимо ово питање, прекидач вв са вх, и променити величину дизајна као што видите прикладно за режиме портрета. @медиа (оријентација: портрет) .цб --в: 35вх; --х: 40вх; --б: 4вх;
