Создаем оригинальные hover-эффекты при помощи CSS3

[@Mushtat]

Девятый и десятый примеры понравились.
В десятом такое ощущение, что приближает к надписи на коже модели :)

[@equand]

Жаль в хроме у меня глючит :( (14.0.835.202 m)

[@webmasters_by]

У меня в Chrome 15.0.874.106 m глюков замечено не было

[@snakeunsoft]

16.0.912.21 dev-m — тоже глючит (

[@mrxak]

такая же версия — глюков не замечено…

[@equand]

15.0.874.106 m
Глючит страшно…
Текст вверху демки постоянно скачет.
Ховеры мигают…

[@webmasters_by]

странно, у меня в Хроме только 6-й пример притормаживает, а так никакой разницы в сравнении с тем же Firefox

[@ennui]

15.0.874.106 m
На 9ом примере появляются артефакты в виде закрашенных треугольников и диагональной чёрной линии.

[@Artqookie]

Тоже самое.

[@XBR]

Такой же хром и всё нормально.

[@chaZmich]

15.0.874.106 m Подтверждаю — все отлично

[@TEHEK]

tympanus.net/Tutorials/OriginalHoverEffects/index2.html

17.0.928.0 dev-m тоже глючит. В частности, если во время анимации навести мышь на то место, где должна оказаться ссылка, анимация «моргнет», показав на долю секунды оригинальное изображение.

А так, забавный эффект.

[@Sytrus]

FF 7.01 — все круто. Понравилось, как и предыдущий топик. И никакого flash/js.

[@faiwer]

Понравились 5 и 10. Вопрос — только у меня(12, Ubuntu 11.04) в опере зависает или она, действительно, слишком медленно обрабатывает css-анимации?

[@GavriKos]

Опера, вин7 — полет нормальный, все анимации работают.

[@moscow_beast]

Прикольно. Но на практике (у меня во всяком случае), в верстке для ПК CSS3 не используется с оглядкой на деревянные браузеры. А на планшетах где можно разгуляться, так как браузеры таки современные, событие hover бессмысленно.
Впрочем для фокуса самое то.

[@bigdogsru]

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

[@MAXH0]

Имхо, во сто раз прославленном уже, предыдущем топике сделано вернее — текст виден изначально, а на CSS3 работают эффекты.
В IE выглядит коряво, но читается. А здесь текст изначально не виден.

[@Brun]

Мне статья понравилась, но оригинальная, которую Вы не указали
tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/
И почему то подаёте её как свою.
Укажите оригинал и за перевод с меня плюсик тогда.

[@webmasters_by]

Я не выдавал данную статью за свою, я оформил ПЕРЕВОД по всем правилам Хабра, ссылку на оригинал Вы можете увидеть в конце статьи.

[@Brun]

Ссылки не видел. Теперь вижу что есть.
За перевод +

[@Isis]

Очередь здорово! Добавляю ваш сайт в закладки.

[@bigdogsru]

Приходится в закладки добавлять… RSS на сайте нету :-(

[@qwertysx]

rss

[@Daedmen]

Как-то больно сильно тормозит.

[@alfedorov]

Сделайте рсс подписку на сайте :/
Вторая полезная статья за неделю от вас.

[@olegbarabanov]

У кого глюкает в Chrome попробуйте в адресной строке набрать
about: flags
и в списке повключать аппаратные ускорения. Некоторым помогает.

CSS Transition+Transform = это жесткая штука — сам как полгода юзаю их из-за простоты и удобности.
Из плюсов — это отработка неблокируемая. Ну про transform не буду говорить — он работает с отрендеренным элементом. Соответственно если вы попробуете картинку размером 1024х768 повернуть на 90 градусов — она то повернется(т.е. станет 768х1024), но вот занимаемый блок так и останется — 1024х768. Это не баг — это особенность, для ускорения рендеринга.
Так же крайне отвратительно работает, при использовании HTML5 видео. Если вы встроите видяшку и над этой видяшкой будет какой-то элемент двигаться (банально при rotate уголочком заденет это видео)--- дичайшие тормоза всей анимации и всего браузера. В самых последних билдах не смотрел это — может уже и норм. Если интересно — могу список проблем написать — чтобы при проектировании — четко знать, какие проблемы могут появиться.

[@EvilGen]

«Пожалуйста, обратите внимание...» — многие на хабре сидят по 6-м осликом :), любопытно узнать?

[@olegbarabanov]

Ну для сайтов я сам считаю что рано юзать данную фичу. А вот для веб-приложений — вполне.

[@EvilGen]

Не уверен, что подобные фишки нужны веб-приложениям… функциональность прежде всего, разве нет?

[@shurman]

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

[@maddogrts]

Охренеть, круто!

[@shurman]

Demo 8 выглядит как-то неестественно, отскакивает по каким-то неземным законам, а в целом впечатляет.

[@winbackgo]

Радует что такие эффекты уже сейчас можно внедрять такими простыми средствами не прибегая к js. В недобраузерах, без эффектов, тоже работает.

[@Dare]

Ммм… А кто нибудь знает что это за фотосет в примерах?
Сылочку бы на фулсайз.

[@Mid]

Люто плюсую. Ещё пара таких топиков и я начну класть на не поддерживающие CSS3 браузеры.

[@Finom]

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

[@dazed]

Думаю хватит того чтобы основной замысел (картинка+текст) был виден без особых спец эфектов.
Т.к. кто сидит на старых IE им всеравно побоку.

[@NikitaTratorov]

Динамично.
Вот, пока некоторые сидят… товарищ плотную взялся за CSS3 и посмотрите чего добился! Да пошли они, эти старые браузеры. Если и дальше заниматься совместимостью с ними, то пользователи никогда с них не слезут.

[@Gafs]

Девушка на фотках какой-то неправильной, неклассической красоты, но взгляд притягивает огого.
Аж тяжело на собственно эффектах сконцентрироваться.

[@s4z]

Ребят, а чего ссылку на источник не ставите?
tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/
Я не являюсь автором сего контента, но ведь не красиво так делать.

[@s4z]

А, простите глупого, не заметил.

[@MAXH0]

Ага! И один заминусованный коммент вверху тоже ;)))

[@spmbt]

Судя по тому, что в каждом таком топике появляется по 1-2-3 гневных сообщения типа «Почему не указываете оригинал статьи, гады?» (например, в переводе Mary Lou тоже; ищутся по минусам в оценках), в способе отображения автора перевода на Хабре явно что-то не так.