Больше, больше эффектов c CSS3!
Суббота, 7 ноября 2009
Сейчас наблюдается просто какая-то повальная увлечённость анимацией и эффектами CSS3, сравнимая разве что с вирусной эпидемией в оффлайне. И пусть не все браузеры пока еще обеспечили поддержку этих свойств, пробовать, создавать что-то и тренироваться разработчики могут уже сейчас.
А чтобы некоторые интересные штуковины и туториалы не прошли мимо, я собрал их в одном месте для вас (и для себя):
- Поддержка различными браузерами свойств CSS3.
- 11 примеров использования CSS3 — перевод статьи с сайта nettuts.com на Хабре. Наглядное сравнение возможностей CSS3 и CSS2.1 + JavaScript.
- Всё крутится и летает — очень оригинальные примеры анимации на CSS3.
- Создание кнопок в CSS3 с тенями, вдавленным текстом, закруглениями и градиентами.
- 12 полезных советов и приёмов в CSS3 — особо интересны колоночный контент, различные языки (+ направление текста) и множественные фоны. Остальное для закрепления ранее известных техник.
- Эффект вдавленного текста, модный сейчас на западных сайтах. Лучшее применение свойства
text-shadow. - Онлайн CSS3-генератор для простых свойств, применимых к блокам и тексту.
- Небольшие хитроcти от csstricks.com. Красивый эффект анимированного задымлённого текста. Там же пример с множественным фоном для навигации — будущая замена для Sliding Doors.
- Пуленепробиваемый синтаксис для @font-face.
- 3D-трансформации и CSS-анимация в Safari. Базовые понятия.
- Табы для блоков с меняющимся контентом на CSS3 без JavaScript. Отличный приём, но ему явно не хватает фиксации таба кликом, примерно такой, какую реализует в своих меню маг CSS Стю Николс.
- Чит-лист CSS3.
Напомню, что всё это работает в Google Chrome 3 и Safari 4.
Дополните список?
UPD:
* * *
Понравилась статья?
Тогда помогите мне сделать её доступной для других, или будьте в курсе событий:
- подпишитесь на обновления по RSS
- получайте новые статьи на E-mail
- добавьте в Twitter: Больше, больше эффектов c CSS3!
- добавьте статью в закладки:
* * *
Еще несколько полезных эффектов CSS 2
temza.com/2009/11/09/css-properties/
Приёмы, конечно, полезные, но не совсем в тему поста.
Оп-па, а я и не знал...
Так, краем уха слышал что-то о 3-ем цссе.
Спасибо за такой обзорочный пост, очень полезный.
Есть сайт интересный, в котором можно точно узнать что поддерживает твое железо а что нет, + какие браузеры и что в них есть как из HTM 5 так и из CSS 3
www.findmebyip.com
P.S. можно узнать о новых тегах)
[...] Евгений Якимович сделал интересную подборку Больше, больше эффектов c CSS3! [...]
Понравилось с крутящимся текстом, только не все браузеры поддерживаюи эти тонкости css
[...] Евгений Якимович сделал интересную подборку Больше, больше эффектов c CSS3! [...]
Дополните список?
Opera 10.50 pre-Alpha с префиксом -o-
Еще не всё поддерживает, но уже работает:
— -o-transform: rotate (_deg);
— border-radius: _px _px _px _px;
Класс только что-то поддержка браузеров не порадовала
Вот еще статистика поддержки css3 браузерами
CSS3 Properties
www.findmebyip.com/litmus
ИЕ, опера вообще хлам. Частично и FF не поддерживает. Добавлю пока в закл. может через год пригодится.
Спасибо автору за подборку. Будем входить в css3.
А есть вообще статистика когда реально будет в полном объеме поддерживаться css3 всеми популярными браузерами. Начиная с ие6.
Год-два-три сколько?
шучу .)
эффекты все конечно супер, но за наши доблестные браузеры обидно... Даже мой любимый файрфоксик не справился... По-моему только Chrome на 100% проходит acid 3 тест?
[...] Больше, больше эффектов c CSS3! — Отличная и практически исчерпывающая подборка [...]