Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создание необычных непрямоугольных веб-дизайнов

5 мая 2018 | Опубликовано в css | Нет комментариев »

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

 

 


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

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

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

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

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

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

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

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

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

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

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

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

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




Оставить ответ


четыре + 8 =

Вставить изображение