Здесь рассмотрим как можно создать красивый баннер, плюс чтоб он был адаптивный и автоматически переходит в ленточный вид. Если изначально мы видим вид в стилистике похоже на ценник, где можно прописать несколько слов и поставить под ссылку. Также изменить шрифт и безусловно размер. Но и сам оттенок цвета, где по умолчанию идет в светло желтой палитре.
Что видит его на широком экране, но как только просматриваем с мобильных носителей, как телефон или смартфон, то вместо уже привычного вида перевоплотиться в ленточный вариант, который однозначно понятный, что уже ключевые фразы появляются по центру.
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;
}
}
Демонстрация
