Пять интересных эффектов при наведении с использованием нескольких фоновых изображений

[nick4fake]

<< чисто на одном CSS
Чисто на одном CSS — это без картинок. А последние три анимации весьма интересны.

[nick4fake]

Хотя конечно, картинки тут не принципиальны. Просто заметил. :)

[nabliker]

Имелось в виду, что без использования JS.

[nick4fake]

Понятное дело. Я имел ввиду, что если совсем убрать картинки можно демо сделать более технологичным, раскрывая и другие возможности css.

[Weageoo]

Можно картинки в base64, и забить в css:

html { background: white url(data:image/png;base64, ...); }

Тогда будет на чистом css (хотя может тут есть свои подводные камни).

[anmi]

Вы бы ещё сказали что на чистом CSS — это без html.

[nick4fake]

Учитывая то, что на хабре уже сколько лет публикуются статьи о том, как сделать то, или иное без картинок на css, мой комментарий вполне логичен. Вам ссылки привести? С десяток статей таких точно было.

[hemper]

Кстати, для задания формы круга лучше указывать радиус 50%, а не точные размеры.

.circles {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

[nabliker]

Толковое замечание.

[apollonin]

К сожалению, андроид девайсы версии младше 2.3 не понимают такого.

[Doktor_Gradus]

Надпись «hover effects» на картинках каким шрифтом сделана?

[nabliker]

Lobster.

[Doktor_Gradus]

Спасибо. Очень понравился, вроде свободный — на google.com/webfonts/ есть, и даже кириллица присутствует.

[bytecode_rus]

Есть мнение что он уже успел стать моветоном — 5in5nyc.com/2012/05/31/dear-startups-lobster-is-the-new-comic-sans/

[nabliker]

Да, есть такое, забаянили его совсем.

[ironviper]

Огромное спасибо. Почерпнул для себя новые знания и толчок к размышлениям. Обязательно использую где-нибудь в проекте Ваш пример.

[mishael]

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

[inborn_killer]

Вообще, если не использовать несколько фоновых изображений, а просто затолкать внутрь элемента несколько дочерних (по одному на один фон, очевидно), то можно использовать и на вполне боевом сайте — ничего страшного, если часть пользователей увидят не анимацию открывания «дверей», а просто резкую смену изображения «дверей» на изображение автомобиля.

[xinn]

Вообще это, конечно, все интересно, но иногда, заходя на сайты использующие кучу подобных эффектов, поневоле вспоминаешь начало массового развития веба, когда заходишь на сайт а там МИГАЮЩИЕ КНОПОЧКИ ПЕРЕЛИВАЮЩИЕСЯ КАРТИНОЧКИ УЕЗЖАЮЩИЕ ТЕКСТЫ. Ненависть =)

[Burbunduk]

Неуважение к пользователям IE можно понять, они это заслужили, но плевать на пользователей планшетов и смартфонов за что? Забудьте про hover. Он стал старым, морщинистым и фактически умер. Статья интересная, но, увы, полностью бесполезная.

[StarMarine]

Лично я узнал много нового и интересного.

[Burbunduk]

А ещё сегодня вы узнали как получать проклятья в свой адресс, если будете использовать этот эффект на ссылочные элементы.

[xbreaker]

Для планшетов можно подгружать отдельный css, убирающий два верхних слоя, либо использовать @media (max-width), вариантов много, нет смысла отказываться от чего-то в угоду части пользователей.

[Xlab]

А когда-то били за сайты во flash без html версии.

[psywalker]

Автор, если переводите такую старую статью, то хотя бы позаботьтесь о том, чтобы люди знали про отмену префиксов для IE10. Поставьте в конце статьи вот этот абзац!

«Оригинал статьи был опубликован в ноябре 2011 г. Сообщение об отмене префиксов для многих CSS-свойств, включая transition и transform, в IE10 появилось после ее выхода. Поэтому мы оставили в статье авторский вариант кода, но для практических задач имейте в виду, что префикс -ms- для наиболее популярных свойств CSS3 — таких как transition,transform, animation, linear-gradient и т.п. — уже не нужен.»

[nabliker]

Я и забыл об этом. Спасибо что напомнили, добавил.

[humblegenius]

Интересный материал. Единственное, что не написано, в каких браузерах будет работать. Пришлось потерять минуту времени и запустить пример во всех своих браузерах. Итог: FF и Chrome — роботает, IE9 — картинка меняется, но без анимации. Впринципе сойдет, но я все же пока буду на js такое анимировать, т.к. по моему опыту во всех браузерах должно быть одинаково, чтоб заказчик потом лишних вопросов не задавал.

[Yan_Alex]

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

[Yan_Alex]

Как существенный плюс хочу отметить, что получая большую гибкость жертвуя лишь 92,6 кб мы «лишаемся счастья» иметь геммор с кроссброузерностью.

[gorlov]

Первый мой компьютер мне отец подарил в 1990 году, когда в 1995 году он меня привел за компьютер в Спорт Комитете СПБ и я увидел интернет на экране монитора это было ЧТО-ТО. Через 3 года я стал главным администратором этого замечательного заведения. В это время я познал Кроватку и Диван это было что-то НЕЧТО и их разработчики еще тогда могли сделать фейсбук, но на первом фронте стояло общение… где теперь оно?.. Названивая Арту я пытался получить «Администратора». Сейчас когда я вижу, что со временем все технологии воплощаются в жизнь и каждая технология будет применена я рад, надо только время.

[Hellcunt]

Думаю, что с повсеместным развитием тач устройств, не имеет смысла так заморачиваться с hover, который там не работает. Уверен, на любом сайте есть гораздо более актуальные задачи, которые действительно порадуют посетителей.