Полноэкранное слайдшоу на CSS3

В данном уроке мы сделаем полноэкранное слайдшоу фоновых изображений с использованием только CSS3. В демонстрации представлены несколько различных эффектов с использованием трансформаций и анимаций CSS. ... Читать дальше »

Аккордеон на CSS3

В данном уроке мы создадим аккордеон для изображений, который будет раскрывать картинки по нажатию кнопки мыши. С помощью комбинаторов соседей и вложенной структуры мы можем управлять открыванием слайдов с помощью радио кнопок. ... Читать дальше »

Всплывающий информатор с использованием анимаций CSS3

Динамические информаторы требуют привлечения внимания. Каждый раз, когда происходит изменение, нужно воспроизводить визуальный эффект, чтобы пользователь увидел, что происходит. Воспользуемся анимациями CSS3. ... Читать дальше »

Выпадающее меню с закладками

Выпадающее меню с разделением первого уровня на секции с помощью закладок. Часть работы будет выполнять jQuery. Всего в меню имеется три уровня.  ... Читать дальше »

Складывающаяся 3D анимация на CSS

Google Plus является источником вдохновения многих разработчиков, особенно в сфере использования CSS и JavaScript. В данном уроке воспроизводится эффект сворачивания карты. Для него используются 3D анимации, которые придают шарм визуализации, и не требуется ни строчки кода JavaScript. ... Читать дальше »

Навигационное меню с визуальным эффектом на CSS3

В данном уроке мы сделаем навигационное меню с интересным визуальным эффектом используя только CSS. Будут представлены одноуровневый вариант и выпадающая структура. Для создания эффекта будет применяться псевдо-элемент :after с пользовательским атрибутом. 

Примечание: меню полноценно работает в браузерах, поддерживающих CSS3. ... Читать дальше »

Создаем модальное окно на HTML5 и CSS3

Модальные окна - часто используемый инструмент в арсенале веб мастера.  Он очень удачно подходит для решения большого количества задач, таких как вывод форм регистрации, рекламных блоков, сообщений и так далее. ... Читать дальше »

Эффектное добавление нового содержания на странице

Допустим, что новый модуль с информацией нужно вывести на странице. Простое добавление модуля в DOM приведет к его немедленному появлению. В некоторых случаях такой "выход" приемлем, но можно сделать процесс эффектнее. Наверняка, когда вы добавляете на страницу блок новой информации, то хотите, чтобы люди обратили внимание на него. Анимация поможет вам. Технически можно замедлить процесс появления блока, но визуальный эффект ярким пятном выделит новинку. ... Читать дальше »

Как сделать простые подсказки на CSS3

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

Эффект "трассирования" для навигации

Простой способ сделать скучное длинное навигационное меню интересным элементом интерфейса веб проекта с помощью магии CSS. Подобная техника используется на сайте www.graphitedesign.com. Трассирующий "эффект" добавляется к элементам обычного списка, на основе которого строится меню. Конечно, результат будет виден только в новых браузерах, но обратная совместимость достигается практически без труда. ... Читать дальше »