Трехмерность при помощи 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

Возможно, это будет интересно...

Web

,

Май 12th, 2009

11 responses

11 responses


Do you want to comment?

Comments RSS and TrackBack Identifier URI ?


Los Pirata

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

Май 13, 2009 4:34 пп

Alex Volkov

нет

Май 13, 2009 7:39 пп

Michael

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

Май 14, 2009 10:41 дп

Alex Volkov

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

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

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

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

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

Май 14, 2009 12:23 пп

Michael

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

Май 14, 2009 1:25 пп

Alex Volkov

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

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

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

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

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

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

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

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

Май 14, 2009 1:35 пп

Alex Volkov

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

Май 14, 2009 1:36 пп

Michael

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

Май 14, 2009 1:49 пп

Alex Volkov

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

Май 14, 2009 3:38 пп

Michael

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

Май 14, 2009 6:14 пп

Comment now!
















Trackbacks