Практические примеры анимации и эффектов в CSS3

Иллюстрация к статье «Практические примеры анимации и эффектов в CSS3»

Не смог удержаться, и выкладываю здесь ссылку на пример эффектов и анимации средствами CSS3. Сами примеры и код опубликованы в уроке на net.tutsplus.com.

Поразило, что, например, меню, которое у меня реализовано с помощью Mootools и требует дополнительной загрузки js-библиотеки, в CSS3 реализуется с помощью всего пары строчек.

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

Ах, да... Смотреть только в Safari4 и Google Chrome. В остальных пока не работает :(

C нетерпением ждём наступления будущего.

* * *

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 17

  1. Alinaki, 22.08.2009 в 22:39

    Ну не должен CSS этим заниматься. Кто-нибудь может внятно объяснить, ДЛЯ чего все ЭТО?

    Ответить

  2. Dimox, 23.08.2009 в 12:20

    Красиво. Жаль только, что применить это получится еще очень не скоро...

    Ответить

  3. rotor, 23.08.2009 в 13:00

    @Alinaki, а почему не должен?

    Все идет к усовершенствованию технологий и поиску простых решений для ежедневных задач. Сколько бы JavaScript-кода пришлось бы писать, чтобы добиться таких эффектов? А тут пару строк.

    Я конечно понимаю, что логика CSS (стилизация) и JavaScript (поведение) в примерах нарушена, но результаты впечатляют. Те для кого это будет сложно, просто не будут использовать. ИМХО.

    Ответить

  4. PHP разработчик, 25.08.2009 в 11:19

    >Красиво. Жаль только, что применить это получится еще очень не скоро...

    Браузеры с поддержкой css3 — Safari4 и Google Chrome уже хорошо.

    Что то многие блогеры пишут на темы html5 css3. Когда все будет?

    Стандарт w3c принят?

    Ответить

  5. rotor, 25.08.2009 в 11:40

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

    Вот блоггеры и радуются :)

    Ответить

  6. Lesso, 26.08.2009 в 8:36

    Это из разряда:"А вот в моём самописном браузере это работает", каков % людей, которые вообще слышали про Safari или Google Chrome? Общиё объём рынка ~1% ???

    И ещё бесит то, что эти имбицилы никак не могут стандарт придумать, чтоб во всех браузерах всё одинаково отображалось, это всё равно что болты делать Не м10, м12, м14..., а м9.347, м13.817 и выдавать это за особое ноухау :)

    Ответить

  7. rotor, 26.08.2009 в 9:10

    Ну не все так плохо. Думаю, что поддержка CSS3 появится в следующих версиях Mozilla и Opera, разработчикам небезразличны такие вещи, даже до официального утверждения спецификации. Так что это, скорее, вопрос времени.

    Вот только с IE оптимизма не будет. Восьмерка только-только научилась работать с CSS2.1, утвержденным 10 лет назад...

    Ответить

  8. velezh, 02.09.2009 в 16:02

    >> всё равно что болты делать Не м10, м12, м14..., а м9.347,

    >> м13.817 и выдавать это за особое ноухау :)

    Гг)) Правильно подметил, +1))

    Что же, будем надеяться на лучшее. За Opera Software не заржавеет, они «как только, так и сразу», чего о мелкософте не скажешь... в любом случае поддержки CSS3 в IE осталось ждать не долго — не больше десяти лет... после принятия стандарта)))))

    Ответить

  9. alex, 13.09.2009 в 18:19

    >>Ну не должен CSS этим заниматься. Кто-нибудь может внятно >>объяснить, ДЛЯ чего все ЭТО?

    Должен еще как должен.

    CSS по моему глубокому убеждению должен отвечать за представление и дизайн, проснитесь на дворе

    Web2, который несет на сайт функциональность, зачем писать скрипты и прочее на без того нагруженный браузер, чтобы навести красоту — еффекты это часть дизайна , а значит ответсвенность CSS

    Насчет поддержки CSS3 браузерами — не пройдет и года, а IE всех версий и мастей пусть живет сам, туда ему и дорога. Microsoft проспала интернет в 2000г — проспит и 2010!

    Ответить

  10. zbrush, 10.04.2010 в 10:19

    Вот это же все замечательно! я буду ждать пока css3 будет вездесущим, а пока попробую на своем компе всякие штукенции потворить.

    Ответить

  11. TRSteep, 20.05.2010 в 21:16

    ИМХО Нужно продвигать эти технологии — стандарты придут позже, а браузеры тоже хотят чтобы ими пользовались

    Ответить

  12. john, 11.07.2010 в 15:52

    Как сделать наклонный градиент в webkit, как здесь? emfire.ru

    Ответить

  13. salt, 07.08.2010 в 20:37

    Добрый вечер, подскажите, возможно ли реализовать на CSS 2 пропорциональный авто-ресайз фоновой картинки, как на этом сайте? www.alexandergusev.com

    Ответить

  14. Miki, 12.10.2010 в 22:08

    rotos, помогите решить проблему. Как с помощью css3 можно сделать такую «раскрываемую» (закрываемую) и сохраняемую шапку как тут www.urealty.ru — что бы можно было сохранить место положение?

    Ответить

    • rotor, 14.10.2010 в 22:10

      Это, по-моему, не проблема, а вопрос. В примере это реализовано на js. Чтобы сделать это на CSS3 придётся обзавестись временем. У меня его пока нет :(

      Если появится — опубликую туториал в блоге.

      Ответить

  15. CSS3-анимация вместо эффектов jQuery | white wind CSS3-анимация вместо эффектов jQuery |, 09.06.2012 в 13:55

    [...] Практические примеры анимации и эффектов в CSS3 [...]

    Ответить

Есть что сказать?