Лента css: Ленточки и флажки для блоков на HTML/CSS — Вебджем.рф

Содержание

Как сделать ленты на CSS3 без картинок

Оригинал: sitepoint.com/pure-css3-ribbons

Перевод: Влад Мержевич

В моей прошлой статье Как сделать словесный пузырь на CSS3 без картинок мы видели, как псевдоэлементы :before и :after используются для создания различных эффектов. В этой статье мы воспользуемся подобными техниками для создания разнообразных лент.

Эффект ленты в моде. Большинство дизайнеров используют позиционированные изображения, но мы сделаем это с помощью свойств border и единственного тега <h3>.

<h3>My Heading</h3>

Давайте возьмём этот небольшой стиль и перекроем через него элемент с контентом.

/* элемент с контентом */
#page {
	width: 500px;
	padding: 50px;
	margin: 0 auto;
	background-color: #fff;
	border: 1px solid #333;
}
h3 {
	position: relative;
	width: 50%;
	font-size: 1.5em;
	font-weight: bold;
	padding: 6px 20px 6px 70px;
	margin: 30px 10px 10px -71px;
	color: #555;
	background-color: #999;
	text-shadow: 0px 1px 2px #bbb;
	-webkit-box-shadow: 0px 2px 4px #888;
	-moz-box-shadow: 0px 2px 4px #888;
	box-shadow: 0px 2px 4px #888;
}

В нашем примере у #page заданы поля по 50px и рамка толщиной в 1px. У заголовка имеется левый отступ значением -71px, так что он перекрывает край на 20px. Заметьте, мы также используем position: relative чтобы при необходимости можно было позиционировать другие элементы ленты.

Теперь нам нужно создать сложенную часть ленты, которая проходит «за страницей». Как было видно в предыдущей статье, мы можем использовать свойство border для создания любого типа треугольника с помощью псевдоэлемента :after нулевой ширины и высоты.

h3:after {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 0px;
	top: 100%;
	border-width: 5px 10px;
	border-style: solid;
	border-color: #666 #666 transparent transparent;
}

Выглядит здорово и это может быть всё, что вам нужно. Но клиенты любят страницы насыщенные дизайном, так что немного доработаем ленту. Для начала мы можем добавить форму в виде флага к правому краю путём наложения белого треугольника через псевдоэлемент :before.

Замечательно, но как насчёт обратной складки у ленты по левому краю? Без проблем.

h3:before {
	content: ' ';
	position: absolute;
	width: 30px;
	height: 0;
	left: -30px;
	top: 12px;
	border-width: 20px 10px;
	border-style: solid;
	border-color: #999 #999 #999 transparent;
}

Цвет границы у псевдоэлемента должен совпадать с цветом фона h3, поскольку он на деле выводится над заголовком. Изменение z-index не работает c псевдоэлементами при позиционированном родителе.

Пожалуйста, ознакомьтесь с демонстрационной страницей где показаны все три стиля ленты. Как и ожидалось, это работает в IE8, IE9, Firefox, Chrome, Safari и Opera. IE6 и IE7 показывают изящную деградацию и отображают основной заголовок. Весь код CSS содержится внутри HTML.

CSS3веб-дизайн

CSS по теме

Псевдоэлемент :after
Псевдоэлемент :before

Статьи по теме

Изящная деградация
Как сделать загнутые уголки на CSS3 без картинок
Как сделать ленты на CSS3 без картинок

Лента активности — Bootstrap RUS

6 марта 2023

DarkUnicorns добавляет вопрос [#40 Как изменить работу Collapse]

2 месяца назад
Вопросы

4 марта 2023

Howard добавляет вопрос [#39 Как реализовать корзину?]

2 месяца назад
Вопросы

1 марта 2023

imazin оценил комментарий на [Как переопределить CSS по умолчанию в Bootstrap]

Всем привет. А почему нет новых тем? неужели bootstrap на самом деле неактуален? Ради интереса, зашел на npmjs.com — там за последнюю неделю, 5 589 822 скачиваний, просто вдумайтесь — почти 6 млн. в НЕДЕЛЮ!!! и это только с одного сервиса, а еще ведь устанавливают локально, просто файлами. да и CDN еще.Вобщем что хочу сказать, статье более 2х лет. Интересно мнение как самого автора, так и читателей, почему использовать bootstrap считается неактуальным? Какие причины? Как по мне, это крутая технология. которая актуально по всему миру, разобраться в которой требует много времени, но по итогу думаю, те знания. которые получишь — точно пригодяться. Некоторые используют только сетку, но думаю просто не хотят морочиться и углубиться в технологию с головой. Сколько у вас уходит на адаптацию под мобилки и прочих девайсов, каждого сайта?.. А сколько потраченного времени в сумме на адаптацию в месяц или год. А тут все из коробки. Кто нибудь может объяснить чем адаптив от Bootstrap хуже «самописного»? Конечно.

при верстке «боевого проекта» на Bootstrap сложно добиться идеального совпадения, но опять же думаю, это просто от неполного знания технологий. все что видел в (ru)нете, это поверхностные описания которые мягко говоря ни о чем. Как просто установить, как стартануть, как сделать адаптивное меню, как переопределить цвет. На этом все… более никто ничего не пишет. В общем, пишут то, что сами разобрали за пару часов, самые азы. Если кто то знает «годный современный ресурс» киньте ссылку пожалуйста, мне очень интересно. В заключеннии скажу. кому так же как и мне интересна данная тема в 2023 году, пишите в лс.У меня много вопросов, по Bootstrap, на которые пока не знаю ответов, и пока это мое хобби, которое хочу со временем успешно использовать в верстке.

2 месяца назад
Статьи

San4 добавил комментарий на [Как переопределить CSS по умолчанию в Bootstrap]

2 месяца назад
Статьи

27 февраля 2023

San4 оценил статью [Как переопределить CSS по умолчанию в Bootstrap]

2 месяца назад
Статьи

18 октября 2022

3des добавил(а) комментарий на [#37 Как расположить объекты по правому краю?]

Не совсем понятно, что значит «рядом с кнопкой»

выше или ниже или с лева или с права от кнопки?

но вероятно где то так:

<div>
    <div>
        <div>
        </div>
        <div>
            <h4>+7(863)-777-00-00</h4>
            <p>Rostov-n-don</p>
            <button type="button">Запись на прием</button>
        </div>
    </div>
</div>

или так:

<div>
    <div>
        <div>
        </div>
        <div>
            <h4>+7(863)-777-00-00</h4>
            <p>Rostov-n-don</p>
        </div>
        <div>
            <button type="button">Запись на прием</button>
        </div>
    </div>
</div>

6 месяцев назад
Вопросы

12 сентября 2022

shpunt добавил комментарий на [#32 как сделать Bootstrap сетку]

Набрал в поисковике «aside в bootstrap». Получил много ссылок, открыл первую- «Верстка адаптивного макета на Bootstrap — ИТ Шеф» (https://itchief.ru/bootstrap/adaptive-layout?ysclid=l6t6hlo38r595851586) там подробно описан ваш вопрос

7 месяцев назад
Вопросы

14 августа 2022

imazin добавил комментарий на [Как разместить div горизонтально по центру в Boots…]

Спасибо! Исправили

8 месяцев назад

Статьи

imazin оценил комментарий на [Как разместить div горизонтально по центру в Boots…]

Попробовал ваш код ни фига не получается. Потом зашел в «Смотреть в Codepen» и там
увидел что надо добавить css стили. Почему об этом в статье ничего не сказано?

8 месяцев назад
Статьи

shpunt добавил комментарий на [Как разместить div горизонтально по центру в Boots…]

8 месяцев назад
Статьи

14 апреля 2022

SpecSaleIT добавил(а) комментарий на [#34 css]


<div>
...
</div>


.yourclass{
display: flex;
justify-content: center;
align-items: center;
}

я думаю так, попробуй, а вообще сложно так сказать, если не видеть кода

1 год назад
Вопросы

12 апреля 2022

SpecSaleIT добавил(а) комментарий на [#37 Как расположить объекты по правому краю?]

Попробуй так, самым простым методом:
Добавь к классу col-lg-10 еще один, например, heruggu:


<div> - так должно получиться. 
<style type="text/css">
.heruggu{float:right;text-align:right;}
.heruggu:after{content:'';display:block;clear:both;}
</style>

надеюсь поможет)

1 год назад
Вопросы

20 января 2022

adams добавляет вопрос [#37 Как расположить объекты по правому краю?]

1 год назад
Вопросы

7 октября 2021

Владимир добавляет вопрос [#36 Два календаря на странице на одном не работает…]

1 год назад
Вопросы

22 мая 2021

Andrukva добавляет вопрос [#35 Добавление фоновой картинки и адаптация ее под. ..]

1 год назад
Вопросы

28 CSS-лент

Коллекция отобранных бесплатных примеров кода HTML и CSS-ленты (уголок, баннер и т. д.) из CodePen, GitHub и других ресурсов. Обновление коллекции февраля 2021 года. Шесть новых предметов.