Лента для оформления сайта с использованием только CSS
Оформление лентами различных сайтов является популярным трендом при оформлении веб сайтов. Такой элемент дизайна можно использовать для меню, фона, заголовков и других частей. Для простых лент вполне можно использовать CSS, чтобы уменьшить количество загружаемых в бразуер пользователя изображений.
Для построения такой ленты используется трюк формирования треугольников - на концах ленты и тени на сгибах.
Полный код со стилями CSS и необходимой разметкой HTML:
<!DOCTYPE html> <html> <head> <title>Ленточка на CSS | Материалы сайта RUSELLER.COM</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> #main { border: 1px solid #fff; padding: 100px; } #menu { background: #c66969; width: 500px; height: 50px; color: #fff; font-size: 18px; text-align: center; position: relative; top: -20px; } #menu span { position: relative; top: 13px; } .cont { background: #b14444; width: 100px; height: 50px; } .edge-right { border-color: #b14444 white #b14444 #b14444; border-style:solid; border-width:25px; width:0; height:0; position: relative; } .edge-left { border-color: #b14444 #b14444 #b14444 white; border-style:solid; border-width:25px; width:0; height:0; position: relative; } .left { float: left; } .right { float: right; } .clear { clear: both; } .edge-right-small { position: absolute; top: 138px; left: 734px; border-color: #fff #fff #b14444 #873434; border-style:solid; border-width:0 0 21px 25px ; width:0; height:0; } .edge-left-small { position: absolute; top: 138px; left: 258px; border-color: #b14444 #873434 #b14444 red; border-style:solid; border-width:0 25px 21px 0; width:0; height:0; } </style> </head> <body> <div id="main"> <div class="edge-left left"></div> <div class="cont left"></div> <div id="menu" class="left"><span>Материалы сайта RUSELLER.COM<span></div> <div class="cont left"></div> <div class="edge-right left"></div> <div class="clear"></div> </div> <div class="edge-right-small"></div> <div class="edge-left-small"></div> </body> </html>
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/GfiTg70AP4w/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
Жизнь подобна универмагу: в ней находишь всё, кроме того, что ищешь Кроткий Эмиль - (1892—1963) - русский поэт–сатирик, юморист и афорист |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.