Все для веб-дизайнера
Записи с метками CSS
Эффект масок для изображений с помощью CSS
Мар 15
Ранее мы уже публиковали уроки про различные маскирующие эффекты, основанные на свойствах SVG. На этот раз мы воспользовались прозрачностью PNG, чтобы увеличить масштаб маски. Если вы хотите изменить цвет масок форматов .png, вы можете легко сделать это в Photoshop (или любом другом графическом редакторе), применив цветное наложение ко всему слою изображения. Если вы планируете создавать свои собственные маски, обратите внимание, что этот эффект работает только в том случае, если в самом центре маски пустое пространство.
Интерактивные hover-эффекты для сайта на JS
Дек 10
Прежде всего, мы бы хотели пояснить, для тех, кто не знает, что такое hover-эффекты, мы немного объясним. Это различные виды эффектов (всплывающие подписи, подсказки, плавные переходы, трансформация, ротация, увеличение, смещение.) применяемые к элементам веб-сайта при наведении на них курсора мыши. Реализованы эти эффекты могут как с помощью различных плагинов jQuery, так и на чистом CSS3. Сегодня мы хотели бы поделиться некоторыми экспериментальными эффектами при наведении курсора мыши.
Модальное окно с эффектом перетаскивания на JS
Ноя 25
Прочитав заголовок вы подумаете, что ничего нового в этом уроке вы для себя не найдете, но не спешите делать выводы. В сегодняшнем уроке мы рассмотрим достаточно новый и экспериментальный эффект перетаскивания элементов, который наверняка вас удивит. Во время перетаскивания объектов мы будем менять их форму для добавления интерактивности. Одной из самых интересных вещей является вычисление прозрачности объекта в зависимости его позиции по оси x. Давайте посмотрим, что у нас получилось.
Навигация для сайта при помощи CSS3 и JS
Ноя 20
Несколько недель назад ресурс stripe.com запустил новый дизайн сайта. Ресурс получился, по нашему мнению, удивительным. Одна особенность,которая первая нам бросилась в глаза, это морфинг выпадающей навигации. Вместо того , чтобы скрывать, а затем показывать новый выпадающий "контейнер" пользователю предлагается переключается с одного элемента навигации к другому,при помощи анимации и плавного изменения контента во вкладке. Пользователю не нужно нажимать на навигацию, ему достаточно навести курсор.
Слайдер отзывов клиентов сайта на CSS и jQuery
Ноя 18
Отзывы клиентов для сайта который предоставляет услуги или рекламирует себя является очень важным элементов в структуре сайта. Данный раздел не стоит упускать из виду и подать его посетителям красиво и отзывчиво. В данном уроке мы рассмотрим как реализовать данную функцию. Мы рассмотрим замечательный способ создания простого модуля для отзывов клиентов, который можно легко встроить в ваш дизайн. Кроме этого мы предусмотрели вариант, когда пользователям необходимо посмотреть больше отзывов.
Эластичная навигация для сайта с помощью CSS3
Сен 26
Эластичность, сейчас, весьма популярная. Разнообразие девайсов заставляет разработчиков придумывать новые приемы для реализации навигации для разных объектов. В данном уроке мы рассмотрим процесс построения и стилизации замечательной эластической навигации для сайта. В демонстрации мы сделали несколько версий, для отображения в разных условиях, первая навигация это обычная кнопка вызывающая эффект анимации и меню, вторая версия будет реализованная для загрузки мультимедийных файлов.
Анимированные эффекты для сайта на WebGL
Сен 24
Сегодня мы хотим показать вам, как создать некоторые реалистичные эффекты искажения с использованием частиц шейдеров в WebGL. Идея заключается в том, чтобы добавить тонкое анимированное искажение статического изображения и какой-нибудь текст. Обратите внимание, что в данном эффекте используются пиксельные шейдера, работа которых заключается в запуске функций для каждого пикселя в видимой области. Для того чтобы реализовать задуманное, нам необходимо задать позиции для пиксельных шейдеров на нашем макете.
Загрузка ...