10 рецептов оригинальных hover-эффектов при помощи CSS3

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

Пожалуйста, обратите внимание, что эти примеры будут корректно работать только в современных браузерах, которые поддерживают свойства CSS3.
Читать далее «10 рецептов оригинальных hover-эффектов при помощи CSS3»

Минимум для понимания эффектов CSS‑фильтрации

Вольный перевод статьи: UNDERSTANDING CSS FILTER EFFECTS

CSS Filters были созданы для получения различных визуальных эффектов при применении их к элементам DOM — Document Object Model. Здесь мы обсудим историю создания фильтров, то, что они делают и как их применять. Так же рассмотрим влияние фильтров на производительность как на десктопах, так и на мобильных устройствах.
Читать далее «Минимум для понимания эффектов CSS‑фильтрации»

Тщательнее надо

А, ну-ка покрутите колесико «мышь», глядя на картинку ниже — круто! Надо всегда при фотосъёмке быть предельно внимательным. Зачем здесь такой визуальный эффект?

61 CSS-эффект для текста

Коллекция эффектов текста на HTML и CSS с мизерными вставками JavaScript: 3D, анимация, глюки, эффекты наведение, тени, вращение и печать. Живые примеры, код можно загрузить (*zip).

Читать далее «61 CSS-эффект для текста»

10 бесплатных и потрясающих CSS-инструментов для работы с изображениями

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

Рецепты наложения текста на изображения

Я с огромным наслаждением читаю статью Эрика Д. Кеннеди (Erik D. Kennedy) 7 Rules for Creating Gorgeous UI (Part 2). Четвёртое правило в ней гласит: Learn the methods of overlaying text on images — Изучите методы наложения текста на изображениях. Думаю, что здесь можно было бы детальнее обсудить эту тему, рассмотреть вопросы кодирования и обратить внимание на технику.
Читать далее «Рецепты наложения текста на изображения»

Принципы анимации для веба

Примечание переводчика: Представленный ниже материал содержит значительное количество технических терминов, при переводе которых могут возникнуть неточности. Если вы заметили опечатку, ошибку или неточность перевода — напишите нам, и мы оперативно всё исправим.

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