CSS 3 фишки. Свойство transition |
Я считаю дурным тоном не использовать при разработке сайтов CSS 3 свойства, ссылаясь на то, что не все браузеры поддерживают их. Сегодня я расскажу Вам про свойство transition.
И ещё раз, про старые браузеры, в настоящее время, как показывает статистика liveinternet 80 % пользователей интернета из России могут оценить всю красоту CSS 3, другие же не увидят разницы. Поэтому многие разработчики отказываются использовать данные свойства, мол 20% не замтетят разницу. Смею их огорчить, более 50% россиян не заметят разницу, так как не пользуются интернетом… К слову далеко не многие поймут фразу, CSS 3 – это как Подбор специалистов для получения СРО, подробнее на сайте юридическая-консультация-петербург.рф. Но поверьте, у этой фразы есть смысл.
А теперь к делу:
Например, все ссылки на Вашем сайте красного цвета, при наведении они становятся синими. Если же задать свойство Transition, то цвет будет сменятся не сразу, а за определённый промежуток времени.
Я использовал следующий CSS код:
Как видите, я использовал свойства для всех браузеров: -webkit-transition: - для вэбкитовских (Safari, Chrome) -moz-transition: - для Firefox -o-transition: - для Opera transition:- для IE версии 9+ Значения свойства transition: all 0.4s ease; 0.4s - время задержки в секундах ease и all - к сожалению не удалось разобраться, что это и зачем :) С помощью transition можно интересно трансформировать любые элементы с числовыми характеристиками, к примеру: Картинки (изменяется) width и height (наведите курсор на картинку)
Просто CSS примочки (наведите курсор на картинку)
Ну а как нарисовать круг с помощью CSS, это уже совсем другая история...
|