Верстая очередной проект (или ещё только проектируя макетную сетку) многие сталкивались с дилеммой - использовать фиксированную ширину макета или «резиновую» сетку, адаптируемую под размер окна браузера.

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

Фиксированная ширина макетной сетки

«Резиновая» макетная сетка по ширине окна

Хочу предложить нехитрый вариант решения - ограничить минимальный горизонтальный размер фиксированным значением в пикселях, а максимальный сделать относительным в процентном соотношении к ширине окна. Это очень банально решается простыми средствами ещё 2 версии спецификации CSS.

Update: Хочу оговориться, что речь не идёт о классическом эффекте резины и об адаптации под абсолютно все разрешения, скорее лишь про некий разумный диапазон разрешений, под который проектируется макет. В примерах ниже - это классический десктопный диапазон разрешений с горизонтальным габаритом разрешения от 1024 пикселей.

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

Дополняем HTML:
...

Перевод: Влад Мержевич

В CSS 2.1 фоновая картинка, применяемая к контейнеру, сохраняет свои фиксированные размеры. К счастью, в CSS3 введено свойство background-size , с помощью которого фон может быть растянут или сжат. Оно идеально подходит, если вы создаёте шаблон для адаптивного веб-дизайна.

Есть несколько способов определения размеров - взгляните на демонстрационную страницу background-size .

Абсолютное изменение размера

Могут применяться единицы измерения.

Background-size: ширина высота;

По умолчанию ширина и высота установлена как auto , что оставляет исходные размеры изображения.

Вы можете задать новый размер изображения с помощью абсолютных единиц измерения, таких как px, em, cm и др. Пропорции изменятся, если это необходимо. Например, если наша фоновая картинка имеет размеры 200×200 пикселов, то следующий код оставит эту высоту, но сделает ширину в два раза меньше:

Background-size: 100px 200px;

Если указано только одно значение, оно считается шириной. Высота устанавливается как auto и сохраняются пропорции:

Background-size: 100px; /* аналогично */ background-size: 100px auto;

Данный код масштабирует изображение с 200×200 до 100×100 пикселов.

Относительное изменение размера через проценты

Если применяются проценты, размеры основываются на элементе, а НЕ изображении:

Background-size: 50% auto;

Ширина фонового изображения, таким образом, зависит от размеров контейнера. Если у контейнера ширина 500px, то размер нашего изображения уменьшится до 250×250.

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

Масштабирование до максимального размера

Свойство background-size также понимает ключевое слово contain . Оно масштабирует изображение таким образом, чтобы оно заполняло контейнер. Другими словами, изображение будет увеличиваться или уменьшаться пропорционально, но ширина и высота не будут превышать размеры контейнера:

Background-size: contain;

Заполнение фоном

Свойство background-size также понимает ключевое слово cover . Изображение будет масштабироваться так, чтобы заполнить весь контейнер, но если различаются соотношения сторон, то картинка будет обрезана.

Background-size: cover;

Масштабирование нескольких фонов

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

Background: url("sheep.png") 60% 90% no-repeat, url("sheep.png") 40% 50% no-repeat, url("sheep.png") 10% 20% no-repeat #393; background-size: 240px 210px, auto, 150px;

Работа в браузерах

Последние версии всех браузеров поддерживают background-size без префиксов.

IE8 и ниже не поддерживают это свойство. Вы можете использовать фильтр IE для эмуляции значений content и cover , но невозможно изменить размер фоновой картинки без помощи уловок, вроде добавления настоящей картинки позади других элементов. Это грязно, так что я рекомендую изящную деградацию.

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

Решение
Стиль элемента формы, как и любого другого HTML-элемента, можно задать с помощью CSS.

Рис. 6.1 . Вид формы по умолчанию в броузере Firefoxi

Изображенная на рис. 6.1 форма оформлена в соответствии с настройками по умолчанию, используемыми броузером Firefox под Windows XP. Ее вид будет изменяться при просмотре в различных броузерах под разными платформами. Ниже представлена типичная форма:

"http://www.w3.org/1999/xhtml" lang = "en-US" >

Внешний вид этой формы можно изменить, написав правила стилей для элементов:

form { border: 1px dotted #AAAAAA ; padding: 0 .5em ; } form div { margin-bottom: 1em ; } input { color: #00008B ; background-color: #ADD8E6 ; border: 1px solid #00008B ; } select { width: 100px ; color: #00008B ; background-color: #ADD8E6 ; border: 1px solid #00008B ; } textarea { width: 200px ; height: 40px ; color: #00008B ; background-color: #ADD8E6 ; border: 1px solid #00008B ; }

Теперь форма выглядит, как на рис. 6.2.

Обсуждение
Как вы наверняка догадались, заданные правила стилей для HTML-элементов form, input, textarea и select будут применены по отношению к каждому их экземпляру, находящемуся на странице, с которой связан файл таблицы стилей. Для изменения оформления полей формы мож- но использовать множество различных свойств. С помощью CSS можно управлять практически всеми аспектами поля :

Совет
Формы и фоновый цвет . Часть посетителей вашего сайта могут плохо различать цвета, а часть, возможно, пользуется голосовым броузером. Поэтому цвета никогда не должны выполнять важных функций - к примеру, указания вроде «Желтые поля обязательны для заполнения» должны быть под полным запретом.

Рассмотрим значения свойств более подробно:

Внешний вид HTML формы можно значительно улучшить с помощью CSS:

Стили полей ввода

Использовать свойство width для определения ширины поля ввода:

Пример относится ко всем элементам . Если вы хотите только установить стиль определенного типа ввода, можно использовать селекторы атрибутов:

• input - будут выбраны только текстовые поля
• input - будет выбирано только поля пароля
• input - будут выбраны только числовые поля
• и т.д...

Дополнительные вводы

Использовать свойство padding для добавления пространства внутри текстового поля.

Совет: Если у вас есть много вводов друг за другом, Вы можете также добавить margin , чтобы было больше места за пределами:

Обратите внимание, что мы установили свойство box-sizing к border-box . Это гарантирует, что заполнение в конечном итоге границы включены в общюю ширину и высоту элементов.
Подробнее о свойстве box-sizing в главе CSS Стили Бокс .

Границы ввода

Использовать свойство border для изменения размера и цвета границы, и свойство border-radius для добавления закругленных углов:

Если вам нужна только нижняя граница, используйте свойство border-bottom:

Цвет ввода

Использовать свойство background-color цвета фона ввода, свойство color для добавления изменение цвета текста:

Фокус ввода

По умолчанию некоторые браузеры добавляют синий контур вокруг ввода, когда он получает фокус (щелчок мышью). Это поведение можно удалить, добавив outline: none; в input .

Использовать селектор:focus , чтобы поле ввода, получил фокус:

Ввод иконка и изображение

Если вы хотите установить иконку внутри ввода, используйте свойство background-image и расположите его в свойстве background-position . Также обратите внимание, что мы добавили большую левую прокладку для резервирования места иконки:

Пример

input {
background-color: white;
background-image: url("searchicon.png");
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}

Трансформация поиска ввода

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