Створення стрічки CSS
Ми говоримо про це Стрічки CSS у веб-дизайні, коли смужка коробки (називається стрічкою) обтікає інше вікно. Це досить використовувана техніка проектування прикрасити текст, особливо заголовки. На сайті W3C ви можете перевірити, як правильно використовуються стрічки CSS зміст структури тонким чином.
Отже, на цій посаді ми побачимо як створити просту стрічку CSS які можна використовувати розширити заголовки на своєму веб-сайті. Завдяки Перетворення CSS, ми можемо створити цю конструкцію з набагато простішою базою кодів, ніж раніше.
Ви можете заглянути в остаточне демо-версію нижче.
HTML і основні стилі
По-перше, ми створюємо a ми позначаємо тегом .картки селектор, що представляє a прямокутник коробка стрічки буде обгортання навколо.
Ми також встановлюємо основні розміри і Колір фону з CSS.
.карта фоновий колір: бежевий; висота: 300px; запас: 40px; ширина: 500px;
Середина частини стрічки
Ми будемо використовувати a Змінна CSS (дозволяє зберігати та повторно використовувати значення CSS) --стор до зберігати значення заповнення. Значення прокладка властивість використовує var (- p) синтаксис для лівої і правої прокладок стрічки так, щоб він міг бути легко розширюється. The --стор змінна пізніше буде повторно використовувалися кілька разів; що робить наш код гнучким.
.стрічка --p: 15px; фоновий колір: rgb (170,170,170); висота: 60px; padding: 0 var (- p); ширина: 100%;
На скріншоті нижче ви можете побачити, як має виглядати ваша демонстрація:
Центрування стрічки
Ми також повинні центр стрічки. Ми натиснути на ліворуч від розміру відступу (позначено знаком --стор змінної) за допомогою відносного позиціонування.
.стрічка --p: 15px; фоновий колір: rgb (170,170,170); висота: 60px; padding: 0 var (- p); позиція: відносна; right: var (- p); ширина: 100%;
Оновлене демо:
Сторони стрічки
Тепер ми створюємо ліву та праву сторони стрічки що повинно, здавалося б, згинатися навколо краю картки. Для цього ми використовуємо обидва : раніше і : після псевдоелементи .стрічки.
Обидва псевдоелементи успадковують колір фону .стрічки, і ми використовуємо фільтр: яскравість (.5) правило, щоб трохи затемнити їх колір. Вони також є абсолютно позиціонується в межах свого (відносно розташованого) батька.
Їх ширина повинна бути те ж саме, що і розмір заповнення, і ми їх розміщуємо до лівого та правого кінців стрічки за допомогою ліворуч: 0 і праворуч: 0 правила стилю.
.стрічка: перед, .ribbon: після background-color: inherit; content: "; display: block; filter: яскравість (.5); висота: 100%; position: absolute; width: var (- p); .ribbon: before left: 0; .ribbon: after праворуч: 0;
Тепер стрічка зі сторонами, які ми тільки що додали, виглядає так:
Перекосити сторони
Зробити сторони стрічки виглядають зігнуті, ми потребуємо перекосу сторін на 45 °. The transform: skewy () Правило CSS вертикальні елементи косу.
.стрічка: перед left: 0; transform: skewy (45deg); .ribbon: після права: 0; transform: skewy (-45deg);
Як ви можете бачити краї сторін не вирівнювати після перетворення, тому нам потрібно витягніть їх вниз.
Вирівняйте сторони
До визначити правильну довжину за допомогою яких потрібно рухати сторони вниз, ми переходимо до тригонометрії. Що нам потрібно знайти, це x, як y - ширина сторін (дорівнює розміру набивання .стрічки), і кут θ 45 ° (кут нахилу).
Отриманий результат x потім потрібно зменшити вдвічі, як є ліва та права сторона.
Якщо ви використовуєте будь-який препроцесор CSS, перевірте, чи має він загар функцію, інакше зверніться до дотичної діаграми або до калькулятора з'ясувати значення дотичного кута. Нам пощастило tan 45 ° є 1, що означає, що значення x дорівнює y в нашому випадку.
.стрічка: перед, .ribbon: після background-color: inherit; content: "; display: block; filter: яскравість (.5); висота: 100%; position: absolute; top: calc (var (- p) / 2); width: var (- p);
З x довелося зменшити вдвічі, ми використовуємо calc () Функція CSS для виконання поділу --стор змінної.
Нарешті нам потрібно вирівнюйте сторони вздовж осі z також, давайте додамо z-індекс: -1 правило до сторін для того, щоб помістіть їх за серединну частину стрічки.
.стрічка: перед, .ribbon: після background-color: inherit; content: "; display: block; filter: яскравість (.5); висота: 100%; position: absolute; top: calc (var (- p) / 2); width: var (- p); z- індекс: -1;
Тепер, коли ми вирівняли сторони, наша стрічка CSS зроблена.
Нижче ви можете перевірити демонстрацію в реальному часі, будь ласка, зауважте, що він також використовує деякі додаткові стилі.
