3D CSS

[@yopopt]

Не сильно впечатлило, видимо я совсем закоренелый консерватор…
Было-бы хорошо, если б показали какое-то полезное практическое применение, а так, имхо, красивые и при том бесполезные рюшечки.

[@Zada]

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

[@yopopt]

Соглашусь, но боюсь больше будет не по делу. Кстати, демка заметно отличается от видео: картинки увеличиваются незначительно и заезжают друг под друга. То есть миниатюры оказываются над полными изображениями. И увеличение фоток вовсе не во весь экран…
Технология интересная и очень красивая, только вот сфера применения очень ограниченная: галереи и презентации. Я других что-то придумать не могу.

[@Zada]

Кстати, демка заметно отличается от видео: картинки увеличиваются незначительно и заезжают друг под друга. То есть миниатюры оказываются над полными изображениями. И увеличение фоток вовсе не во весь экран…

Может быть, я к сожалению с своим Linux'ом не могу посмотреть ее в живую. Однако в блоге автора видео написано, что для более аутентичных результатов желательно иметь ночную сборку webkit'а

[@Kovat]

С ночной сборкой (r45821) так же, как и yopopt описал. Но работает на порядок быстрее.

[@Zada]

Видимо подержка апаратной акселерации сработала.

[@arty]

вообще-то то, что на видео, больше всего напоминает работу плагина piclens / cooliris — там и подгрузка следующей порции фоток есть, отсутствующая в демке

[@Zada]

Про этот плагин уже раз 5 здесь говорили. Причем здесь плагин? Вам демонстрируют, что можно делать без плагина, а что можно будет делать помимо того что есть в плагине, уже зависит от вашей фантазии.

[@arty]

когда я прочитал пост, у меня сложилось ощущение, что на видео записана работа демки. Когда я посмотрел видео и посмотрел демку, у меня сложилось ощущение, что на видео — работа cooliris, а в демке — какая-то фигня. Для меня это выглядит как обман, поэтому я огорчился.

почему я написал об этом в шестой раз? Потому что все следующие разы ниже в списке комментариев, а я, грешен, отвечаю на комменты до того, как прочитаю вообще всё

[@Zada]

Про то, что на видео работа плагина а не демо, в оригинальном блоге нет никаких упоминаний.

Для того что бы судить фигня демка или нет, надо выполнить технические условия, которые описаны в статье: You can now see Snow Stack’s live demo if you have Snow Leopard and Safari. On Leopard, you can use WebKit nightly build 45754 or later for a slightly slower experience.

Т.е. если вы смотрели ее при других условиях, вполне возможно, что демка не полностью функциональна.

[@arty]

> Про то, что на видео работа плагина а не демо, в оригинальном блоге нет никаких упоминаний

есть, видео называется Snow Stack — CSS 3D Visual Effect with WebKit

> Т.е. если вы смотрели ее при других условиях, вполне возможно, что демка не полностью функциональна.

не нужно особого билда для того, чтобы подгружать продолжение галереи, как это есть в видео и нет в демке, — подгрузка делается универсально работающим аяксом

[@Scala]

Да вы же тролль!

[@arty]

ага, давайте ещё в метадискуссию скатимся: )
я веб-разработчик, а не тролль

[@Scala]

У меня свежи сочни Webkit — всё работает как на видео.

[@Kovat]

В Демке при нажатии вправо — фотографии подгружаются.

[@arty]

признаю́, был неправ

[@Kovat]

Большинство приложений ориентированных на мультитач устройства, думаю, будут использовать эти возможности.

[@Dronix]

Ну например красивые формы, или табы. Или красиво всплывающие формы запросов вместо убогих ява-скриптовых окошек.
Например, превью сайтов при поиске (ну да, есть аналоги, но это будет нативно)

По-моему куча применений.

[@ozoned]

Нажимайте пробел когда стали на картинку — будет как в видео.

[@xdisa]

Если честно, серфить картинки с помощью подобного довольно удобно. Пользовался плагином CoolIris (о нем ниже уже писали), когда использовал Firefox — он читает rss и отображает такой вот лентой картинки на популярных сайтах.

[@Zada]

Ну дополнение оно — дополнение. Здесь вам предлогают не код библиотеки для создания галерей картинок, а демонстрируют технологии. Когда все это будет массово доступно, можно будет дать волю фантазии.

[@sco]

Если мне не изменяет память, то CSS как раз и используют для того чтобы делать «красивые и при том бесполезные рюшечки». Так что прекрасно что его развивают, добавляют новые удобные возможности.

[@leshaogonkov]

Первое что мне пришло в голову, это страница, с множеством «лиц», т. е. переворачивающаяся как грани кубика. Помнится надстройка для какого-то браузера такое делала.

Мега-интересно выглядело бы, на мой взгляд.

[@k4d]

вам предоставили инструмент, показали демо что можно сделать, остальное за вами…

[@melervand]

напоминает Cooliris, реализованный как плагин для Firefox

[@RealMonk]

Оно и есть вроде как. Не нашел ни 1 отличия

[@LaCTuK]

ухх, css еще торт, да какой...:)

[@IGHOR]

Как узнать что за музыка в видео играет?

[@Ryav]

Так же больше саундтрек зацепил

[@seraph]

Комменты на YouTube подсказывают, что это Track One — Ratatat

[@Mew]

ПРограмма есть удобная для этого — Tunatic.-

[@TecHMeaT]

Здорово, зацепило.
Если технология увидит свет, то верстальщиков нужно будет называть цеэсесерами ))

[@Mithgol]

Причём скоро это будущее всех браузеров коснётся.

В Firefox 3.5 (который ужé вышел, а не просто ночная сборка) можно применять произвольные аффинные преобразования (поворот, перенос, скособочивание, пропорциональное изменение размера) посредством CSS. Вот примеры (на английском).

Понятно, что этими средствами имитировать трёхмерность — это проще пареной репы.

[@youROCK]

Почему имитировать? Реализовывать :)!

[@ruzzz]

Ну если вообще быть занудой :), то на плоском мониторе любое 3D все же имитируется.

[@sasha_tinkoff]

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

[@Rejin686]

Вот будет один из вариантов просмотра галереи картинок (может даже и видюшек) или просто фотоальбом для webOS (Google chrome OS).

[@Vii]

Смотря на то количество lightbox-клонов которые сейчас пихают везде где только можно, думается мне что это будет скорее основной (единственный?) способ отображения галерей.

Wow-эффект быстро «опопсевает» в вебе, особенно когда достаточно написать пару строчек кода или еще лучше :)) взять готовый плагин для фреймворка.

[@alkhankhel]

Такая технология будет в ущерб юзабилити :)

У эпилептиков может и приступ случится, если картинки будут яркие мелькать… :(

[@leshaogonkov]

Никто не заставляет их мелькать. Приделать слайдер, или средствами браузера ограничить как-то скорость перемещения по странице.

[@leshaogonkov]

*слайдер, регулирующий скорость перемещения

[@kyzia]

как кто в общем не впечатлило)

уже давно существует масса три-д галерей на флеше, ява скрипте и прочем.

вот если бы такое можно было бы делать ТОЛЬКО средствами css.
хотя с другой стороны — насколько бы это его усложнило…

[@Zada]

ТОЛЬКО средствами CSS, без применения Javascript такое делать врядли можно. Не забываем, что для чего создано.

Если пройти по ссылке из топика, то там расписано, кто из пары (JS, CSS) за что отвечает в демо.

[@leshaogonkov]

Ну почему, делали же при помощи CSS анимацию, правда это был какой-то левый хак, когда несколько файлов друг за другом подгружалось, но всё же, свои поклонники, адаптирующие этот метод под изменившиеся условия, возможно найдутся :-)

[@MaxxArts]

Что-то я не представляю себе сайт, в дизайн которого органично вписывается такая вот галерея.

[@Zada]

Ну почему же. Различные LightBox'ы достаточно прочно вошли в нашу жизнь, так почему бы этому не дать шанс?

[@MaxxArts]

Различные Lightbox'ы тоже не всегда хорошо вписываются в сайт, а тут еще и 3d. Тогда и остальную навигацию в трехмере надо, и вообще весь контент. На мой взгляд, это извращение. Развлечение на пару дней ради ничего.

[@Zada]

Не знаю, почему люди так критично к этому относятся. Вообще-то и цвета на сайтах лишние, достаточно белого фона с черным шрифтом.

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

[@MaxxArts]

Есть золотая середина, когда «само то». Белый фон с черным шрифтом — недобор, вот эта штуковина трехмерная — перебор (все имхо, конечно), умелое использование цветов на сайте — плюсики к юзабилити, к ощущениям от посещения, к восприятию в целом, и так далее.

А то, что каждый первый будет совать это на сайт, меня совершенно не пугает. Благо, пока посещение сайтов у нас добровольное.

[@VasilioRuzanni]

Развлечением оно будет до тех пор, пока что-то подобное не начнет поддерживаться во всех браузерах. А начнет, кстати, вряд ли. Скорее, это прерогатива RIA, всякие такие рюшки.

[@Scala]

CoverFlow органично вписывается в интерфейс Finder & iTunes, а так же иногда встречается и в других приложениях на Mac & iPhone.

[@Zitrix]

дело не в именно этом интерфейсе, а в том, что можно свободно поворачивать, трансформировать, увеличивать html-элементы (и, как следствие, даже добиваться эффекта наклонности плоскости обзора).

это совсем другой коленкор, нежели float: right.

не нравится такая реализация — можно сделать другую, поскромнее, но, наконец-то можно! Нуу… когда 99% браузеров так научатся.

[@deniamnet]

что-то подобное можно сделать уже сейчас, если использовать jQuery и 3d-движок
я такое видел уже в Сети
правда, пока что тормоза будут на слабых компах

[@Zada]

Сейчас вообще много что делать можно.

Но тут это относится к CSS и оно должно (в случае Safari/OS X) иметь апаратную акселерацию этого дела.

[@Zitrix]

canvas?

[@glazov]

Представьте, какое будущее ожидает верстальщиков. И сейчас-то попадаются дизайнеры, которые макеты рисуют не совсем адекватные, мягко говоря. Приходится js, flash и еще кучу всего на страницу лепить, дабы хоть как-то их произведения искусства сверстать. А если эти товарищи увидят, что такое можно вытворять? Вот фантазия-то взыграет :)

[@webboy]

Это путь Internet Explorer. Никому так не кажется? ActiveX, фильтры… или…

[@Zitrix]

у всех браузеров есть что-то свое. опера, вот, 3d обещает замутить. ие6 просто уже восемь лет отроду, по-этому все ± знакомы с его фишками :)

[@timon_sk]

сильно напоминает вот это расширение https://addons.mozilla.org/en-US/firefox/addon/5579
хотя когда это сделано на css — поражает

[@DeFacto]

смотрится прикольно,
но думаю как выйдет такая фишка, то будут пихать ее где надо и не надо
вскоре всем надоест, будет избитой фишкой… и будет считаться плохим тоном ее использовать

[@leshaogonkov]

Это пример. Никто не заставляет именно для галлереи это пользовать.

[@maxim317]

девочкам из рекламы мегафона очень понравится :)

[@legato_di]

Между прочим очень хорошее подспорье для будущих трехмерных интерфейсов.
Конечно, всё это можно реализовать и с помощью Флеша или того же Silverlight, но если выбирать между встроенными удобными возможностями браузера и сторонними плагинами, я бы выбрал первое)

[@Reey]

Зачем это в css непонятно

[@Dronix]

Не могу понять, почему все зациклились на этой галерее. Если например придумали картинки использовать в html и показали пример — фотогалерею. Это же не значит, что картинки можно использовать только для галерей!
Это же, черт возьми, 3д эффекты а не картинки. Можно наконец то вместо табов просто «подложить» на задний план что-то, например, а потом красиво вытащить по необходимости.

[@TuKTeeK]

Возможности ради возможностей, да еще и не факт что все браузеры будут поддерживать это. Может стоит делать дизайн проще и понятнее для пользователя, а не красиво для заказчика?

[@leshaogonkov]

Ну FF, Safari уже не мало

[@wally]

Отличная вещь.
А на вопросы типа:

Зачем это в css непонятно?

Можно ответить, что как раз за тем, за чем и все остальные вещи были встроенные в CSS. А именно, сделать HTML документ доступнее, понятнее, удобнее и красивее для пользователя. :)

[@Zada]

Несмотря на то, что оба браузера используют одинаковый движок, их возможности не пересекаются на 100%. Кроме того в Хроме не совсем свежий WebKit, насколько мне известно.

[@TEHEK]

Возможности-то, конечно, шикарные… Но по-моему, это уже из области мелкософтства… Проприетарные красивые плюшки, которых ни у кого нет.

.fader
{
-webkit-transition-property: opacity;
-webkit-transition-duration: 550ms;
-webkit-transition-timing-function: ease-in-out;
}


А с такими именами им в спецификацию ЦСС вообще дорога закрыта, ИМХО.

[@paranome]

Почему это? Совершенно стандартные имена.

[@inanome]

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

[@rushter]

Впечатляет, но пример бесполезный. Мне вот интересно сколько это всё дело памяти потребляет.

[@yanajy]

К тому времени, когда CSS станет таким, памяти для этих эффектов будет достаточно :-)

[@yanajy]

Мне почему-то кажется, что css-эффекты никогда не будут такими.

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

CSS же делает только то, что используется наиболее часто: пунктирные рамки, круглые уголки и т.д.

Вывод: на мой взгляд, незачем делать это с помощью css.

P.S. А возможно, в будущем будет слияние flash, html и css в одну мегатехнологию :-) Вот тогда…

[@Fduch]

Забавно смотреть как наивные лемминги радуются не соответствующим стандартам проприетарным CSS-свистелкам, повторяющих то, что существовало давным-давно.

[@ur001]

Увидив заголовок статьи, подумал что сейчас увижу помимо margin/padding/border свойства для отступа в глубину и depth помимо width и height :)

[@ur001]

position: absolute;
left: 50%;
top: 50%;
front: 50%;
:)

[@k4d]

>Видимо стоит пересмотреть свое восприятие мира

Мудрые, хорошие и редкие слова для этого сайта :)