Как создать адаптивные блоки для сайтаДорогие читатели, сегодня мы хотим рассказать и показать о процессе создания адаптивных блоков для сайта при помощи CSS3. Блоки будут служить информативным полем, выполненными в виде прямоугольников со скругленными краями. С разными цветовыми оттенками.  При изменении размера экрана блоки будут изменять вид и отображение на странице, также будет меняться их форма. Вы можете использовать такие блоки для подчеркивания важной информации, ведь оформленная информация в такой блок не оставит равнодушным ваших читателей.

 

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

Шаг 1. HTML

После того как вы подключили скрипт prefixfree к своей странице, создаем вот такую разметку:

Это вся разметка которая у нас будет, также вы можете установить значки установив значения в article data-icon=»».
Как создать адаптивные блоки для сайта на CSS3

Шаг 2. CSS

Для реализации таких информативных блоков, нам потребуется немного правил CSS, а именно:

В результате у нас получились вот такие замечательные блоки. Спасибо Ana Tudor, за реализацию таких замечательных блоков.

Вот и все. Готово!