Великолепные стикеры с помощью CSS3

[altrosilka]

Оперу обделил, ни box-shadow ни -o-box-shadow нет у стикеров :(
А box-shadow добавить нужно, потому что пляска со стандартами начинается…

[krovatti]

Прошу прощения, не хотел.
Завтра поправлю.

[Xazzzi]

Симпатично…

[philpirj]

font-size: 100%;

Обожаю это.

А можно демо выложить?

А доделать, чтобы hover и transforms были?

[Serator]

А не писать комментарии не прочитав статьи?

[HDg]

Было бы хорошо демо онлайн, а не архивом

[GKelpi]

Да, вот демо

[hotcooler17]

В хроме есть маленькая проблема со шрифтом, при отведении курсора от стикера в соседних скачет шрифт.

[elementkg]

Причем только в следующих за текущим, а предыдущие не изменяются.

[KirAmp]

Очень не плохо.

[Anisotropic]

В 5-ом шаге при выборе разных стикеров — изменении их размеров прыгает шрифт во всех стикерах, в 16 хроме. То ли включается-выключается сглаживание, то ли что. В 4-ом шаге этого нету. В 1-ом ФФ кстати не прыгает так текст.

[Anisotropic]

в 10 ФФ*

[Chii]

В девятом немного прыгает, рендер видеокартой выключен.
Меня эти прыгания не напрягают.

[krovatti]

Мы так и подумали. ;)

[SLY_G]

Вообще, забавно, спасибо.
Мелкие придирки:
— в куске html-кода, где описано, как вставляется кастомный шрифт, кавычки чёрт-те какие
— на моём компе во время анимации края стикера покрываются лесенкой — не знаю, от чего зависит. FF 9.0.1

[limon_spb]

Дада очень крутая тема! Заслуживает быть на хабре!
Когда пытался сделать один сайтик, немного расширил эту тему, сделал, чтобы стикеры можно было перетаскивать и разгребать на JS. Получилась свего рода «куча бумажек», которую можно шевелить.
Посмотреть можно тут chat-up.ru/?comment=yes
как мне показалось — результат довольно интересный вышел.

[Klaster]

беру бумажку 2, ложу ее на бумажку 1(то есть бумажка 1снизу), стоит щелкнуть по бумажке 3 и бумажка 1 оказывается вверху, это баг или фича?

[limon_spb]

Известный баг-супер-модная-фича :-) Не сильно тогда заморачивался с z-indexaми, они возвращаются на старые значения, когда берете другой стикер.

[Nodge]

Как-то год назад, изучая js, сделал один проект, в котором стикеры являются основной функцией. Получилось что-то вроде онлайн рабочего стола с заметками и группами, что оказалось очень удобно. С тех пор каждый день пользуюсь =)
Сейчас как раз доделываю новую версию на связке jQuery + Backbone и с Yii на сервере. Возможно, напишу статью о интересных моментах.

[limon_spb]

Ссылку в студию! Все хотят, чтобы им тоже было удобно! :-)

[Nodge]

Демо. Не хотел давать ссылку на старую версию, т.к. там фронт немного коряво написан.
Вот недели через 2 выйдет апдейт с полностью переработанной архитектурой + новый дизайн, вложенные группы, изображения, корзина…

[limon_spb]

Выглядит не плохо :-) Будем ждать статьи, анонса

[krovatti]

Ух, не плохо так. Согласен, будем ждать от вас анонса. ;)

[rednaxi]

Одно плохо — такие «стикеры» на стикеры это все-таки не совсем стикеры, а обычные листочки.

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

Как-то так:
upload.wikimedia.org/wikipedia/commons/f/ff/Nonsonoincasa.png

[GoldenAlex]

большое спасибо за пример с трансформациями, многое стало ясно в моём тёмном лесу

[krovatti]

Всегда пожалуйста. Рад, что помог.

[sdramare]

Хидеры на повернутых стикерах выглядят не очень(пиксельная «лесенка»), а при анимации буквы «шевелятся»(едет кернинг). Но как обучение основам css вполне неплохо.

[galichmark]

Chrome 16, при анимации стикера, жутко прыгают шрифты, аж глаза режет…

[limon_spb]

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

[galichmark]

К статье претензий нет. Автор молодец, списабо ему за интересный, а главное полезный материал.

[krovatti]

Спасибо. Всегда рад.
Насчёт шрифтов, да, печальная ситуация.

[easterism]

Стикеры должны отклеиваться и приклеиваться в другое место.

[Night_Coder]

Видел именно эти стикеры еще в августе 2010 :)

[krovatti]

Они вроде как каждые два месяца публикуют топики, которые уже были. Вот в чём дело. Там же в самом начале написано. :)

[krovatti]

Спасибо. :)

[krovatti]

А я по правилам катаюсь. Кто вам сказал обратное?

[alpust]

А если еще пай добавить pie то все будет здорово работать вплоть до ие6

[krovatti]

Ключевое слово — «если». Тут цель была всего-лишь продемонстрировать. Для этого пригодился Google Chrome. Впрочем, в Firefox такой же результат. :)

[alpust]

К стикерам претензий нету, они супер!
Просто можно было бы избежать таких фраз в статье как:
«В остальных браузерах (читай, IE) есть шанс получить квадратный стикер жёлтого цвета без тени и анимации.» и во все объявления css где присутствуют css 3.0 правила, добавить дополнительную строчку: «behavior:url('/pathToPieFolder/PIE.htc');»

[krovatti]

Вы не подумайте, это ни разу не ненависть к IE. :)

[alpust]

В семье не без «уродца», как говориться ;), но поддержку ИЕ ни кто не отменял :(, для этого великие люди сделали PIE, и облегчили жизнь в разы :)

[krovatti]

Согласен. Но, лично меня, последние превью ИЕ радуют. Постепенно становится человеком. :)

[krovatti]

В следующий раз так и сделаю. Спасибо за совет.