Лучшие статьи категории «Веб-сайты»

Подписка

Масштабируемые фоны в веб-дизайне

Сейчас разрешение экрана у большинства пользователей выше или равно 1024×768 пикселей. Но развитие компьютерной индустрии не стоит на месте. Мониторы совершенствуются, разрешения экранов растут и разработчикам веб-сайтов приходится постоянно придумывать новые и необычные способы, чтобы сайт смотрелся одинаково красиво и эффектно, независимо от разрешения установленного на мониторе пользователя.

Именно по причине растущего разрешения все большую популярность в дизайне веб-сайтов приобретает применение масштабируемых фонов. Преимущество такого метода в том, что фон может масштабироваться под любое разрешение экрана, будь то 1024×768 или 2560×1440 пикселей. При грамотном подходе можно создавать великолепные конструкции, которые удержат посетителя на сайте гораздо дольше и никак не скажутся на информационной составляющей сайта.

Ниже мы рассмотрим два метода, с помощью которых можно реализовать такой фон. Одни из них основан на технологии flash, а другой на совместном использовании CSS и JavaScript.

Flash

Эта технология постоянно улучшается с самых первых дней своего появления. Благодаря этому во многих flash-сайтах можно найти новые и еще не слишком распространенные элементы. Вот и в использовании масштабируемых фонов flash-сайты явно не отстают.

Масштабируемые фоны в веб-дизайне
Масштабируемые фоны в веб-дизайне
Масштабируемые фоны в веб-дизайне
Масштабируемые фоны в веб-дизайне
Масштабируемые фоны в веб-дизайне
Масштабируемые фоны в веб-дизайне
Масштабируемые фоны в веб-дизайне
Масштабируемые фоны в веб-дизайне
Масштабируемые фоны в веб-дизайне

CSS и JavaScript

По сравнению с flash, использование CSS и JavaScript гораздо удобнее для пользователей с точки зрения юзабилити и доступности. Благодаря этой комбинации веб-сайт может быть сделан не менее эффектно и при этом вести себя очень похожим образом, как и сайт на flash. Убедиться в этом вы можете посмотрев вторую подборку сайтов с большими фоновыми изображениями на нашем сайте.

Масштабируемые фоны в веб-дизайне
Масштабируемые фоны в веб-дизайне
Масштабируемые фоны в веб-дизайне
Масштабируемые фоны в веб-дизайне
Масштабируемые фоны в веб-дизайне
Масштабируемые фоны в веб-дизайне
Масштабируемые фоны в веб-дизайне
Масштабируемые фоны в веб-дизайне
Категория: Веб-сайты Рубрики: , , Автор: Илья Федотов


Комментарии (16)

Webmozg / 23 Май 2010 в 19:52

Очень нравятся такие сайты. Когда фото крупное на фоне.

Роман / 23 Май 2010 в 23:44

Второе и третье изображение, которые ссылаются на сайты, их ссылки перепутаны местами. С werkstette.dk давно знаком, отличные ребята.

Wmaximum / 24 Май 2010 в 07:28

Вот бы еще технология реализации масштабируемого фона была описана, а то сколько не искал, ничего путного так и не нашел.

Илья Федотов / 24 Май 2010 в 07:56

Роман, спасибо, поправил.

Animatoru / 30 Май 2010 в 22:55

Люблю флэш! Почему не придумали браузеры, которые тупо читали флэш как они есть, нужны всякие плагины.

Первый сайт который удалось сделать — это был флеш, просто до того как начал заниматься версткой, рисовал мульты в Macromedia flash 8, но потом adobe всю всю тему поломали своими разработками. Какие-то кости прикрутили к CS4 , нах они там надо. Это ж не анимэ студио. Короче я видимо уже не по теме лью.

Зачем вообще такие фоны, грузятся долго. Вцепи градиент на задний план и не е…и мозги себе.

Coldsoul / 2 Июнь 2010 в 13:37

Красивые дизайны! Вомтек.ру вообще горячий! )

Minigamer / 4 Июнь 2010 в 05:52

Красивые сайты!

Extezy / 8 Июнь 2010 в 11:22

Обалденные примеры привел. Очень красиво. Расписал бы для новичков, как реализовать (:

Панков / 24 Июнь 2010 в 14:12

Обожаю такие сайты, очень крутые и кажутся дорогими (:, жаль делать их сложно ):

Osstudio / 13 Июль 2010 в 13:05

Здоровские сайты. Сижу и наслаждаюсь. Но что сложно, то сложно — это факт )

Toribloger / 5 Август 2010 в 15:33

Я просто обожаю подобные сайты, иногда часами сижу и пересматриваю их. В каждом ведь есть своя фишка и своя особенность, которая порой подталкивает на создание чего-то своего!

Олег / 28 Март 2011 в 16:32

Могу скрипт на jquery написать. Когда-то делал такую вещь. Пишите на мыло.

Олег / 28 Март 2011 в 23:20

На css3 работает. Синтаксис:

#backgro {
	background: url(/images/bg.jpg) no-repeat;
	background-size: [ значение>| проценты | auto ]{1,2} | cover | contain;
}

Значение cover масштабирует изображения в пропорциях и вмещает в слой; contain — заполняет изображением весь блок; значение и проценты — догадались наверное, размер указывать как угодно ( px, em, cm …); auto — если указываете один из размеров изображения (например, пишете background-size:100px auto — браузер вам выдаст блок с подложкой шириной 100 пикселей и шириной, равной ширине блока). Для старых версий браузеров приписываем дополнительные строки:

/* Mozilla */ moz-background-size: параметры
/* Chrome и Safari */ webkit-
/* Opera */ o-background-size: параметры
            background-size: параметры

Артем / 4 Май 2011 в 19:32

Flash — доживает свои дни …

Simka / 25 Май 2011 в 17:16

Это должно работать и на css2 (люди до сих пор Explorer 6 используют), поэтому когда-то решал эту задачу скриптом: див растягивал по ширине и высоте на весь экран, яваскриптом читал его размер, вписывал туда же скриптом картинку с полученными размерами, у дива z-индекс должен быть 0 или -1. Работает (:

Kapa / 13 Август 2012 в 20:15

Сложновато сайты такие делать, но они как по мне того стоят …

Добавить новый комментарий

* — поля обязательные для заполнения XHTML: Вы также можете использовать эти тэги: <a href="" title=""> <pre lang=""> <blockquote> Перейти наверх

Поиск

Популярные статьи

Комментарии

  • Fotografas: Отличная фотография.
  • Тимофей: Хрень полная. А если у меня данных, ну штук 50-70, в...
  • Irmaseo: Время решает все.
  • Дмитрий: Есть еще один вариант – заказать у друга-дизайнер...
  • Sindor: Полезная статья, спасибо автору!
  • Ganesa: Клипарты очень и очень выручают, даже те сервисы, которые с...
  • Елена Калинина: Атомарный дизайн пригодится очень при...
  • Елена Калинина: Логотип того или иного города легко найти в...

Друзья

Нашли ошибку?

Если вы нашли грамматическую ошибку на сайте, выделите ее и нажмите сочетание клавиш Ctrl+Enter.

Система Orphus