Билборд для сайта на CSS3
Приветствую гостей и постоянных посетителей сайта! Давненько на Сайт с нуля не было материалов о таких функциональных элементах сайта как галереи, карусели, слайдеры. Установку стандартной галереи lightbox мы рассматривали, теперь давайте что-нибудь поинтересней возьмем, например билборд.
Да-да, билборд! По-моему, это отличный вариант для оригинального оформления сайта и альтернативной замены слайдеру. В дальнейшем обязательно поделюсь с вами нестандартными слайдерами и галереями, некоторые из них я уже "обкатала", до некоторых еще руки не дошли:))
А сейчас давайте вернемся к билборду... По умолчанию в нем чередуются три картинки, при смене которых происходит разделение на вертикальные фрагменты и их плавный поворот, как на настоящем уличном билборде. Посмотреть как это выглядит, можно чуть ниже, а скачать архив с файлами для установки можно будет в конце статьи.
Сразу скажу, что установка билборда очень проста, так что даже совсем полные чайники разберутся что к чему. Не бойтесь, вам не придется нарезать изображения на фрагменты, анимация в данном примере реализована с помощью CSS3.
В архиве вы найдете папку с изображениями и папку со стилями. В папке с картинками вам нужно будет заменить исходные изображения своими, при этом размер картинок и названия не менять, иначе вам придется корректировать файл стилей и само изображение билборда.
Кто уже проштудировал учебники для начинающих по html и css, могут внести нужные правки в файл стилей, остальным рекомендую действовать по инструкции ниже. Для установки такого билборда вам потребуется всего три шага и десять минут времени. Перед тем, как приступить к установке рекомендую приготовить свои картинки.
Они должны быть одинакового размера 792 Х 335 px и формата jpg. На картинках при желании можно разместить текст, воспользовавшись любым графическим редактором, установленным на вашем компьютере (Paint.net, Photoshop, даже WebPageMaker подойдет для этих целей) либо с помощью онлайн-фотошопа.
Когда картинки готовы, помещаете их в папку images вместо исходных, оставив прежние названия. Если хотите оставить оригинальные названия картинок, то в файле css не забудьте их изменить.