• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создать адаптивные баннер с помощью CSS (Адаптивный ленточный баннер на HTML5 и CSS3)
Создать адаптивные баннер с помощью CSS
Kosten
Дата: Суббота, 2018-11-03, 21:47 | Сообщение 1
Администраторы
Сообщений:18467
Награды: 55


Здесь рассмотрим как можно создать красивый баннер, плюс чтоб он был адаптивный и автоматически переходит в ленточный вид. Если изначально мы видим вид в стилистике похоже на ценник, где можно прописать несколько слов и поставить под ссылку. Также изменить шрифт и безусловно размер. Но и сам оттенок цвета, где по умолчанию идет в светло желтой палитре.

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

1. Вариация с широкого объема:



2. Вариаций на мобильных версиях:



HTML

Код
<main>
  <div class="dogoingups-metodang">
    <div class="takele-gudouta">
      <div class="sponsivelem left"> </div>
      <h1>САЙТ ZORNET</h1>
      <div class="sponsivelem right"> </div>
    </div>
  </div>
</main>


CSS

Код
main {
  margin: 0 auto;
  max-width: 1024px;
}

.dogoingups-metodang {
  margin: 2rem auto 1rem auto;
  width: 75%;
  line-height: 1;
  text-align: center;
  font-size: 0.6rem;
  -webkit-transition: width 200ms ease, font-size 200ms ease;
  transition: width 200ms ease, font-size 200ms ease;
}

.takele-gudouta {
  position: relative;
}

.takele-gudouta h1 {
  position: relative;
  z-index: 2;
  margin: 0;
  background-color: #FFD700;
  padding: 0.5rem;
}

.takele-gudouta h1:before,
.takele-gudouta h1:after {
  position: absolute;
  top: -1rem;
  border: 0.5rem solid #997100;
  content: "";
}

.takele-gudouta h1:before {
  left: 0;
  border-top-color: transparent;
  border-left-color: transparent;
}

.takele-gudouta h1:after {
  right: 0;
  border-top-color: transparent;
  border-right-color: transparent;
}

.sponsivelem {
  position: absolute;
  bottom: 1rem;
  z-index: 1;
  height: 100%;
  width: 1rem;
  background-color: #CCA400;
}

.sponsivelem.left {
  left: 0;
}

.sponsivelem.right {
  right: 0;
}

.sponsivelem.left:before,
.sponsivelem.left:after,
.sponsivelem.right:before,
.sponsivelem.right:after {
  position: absolute;
  border: 1rem solid #CCA400;
  content: "";
}

.sponsivelem.left:before,
.sponsivelem.right:before {
  top: 0;
}

.sponsivelem.left:after,
.sponsivelem.right:after {
  bottom: 0;
}

.sponsivelem.left:before,
.sponsivelem.left:after {
  left: -2rem;
}

.sponsivelem.right:before,
.sponsivelem.right:after {
  right: -2rem;
}

.sponsivelem.left:before {
  border-bottom-color: transparent;
  border-left-color: transparent;
}

.sponsivelem.left:after {
  border-top-color: transparent;
  border-left-color: transparent;
}

.sponsivelem.right:before {
  border-bottom-color: transparent;
  border-right-color: transparent;
}

.sponsivelem.right:after {
  border-top-color: transparent;
  border-right-color: transparent;
}

@media only screen and ( min-width: 581px) {
  .dogoingups-metodang {
    width: 65%;
    font-size: 1rem;
    -webkit-transition: width 200ms ease, font-size 200ms ease;
    transition: width 200ms ease, font-size 200ms ease;
  }
  .sponsivelem {
    width: 2rem;
  }
  .sponsivelem.left {
    left: -1rem;
  }
  .sponsivelem.right {
    right: -1rem;
  }
}

@media only screen and ( min-width: 891px) {
  .dogoingups-metodang {
    width: 50%;
    -webkit-transition: width 200ms ease;
    transition: width 200ms ease;
  }
}

@media only screen and ( min-width: 1121px) {
  .dogoingups-metodang {
    position: absolute;
    top: 3rem;
    right: 3rem;
    width: 150px;
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -o-transform: rotate(10deg);
  }
  .takele-gudouta {
    background-color: #FFD700;
    width: 150px;
    height: 150px;
  }
  .takele-gudouta h1 {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .takele-gudouta:before,
  .takele-gudouta:after {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
    background-color: #FFD700;
    content: "";
  }
  .takele-gudouta:before {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
  }
  .takele-gudouta:after {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
  }
  .sponsivelem,
  .takele-gudouta h1:before,
  .takele-gudouta h1:after {
    display: none;
  }
}


Демонстрация
Прикрепления: 9684312.png(10.9 Kb) · 3987260.png(5.0 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создать адаптивные баннер с помощью CSS (Адаптивный ленточный баннер на HTML5 и CSS3)
  • Страница 1 из 1
  • 1
Поиск: