Как да създадете CSS лента
Ние говорим за това CSS ленти в уеб дизайн, когато a лента от кутия (наречена лента) увива друга кутия. Това е доста използвана техника за проектиране декорирайте текста, особено заглавията. На уеб сайта на W3C можете да проверите как правилно използваните CSS ленти могат да помогнат съдържание на структурата по изтънчен начин.
Така че в този пост ще видим как да създадете проста CSS лента които можете да използвате засилване на заглавията на уебсайта си. Благодарение на CSS трансформации, можем да създадем този дизайн с много по-опростена кодова база, отколкото преди.
Можете да погледнете финалната демонстрация по-долу.
HTML и основни стилове
Първо, ние създаваме a маркираме с отметката .карта селектор, който представлява a правоъгълна кутия лентата ще обвивка около.
Ние също така поставяме основни размери и Цвят на фона с CSS.
.карта фонов цвят: бежов; височина: 300px; марж: 40px; ширина: 500px;
Средната част на лентата
Ще използваме a CSS променлива (позволява ни да съхраняваме и използваме CSS стойност) --р да се съхранява стойността на уплътнението. Стойността на подложка собственост използва Var (- п) синтаксис за лявата и дясната подложки на лентата, така че да може да бъде лесно се разширява. Най- --р променлива по-късно ще бъде многократно; което прави нашия код гъвкав.
.лента --p: 15px; фонов цвят: rgb (170,170,170); височина: 60px; padding: 0 var (- p); ширина: 100%;
На екрана по-долу можете да видите как трябва да изглежда демото ви в този момент:
Центриране на лентата
Ние също трябва центрирайте лентата. ние натиснете го наляво от размера на уплътнението (маркирано от --р променлива), използвайки относително позициониране.
.лента --p: 15px; фонов цвят: rgb (170,170,170); височина: 60px; padding: 0 var (- p); позиция: относителна; вдясно: var (- p); ширина: 100%;
Актуализираното демо:
Страните на лентата
Сега създаваме лявата и дясната страна на лентата което на пръв поглед се огъва около ръба на картата. За да направим това, ние използваме и двете :преди и :след псевдоелементи на .панделка.
И двата псевдоелемента наследяват цвета на фона на .панделка, и ние използваме филтър: яркост (.5) правилото да затъмни малко цвета си. Те също са абсолютно позициониран в техните (относително позиционирани) родители.
Тяхната ширина трябва да бъде същия като размера на подложката, и ние ги поставяме от лявата и дясната страна на лентата използвайки наляво: 0 и вдясно: 0 правила за стила.
.лента: преди, .ribbon: след background-color: inherit; съдържание: "; дисплей: блок; филтър: яркост (.5); височина: 100%; позиция: абсолютна; ширина: var (- p); .ribbon: преди left: 0; .ribbon: after дясно: 0;
Сега лентата със страниците, които току-що добавихме, изглежда по-долу:
Наклон на страните
За да направите страните на лентата изглеждат наведени, ние трябва да изкривяване на страните с 45 °. Най- transform: skewy () CSS правило вертикални елементи.
.лента: преди left: 0; трансформиране: skewy (45deg); .ribbon: след right: 0; трансформиране: skewy (-45deg);
Както можете да видите ръбовете на страните не подравнявайте след трансформацията, така че трябва дръпнете ги надолу.
Подравнете страните
Да се определете правилната дължина чрез които трябва да преместим страните надолу, ние се обръщаме към тригонометрията. Това, което трябва да намерим, е х, като ш е ширината на страните (равна на размера на подложката на. \ t .панделка) и ъгъла θ е 45 ° (ъгълът на наклона).
Резултатът х тогава трябва да бъде намален наполовина, тъй като има и лява и дясна страна.
Ако използвате CSS препроцесор, проверете дали има тен функция, в противен случай се отнася до тангенциална диаграма или калкулатор разберете допирателната стойност на ъгъла. Ние сме късметлии тен 45 ° е 1, което означава, че стойността на х е равно на ш в нашия случай.
.лента: преди, .ribbon: след background-color: inherit; съдържание: "; дисплей: блок; филтър: яркост (.5); височина: 100%; позиция: абсолютна; отгоре: calc (var (- p) / 2); ширина: var (- p);
От х трябваше да бъде намален наполовина, използваме изчислено () CSS функция за извършване на разделяне на --р променлив.
Най-накрая трябва подравнете страните по оста z също, така че нека да добавим z-индекс: -1 да управляват страните, за да поставете ги зад средата на лентата.
.лента: преди, .ribbon: след background-color: inherit; съдържание: "; дисплей: блок; филтър: яркост (.5); височина: 100%; позиция: абсолютна; отгоре: calc (var (- p) / 2); ширина: var (- p); z- индекс: -1;
Сега, когато подравнихме страните, нашата CSS лента е завършена.
По-долу можете да проверите демонстрацията на живо отново, имайте предвид, че използва и някои допълнителни стилове.
