Last Updated:

Adaptive information blocks in CSS3

Adaptive information blocks on CSS3 is the topic of today's lesson. Blocks will serve as an informative field, made in the form of rectangles with rounded edges. With different color shades. When you change the screen size, the blocks will change the appearance and display on the page, and their shape will also change. You can use such blocks to emphasize important information, because the information in such a block will not leave your readers indifferent.
 
Adaptive information blocks in CSS3
 

If you want to create a modern and stylish website using a ready-made template, then pay attention to the offer from our partners, there are many adaptive templates with support for the Russian language and assistance in installation.

Adaptive information blocks in CSS3. How to implement them:

Step 1. HTML

After you have connected the prefixfree script to your page, create this markup:

 

This is all the markup that we will have, also you can set the icons by setting the values to article data-icon="".
 
Step 2. CSS

To implement such informative blocks, we will need a few CSS rules, namely:

@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: "Title\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: "";
}

 

As a result, we got such wonderful blocks. Thanks to Ana Tudor, for the implementation of such wonderful blocks.