Элиот Стокс - Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки Страница 25

*/

flex: 3;

max-width: 370px; /* ограничивает от слишком большого расширения*/

}

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

Работа с изображениями

Теперь, когда мы лучше пониманием, как создавать продвинутые макеты с помощью CSS3, давайте рассмотрим несколько визуальных техник, которыми мы сможем их чуточку «оживить».

Множественные фоны и градиенты

Взгляните на следующий стиль в двух разных размерах[47]:

Рисунок 4.7. Широкий вариант множественных фонов и градиентов

Рисунок 4.8. Узкий вариант

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

html {

background: #222;

min-height: 100 %;

}

body {

margin: 0;

}

section {

max-width: 25em;

margin: 0 auto;

padding-top: 150px;

color: white;

font: italic 100 %/1.5 ‘Palatino Linotype’, Georgia, serif;}

Но как добавлять звезды, силуэты на фоне неба и луну? Мы используем только два элемента (html и body – элемент section слишком узкий), а нам нужно четыре фоновых рисунка.

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

html {

background: url(“moon.png”) no-repeat 100 % 1em,

url(“stars.png”) repeat-x 0 0,

url(“city.png”) repeat-x bottom,

linear-gradient(black, #444);

background-color: #222;

min-height: 100 %;

}

Вы, наверно, заметили, что последний фоновый рисунок не является внешним файлом. В самом деле, теперь мы можем создавать градиенты прямо в CSS. Градиент, использованный выше, – это простой вертикальный градиент с двумя цветами. Но вы можете делать более сложные вещи с градиентами CSS: заливать разнообразные цвета в разные позиции или под разными углами, или даже создавать радиальные градиенты. А еще – все виды геометрических паттернов с несколькими CSS градиентами.

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

html {

background: url(“moon.png”) no-repeat 100 % 1em,

url(“stars.png”) repeat-x 0 0,

url(“city.png”) repeat-x bottom;

background: url(“moon.png”) no-repeat 100 % 1em,

url(“stars.png”) repeat-x 0 0,

url(“city.png”) repeat-x bottom,

linear-gradient(black, #444);

background-color: #222;

min-height: 100 %;

}

Правда, есть небольшой повтор? И дело еще хуже с браузерными префиксами. Но у нас ведь есть элемент body, так что мы можем извлечь из этого пользу и применить градиент к другому элементу:

html {

background: #222;

background: linear-gradient(black, #444);

height: 100 %;

}

body {

margin: 0;

background: url(“stars.png”) repeat-x 0 0;

background: url(“moon.png”) no-repeat 100 % 1em,

url(“stars.png”) repeat-x 0 0,

url(“city.png”) repeat-x bottom;

min-height: 100 %;

}

Намного лучше, и дает отдачу от возможностей каждого браузера.

Свойства BACKGROUND-ORIGIN, BACKGROUND-SIZE, OUTLINE

Рисунок 4.9. Дизайн, который мы будем воспроизводить на CSS3

Допустим, нам поручено создать дизайн, отображаемый справа, с использованием CSS[48]. И опять мы уверены, что вы могли бы быстро сделать базовую разметку и, возможно, интегрировать несколько основ, которые вы знаете о системе цветопередачи RGBA и текстовых теней:

html {

min-height:100 %;

background: url(‘rainbow-wood.jpg’);

}

section {

max-width: 25em;

padding: 3em;

margin: 4em auto;

background: black url(logo.svg) no-repeat bottom right;

color: white;

font: bold 100 %/1.5 sans-serif;

text-shadow: 0 – .1em .2em black;

}

h1 {

margin-top: 0;

}

Результат близок к тому, которого мы добивались. Но есть проблемы:

• Фоновое изображение элемента html – гигантское. Это хорошо для огромных экранов, но, как правило, мы хотим подогнать размер под экраны поменьше.

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

• Нет розовой «строчки».

Разберем эти вопросы по порядку.

Рисунок 4.10. Результат после применения наших знаний о CSS2.1

Изменяем размер фонового рисунка по ширине

CSS3 дает нам новое свойство для контроля размера фонового изображения: background-size. Это позволяет нам использовать одно и то же изображение в разных размерах. Мы можем либо установить точно определенный размер, либо применить один из двух ключевых слов для задания размера: contain и cover.

• cover

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

• contain

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

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

Правим логотип

Для увеличения размера SVG логотипа мы снова используем свойство background-size, но на этот раз устанавливаем точный размер:

background-size: 150 px;

При задании только одного значения вместо двух мы сохраняем соотношение сторон, при этом изображение расширяется до 150 пикселей по ширине. Но оно все еще «приклеено» к низу. В прежние времена мы бы просто пожали плечами и отредактировали изображение так, чтобы в нем был промежуток. Сегодня с CSS3 у нас есть немного больше контроля при размещении изображения. Если проанализировать примеры выше более детально, мы столкнемся с проблемой – изображение находится внизу справа от области полей, но нам хотелось бы, чтобы оно располагалось внизу справа от текста. CSS3 дает нам новое свойство background-origin, которое контролирует позиционирование изображения относительно края элемента с учетом толщины рамки, относительно рамки, либо содержимого элемента.

В этом случае надо поместить изображение в правом нижнем углу содержимого элемента, а не края, как задано по умолчанию. Эта строка CSS сделает что нужно:

background-origin: content-box;

Добавление розовой строчки

Это было бы просто, если бы розовая пунктирная рамка располагалась с краю контейнера. Такой кусок CSS мог бы сделать это:

border: 1px dashed #f06;

Но как мы переместим эту рамку внутрь контейнера? Не получается. Вместо этого мы сужаем контейнер, а потом добавляем дополнительный цвет за пределами рамки с помощью свойства outline:

border: 1px dashed #f06;

outline: 20px solid rgba(0,0,0,8);

Другой способ – использовать свойство outline со значением outline-offset в -20px (здесь мы не применяем эту технику). Вот полный сниппет:

html {

min-height:100 %;

background: url (‘rainbow-wood.jpg’);

background-size: cover;

}

section {

max-width: 20em;

padding: 3em;

margin: 4em auto;

border: 1px dashed #f06;

outline: 20px solid rgba(0,0,0,8);

background: url(logo.svg) no-repeat bottom right;

background-color: black;

background-color: rgba(0,0,0,8);

background-origin: content-box;

background-size: 150px;

color: white;

font: 100 %/1.5 sans-serif;

text-shadow: 0 – .1em .2em black;

}

h1 {

margin-top: 0;

}

Обрезание фона

Давайте рассмотрим простой вариант предыдущего стиля, как показано ниже[49].

Рисунок 4.11. Полупрозрачная рамка с обрезанием фона

Для получения такого результата вы, вероятно, попробуете что-то подобное:

html {

min-height: 100 %;

background: url(‘rainbow-wood.jpg’) top;

background-size: cover;

}

section {

max-width: 20em;

padding: 3em;

margin: 4em auto;

border: 20px solid rgba(0,0,0,5);

background-color: black;

color: white;

font: 100 %/1.5 sans-serif;

text-shadow: 0 – .1em .2em black; }

h1 {

margin-top: 0;

}

Рисунок 4.12. На самом деле наша граница не полупрозрачная. Почему?