Как создать адаптивный шаблон сайта на CSS3 | RUDEBOXПродолжаем рассматривать адаптивность и ее влияние на современный веб-дизайн. В данном уроке мы рассмотрим создание адаптивного шаблона кинопортала. Вся идея состоит не только в изменении размера шаблона, а еще при эффектном появлении навигации, которая будет скрываться, а при вызове плавно появляться с эффектом скольжение. Мы добавим сетку и все основные элементы на главную страницу, отметим сразу, что мы не создавали полноценный шаблон сайта, мы создаем концепты с возможностью его адаптации и изменения на свое усмотрение.

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

Шаг 1. HTML

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

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

Как создать адаптивный шаблон сайта на CSS3 RUDEBOX

Шаг 2. CSS

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

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

Шаг 3. jQuery

Для плавной и корректной работы навигации при маленьком размере окна:

Вот и все. Готово!

Читайте также: