Адаптивно информационные блоки на CSS
 | |
| Вашему вниманию прекрасно созданные по своему дизайну адаптивные блоки С ПОМОЩЬЮ CSS, которые отлично послужат на сайте в плане информации. Безусловно на каждом интернет ресурсе есть тему, которые должны быть как можно больше замечены пользователем или гостями сайта. Для этого делают различные блоки, которые отличаются от всего своим ярким и неповторимым стилем, что предоставлены здесь. Где можно написать заголовок, и также закрепить краткое пояснение или описание, по которому изначально понимаешь на какую тему переходить. Плюс в том еще заключается, что они созданы в обновленном формате и полностью адаптивны под разные размеры мобильных экранов и больших мониторах, здесь все корректно выводит. Идут они в разном оттенке цвета, но здесь изначально предоставлено несколько вариантов по цветовой гамме, так как возможно кому-то одного блока на сайте вполне хватит, что другим можно разместить отдельно или вообще не выставлять. У вас будет возможность посмотреть на demo странице полностью их функционал, так как они могут располагаться на светлом фоне, здесь по умолчанию прописаны тени. И на темном аналогичным способом они еще арче станут смотреться, ведь выполнены в светлой палитре цвета. Это вид при открытии портала или страницы.  Так уже смотрятся на мобильных аппаратах.  Приступаем к установке: 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; } Если у вас уже есть отличное решение для создания современного интернет ресурса, то это блоки уже готовое решение под ваш дизайн. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 9 | |
| |
