CSS3 в действие! Експерименти, техники и упражнения за луди

ВНИМАНИЕ!!! Ако ползваш Internet Explorer прескочи този пост или мини на Google Chrome. За потребителите с Firefox … и вие няма да успеете да видите 100% от нещата както трябва, за това няма да е зле да поразцъкате също на Google Chrome.


И така… да си дойдем на думата… От доста време гледам из нета всякакви експерименти и заигравки с CSS3 и реших да подбера най-интересните в този пост. Ето ги и тях…

Логот на Опера само с CSS3
В сравнение с отаналите това е просто елемнтарно :D

логото на Opera само с CSS



iPhone само с CSS3 без нито една готова картинка
Нещо наистина безсмислено или инче казано упражнение за луди, но си струва да се види..

Часвниците работят и май са точни дори



3D куб с CSS3
това не са картинки..
страните на куба са блокови елементи и текста си е текст



Анимирано разгръщане на страници с CSS3
Да! Това не е флаш! Това вече може да се прави само с CSS3



3D стая с CSS3
Ако щете вярвайте но и това не е флаш. ТУК има обяснение как е направето… не изглежда толкова сложно. Нали? :)



Кутийка от Кока-Кола, която се върти при скролване
За това вече наистина трябват железни нерви



„Късометражен филм“ само с CSS3
Това, трябва да стресне всички флаш дизайнери ;) лично аз ако мога да правя банери само с CSS веднага си изтривам флаша :D



Слънчевата система с CSS3
На фона на останалите неща сигурно ще ви се види просто…




Ще продължавам да ъпдейвам поста с още интересни неща които ми попаднат. Ако някой има предложение за още подобни извращения нека сподели :)

Сподели:
Edno23 Favit Svejo Twitter Facebook Google Buzz Delicious Google Bookmarks Digg

Етикети: , , , , , ,

17 коментара по “CSS3 в действие! Експерименти, техники и упражнения за луди”

  1. FEA казва:

    Много интересно , още повече ,че по този начин дори анимациите и ефектите стават СЕО френдли, докато флаш-а не е и никога няма да стане . Интересни примери поздрави за подбора.

  2. FREEMAN казва:

    Края на 2010 – та ! * :D хехе…

  3. FREEMAN казва:

    Хаха,ползвайте си лисичката… аз още от края на 2012-та си ползвам най-изчистеният, готин и модерен браузър на планетата Земя – Google Chrome !
    Супер! :)

    А за IE… най-добрият след Google Chrome.
    FireFox боклук.
    Само Opera държа ако хвана некой червей (на No antivirus съм) да имам поне 3 браузъра :)

  4. Stafan казва:

    Уау, не мога да повярвам колко сериозни нововъведения има при CSS3. Нямам търпение да започне да се поддържа от всички браузъри. Надявам се да е скоро.

  5. milev казва:

    Абе нууб съм в областта и имам един голям проблем с Firefox и кирилицата. Слагам Equiv=“Content-Type“ Content=“text/html; charset=windows-1251 , слагам го в css-a
    и не става, не работи…
    Дайте съвет.
    Иначе много готин сайт, поздрашления!
    Статийте ви са много интересни и полезни.

  6. Камен Филипов казва:

    Хромчето е сладко браузърче, но защо никой не споменава Safari, който е един от първите (ако не и първият) с пълна HTML5/CSS3 поддръжка? Всички примери се рендват перфектно на него.
    А mira е права – докато не направят някаква развойна помощна среда, правенето на по-сложни анимации и ефекти с чист CSS3 ще е pain in the ass и никога няма да станем свидетели на арт от типа на тези в DerBauer, правен с CSS. Дано го направят по-скоро, че да разкарат флаша от тоя свят вече.

  7. mira казва:

    не може да се сравнят тези схематизирани движения, с подобни направени във флаш среда…ще ви се пръснат главите от изчисления, докато го докарате като във флаш :D

  8. tankobusinessbg казва:

    Е това ще промени из основи уеб дизайна, а и няма как да е иначе все пак трябва да се гледа напред, а и това ще даде предимства на знаещите и можещите пред подбиващите пазара ламери :))

  9. Много добри примери за това какво може CSS3

  10. Иво Делин казва:

    Един от основните проблеми на IE, че инклудват DirectX/Draw библиотеките за неща съвсем ненужни за уеб и могат да си напишат (както всички останали браузъри) леки библиотеки за рендване на прозрачност и анимации!!!

    Да не говорим, че флаша има значителни проблеми относно търсещите машини и оптимизацията, четенето и т.н.

    Все пак, не забравяйте, че нито CSS 3, нито HTML 5 официално са излезли като стандарт! От плануваните промени в CSS са готови и сертифицирани може би само около 30%, при HTML 5 са и по-малко…

    Относно старите браузъри, докато пишем за тях, няма да ги разкарат…

  11. tech_noir казва:

    Да бе, това сме го слушали и за QuickTime, Java аплетите, Papervision, Ajax и още доста неща.
    1. комерсиално една уеб технология става използваема, когато я заимат едно 99% от потребителите. При положение че значителна част са още на IE 6(!) и тепърва се водят спорове дали да се жертва или не съвместимостта с това недоразумение…
    2. За flash… да бе, теретично и AJAX-а го замества доста добре ама много често флаш приложение със същата функционалност просто се прави на 1/10 от времето. Да не говорим за бъгове, съвместимости, влияния с други скриптове на страницата, инжекции… (една добра причина банерите да си останат Flash). Понякога има разлика между „лабораторно възможно“ и „практично“.
    Номера е да си в състояние да прецениш кое кога да ползваш (а не да се опитваш да превозваш дървени трупи с мотоциклет примерно)

  12. Ще минат няколко годинки преди браузерите да го поддържат на 100 % но ние сме търпеливи :)

  13. Ivo Ivanov казва:

    IE9 е наистина ще има много добра подръжка (поне според тест драйв-а който пуснаха от майкрософт) на новите нехнологии но доста вода ще истече докато стане масов браузър. А и въпреки че е 9, да не забравяме че е IE преди това… :D
    А за SSL… не мисля че това е проблем на дизайнера :D

  14. Определено впечатляващи примери, но все още доста тежки.
    IE9 ще използва DirectX за rendering на уеб страници и би трябвало всичко да върви много гладко и на по-стари машини.
    Опасенията ми са, че видео картите не са направени да съхраняват криптирани данни, което до голяма степен обезсмисля SSL, но да видим какво ще стане…

  15. Ivo Ivanov казва:

    Нещата отиват на добре… Господ е уеб дизайнер :D

  16. Иван Савков казва:

    Просто брутални примери… о.О
    Нямам търпение да се наложи по активно.

  17. Method-X казва:

    Tова са много добри примери какво ни очаква занапред.
    На мен лично ми допада идеята да не търся човек, който да ми направи някакъв флаш, ако мога да постигна същите неща с комбинация на html5 и CSS3. Остава само всички браузъри да го поддържат на 100% (да IE за теб най-вече говоря :) )

Вашият коментар