Практические примеры анимации и эффектов в CSS3
Суббота, 22 августа 2009
Не смог удержаться, и выкладываю здесь ссылку на пример эффектов и анимации средствами CSS3. Сами примеры и код опубликованы в уроке на net.tutsplus.com.
Поразило, что, например, меню, которое у меня реализовано с помощью Mootools и требует дополнительной загрузки js-библиотеки, в CSS3 реализуется с помощью всего пары строчек.
Да и остальные злободневные проблемы кодеров, которые пока не обходятся без магии JavaScript (динамические отражения, градиенты, анимация, прозрачность и т.д.), не требуют больших усилий.
Ах, да... Смотреть только в Safari4 и Google Chrome. В остальных пока не работает :(
C нетерпением ждём наступления будущего.
* * *
* * *
Понравилась статья?
Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:
* * *
Ну не должен CSS этим заниматься. Кто-нибудь может внятно объяснить, ДЛЯ чего все ЭТО?
Красиво. Жаль только, что применить это получится еще очень не скоро...
@Alinaki, а почему не должен?
Все идет к усовершенствованию технологий и поиску простых решений для ежедневных задач. Сколько бы JavaScript-кода пришлось бы писать, чтобы добиться таких эффектов? А тут пару строк.
Я конечно понимаю, что логика CSS (стилизация) и JavaScript (поведение) в примерах нарушена, но результаты впечатляют. Те для кого это будет сложно, просто не будут использовать. ИМХО.
>Красиво. Жаль только, что применить это получится еще очень не скоро...
Браузеры с поддержкой css3 — Safari4 и Google Chrome уже хорошо.
Что то многие блогеры пишут на темы html5 css3. Когда все будет?
Стандарт w3c принят?
Стандарт не принят и, в ближайшее время, не ожидается. Но разработка спецификаций идет полным ходом, а браузеры начинают поддерживать новые возможности.
Вот блоггеры и радуются :)
Это из разряда:"А вот в моём самописном браузере это работает", каков % людей, которые вообще слышали про Safari или Google Chrome? Общиё объём рынка ~1% ???
И ещё бесит то, что эти имбицилы никак не могут стандарт придумать, чтоб во всех браузерах всё одинаково отображалось, это всё равно что болты делать Не м10, м12, м14..., а м9.347, м13.817 и выдавать это за особое ноухау :)
Ну не все так плохо. Думаю, что поддержка CSS3 появится в следующих версиях Mozilla и Opera, разработчикам небезразличны такие вещи, даже до официального утверждения спецификации. Так что это, скорее, вопрос времени.
Вот только с IE оптимизма не будет. Восьмерка только-только научилась работать с CSS2.1, утвержденным 10 лет назад...
>> всё равно что болты делать Не м10, м12, м14..., а м9.347,
>> м13.817 и выдавать это за особое ноухау :)
Гг)) Правильно подметил, +1))
Что же, будем надеяться на лучшее. За Opera Software не заржавеет, они «как только, так и сразу», чего о мелкософте не скажешь... в любом случае поддержки CSS3 в IE осталось ждать не долго — не больше десяти лет... после принятия стандарта)))))
>>Ну не должен CSS этим заниматься. Кто-нибудь может внятно >>объяснить, ДЛЯ чего все ЭТО?
Должен еще как должен.
CSS по моему глубокому убеждению должен отвечать за представление и дизайн, проснитесь на дворе
Web2, который несет на сайт функциональность, зачем писать скрипты и прочее на без того нагруженный браузер, чтобы навести красоту — еффекты это часть дизайна , а значит ответсвенность CSS
Насчет поддержки CSS3 браузерами — не пройдет и года, а IE всех версий и мастей пусть живет сам, туда ему и дорога. Microsoft проспала интернет в 2000г — проспит и 2010!
Вот это же все замечательно! я буду ждать пока css3 будет вездесущим, а пока попробую на своем компе всякие штукенции потворить.
ИМХО Нужно продвигать эти технологии — стандарты придут позже, а браузеры тоже хотят чтобы ими пользовались
Как сделать наклонный градиент в webkit, как здесь? emfire.ru
Добрый вечер, подскажите, возможно ли реализовать на CSS 2 пропорциональный авто-ресайз фоновой картинки, как на этом сайте? www.alexandergusev.com
Это реализовано с помощью jQuery-скрипта Backstretch, который позиционирует и ресайзит фоновую картинку в зависимости от размеров окна браузера.
Страница плагина — srobbin.com/blog/jquery-p...ery-backstretch/
В CSS2 сделать нечто подобное достаточно проблемно. Вот, например, попытка — www.cssplay.co.uk/layouts/background2.html
Но есть возможность попробовать сделать нечто подобное в CSS3: с помощью автоматического background-size — ioconnor.wordpress.com/20...mages-with-css3/ или media queries — www.alistapart.com/articl...ckground-please/
rotos, помогите решить проблему. Как с помощью css3 можно сделать такую «раскрываемую» (закрываемую) и сохраняемую шапку как тут www.urealty.ru — что бы можно было сохранить место положение?
Это, по-моему, не проблема, а вопрос. В примере это реализовано на js. Чтобы сделать это на CSS3 придётся обзавестись временем. У меня его пока нет :(
Если появится — опубликую туториал в блоге.