css Маньяки

[psywalker]

http://perevodik.net/img/stuff/3d-css/

Очередная позиционированная заморочка

[Great Rash]

Подниму старую тему...

CSS-маньяки, вам есть куда расти

http://www.romancortes.com/blog/bush-css/

[aTei]

Крутящаяся банка кока-колы, чистый css (чтобы крутилась снизу ползунок двигаем)

RomanCortes.com/blog/pure-css-coke-can

Edited January 27, 2010 by aTei

[psywalker]

Крутящаяся банка кока-колы, чистый css (чтобы крутилась снизу ползунок двигаем)

RomanCortes.com/blog/pure-css-coke-can

Хм, интересно, а как это сделано?

[Great Rash]

Хм, интересно, а как это сделано?

Эх psywalker, а копнуть?

http://www.romancortes.com/ficheros/coke-can.png

http://www.romancortes.com/ficheros/coke-label.jpg

http://www.romancortes.com/ficheros/css-coke.html

Разберешься?

[rus]

Хм, интересно, а как это сделано?

Ключевые слова:

1) background-position:5px 30px; end fixed.

2) width:1px;

3) background-repeat:repeat-x;

4) картинка-спрайт.

Edited January 27, 2010 by rus

[Great Rash]

Вот, правда это яваскрипт, но CSS там тоже присутствует... мегакруто:

http://www.uselesspickles.com/triangles/demo.html

[psywalker]

Эх psywalker, а копнуть?

http://www.romancortes.com/ficheros/coke-can.png

http://www.romancortes.com/ficheros/coke-label.jpg

http://www.romancortes.com/ficheros/css-coke.html

Разберешься?

Нее погоди, я видел эту тему, но всё равно ехать не могу. Ну допустим я навожу на скролл, картинка меняется, но ведь мы же видём по скролу, а не просто подводим мышь. Как же банка крутится?

[rus]

Нее погоди, я видел эту тему, но всё равно ехать не могу. Ну допустим я навожу на скролл, картинка меняется, но ведь мы же видём по скролу, а не просто подводим мышь. Как же банка крутится?

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

[Great Rash]

Смотри: там куча однописксельных по высоте параграфов (<p>), а бекграунд у них стоит fixed. Соответственно когда я скроллю, то бекграунд остается на месте, а однопиксельные параграфы едут, и т.к. у каждого параграфа бекграунд смещен на свою величину, создается иллюзия, что банка крутится.

Понятно объяснил?

[LunatiK]

Блин, ппц, Макс. Банка не крутится фон с разворотом coke-label.jpg, поверх coke-can.png отсюда блики и т.д. png fixed, когда скролишь фон двигается ...

Добавил: уже объяснили более шустрые ))

Edited January 27, 2010 by LunatiK

[Great Rash]

Правда там хитро бекграуд позищн высчитан. Это хорошо видно если фаербагом для всех параграфов бордер назначить.

Видимо этот Роман Кортес кроме верстальщика еще и художник неплохой.

[LunatiK]

Правда там хитро бекграуд позищн высчитан. Это хорошо видно если фаербагом для всех параграфов бордер назначить.

Видимо этот Роман Кортес кроме верстальщика еще и художник неплохой.

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

[Great Rash]

Нет, это немного не то. Если присмотреться, то у автора не просто картинка туда-сюда ездит, а наблюдается именно 3D эффект. Т.е. картинка и надписи изменяются когда подъезжают к краям банки. В этом то и состоит вся фишка.

[LunatiK]

А, да, согласен. Не приглядывался но тут придётся тогда и к автору в код заглянуть

[psywalker]

Аа, я понял, прикольно замутили. А насчёт 3Д-эффекта круто конеш придумано, LunatiK, сможешь сделать?

[LunatiK]

Копипастнуть могу самому долго и мутарно он там бекграунт по кускам сделал и шируну всей хрени дискретизировал (смещал бекграунд и менял ширину покусочно), вощем пипец, но кто сказал что над чудом не надо долго работать ?

Добавил: скопипастил (лежит тут), естественно себе ни в какие заслуги это не ставлю(малоли кому поглазеть чтоб в оригинальном коде не ковыряться), автор мега CSS-маньяк

Edited January 27, 2010 by LunatiK

[psywalker]

Копипастнуть могу самому долго и мутарно он там бекграунт по кускам сделал и шируну всей хрени дискретизировал (смещал бекграунд и менял ширину покусочно), вощем пипец, но кто сказал что над чудом не надо долго работать ?

Добавил: скопипастил (лежит тут), естественно себе ни в какие заслуги это не ставлю(малоли кому поглазеть чтоб в оригинальном коде не ковыряться), автор мега CSS-маньяк

чёто ничё не происходит, просто банка по середине стоит и всё, даже скрола нет

[LunatiK]

чёто ничё не происходит, просто банка по середине стоит и всё, даже скрола нет

не может быть ты всё распаковал ?

я даже скачал архив распаковал и перепроверил IE7, opera10, FF3.5 - работает

[psywalker]

чёто ничё не происходит, просто банка по середине стоит и всё, даже скрола нет

Чес слово, просто банка и ничё больше нет.

Нужны независимые эксперты короче.

[rus]

Нужны независимые эксперты короче.

Волкер гонит

Все проверил - все работает... в трех браузерах.

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

[LunatiK]

Волкер гонит

Все проверил - все работает... в трех браузерах.

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

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

[psywalker]

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

[WalkMan]

лошадко!

[SelenIT]

Шрифт, нарисованный на CSS