Linux, кодинг, митолл и прочая хрень :)

Трехмерность при помощи CSS уже сегодня

Не дожидаясь ввода CSS3, девелоперы внедряют все новые и новые параметры из тройки в обычный CSS, при помощи которых можно немного облегчить себе жизнь, а не придумывать реализации на яваскрипте, SVG, простых картинках и т.п. для таких простых действий как скругления углов. Как скруглить углы я уже писал тут.

multiple-cubes-css

Вот такая красота делается при помощи пары строк свойств CSS и HTML:

<div class="cube">
        <div class="topFace">
                <div>
                        Content
                </div>
        </div>
        <div class="leftFace">
                Content
        </div>
        <div class="rightFace">
                Content
        </div>
</div>
.leftFace {
        -webkit-transform: skewY(30deg);
        -moz-transform: skewY(30deg);
        background-color: #ccc;
}

.rightFace {
        -webkit-transform: skewY(-30deg);
        -moz-transform: skewY(-30deg);
        background-color: #ddd;
        left: 200px;
}

Текст по бокам остается текстом, т.е. его можно выделить, скопировать и т.п. Практического применения данному эффекту не вижу, для красоты если только. Поддерживают данные свойства далеко не все браузеры, а только самые продвинутые: Firefox 3.5+, Google Chrome, Safari 3.2+.
Для счастливых юзеров линукса ссылка на firefox 3.5 rpm. Кстати, единственный браузер, из тех, какие я знаю, который набрал 93 по acid3 тесту

acid3

0.00 avg. rating (0% score) - 0 votes
Твитнуть

11 комментариев

  • Трехмерность при помощи CSS уже сегодня…

    Thank you for submitting this cool story — Trackback from progg.ru…

    • By progg.ru

  • IE этого не понимают?

  • Opera 10 не самый свежий билд проходит ACID3 на 100 из 100.
    В примере указан код заточенный под движки гекко и вебкит…. утверждение что это самые продвинутые (интересно куда их двигали?) не верно!

    • By Michael

  • Опера 10 находится в стадии альфа, поэтому когда она выйдет тогда и будут принимать ее во внимание.

    утверждение что это самые продвинутые

    Билд 4102 десятой оперы не поддерживает такой эффект. Так что опера пока отдыхает.

    (интересно куда их двигали?)

    Непонятен смысл слова продвинутые(advanced — аналог по енг)?

  • Лиса указанная в статье тоже не финальная версия)))
    По приведеному коду, ясно что эта фитча заточена под опред движки… а сама фитча ещё в стадии проектирования/завершения или еще где нить… в Опере есть поддержка видео объектов и три дэ контекста… А что есть в всем известном ИЕ и нет в других — так вобще)))
     
    З.Ы.: На компе водятся все браузеры — нужны для тестирования веб проектов так сказать на живой базовой кофигурации.
    З.З.Ы.: просто статья местами немного не «полит корректна»))) Местами возможно надо более конкретизировать)))

    • By Michael

    • Лиса указанная в статье тоже не финальная версия)))

      Ну да, ее пиарили пиарили, а после выхода на 3.0.10 переключились и забили. Хотя бетка 3.5 работает пошустрее тройки (в линухе по крайней мере)

      По приведеному коду, ясно что эта фитча заточена под опред движки… а сама фитча ещё в стадии проектирования/завершения или еще где нить…

      Ну да, это css3, оттуда все эти эффекты. Сам css3 наверно в старости увидим, окончательную версию )

      А что есть в всем известном ИЕ и нет в других — так вобще)))

      Ну ты даешь ))) Как это что есть в ИЕ? Там есть куча глюков! Никакая трехмернсоть не нужна поэтому)) Разве было бы так интересно верстать, если б не было ие?

      просто статья местами немного не “полит корректна”))) Местами возможно надо более конкретизировать)))

      Ну вроде указан эффект, указан где пойдет, вроде все конкретно, нет? )

      • ПыСы. Кстати, никто не заметил, счетчик ливинтернета лежал до обеда наверно?

  • Хз… гугл статс попробуй))) Лайвинет часто посто ресетит все значения)))
    З.Ы.: Осёл ИЕ 8  гораздо лучше последней сборки третей Лисы))) Просто Лиса 2 местами жжёт даже Лису 3

    • By Michael

  • Гугл статс тоже стоит, но ливер как-то роднее. Всегда работал нормально, а сегодня слег. С восьмым осликом проблема у меня. Точнее, проблем нет, потому как он под линем не запускается )

  • Ну… да нативно ИЕ 8 по линем это жесть.
    Ливер седня похоже слёг… у меня таже трабла по сайтам.

    • By Michael
css.php