Создание черных плашек для сайта в стиле apple при помощи HTML и CSS

Часто при оформлении товаров в Интернет магазине требуется создание черных плашек. В целом плашки можно создавать любого цвета. В статье рассмотрим создание таких блоков на основе flex контейнеров.

Возьмем банальное описание нового айфона 15 pro, модели 2023 года. Опишем генерацию трех блоков: горизонтального с расширением на 100% и двух с размерами 62% и 32% соответственно. Создадим class flex контейнера, прописав для него следующие параметры:

.plashki_black {
    margin-left: 0px; 
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

Display flex объявляет, что внутри данного контейнера все элементы будут расположены по заданной html технологии. Далее при помощи flex-direction и flex-wrap мы разрешаем этим контейнерам располагаться один за другим с возможным переносом на следующую строку.  Далее идет html код для данного контейнера.

<div class="plashki_black">
</div>

Далее добавляем первую плашку, а именно контейнер для нее. В него помещаем два изображения с логотипом айфона и самим айфоном, а также две строки с текстом. Изображение и текст выравниваем по центру при помощи tex-align.

<div class="black_0">
<div style="text-align:center; margin-bottom:15px;"><img src="titanium.png" /></div>
<div style="padding:5px;font-size:32px;text-align:center; color:#baaba0;">iPhone 15 Pro Max</div>
<div style=" padding:5px; font-size:28px;text-align:center; padding-bottom:15px; color:#baaba0;">Выкован из титана</div>
<div style="text-align:center; margin-bottom:15px;"><img src="ihpne15pro.png" /></div>
</div>

Для класса black_0 прописываем следующие параметры css:

.black_0{
    margin-bottom: 20px;
    flex-basis: 96%;
    background-color: black;
    border-radius: 25px;
    color:#ffffff;
    padding:45px;
}

После генерации плашки браузером видим следующее:

Параметр flex-basis указывает размер плашки (контейнера) в процентах. background-color позволяет залить весь фон черным, ну а border-radius позволяет скруглить все углы по радиусу в 25 пикселей. Подгружаемые изображения должны быть с прозрачным или как минимум черным фоном. 

Создадим еще две черных плашки в стиле apple.

<div class="black_1">
<div style="padding:25px; font-size:18px; text-align:center; margin-bottom:15px;">A17 Pro. Чип нового поколения. Невероятная производительность</div>
<div style="text-align:center; margin-bottom:15px;"><img src="chip.png" /></div>
</div>
<div class="black_2">
<div style="padding:25px;font-size:24px; text-align:center; margin-bottom:15px;">Титан.<br>Такой прочный.<br>Такой легкий.<br>Такой Pro</div>
<img src="design.png" width="100%" /> </div>

Для класса black_1 прописываем параметры:

.black_1{
    margin-bottom: 20px;
    margin-right:20px;
    flex-basis: 62%;
    background-color: black;
    border-radius: 25px;
    color:#ffffff;
}

Для класса black_2 прописываем параметры:

.black_2{
    margin-bottom: 20px;
    flex-basis: 32%;
    background-color: black;
    border-radius: 25px;
    color:#ffffff;
}

В целом все параметры схожи, но различен flex-basis. С учетом всех отступов он равен 62% и 32% соответственно. 

Таким образом мы получим следующим html код:

<div class="plashki_black"> <div class="black_0">
<div style="text-align:center; margin-bottom:15px;"><img src="titanium.png" /></div>
<div style="padding:5px;font-size:32px;text-align:center; color:#baaba0;">iPhone 15 Pro Max</div>
<div style=" padding:5px; font-size:28px;text-align:center; padding-bottom:15px; color:#baaba0;">Выкован из титана</div>
<div style="text-align:center; margin-bottom:15px;"><img src="ihpne15pro.png" /></div>
</div>
<div class="black_1">
<div style="padding:25px; font-size:18px; text-align:center; margin-bottom:15px;">A17 Pro. Чип нового поколения. Невероятная производительность</div>
<div style="text-align:center; margin-bottom:15px;"><img src="chip.png" /></div>
</div>
<div class="black_2">
<div style="padding:25px;font-size:24px; text-align:center; margin-bottom:15px;">Титан.<br>Такой прочный.<br>Такой легкий.<br>Такой Pro</div>
<img src="design.png" width="100%" />
</div> </div>

А на в браузере черные плашки в стиле apple будут выглядеть следующим образом: