Предыдущий ролик Следующий ролик  

Видео урок: Стилизация названия hero

Создание отзывчивого веб-дизайна

Теперь мы стилизуем контекст внутри области заголовка, внутри hero. Возвращаемся к проекту myWebsite, берем screen_styles.css из папки CSS и открываем его в текстовом редакторе. Правила внутри этого CSS файла применяются в основном к тексту и элементам дизайна, которые являются последовательными для всех размеров экрана. Здесь давайте прокрутим вниз. Несколько раз нажимаем Return, и здесь мы обратимся к заголовку внутри панели внутри id hero. Мы начнем с "#hero .panel .caption".

Установим цвет текста, это будет rgba. Устанавливаем 65% white, то есть 255, 255, 255, затем .65. Высоту строки устанавливаем на 14 пикселей. Теперь мы нацелимся на заголовки h3, итак, "#hero .panel .caption h3". Устанавливаем свойство color на white. Размер шрифта будет 1.2em. Свойство margin-bottom устанавливаем на пять пикселей.

Далее мы поработаем с абзацами. "#hero .panel .caption p". Свойство margin-bottom устанавливаем на пять пикселей. Теперь мы нацелимся на якорные ссылки внутри тега caption с классом для вызова действия, или .cta. И мы будем использовать этот спрайт-график, который изменили в Photoshop, так что у нас будет два специальных цвета в этом графике. Мы начинаем с "#hero .panel .caption a.cta". Размер шрифта устанавливаем на 0.8em. Свойство margin устанавливаем на ноль, а свойство color на #b8d8f6. Теперь поработаем с позицией заднего фона, позиция x будет right, а позиция y минус 101 пиксель. Далее мы нацелимся на hover.

Итак, "#hero .panel .caption a.cta:hover". Свойство color устанавливаем на белый цвет, background position для x - right, а y минус 151 пиксель. Теперь, когда все правила на месте, давайте перейдем в браузер. Нажимаем Reload. Вы видите, что стили работают. Вы видите, что Learn More сейчас голубого цвета с голубой стрелкой. А когда мы проводим по ней, мы видим, что стрелка меняет цвет на белый.

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