» »

Адаптивно информационные блоки на CSS

Адаптивно информационные блоки на CSS

Вашему вниманию прекрасно созданные по своему дизайну адаптивные блоки С ПОМОЩЬЮ CSS, которые отлично послужат на сайте в плане информации. Безусловно на каждом интернет ресурсе есть тему, которые должны быть как можно больше замечены пользователем или гостями сайта. Для этого делают различные блоки, которые отличаются от всего своим ярким и неповторимым стилем, что предоставлены здесь.

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

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

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

Это вид при открытии портала или страницы.

Адаптивные html-блоки

Так уже смотрятся на мобильных аппаратах.

Адаптивная вёрстка на блоки на CSS3

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

HTML

Код
<article data-icon="" style="--hsl0: 49, 100%, 54%; --hsl1: 33, 96%, 50%;  
  --idx: 0;">
  <h3>ZORNET.RU</h3>
  <h4>ZorNet - портал</h4>
  <p>Здесь идет краткое описание, которое можно поставить под ссылку перехода.</p>
</article>
<article data-icon="" style="--hsl0: 82, 81%, 52%; --hsl1: 104, 56%, 51%;  
  --idx: 1;">
  <h3>ZORNET.RU-#2</h3>
  <h4>ZorNet - портал</h4>
  <p>Здесь идет краткое описание, которое можно поставить под ссылку перехода.</p>
</article>
<article data-icon="" style="--hsl0: 169, 50%, 44%; --hsl1: 191, 99%, 27%;  
  --idx: 2;">
  <h3>ZORNET.RU-#3</h3>
  <h4>ZorNet - портал</h4>
  <p>Здесь идет краткое описание, которое можно поставить под ссылку перехода.</p>
</article>

CSS

Код
html {
  --i: var(--wide, 1);
  --j: calc(1 - var(--i));
  overflow-x: hidden;
  height: 100%;
background: #2b65a2;
}

@media (max-width: 39em) {
  html {
  --wide: 0 ;
  }
}
@media (max-width: 15em) {
  html {
  font-size: 0.75em;
  }
}

article {
  --p: var(--parity, 1);
  --q: calc(1 - var(--p));
  --s: calc(1 - 2*var(--p));
  display: grid;
  grid-template: calc(var(--j)*2.5em) 5em 1fr/calc(var(--i)*(var(--q)*13.5em + var(--p)*5em) + var(--j)*3.5em) 1fr calc(var(--i)*(var(--p)*13.5em + var(--q)*5em) + var(--j)*3.5em);
  overflow: hidden;
  margin: 1em auto;
  max-width: 39em;
  min-height: 10em;
  border-radius: calc(var(--i)*10em);
  box-shadow: 15px 15px 17px rgba(0, 0, 0, 0.25);
  background: linear-gradient(#f0f0f0, #fafafa 5em, #eaeaea 0, #dadada) 0 100%/100% calc(100% - var(--j)*2.5em);
  counter-increment: idx;
}
article:before, article :after {
  --m: 0;
  box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.65);
  transform-origin: calc(var(--p)*100%) calc((1 - var(--m))*100%);
  transform: skewx(calc(var(--i)*var(--s)*(1 - 2*var(--m))*27deg));
  background: linear-gradient(calc(var(--s)*(1 - 2*var(--m))*90deg), HSL(var(--hsl0)), HSL(var(--hsl1)));
  content: "";
}
article:before, article h3 {
  grid-row: 1/calc(2 + 2*var(--i));
  grid-column: calc(1 + 2*var(--i)*var(--p))/span calc(1 + 2*var(--j));
}
article:after {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-row: 2/ 3;
  grid-column: calc(3 - 2*var(--i)*var(--p))/span 1;
  font-size: calc(var(--i)*1.5625em + var(--j)*1.75em);
  content: attr(data-icon);
}
article:nth-of-type(odd) {
  --parity: 0 ;
}

h3 {
  display: grid;
  grid-template: repeat(calc(var(--i) + 1), 2em)/repeat(calc(var(--j) + 1), 3.5em);
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  padding: calc(var(--i)*1.75em) calc(var(--i)*var(--q)*2.05em) 0 calc(var(--i)*var(--p)*2.05em);
  color: #fff;
  font-size: 1.25em;
  font-weight: 400;
  text-transform: uppercase;
}
h3:before {
  font-size: calc(var(--i)*2em + 1em);
  font-weight: 500;
  content: counter(idx,decimal-leading-zero);
}
h3:after {
  --m: 1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

h4, p {
  padding: var(--pv, 0) calc(var(--i)*1.75rem + var(--j)*2vw);
}

h4 {
  grid-row: 2/ 3;
  grid-column: calc(1 + var(--i))/3;
  align-self: self-end;
  color: HSL(var(--hsl1));
  font-size: 1.75em;
  font-weight: 900;
  text-transform: uppercase;
}
h4:before {
  white-space: pre;
  font-weight: 500;
  content: "Заголовок\a";
}

p {
  --pv: .5em;
  grid-row: 3/4;
  grid-column: calc(1 + var(--i))/calc(3 + var(--j));
}
p:before {
  display: block;
  margin-bottom: .5em;
  width: 0.75em;
  height: 0.75em;
  box-shadow: 1.5em 0 HSLa(var(--hsl1), 0.8), 3em 0 HSLa(var(--hsl1), 0.6), 4.5em 0 HSLa(var(--hsl1), 0.4), 6em 0 HSLa(var(--hsl1), 0.2);
  background: HSL(var(--hsl1));
  border-radius: 50%;
  content: "";
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

Демонстрация
2019-01-05 Загрузок: 1 Просмотров: 271 Комментарий: (7)

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

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

Комментарий: 7
Koneko
Koneko 2019-01-07 16:531
0
Kocsten написан в демонстрации 50a
Kosten
Kosten 2019-01-07 18:032
0
Чем демонстрация не понравилась, все понятно представлено.
JK_Torosyan
JK_Torosyan 2019-01-07 21:253
0
Для тебя и понятно... Как будто перевод с английского китайцами.
Kosten
Kosten 2019-01-07 21:444
0
Некоторым описание не нужно, что по дизайн сразу понимают,где можно применить и под какие функций.
Koneko
Koneko 2019-01-08 22:085
0
Я говорю, почему у тебя там написано Kocsten? Kosten занят что-ли.
Kosten
Kosten 2019-01-08 22:226
0
Все правильно поняли, занят, и вероятно мной же))
waak
waak 2019-01-09 22:557
0
Не знаю кто автор ноя бы сменил вид при адаптации на мой взгляд он ужасно получился неужели трудно было сделать его более привлекательным!
avatar