Comments 47
Девятый и десятый примеры понравились.
В десятом такое ощущение, что приближает к надписи на коже модели :)
В десятом такое ощущение, что приближает к надписи на коже модели :)
Жаль в хроме у меня глючит :( (14.0.835.202 m)
У меня в Chrome 15.0.874.106 m глюков замечено не было
tympanus.net/Tutorials/OriginalHoverEffects/index2.html
17.0.928.0 dev-m тоже глючит. В частности, если во время анимации навести мышь на то место, где должна оказаться ссылка, анимация «моргнет», показав на долю секунды оригинальное изображение.
А так, забавный эффект.
17.0.928.0 dev-m тоже глючит. В частности, если во время анимации навести мышь на то место, где должна оказаться ссылка, анимация «моргнет», показав на долю секунды оригинальное изображение.
А так, забавный эффект.
UFO just landed and posted this here
FF 7.01 — все круто. Понравилось, как и предыдущий топик. И никакого flash/js.
Понравились 5 и 10. Вопрос — только у меня(12, Ubuntu 11.04) в опере зависает или она, действительно, слишком медленно обрабатывает css-анимации?
Прикольно. Но на практике (у меня во всяком случае), в верстке для ПК CSS3 не используется с оглядкой на деревянные браузеры. А на планшетах где можно разгуляться, так как браузеры таки современные, событие hover бессмысленно.
Впрочем для фокуса самое то.
Впрочем для фокуса самое то.
Можно с помощью условных комментариев подгружать скрипты для деревянных браузеров — пусть не с такими клевыми эффектами, но чтоб работало.
Имхо, во сто раз прославленном уже, предыдущем топике сделано вернее — текст виден изначально, а на CSS3 работают эффекты.
В IE выглядит коряво, но читается. А здесь текст изначально не виден.
В IE выглядит коряво, но читается. А здесь текст изначально не виден.
Мне статья понравилась, но оригинальная, которую Вы не указали
tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/
И почему то подаёте её как свою.
Укажите оригинал и за перевод с меня плюсик тогда.
tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/
И почему то подаёте её как свою.
Укажите оригинал и за перевод с меня плюсик тогда.
Очередь здорово! Добавляю ваш сайт в закладки.
UFO just landed and posted this here
Как-то больно сильно тормозит.
Сделайте рсс подписку на сайте :/
Вторая полезная статья за неделю от вас.
Вторая полезная статья за неделю от вас.
У кого глюкает в Chrome попробуйте в адресной строке набрать
about: flags
и в списке повключать аппаратные ускорения. Некоторым помогает.
CSS Transition+Transform = это жесткая штука — сам как полгода юзаю их из-за простоты и удобности.
Из плюсов — это отработка неблокируемая. Ну про transform не буду говорить — он работает с отрендеренным элементом. Соответственно если вы попробуете картинку размером 1024х768 повернуть на 90 градусов — она то повернется(т.е. станет 768х1024), но вот занимаемый блок так и останется — 1024х768. Это не баг — это особенность, для ускорения рендеринга.
Так же крайне отвратительно работает, при использовании HTML5 видео. Если вы встроите видяшку и над этой видяшкой будет какой-то элемент двигаться (банально при rotate уголочком заденет это видео)--- дичайшие тормоза всей анимации и всего браузера. В самых последних билдах не смотрел это — может уже и норм. Если интересно — могу список проблем написать — чтобы при проектировании — четко знать, какие проблемы могут появиться.
about: flags
и в списке повключать аппаратные ускорения. Некоторым помогает.
CSS Transition+Transform = это жесткая штука — сам как полгода юзаю их из-за простоты и удобности.
Из плюсов — это отработка неблокируемая. Ну про transform не буду говорить — он работает с отрендеренным элементом. Соответственно если вы попробуете картинку размером 1024х768 повернуть на 90 градусов — она то повернется(т.е. станет 768х1024), но вот занимаемый блок так и останется — 1024х768. Это не баг — это особенность, для ускорения рендеринга.
Так же крайне отвратительно работает, при использовании HTML5 видео. Если вы встроите видяшку и над этой видяшкой будет какой-то элемент двигаться (банально при rotate уголочком заденет это видео)--- дичайшие тормоза всей анимации и всего браузера. В самых последних билдах не смотрел это — может уже и норм. Если интересно — могу список проблем написать — чтобы при проектировании — четко знать, какие проблемы могут появиться.
«Пожалуйста, обратите внимание...» — многие на хабре сидят по 6-м осликом :), любопытно узнать?
Охренеть, круто!
Demo 8 выглядит как-то неестественно, отскакивает по каким-то неземным законам, а в целом впечатляет.
Радует что такие эффекты уже сейчас можно внедрять такими простыми средствами не прибегая к js. В недобраузерах, без эффектов, тоже работает.
Ммм… А кто нибудь знает что это за фотосет в примерах?
Сылочку бы на фулсайз.
Сылочку бы на фулсайз.
Люто плюсую. Ещё пара таких топиков и я начну класть на не поддерживающие CSS3 браузеры.
Это безусловно круто, но, на сегодняшний день, бессмысленно в не-гиковских проектах. Было бы очень кстати иметь какой-нибудь флеш плагин, добавляющий поддержку этих анимаций в старых браузерах.
Динамично.
Вот, пока некоторые сидят… товарищ плотную взялся за CSS3 и посмотрите чего добился! Да пошли они, эти старые браузеры. Если и дальше заниматься совместимостью с ними, то пользователи никогда с них не слезут.
Вот, пока некоторые сидят… товарищ плотную взялся за CSS3 и посмотрите чего добился! Да пошли они, эти старые браузеры. Если и дальше заниматься совместимостью с ними, то пользователи никогда с них не слезут.
Девушка на фотках какой-то неправильной, неклассической красоты, но взгляд притягивает огого.
Аж тяжело на собственно эффектах сконцентрироваться.
Аж тяжело на собственно эффектах сконцентрироваться.
Ребят, а чего ссылку на источник не ставите?
tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/
Я не являюсь автором сего контента, но ведь не красиво так делать.
tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/
Я не являюсь автором сего контента, но ведь не красиво так делать.
Судя по тому, что в каждом таком топике появляется по 1-2-3 гневных сообщения типа «Почему не указываете оригинал статьи, гады?» (например, в переводе Mary Lou тоже; ищутся по минусам в оценках), в способе отображения автора перевода на Хабре явно что-то не так.
Sign up to leave a comment.
Создаем оригинальные hover-эффекты при помощи CSS3