Створення візуальних елементів без картинок - це не тільки гарна ідея, але і швидко стає необхідністю. З ростом популярності екранів «ретина» і їм подібним, растрові зображення виходять з використання в інтерфейсі, тому що вони жахливо виглядають на екранах з високою роздільною здатністю. У деяких ситуаціях без зображень важко обійтися і SVG (масштабована векторна графіка) швидко стає основним форматах в таких випадках. Однак, там, де ми можемо уникнути використання картинок як таких, ми не тільки отримуємо красивий, чітко окреслений елемент, але і уникаємо зайвого запиту на сервер. Так що давайте ж з ними розберемося.
Застереження: якщо ви новачок в CSS, рекомендую ознайомитися з наступними темами, до того як ви повторите те, що описано нижче:
CSS псевдо-елементи (зокрема: before та: after)
CSS3 елементи, такі як box-shadow і box-sizing
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Абсолютна і відносне позиціонування Дивов
Ось так виглядає розмітка.
Все зрозуміло? Ну що ж, перейдемо до CSS.
По-перше, ми використовуємо універсальний селектор, щоб скинути стилі, а також додати box-sizing: border-box до нашої сторінці. Це дозволить задавати зовнішні і внутрішні відступи (margin, padding) і ширину і не вести розрахунки зі зміни розмірів елементів.
Потім ми додаємо візуальні стилі, до елементу, який містить стрічку, і самій стрічці. Знову, нічого складного.
Важливі речі, на які варто звернути увагу, це ті, що відносяться до псевдоелементи: before та: after. Це ті техніки, які допомагають нам уникнути використання зображень в нашій стрічці. І на цьому все. Стрічковий банер на чистому CSS і ніяких картинок.
Редакція: Команда webformyself.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
