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

Распространенная реакция на эту ситуацию — «вырваться» из сеток:  специально располагать элементы не в привычном порядке. Это не так просто сделать: для этого нужно не меньше, а может и больше внимания к деталям, чем при работе над дизайнами, основанными на сетках, так как нужно заранее все предусмотреть.

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

• Располагайте фоновые изображения с неровными краями неясной формы таким образом, чтобы избежать прямоугольности.

• Используйте наборы изображений CSS или другие способы для создания непрямоугольных кнопок.

• Создавайте глубину с помощью свойства тени блока.

• Скругляйте углы и создавайте окружности с помощью свойства закругления рамки.

• Мудро используйте абсолютное и относительное расположения для наслаивания и перекрывания элементов.

• Располагайте элементы вне сетки с помощью трансформаций CSS или обработки изображений в таких редакторах, как Photoshop.

• Используйте свойство строчного отображения для выравнивания элементов по центру.

• Выбирайте поношенные, грязные, разорванные текстуры и цветовые эффекты вместо простых базовых цветов.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Новый подход к адаптивным таблицам
• Используем необычные шрифты для заполнения макета сайта
• Создание простых рамок с использованием CSS