Материал

Создание разноцветных градиентных плашек на сайте при помощи flex css

Создание разноцветных градиентных плашек на сайте при помощи display grid в css

Ранее для создания равномерных блоков, изменяющих ширину в зависимости от разрешения экрана, требовалось написание десяток сток кода css. Затем требовалось время на корректировку и подгонку таких элементов. Но что, если можно обойтись несколькими строчками css и не только сэкономить время, но и использовать современные спецификации в css, а именно display grid.

Итак, у нас имеется контейнер section. Для него указываем class="plashki" со спецификацией flex. После этого абсолютной любой элемент в контейнере будет подчиняться правилам grid разметки в html.

Содержание класса plashki следующее:

.plashki {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    grid-gap: 20px;
}

Итак, мы указываем сеточную разметку в css - grid. Далее прописываем автозаполнение при минимальной ширине элемента в 220 пикселей. Это указываем в grid-template-columns. А в grid-gap указываем отступ со всех сторон в 20 пикселей. HTML код этого контейнера выглядит следующим образом: 

<section class="plashki">
   <div>
      <div class="pl_abitur_info" style="background: url('fon_rr.png'), linear-gradient(180deg, #C84E89 0%, #F15F79 100%);">
          <div class="abit_pl_content">
              <div class="kod">19.02.10</div>
              <div class="kval">Обр. программа</div>
              <div class="napr">Технология продукции общественного питания</div>
              <div class="lin"></div>
              <div class="kval">Квалификация</div>
              <div class="profe">Техник-технолог</div>
              <div class="but_ab"><a href="" target="_blank" class="abit_but_inf">Подробнее &gt;</a></div>
          </div>
      </div>
 </div>

 <div>
     <div class="pl_abitur_info" style="background: url('fon_rr.png'), linear-gradient(0deg, #9400D3 0%, #4B0082 100%);">
          <div class="abit_pl_content">
                <div class="kod">38.02.01</div>
                <div class="kval">Обр. программа</div>
                <div class="napr">Экономика и бухгалтерский учет<br>(по отраслям)</div>
                <div class="lin"></div>
                <div class="kval">Квалификация</div>
                <div class="profe">Бухгалтер</div>
                <div class="but_ab"><a href="" class="abit_but_inf" target="_blank">Подробнее &gt;</a></div>
           </div>
     </div>
 </div>
....
 
</section>

Для задания уникального цвета для каждой плашки используем спецификацию background, а именно:

background: url('fon_rr.png'), linear-gradient(180deg, #C84E89 0%, #F15F79 100%);

Причем цвет очень легко поменять, используя панель "элементы" в браузере Google Chrome или другом.

Для формирования разметки внутри grid плашек я использую спецификацию flex. Также в классе pl_abitur_info я указываю высоту элемента равную 100%. Это сделано для того, чтобы каждая плашка была одинакового размера не только по ширине, но и по высоте.

.pl_abitur_info {
    border-radius: 2px;
    height: 100%;
    display: flex;
}

Фоновое изображение fon_rr.png позволяет придать дополнительный стиль плашкам grid. Результат работы html и css кода представлен на изображении ниже.


Поделиться в соц. сетях: