Comments 32
<< чисто на одном CSS
Чисто на одном CSS — это без картинок. А последние три анимации весьма интересны.
Чисто на одном CSS — это без картинок. А последние три анимации весьма интересны.
Кстати, для задания формы круга лучше указывать радиус 50%, а не точные размеры.
.circles {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
Надпись «hover effects» на картинках каким шрифтом сделана?
Lobster.
Спасибо. Очень понравился, вроде свободный — на google.com/webfonts/ есть, и даже кириллица присутствует.
Есть мнение что он уже успел стать моветоном — 5in5nyc.com/2012/05/31/dear-startups-lobster-is-the-new-comic-sans/
Огромное спасибо. Почерпнул для себя новые знания и толчок к размышлениям. Обязательно использую где-нибудь в проекте Ваш пример.
вы сможете это использовать только в своем личном некоммерческом проекте, в котором вам насрать на пользователей с браузерами, не поддерживающими этот фокус. Ни один клиент, который платит за сайт, не согласится на такое.
Вообще, если не использовать несколько фоновых изображений, а просто затолкать внутрь элемента несколько дочерних (по одному на один фон, очевидно), то можно использовать и на вполне боевом сайте — ничего страшного, если часть пользователей увидят не анимацию открывания «дверей», а просто резкую смену изображения «дверей» на изображение автомобиля.
Вообще это, конечно, все интересно, но иногда, заходя на сайты использующие кучу подобных эффектов, поневоле вспоминаешь начало массового развития веба, когда заходишь на сайт а там МИГАЮЩИЕ КНОПОЧКИ ПЕРЕЛИВАЮЩИЕСЯ КАРТИНОЧКИ УЕЗЖАЮЩИЕ ТЕКСТЫ. Ненависть =)
Неуважение к пользователям IE можно понять, они это заслужили, но плевать на пользователей планшетов и смартфонов за что? Забудьте про hover. Он стал старым, морщинистым и фактически умер. Статья интересная, но, увы, полностью бесполезная.
Автор, если переводите такую старую статью, то хотя бы позаботьтесь о том, чтобы люди знали про отмену префиксов для IE10. Поставьте в конце статьи вот этот абзац!
«Оригинал статьи был опубликован в ноябре 2011 г. Сообщение об отмене префиксов для многих CSS-свойств, включая transition и transform, в IE10 появилось после ее выхода. Поэтому мы оставили в статье авторский вариант кода, но для практических задач имейте в виду, что префикс -ms- для наиболее популярных свойств CSS3 — таких как transition,transform, animation, linear-gradient и т.п. — уже не нужен.»
«Оригинал статьи был опубликован в ноябре 2011 г. Сообщение об отмене префиксов для многих CSS-свойств, включая transition и transform, в IE10 появилось после ее выхода. Поэтому мы оставили в статье авторский вариант кода, но для практических задач имейте в виду, что префикс -ms- для наиболее популярных свойств CSS3 — таких как transition,transform, animation, linear-gradient и т.п. — уже не нужен.»
Интересный материал. Единственное, что не написано, в каких браузерах будет работать. Пришлось потерять минуту времени и запустить пример во всех своих браузерах. Итог: FF и Chrome — роботает, IE9 — картинка меняется, но без анимации. Впринципе сойдет, но я все же пока буду на js такое анимировать, т.к. по моему опыту во всех браузерах должно быть одинаково, чтоб заказчик потом лишних вопросов не задавал.
У меня есть мнение что вместо того чтобы заморачиватся делая такие вещи в цсс, гораздо проще, в век когда подавляющее большинство использует броузеры легко переваривающие жскрипт, сделать например это на жквайри, который будет занимать всего пару строк когда, и при этом не будет необходимости городить кучу стилей без которых можно было вполне обойтись.
Первый мой компьютер мне отец подарил в 1990 году, когда в 1995 году он меня привел за компьютер в Спорт Комитете СПБ и я увидел интернет на экране монитора это было ЧТО-ТО. Через 3 года я стал главным администратором этого замечательного заведения. В это время я познал Кроватку и Диван это было что-то НЕЧТО и их разработчики еще тогда могли сделать фейсбук, но на первом фронте стояло общение… где теперь оно?.. Названивая Арту я пытался получить «Администратора». Сейчас когда я вижу, что со временем все технологии воплощаются в жизнь и каждая технология будет применена я рад, надо только время.
Думаю, что с повсеместным развитием тач устройств, не имеет смысла так заморачиваться с hover, который там не работает. Уверен, на любом сайте есть гораздо более актуальные задачи, которые действительно порадуют посетителей.
Sign up to leave a comment.
Пять интересных эффектов при наведении с использованием нескольких фоновых изображений