ZorNet.Ru — сайт для вебмастера » HTML и CSS » Flex-контейнер на чистом HTML + CSS

Flex-контейнер на чистом HTML + CSS

В статье узнаете, как можно создать гибкую карту flexbox, используя HTML и CSS, где получится адаптивный дизайн для карты с помощью CSS flex. Вероятно вы слышали или больше того знаете про решение Flexbox раньше. Где сути, flex считается модулем заданного макета, который представлен с помощью CSS3. Или скажем другими словами, гибкий макет называется flexbox, а вот сама область документа, что изначально размечена с использованием flexbox.

Вот как раз в этом материале создадим адаптивную карту с помощью CSS flex, где узнаете, как создать CSS flexbox с адаптивным дизайном. По материалу уже созданный в адаптивном дизайне CSS Flexbox, плюс присутствует CSS-карта Pure. Где идет в одном экземпляре, но здесь вы уже самостоятельно можете создать количество.

По сути, это код идет для создания карточек на основе гибких свойств CSS и пример того, как мы можем создавать адаптивные карточки без начальной загрузки. И он также имеет анимацию подчеркивания текста при наведении на ссылку. Таким образом здесь расположен адаптивный дизайн с анимацией при наведении курсора. Все сделано понятно для пользователя, где начинающий веб-разработчик может понять это быстро и легко создать отзывчивый дизайн.

Адаптивный код CSS Flexbox

Прежде чем распространять этот код, то давайте подробно поговорим об этом материале. Поскольку вы знаете, что это карточная программа на основе CSS flex, то здесь она имеет адаптивный дизайн и эффект наведения ссылок.

Короче говоря это CSS-карта Flexbox с эффектом наведения ссылок. Где используются свойство CSS display: flex; для создания этого. Также используется @media свойство для адаптивного дизайна, где полностью поймете всю, когда установите на интернет площадку.

Проверено на работоспособность и на гибкость под мобильные экраны.

Приступаем к установке:

HTML

Для создания вам нужно создать всего 2 файла, один для HTML и один для CSS. Но файлы не будет создавать, а пропишем все по умолчанию, как идет, а точнее все выставим в каркас элемента портала.

Код

<div class="kasivaned">
  <div class="progevam-desavisual">
  <div class="gasivaned"></div>
  <div class="spons-progevam-desavisual">
  <span></span>
  <h1>ZorNet.Ru — сайт для вебмастера</h1>
  <p>Здесь идет краткое описание, которое размещает по вверх карты. Также прописываем ключевые фразы, которые идут в тематическом направление.
  </p>
  <a href="http://zornet.ru" target="_blank">ZorNet.Ru</a>
  </div>
  </div>
</div>

CSS

Код

* {
  transition: .33s ease all;
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
}
html {
  font-family: 'Questrial', sans-serif;
  box-sizing: border-box;
}
span {
  display: inline-block;
  width: 50px;
  height: 5px;
  background-color: #FF3434;
  margin-bottom: 30px;
}
div.kasivaned {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #80EDFF;
}
div.progevam-desavisual {
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 25px;
  box-shadow: 0 8px 16px rgba(25, 24, 24, 0.45);
}

.gasivaned {
  width: 100%;
}
h1 {
  font-weight: 600;
  font-size: 36px;
  margin: 0 0 15px;
}
p {
  font-weight: 300;
  line-height: 24px;
  margin: 0 0 30px 0;
}
a {
  text-decoration: none;
  text-transform: uppercase;
  color: #e40fb5;
  font-weight: bold;
  font-size: 15px;
  position: relative;
  display: inline-block;
  z-index: 1;
  padding: 4px;
  left: -5px;
}
a:hover {
  color: #FF3434;
}
a::before {
  content: '';
  z-index: -1;
  position: absolute;
  top: calc(50%);
  left: 0;
  width: 100%;
  height: 40%;
  pointer-events: none;
  background: #80EDFF;
  transform: scale3d(0, 1, 1);
  transform-origin: 0% 50%;
  transition: transform 0.33s;
}
a:hover::before {
  transform: scale3d(1, 1, 1);
  transform-origin: 0% 50%;
}
div.gasivaned {
  height: 312px;
  width: 100%;
  background: url("https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg");
  background-position: center;
  background-size: cover;
}
div.spons-progevam-desavisual {
  margin: 58px 43px 53px;
}
@media screen and (min-width: 768px) {
  div.progevam-desavisual {
  flex-direction: row;
  width: 100%;
  }
div.gasivaned {
  height: 418px;
  min-width: 350px;
  }
  div.spons-progevam-desavisual {
  margin: 0 58px;
  max-width: 655x;
  }
}
@media screen and (min-width: 1024px) {
  div.progevam-desavisual {
  max-width: 1200px;
  }
}

На этом все, как заметили, что нам не понадобился JavaScript и библиотека jQuery. Теперь вы успешно создали адаптивные или аналогично, как отзывчивые карты CSS Flexbox, на чистом HTML и CSS.

Если у вас есть какие-либо сомнения или вопрос, прокомментируйте ниже, также если установили на сайт, то можете показать изображение, как все получилось в реальности на сайте.

Демонстрация

04 Июля 2019 Загрузок: 1 Просмотров: 1430 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0