# 125: Фотошоп одной страницы с видео - CSS-хитрости

Anonim

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

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

Тогда возникает вопрос, где идет название видео. У нас уже есть заголовок сайта, заголовок видео и суб-навигация с черной полосой. Если мы также включим заголовок (и, возможно, описание и метаданные), который вытолкнет это полноразмерное видео довольно далеко вниз по странице. Эта страница посвящена видео, поэтому мы сохраняем видео над другой информацией. К счастью, мы можем использовать черную полосу для отображения заголовка видео, поэтому пользователь не теряется в том, что он смотрит или где он находится в иерархии сайта.

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

Под видео мы можем структурировать сетку, которая по сути выглядит как сообщение в блоге, фрагмент, запись в alamanac или что-то еще. Содержимое и комментарии слева 2/3 и стороннее (боковая панель) содержимое справа 1/3.