Бесполезная фиговина на CSS3

[Softlink]

Привет вам!

Несколько деньков позанимался версткой вот такой штуки. Верстал ради спортивного интереса и заодно посмотреть, что как работает и как это применить. Все реализовано без js.

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

Ну и, судя по всему, на css невозможно сделать какую-либо навигацию(ну чтобы фотки листать). Попробовал разных вариантов, ничего не работает.

Штуковина, конечно, малоприменима в боевых условиях, но была интересна в реализации.

По ходу дела на пару моих вопросов ответил Nekromancer, ему спасибо.

Если тема покажется (Great Rash'у например) недостойной обсуждения и внимания в целом, можно выкинуть во флейм или вообще выкинуть

Спасибо за внимание

забыл добавить: это все дело не слабо притормаживает в ФФ(ну у меня по крайней мере), а Опера отказалась выполнять "обратный" транзишн.

Edited September 12, 2011 by Softlink

[ShumNo]

Не дожили мы пока еще, чтобы разметка выполняла динамику

[Verder]

Привет вам!

Несколько деньков позанимался версткой вот такой штуки. Верстал ради спортивного интереса и заодно посмотреть, что как работает и как это применить. Все реализовано без js.

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

Ну и, судя по всему, на css невозможно сделать какую-либо навигацию(ну чтобы фотки листать). Попробовал разных вариантов, ничего не работает.

Штуковина, конечно, малоприменима в боевых условиях, но была интересна в реализации.

По ходу дела на пару моих вопросов ответил Nekromancer, ему спасибо.

Если тема покажется (Great Rash'у например) недостойной обсуждения и внимания в целом, можно выкинуть во флейм или вообще выкинуть

Спасибо за внимание

забыл добавить: это все дело не слабо притормаживает в ФФ(ну у меня по крайней мере), а Опера отказалась выполнять "обратный" транзишн.

Мне понравилось. Только задержка большая перед увеличением фотки.

[Nekromancer]

Как я уже говорил, у меня в ФФ не тормозит Что с твоим - не знаю.

П.С. Хотя знаю, Windows.

[Vlad]

Тоже не заметил каких-то явных тормозов со стороны Fx. Фотография только медленно разворачивается, но в этом автор виноват, а не браузер.

[Softlink]

Мне понравилось. Только задержка большая перед увеличением фотки.

Ну это регулируется, поменять только одну циферку)

Поправил.

Как я уже говорил, у меня в ФФ не тормозит Что с твоим - не знаю.

П.С. Хотя знаю, Windows.

Тоже не заметил каких-то явных тормозов со стороны Fx. Фотография только медленно разворачивается, но в этом автор виноват, а не браузер.

Странно, может и правда что-то с моим ФФ, но у меня картинки рывками загружаются. Рывки короткие, но их может быть 3-4 штуки.

Edited September 13, 2011 by Softlink

[Great Rash]

Мне и правда кажется эта тема бесполезной

Ну вот узнали вы про CSS3-анимацию, ну да, сделали некий пример, ну и молодец! Но зачем тему для этого создавать? Тем более в "обсуждении работ"... Ну во "флейме" я бы еще понял...

А так... я сейчас канвас мучаю, если я начну сюда выкладывать все мои эксперименты все опухнут от кучи бесполезного бреда. Я тут вектор на вектор проецировать научился и алгоритм A* реализовал, мне создать 2 темы для этого?

[Vlad]

Great Rash, есть такая маленькая радость узнавания нового, пусть даже и всем известного. Хочется поделиться этим. Я вот CodeIgniter так изучал, каждый шажок открытием казался, а остальные зевали и говорили "ну и что".

[Great Rash]

Другие вон чо и ничо, а ничо и вон чо

Просто раздел не для того вроде как. Ну делиться же можно и во флейме...

[Softlink]

Другие вон чо и ничо, а ничо и вон чо

Просто раздел не для того вроде как. Ну делиться же можно и во флейме...

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

Однако вот по себе сужу и считаю вполне полезным выкладывание подобных "решений" на форум. Может обсуждать тут и нечего, но для кого-то будет полезно узнать что и как работает. Увидел однажды, запомнил некий функционал, а потом, когда понадобится реализовать что-то похожее, можно вернуться к этой работе и посмотреть как сделано. Тем более это не демонстрация работы какого-то инлайн-блока, а малоиспользуемых пока свойств CSS3, о которых новички, например, могут просто не догадываться. Пропаганда блин!

[Vlad]

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

[Softlink]

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

Во, кстати, думал об этом. Вернее подумал уже после того, как rus опубликовал свой пост в блоге. До этого как-то не обращал внимания на них.

[SelenIT]

По-моему, тоже, прикольные примеры proof-of-concept'ов вполне имеют право на жизнь. Можно того же Стью Николза в пример привести, у него практически весь сайт из таких прикольных экспериментов состоит. Для кого-то "ничего нового", а для кого-то "вау, до чего дошел прогресс!"

Да и браузеры сейчас обновляются достаточно резво, то, что вчера казалось "экспериментальным и нежизненным", сегодня уже вполне годится для массовой аудитории. Вон я буквально вчера CSS-градиент в реальном проекте применял. А еще буквально позавчера прифигевал вот с этой демки (увидел по ссылкам с хабратопика про внешние круголки)...

[Vlad]

Да они появились пару дней назад, ещё не анонсировал, никто про них не знает.

[Nekromancer]

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

На счёт мало используемых не правда. Это единственный более менее быстрый способ анимации на мобильных устройствах. Например сейчас при создании игры я вовсе отказался от канваса и сделал всё через обычный dom и css анимацию.

[Softlink]

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

На счёт мало используемых не правда. Это единственный более менее быстрый способ анимации на мобильных устройствах. Например сейчас при создании игры я вовсе отказался от канваса и сделал всё через обычный dom и css анимацию.

Не, мое предположение строится по такому принципу:

анимация > в CSS2 нет ее, а CSS3 не поддерживают старые браузеры > думать пока об этом не стоит> запилим js и будем радоваться.

[Nekromancer]

Почему не стоит, как раз таки самое время об этом думать. Идёт "новая эра" и нужно влиться в поток как можно раньше, а не потом догонять когда все этим уже будут активно пользоваться. По этому такие вот бесполезные вещицы как раз и нужны.

[Softlink]

Вон я буквально вчера CSS-градиент в реальном проекте применял.

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

Почему не стоит, как раз таки самое время об этом думать. Идёт "новая эра" и нужно влиться в поток как можно раньше, а не потом догонять когда все этим уже будут активно пользоваться. По этому такие вот бесполезные вещицы как раз и нужны.

Да, я тоже это поддерживаю. А "не стоит" - это так думают те, у кого заказчики просят полного соответствия в Chrome 13 и ИЕ 6 например.

[Softlink]

Появилась версия 1.1 - модернизированная

Посмотреть можно здесь

Попутно обнаружен баг в ФФ. В нем не работает транзишн для позиционирования. работает

Edited September 20, 2011 by Softlink

[Nekromancer]

Попутно обнаружен баг в ФФ. В нем не работает транзишн для позиционирования.

Враньё.

П.С. Обратное движение не совсем удачное получилось.

[Softlink]

Попутно обнаружен баг в ФФ. В нем не работает транзишн для позиционирования.

Враньё.

П.С. Обратное движение не совсем удачное получилось.

Ну у меня не работает. В хроме и опере работает, в фф нет.

upd Транзишн действительно работает, но для ФФ в обязательном порядке надо указывать начальные координаты. Остальные браузеры обошлись без них.

Но как у Nekromancer'a все равно все работало - осталось загадкой

Edited September 16, 2011 by Softlink

[Nekromancer]

У меня даже твой пример в Лисе работает, однако позиционирование немного не правильное, если в это и есть "не работает" то скорее всего есть какой то фикс.

[Softlink]

все работает

Edited September 16, 2011 by Softlink

[Shift-Web]

Молодец )))) Понравилось