Раньше для того, чтобы создать черно-белое изображение необходимо быть вручную обработать его в графическом редакторе, прежде чем разместить его на сайте. Теперь, при помощи HTML5 canvas, можно изменять оттенки серого для изображения, без использования программного обеспечения для редактирования изображений. Ниже представлена демонстрация того как с помощью HTML5 и jQuery динамически изменять цветные изображения, делая их черно-белыми.
Если вы не знаете, что такое кассета, то вы, вероятно, родились в эпоху хай-тэк, эпоху, которая, несомненно, является интересной и новаторской. Но если же вы имеете представление, что такое аудио-кассеты, то скорее всего вы принадлежите к старшему поколению, динозаврам, которые знают, что объединяет карандаш и аудио-кассету. :)
В данном уроке мы расскажем как создать анимированное меню с образцами при помощи CSS3 и JavaScript. Идея состоит в том, чтобы показать набор образцов и при нажатии на отдельный образец, мы будем сдвигать другие образцы с целью показа выбранного.
Сегодня мы хотим показать вам, как создавать впечатляющие 3D эффекты при наведении курсора мыши с использованием CSS3 и jQuery. Эта идея навеяна классными hover-эффектами, которые можно найти на странице Google SketchUp Showcase.
В наших примерах мы будем использовать миниатюры, которые раскроют больше информации при наведении на них курсора мыши. Мы создадим макет при помощи jQuery, что позволит нам складывать или сгибать изображение, когда мы наводим на него курсор мыши. Для создания эффектов мы будем использовать CSS 3D трансформацию.
Сегодня мы хотим поделиться с вами способом создания адаптивной 3D галереи. Макет будет состоять из слайдов, на каждом из которых может находиться до четырех панелей. При переходе между ними, мы будем анимировать несколько разделительных линий («сетку») и настраивать размер панелей следующего слайда. Панели будут появляться с 3D-эффектом, который мы определим для каждой из них.
Здесь представлен набор полностью готовых к использованию модальных всплывающих окон. Вы можете скачать все необходимые HTML, CSS и графические файлы, включая примеры кода и демонстрацию (jQuery используется через Google API). Также имеются PSD-файлы для удобной настройки.