Как да създадете дизайн на границата с CSS
С граничен дизайн можем да покажем на потребителите какво може да бъде намерено под границата на HTML елемент. Тази задача обикновено се решава чрез подреждане на два или повече блокови елемента (в повечето случаи divs) с различни размери един върху друг. Първо това изглежда безпроблемно решение, но става по-разочароващо, когато искате да използвате многократно оформлението, да се движите из елементите, да оптимизирате дизайна за мобилни устройства или да поддържате кода.
В тази публикация ще ви покажа елегантно CSS-решение, което използва само един HTML елемент за постигане на същия ефект. Тази техника е чудесна и за достъпност зарежда фоновото изображение в CSS, отделени от HTML.
До края на този пост ще знаете как да го направите покаже фоново изображение в граничната област за да създадете граничен дизайн можете да видите по-долу. Ще ви покажа и как можете да направите дизайна отзивчив използвайки единици за визуализация.
Първоначален код
Единственото изискване в предната част на HTML е a блок елемент:
Ще трябва повторна употреба размерите (ширина и височина) и широчината на границата на Разделение, така че ги представям като CSS променливи. Променливата --w означава широчина от .CB блок елемент, --з показва нейния височина, --б отива за ширина на границата, и --b2 за ширината на границата, умножена по 2. По-късно ще видим използването на последната променлива.
Определям размера на Устройството Нека подобрим горния код, като добавим фон и зададем границата, височината и ширината използвайки нашите предварително дефинирани CSS променливи. Ето как трябва да изглежда демото в момента: Нуждаем се от фоновото изображение покриват цялата площ на. \ t Ако искате да дадете на фоновото изображение фиксиран размер, просто се уверете, че размерът, който давате, му позволява да покрива граничната зона на Най- ширина на фоновото изображение [ По подобен начин височина на фоновото изображение [ По този начин сме оразмерили фоновото изображение до област, която е еднаква с размера на Най- Забележка: Ако добавяте подложка към Това е, което имаме в момента: Сега, когато сме обхванали граничната зона с фоновото изображение, всичко, което остава, е да покриване на централната зона вътре в границата (зона, изключваща границата) с плътен цвят, за който стигаме до a Хоризонталната сянка с стойност В демонстрацията на кодовете можете да видите бяла рамка около изображението. Има известен трик използване на сенчести кутии за създаване на множество граници-можем да използваме същата техника добавете един или повече цветни граници към нашия дизайн. Актуализираният Най- В моята последна версия на Codepen, поставих кода за фоновото изображение и цвета на скритата кутия в отделен клас. Това е по избор, но може да бъде изключително полезно, ако искате повторно използване на оформлението на границата на границата в множество елементи и добавяйте естетиката (фоново изображение + цвят) за всеки елемент независимо. Добавих име клас От За да зададете стойността на Тъй като размерите са всички в единицата Забележка: Не забравяйте добавете мета маркер на екрана в HTML страницата си, ако сте решили да я оптимизирате за мобилен изглед.VW единица (можете да използвате фиксирани единици, ако искате). .cb --w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2);
Бързо обяснение -
VW и вх единициVW представлява 1/100тата на ширината на прозореца за изглед. Например, 50vw е 50 части от ширината на екрана нарязани вертикално на 100 равни части, докато 50vh е 50 части с височина на екрана нарязани хоризонтално на 100 равни части. .cb --w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); фон: url (bg.jpg); border: var (- b) прозрачен; височина: var (- h); width: var (- w);
Размер на фоновото изображение
заден план стойност, която давам: .cb --w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); фон: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) прозрачен; височина: var (- h); width: var (- w);
calc (var (- w) + var (- b2))] е сумата на ширина на div [Var (- w)] и ширина на лявата и дясната граница [Var (- Ь2)].calc (var (- h) + var (- b2))] е сумата на височина на div [Var (- з)] и ширина на горните и долните граници [Var (- Ь2)].Разделение (включително граничната зона).център ключова дума подравнява фоновото изображение до центъра на Разделение.Разделение, не забравяйте включват областта на запълване до размера на фона, също както и граничната зона.
Покрийте зоната, изключваща границите
кутия сянка добавям. .cb --w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); фон: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) прозрачен; box-shadow: inset var (- w) 0 0 rgba (0,120,237, .5); височина: var (- h); width: var (- w);
Var (- w) покрива цялата ширина на. \ t Разделение. Използването на RGBA Цветовата функция позволява известна прозрачност за добавяне в сместа, но можете да използвате и непрозрачен цвят, ако искате да покриете напълно централната зона.
Добавете допълнителна граница с
кутия сянкакутия сянка стойността е: .cb --w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); фон: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) прозрачен; box-shadow: inset var (- w) 0 0 rgba (0,120,237, .5), 0 0 0 calc (var (- b) / 2) бяло; височина: var (- h); width: var (- w);
calc (var (- b) / 2) функцията създава сянка на половината от широчината на границата.
Незадължително: Отделно оформление и естетика
.poster1 към .poster1 - tbgc: rgba (0,120,237, .5); background-image: url ("http://bit.ly/2eQBij2"); заден план е стенографска собственост, неговите дълготрайни свойства могат да бъдат заменени / зададени индивидуално. Следователно, можем да определим фон изображение в .poster1, и премахване на стойността на URL адреса от заден план имот в .CB.кутия сянка, можем да използваме друга CSS променлива. Най- --tbgc променлив съдържа стойността на цвета искаме да дадем на кутията-сянка (lightblue в демото), така че сред правилата на стила за .CB ние замени стойността на цвета на кутия сянка имот с Var (- tbgc). .cb --w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); фон: center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) прозрачен; box-shadow: inset var (- w) 0 0 var (- tbgc), 0 0 0 calc (var (- b) / 2) бяло; височина: var (- h); width: var (- w);
Код за портретен режим
VW, ще го направи изглежда твърде малък когато разглеждате дизайна в портретен режим (по-малка широчина спрямо височината) - в който всички мобилни устройства са включени по подразбиране. За да разрешите този проблем, ключ VW с вх, и преоразмеряване на дизайна както ви е удобно за портретни режими. @media (ориентация: портрет) .cb --w: 35vh; --h: 40vh; --b: 4vh;
