Как стать автором
Обновить

Комментарии 32

<< чисто на одном CSS
Чисто на одном CSS — это без картинок. А последние три анимации весьма интересны.
Хотя конечно, картинки тут не принципиальны. Просто заметил. :)
Имелось в виду, что без использования JS.
Понятное дело. Я имел ввиду, что если совсем убрать картинки можно демо сделать более технологичным, раскрывая и другие возможности css.
Можно картинки в base64, и забить в css:

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


Тогда будет на чистом css (хотя может тут есть свои подводные камни).
Вы бы ещё сказали что на чистом CSS — это без html.
Учитывая то, что на хабре уже сколько лет публикуются статьи о том, как сделать то, или иное без картинок на css, мой комментарий вполне логичен. Вам ссылки привести? С десяток статей таких точно было.
НЛО прилетело и опубликовало эту надпись здесь
Кстати, для задания формы круга лучше указывать радиус 50%, а не точные размеры.

.circles {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
Толковое замечание.
К сожалению, андроид девайсы версии младше 2.3 не понимают такого.
Надпись «hover effects» на картинках каким шрифтом сделана?
Lobster.
Спасибо. Очень понравился, вроде свободный — на google.com/webfonts/ есть, и даже кириллица присутствует.
Да, есть такое, забаянили его совсем.
Огромное спасибо. Почерпнул для себя новые знания и толчок к размышлениям. Обязательно использую где-нибудь в проекте Ваш пример.
вы сможете это использовать только в своем личном некоммерческом проекте, в котором вам насрать на пользователей с браузерами, не поддерживающими этот фокус. Ни один клиент, который платит за сайт, не согласится на такое.
Вообще, если не использовать несколько фоновых изображений, а просто затолкать внутрь элемента несколько дочерних (по одному на один фон, очевидно), то можно использовать и на вполне боевом сайте — ничего страшного, если часть пользователей увидят не анимацию открывания «дверей», а просто резкую смену изображения «дверей» на изображение автомобиля.
Вообще это, конечно, все интересно, но иногда, заходя на сайты использующие кучу подобных эффектов, поневоле вспоминаешь начало массового развития веба, когда заходишь на сайт а там МИГАЮЩИЕ КНОПОЧКИ ПЕРЕЛИВАЮЩИЕСЯ КАРТИНОЧКИ УЕЗЖАЮЩИЕ ТЕКСТЫ. Ненависть =)
Неуважение к пользователям IE можно понять, они это заслужили, но плевать на пользователей планшетов и смартфонов за что? Забудьте про hover. Он стал старым, морщинистым и фактически умер. Статья интересная, но, увы, полностью бесполезная.
Лично я узнал много нового и интересного.
А ещё сегодня вы узнали как получать проклятья в свой адресс, если будете использовать этот эффект на ссылочные элементы.
Для планшетов можно подгружать отдельный css, убирающий два верхних слоя, либо использовать @media (max-width), вариантов много, нет смысла отказываться от чего-то в угоду части пользователей.
А когда-то били за сайты во flash без html версии.
Автор, если переводите такую старую статью, то хотя бы позаботьтесь о том, чтобы люди знали про отмену префиксов для IE10. Поставьте в конце статьи вот этот абзац!

«Оригинал статьи был опубликован в ноябре 2011 г. Сообщение об отмене префиксов для многих CSS-свойств, включая transition и transform, в IE10 появилось после ее выхода. Поэтому мы оставили в статье авторский вариант кода, но для практических задач имейте в виду, что префикс -ms- для наиболее популярных свойств CSS3 — таких как transition,transform, animation, linear-gradient и т.п. — уже не нужен.»
Я и забыл об этом. Спасибо что напомнили, добавил.
Интересный материал. Единственное, что не написано, в каких браузерах будет работать. Пришлось потерять минуту времени и запустить пример во всех своих браузерах. Итог: FF и Chrome — роботает, IE9 — картинка меняется, но без анимации. Впринципе сойдет, но я все же пока буду на js такое анимировать, т.к. по моему опыту во всех браузерах должно быть одинаково, чтоб заказчик потом лишних вопросов не задавал.
У меня есть мнение что вместо того чтобы заморачиватся делая такие вещи в цсс, гораздо проще, в век когда подавляющее большинство использует броузеры легко переваривающие жскрипт, сделать например это на жквайри, который будет занимать всего пару строк когда, и при этом не будет необходимости городить кучу стилей без которых можно было вполне обойтись.
Как существенный плюс хочу отметить, что получая большую гибкость жертвуя лишь 92,6 кб мы «лишаемся счастья» иметь геммор с кроссброузерностью.
Первый мой компьютер мне отец подарил в 1990 году, когда в 1995 году он меня привел за компьютер в Спорт Комитете СПБ и я увидел интернет на экране монитора это было ЧТО-ТО. Через 3 года я стал главным администратором этого замечательного заведения. В это время я познал Кроватку и Диван это было что-то НЕЧТО и их разработчики еще тогда могли сделать фейсбук, но на первом фронте стояло общение… где теперь оно?.. Названивая Арту я пытался получить «Администратора». Сейчас когда я вижу, что со временем все технологии воплощаются в жизнь и каждая технология будет применена я рад, надо только время.
Думаю, что с повсеместным развитием тач устройств, не имеет смысла так заморачиваться с hover, который там не работает. Уверен, на любом сайте есть гораздо более актуальные задачи, которые действительно порадуют посетителей.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации

Истории