WebDesignMagazine.ru – Журнал о веб-дизайне

Как создать 404 страницу в стиле ТВ экрана при помощи CSS трюков?

0

Сегодня мы создадим уникальную 404 страницу, которая будет сделана в стиле ретро ТВ экрана. Подробный урок + Демо! Нам также нужно будет решить несколько вопросов по респонсив дизайну, так как мы хотим, чтобы наше содержание масштабировалось в зависимости от телевизионного фонового изображения. Следуйте за процессом детального дизайна страницы 404 и узнайте, как куча маленьких хитростей CSS могут  превратить интересную идею в реальность.

 

Смотреть Демо  Скачать Урок

Подготовка изображений в Photoshop

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

1

2

3 4

5 6 7

8 9 10

11 12 13 14

Как вы видиете – сначала мы отредактировали телевизор, а затем создалали анимационный джиф-файл, который будет представлять собой черно-белые помехи или “cнег”. Экспортируйте файл в формате gif, чтобы сохранить анимацию. Можно вытеснуть несколько KB из этого, обрезав изображения до половины его ширины и уменьшив количества цветов до 4. Оно по-прежнему выглядит отлично и меньше цветов просто будет означать больший контраст с меньшим полутоном между черными и белыми крапинками.

Создание HTML структуры

Создайте HTML файл и начните дизайн основного макета страницы с различными  HTML элементами. Все, что требуется, это div под названием “TV”, чтобы обеспечить hook  для  фонового изображения, затем отдельный div, чтобы сохранить текстовое содержимое вместе.

Стили СSS

tv1

Первое действие в файле CSS, это наслоение трех фоновых изображений. Статический шум должен идти первый, так что добавляется он к body. Несколько фоновых изображений могут быть использованы для добавления ТВ и затенения изображений  к ТВ div. По какой-то причине, второй фон помещается под первым в нескольких фоновых  синтаксисах , так что в таком порядке их нужно добавлять в CSS! Два важных заявления: background-size: 100% 100%; убедитесь, что изображения расположено во весь экран, но что более важно, что оно протянуто до каждого края, так чтобы не было видно статического фона. Значение cover, делает подобную работу, но сохраняет коэффициент изображения. Далее нужно убедиться, что изображение растянуто для заполнения страницы как вертикально, так и горизонтально. div, body и HTML должны быть height: 100%

tv2

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

Маленький трюк по респонсивному веб-дизайну –  чтобы изображение масштабировалось до размера его родителя, нужно добавить max-width: 100%;. Когда родительский контейнер становится меньше, чем размер изображения, то изображение будет масштабироваться, чтобы соответствовать размерам.

Остальные стили шрифтов добавляются для стилирования заголовков. Эмс (em) используются, чтобы удержать контент масштабируемым. Любой фиксированный размер просто так не будет работать, когда телевизор показывается в меньшем масштабе на меньшем разрешении. Старый трюк добавления 62,5%  font-size к body, помогает Em математике оставаться простой.

Сделайте его масштабируемым

Страница 404 хорошо работает на приличном разрешение монитора, но на в меньших вариантах, фоновое изображение телевизора слишком мало, чтобы вместить содержимое на экран. Нам нужно масштабировать текстовый контент как на картинке.

К счастью,  jQuery плагин FitText делает как раз то, что надо. jQuery библиотека, плагин FitText и пустой файл scripts.js добавляются в HTML, а затем серия уникальных классов к каждому из заголовков, чтобы сделать отдельные ухищрения.

Добавить fitText функцию к трем классам в файле scripts.js. Применение обобщенной функции FitText ко всем трем элементам будет работать, но, чтобы сделать переходы масштабирования идеальными, потребуются некоторые хитрости. Отрегулируйте “compressor” значение и maxFontSize опции, чтобы убедиться, что текст не выходит из под контроля. Плагин игнорирует размеры шрифта из файла CSS, поэтому максимальный размер шрифта необходим для предотвращения текст от слишком большого расширения.

Вот и все! Ваша 404 страница готова

как создать страницу 404 css

 

Поделиться:

Об Авторе

Переводчик портала WebDesignMagazine.ru. Пишу статьи и делаю переводы для веб-сайта.

Авторизация

РегистрацияЗабыли пароль?

Регистрация

Генерация пароля

Регистрация