Кружки и transition

[Softlink]

Всем привет!

Сегодня у меня был урок по transition.

В целом мне понравился принцип действия. Сделал небольшую страничку. Идея пришла сама собой.

Справка тем, кто еще не пользовал транзишины(может пригодится ):

В процессе работы вообще задумывал все сделать на градиентах. Однако, transition не работает для background, которым задан градиент. Любой градиент в любом браузере. Немного извернулась Опера. В ней можно через транзишн залить градиент обычным цветом. Эффект получается симпатичным, но не совсем то, что мне было нужно. Но как говорится, если не бывает худа без добра, значит верно и обратное утверждение. В Опере не работают транзишины для border-color. Ах да, в Опере еще не придумали radial-gradient.

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

Проверял во всех последних браузерах. Работает везде кроме Оперы. ИЕ9 как всегда идет лесом.

В общем вот ссылка, поглядите.

[Veseloff]

А что должно быть реализовано? У меня какие-то обрезанные круги вылезают всё время.

[Softlink]

А что должно быть реализовано? У меня какие-то обрезанные круги вылезают всё время.

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

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

[Great Rash]

Я не понимаю зачем такое обсуждать тут? Да и собственно что обсуждать? Ну был у вас урок, ну вы оттуда что-то почерпнули полезное. Ну отлично. Но что тут обсуждать то?

[Softlink]

Great Rash, урок - это в смысле я сам практиковался. Ну и написал, что как-таковой сложной верстки здесь нет. Однако, если кому любопытно посмотреть, как что работает, может и полезно будет. Я не настаиваю, можно и удалить тему, если она мешает здесь.

[Justnewone]

Надо еще на ховер зетиндекс как-то сбацать, а то булики-то обгладаны

[Shift-Web]

Офигентос! Но этокстра разметка не есть гуд. Пробуйте ::after и ::before

[Softlink]

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

[ctpz]

Офигенно креативно.

[Justnewone]

Идея интересная, но у меня как-то стресс тест для браузера получился, немного тормозит.

[Softlink]

Идея интересная, но у меня как-то стресс тест для браузера получился, немного тормозит.

Спасибо.

Подозреваю, что браузер ФФ, а какая версия?

Edited July 27, 2011 by Softlink

[Justnewone]

5,0

[Golgi]

Justnewone, я тоже через ФФ5.0 смотрю, быстро вожу мышкой по экрану и все гладко, возможно дело в твоем компе? Загруженность проца к примеру

[Justnewone]

Думаю нет, у меня i7, мож какой-то плагин конфликтует, ну да ладно.

[kidrock]

Работает везде кроме Оперы. ИЕ9 как всегда идет лесом.

Работает в Опере, круги рисует, правда не так красиво, как в Хроме, в нём плавно появляются )