CSS: Дизайн с иголочки

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

Пример 1: Компания Huge Inc
Именно дизайн верхнего колонтитула на сайте Huge привлек мое внимание. Обратите внимание на то, как элементы дизайна выходят за пределы бокса.

Пример 2: Jason Santa Maria
Глядя на все те усилия, большое внимание к деталям, что Jason вложил в свой сайт, можно без сомнения сказать, что это из лучших дизайнерских сайтов в сети. Покликайте по постам сайта и вы обнаружите, что почти каждый пост уникален и имеет свою собственную таблицу стилей. Некоторые изображения находятся внутри сетки, другие вынесены за пределы бокса.

Пример 3: A Brief Message
Наподобие вебсайта Jason Santa Maria, каждый пост на ABriefMessage.com также собержит свои собственные изображения и таблицу стилей. В отличие от других типичных сайтов-блогов, верстка текста на сайте идеальна, что позволяет тексту обтекать изображения (прямо как чтение печатного издания).

Пример 4: Trent Walton
TrentWalton.com фокусирует внимание на верхнем колонтитуле, где для каждого поста загружается свое фоновое изображение и настройка шрифтов.

Пример 5: Wonderbra лучшие бюстгальтеры без бретелек
Хотя на сайте Wonderbra и есть некоторые проблемы с доступностью (к примеру, шрифт не масштабируется), зато дизайн у него просто чудесный. Контент и изображения отлично размещены относительно друг друга. НА первый взгляд мне показалось, что это Flash сайт. Затем я взглянул на исходный код и понял, что он сделан на CSS и путем замещения текста Javascript, cufon.

Пример 6: Fox
Fox - Fringe - этот сайт разрушил наскучившие шаблоны из боксов, используя фоновые изображения, которые наложены друг на друга по всей длине страницы. Также косые углы между боксами придают сайту более интересный вид. Не забудьте посмотреть на остальные сайты Fox TV.

Пример 7:Mezzoblue
Mezzoblue расположил свои изображения за пределами сетки. Этого можно легко достичь, используя параметр margin-left с отрицательным значением.

Быстрые советы по CSS

Использование Absolute Position в CSS (посмотреть демо)
Следующий урок имитирует результат, который мы можем увидеть на сайте Huge, используя параметр position. Используйте position:absolute при размещении каждого элемента. Затем установите более высокий z-index для логотипа, nav-ов и области контента (так, чтобы они находились выше бокса с изображением).

Использование фонового изображения (посмотреть демо)
В этом примере логотип и текст как бы встроены в фоновое изображение. Чтобы сделать текст логотипа кликабельным, сначала задайте для H1 absolute position, затем используйте text-indent, чтобы спрятать текст в H1.
Для кнопки Click Here используйте absolute position, чтобы поместить ее в нужное место. Задайте ей фоновое изображение и используйте text-indent, чтобы спрятать текст. При наведении, измените background position на bottom.

Использование margin left (посмотреть демо)
Этот прием предельно прост. Просто задайте изображению отрицательное значение margin-left и float:left.

Источник статьи: www.webdesignerwall.com. Перевод: Портал для дизайнеров «Балбесов НЕТ»

Оцените, пожалуйста, эту статью:

Читать комментарии [12] на форуме.