проблем
Рязане на ъглите - това не е просто един бърз начин да се постигне целта, но и популярен вариант стайлинг, както в печатен дизайн и уеб дизайн. Най-често тя включва изрязване един или повече краища на контейнера под ъгъл от 45 °. През последните години, поради факта, че започва да заемат позиции skeuomorph плосък дизайн, този ефект е особено популярна. Когато ъглите се изрязват само от едната страна, и всеки от тях е собственик на 50% от височината на елемента, той създава фигура във формата на стрела, която често се използва като бутони за навигация и дизайнерски елементи, като например "галета."
Въпреки това, все още не е CSS достатъчно инструменти, за да създадете този ефект с помощта на прости и ясни решения от един ред. Поради това, много фирми са склонни да използват фонови изображения: или затворите отрязаните ъгли на триъгълника (в един цвят фон) или да създадете целия фон с едно или няколко изображения, където ъглите вече отрязани. Очевидно е, че такива методи са много негъвкави, те са трудно да се запази и да увеличи времето за изчакване поради исканията за допълнителна-на HTTP и общият размер на уебсайта си файлове.
Пример уебсайт, където ъгъл на рязане (долния ляв в прозрачна сфера търсене Book) се вписва перфектно в дизайна
Едно от възможните решения, за да ни предложи всемогъщите CSS градиенти. Да предположим, че имаме нужда от само един ъгъл ъгъл, например, в долния десен ъгъл. Номерът е да се възползват от възможността да се наклони на ъгъла на посока (например, 45deg) и позицията на границите на цвят преход в абсолютните стойности на които не се променят, когато общата площ клетка, модел принадлежи. От това следва, че тя ще бъде достатъчно на линеен градиент. Ние ще добавим прозрачната граница цвят преход, за да създадете ъгъл за автоматично изключване, и още един преход граничен цвят в същото положение, но с цвят, съответстващ на заден план. CSS код е както следва (за размера на 15px на ъгъл):
Обикновено, не е тя? Резултатът, който виждате на снимката.
фон: # 58а;
фон: линеен градиент (-45deg, прозрачен 15px, # 58а 0), линеен градиент (45deg, прозрачен 15px, # 655 0);
Въпреки това, той не работи. По подразбиране, както градиента заемат цялото пространство на елемента, така че те да закриват един от друг. Ние трябва да ги намалят чрез ограничаване на всеки половин елемент с помощта на фон-размер:
фон: # 58а;
фон: линеен градиент (-45deg, прозрачен 15px, # 58а 0) полето, линеен градиент (45deg, прозрачен 15px, # 655 0) наляво;
фон размери: 50% до 100%;
Резултатът може да се види на фигурата.
Въпреки факта, че ние използвахме фон-размер. градиенти все още се припокриват. Причината е, че сме забравили да изключите фон-повторение, така че всеки един от фоновете се повтаря два пъти. Следователно, един от фоновете още засенчва другата, но този път се дължи на повторението. Новата версия на кода изглежда така:
фон: # 58а;
фон: линеен градиент (-45deg, прозрачен 15px, # 58а 0) полето, линеен градиент (45deg, прозрачен 15px, # 655 0) наляво;
фон размери: 50% до 100%;
фон-повторение: не-повторение;
Резултатът можете да видите на снимката и се уверете, че това е - най-накрая! - Работи! Може би вече сте предположили как да се прилага този ефект към четирите ъгли. Вие ще трябва четири градиент и код, подобен на следния:
фон: # 58а;
фон: линеен градиент (135deg, прозрачен 15px, # 58а 0) горния ляв,
линеен градиент (-135deg, прозрачен 15px, # 0, 655) горния десен,
линеен градиент (-45deg, прозрачен 15px, # 58а 0) долния десен,
СЪВЕТА
Ние използвахме различни цветове (# 58а и # 655), за да се опрости отстраняване на грешки. На практика двете наклони са от един и същи цвят.
Но предишният проблемът е, че е трудно да се поддържа. Той изисква да се направи пет промени, за да промените цвета на фона и четири, за да промените стойността на ъгъл. Нечистота, създадени с помощта на Препроцесорът, може да намали броя на повторенията. Ето как ще изглежда кода в SCSS:
SCSS
@mixin скосени ъгли ($ бг,
$ Tl: 0, $ TR: $ TL, $ BR: $ TL, $ бл: $ TR)
фон: $ бг;
фон:
линеен градиент (135deg, прозрачен $ TL, $ бг 0)
горния ляв,
линеен градиент (225deg, прозрачен $ TR, $ бг 0)
горния десен,
линеен градиент (-45deg, прозрачен $ Br, $ бг 0)
долния десен,
линеен градиент (45deg, прозрачен $ бл, $ бг 0)
долния ляв;
фон размери: 50% до 50%;
фон-повторение: не-повторение;
>
Извитите заобикалят
радиално-градиент (кръгче в горния десен, прозрачен 15px, # 58а 0) горния десен,
радиално-градиент (кръг в долния десен, прозрачен 15px, # 58а 0) долния десен,
радиално-градиент (кръг в долния ляв, прозрачен 15px, # 58а 0) долния ляв;
фон размери: 50% до 50%;
фон-повторение: не-повторение;
Точно както в предишната техника, размерът може да се контролира от ъгъла на цветни граници преход позиция и примес и този код е в състояние да го направи по-подходящ за по-нататъшна подкрепа.
Решение с низ SVG и гранично-изображение
Имайте предвид, че размерът на стъпката рязане е равен на 1. Това не означава, че един пиксел; действителния размер се определя от SVG-файла координатна система (поради, което имаме, и няма единици). Ако се използва интереса, тогава ние ще трябва да се сближат 1/3 накъсана на изображението, като 33,34%. За да се прибегне до приблизителна стойност е винаги рисковано, тъй като различни стойности браузъри могат да бъдат заоблени, с различна степен на точност. И се придържат към системата промените единиците на координати SVG-файла, ще си спестите главоболието, което придружава всичко това закръгляване.
Решение от пътя клипинг
Въпреки че решението по граничния-образ е много компактен и добре в съответствие с принципите на сухо, тя налага някои ограничения. Например, нашето минало, все още трябва да бъде или изцяло, или поне по ръбовете е изпълнен с плътен цвят. Какво става, ако искаме да се използва различен вид фон, като текстура, фигурата или линеен градиент? Има и друг метод, който не разполага с такива ограничения, въпреки че, разбира се, някои ограничения имат неговото прилагане. Не забравяйте, клип-пътека собственост от тайната "Как да си направим диамант". Стреляйки пътеки CSS имат Отличителна черта: те ви позволяват да се смесват проценти (от които ние задайте размерите на елемента) с абсолютна, осигурявайки невероятна гъвкавост. Например, подрязване път код изключване елемент с формата на правоъгълник с скосени ъгли размер 20px (ако се измерва хоризонтално), както следва:
фон: # 58а;
щипка път: многоъгълник (
20px 0, изчислено (100% - 20px) 0, 100% 20px,
100% изчислено (100% - 20px), изчислено (100% - 20px) 100%
20px 100% 0 изчислено (100% - 20px), 0 20px);
Въпреки своята краткост, този код фрагментира DRY принцип не се спазва, и тя става една от най-големите проблеми, ако не използвате Препроцесорът. В действителност, този код - най-добрата илюстрация WET принципа на всички решения за чист CSS, представени в тази книга, защото, за да промените размера на ъгъл се изисква да правите редакции колкото осем (!). От друга страна, на фона може да се промени само с една превръзка, така че ние имаме най-малко това. Едно от предимствата на този подход - че можем да използваме абсолютно всеки фон или дори намаляване на елементите на подменюто, като например изображения. Фиг. 3.38 показва изображение с помощта стилизирани отрязани краища. Нито едно от предишните методи не е благоприятна за такъв ефект. В допълнение, клип-пътека имот поддържа анимация, и ние можем да анимирате не само промяната в ъгъла на размер, но също така и perehodymezhdu различни цифри.
Всичко, което трябва да се направи - да се използва друг клипинг път. В допълнение към многословието и ограничена подкрепа на браузъра, в ущърб на това решение е, че ако ние не се грижим за достатъчно широк купчина, текстът също ще бъдат отрязани, сякаш рязане елемент на нейните компоненти не се взема предвид. За разлика от метода на наклон позволява текстът просто да излиза извън рамките на обрязване ъгли (тъй като те са само част от фона), както и метода на гранично-изображение работи точно като обикновен кадър - носи текста на нов ред.
Свързани статии