Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 102
Opera всегда полный провал. Ппц, а не браузер. Кажется, идеология у них взята у ИЕ6
ой опасно тут такое писать, поверьте моему горькому опыту )))
+1, до сих пор даже Google Wave не работает в Опере)
что там вейв, гмыло у меня тупит безбожно. я уже молчу про гуглдокс.
а жаль, нравится мне этот браузер, на слабых машинах легче всех работает
а жаль, нравится мне этот браузер, на слабых машинах легче всех работает
С гмылом мож и нет, а вот гмайл тормозит!
не хочет письма удалять, вот буквально сегодня писало что-то типа «В процессе» или как-то так но не удаляет, тупо подвисает. в хроме же такое не наблюдалось ни разу. а в опере частенько, уже заметил. приходится в новом табе открывать.
а доксах из последнего бага не сохранялся документ. после этого я понял что гуглосервисами лучше пользоваться из хрома.
плюс виджет Gmail Checker куда-то из оперы пропал. никто не знает почему этот виджет удалили?
а доксах из последнего бага не сохранялся документ. после этого я понял что гуглосервисами лучше пользоваться из хрома.
плюс виджет Gmail Checker куда-то из оперы пропал. никто не знает почему этот виджет удалили?
Да, Опера до него не дотягивает. Но старается изоВсехСил
С осликом другая ситуация. Если вы опытный технолог, то проблем с осликом мало (все явные баги ослика давно изучены и описаны + есть куча вариантов их профиксить (conditional comments, expressions, behavior, filters, hasLayout, хаки наконец).
С Оперой совсем другая песня. Когда встречаешь какой-нибудь баг в Опере то практически всегда, во-первых, не понимаешь из-за чего так, во-вторых, сложно найти триггер бага, в-третьих, тупо не знаешь как фиксить да и вариантов особых нет, хаков для Оперы рабочих практически не существует. В JS еще можно сделать что-то типа if (window.opera)… а в CSS остается только переверстывать. А если еще учесть, что опера довольно часто обновляется, и что с каждой новой версией багов, как правило, становится больше, то это просто кошмар.
Плюс, у меня сложилось стойкое ощущение, что у них регрессивные и старые баги (типа глюков display:inline-block у элементов с position отличным от static, не всегда происходящим repaint/reflow, глюков с регулярными выражениями, глюков с overflow:hidden) имеют низший приоритет. Я точно знаю, что баги эти все по 10 раз зарепортены. Невозможно так долго на это забивать.
С Оперой совсем другая песня. Когда встречаешь какой-нибудь баг в Опере то практически всегда, во-первых, не понимаешь из-за чего так, во-вторых, сложно найти триггер бага, в-третьих, тупо не знаешь как фиксить да и вариантов особых нет, хаков для Оперы рабочих практически не существует. В JS еще можно сделать что-то типа if (window.opera)… а в CSS остается только переверстывать. А если еще учесть, что опера довольно часто обновляется, и что с каждой новой версией багов, как правило, становится больше, то это просто кошмар.
Плюс, у меня сложилось стойкое ощущение, что у них регрессивные и старые баги (типа глюков display:inline-block у элементов с position отличным от static, не всегда происходящим repaint/reflow, глюков с регулярными выражениями, глюков с overflow:hidden) имеют низший приоритет. Я точно знаю, что баги эти все по 10 раз зарепортены. Невозможно так долго на это забивать.
а еще дробные значения в ксс, из-за которого опера не может пройти ACID1. Интересно, из ACID2 этот тест специально убрали?
CSS-хаки для «Оперы» есть. Я, например, придумал несколько.
Opera 10.6 — это провал. Плагин sortable к jquery — нормально них не работает
Браво!
заворожил ваш калейдоскоп. спасибо, может и пригодится когда-то!
Было интересно. =) Но на флэше получается быстрее, проще и без проблем с оперой.
ой опасно тут такое писать :)
ну оно-то да)
но надо же было попробовать)
но надо же было попробовать)
Интересно было бы получить комментарии минусующих, что именно вас так задело? =)
требую от автора: под какой лицензией вы это даете юзать?!!!
спасибо за практикум по JS!
спасибо огромное за статью!
спасибо за практикум по JS!
спасибо огромное за статью!
ээ… не понял
Подразумевается, что в «правильном» калейдоскопе каждый сектор является отражением соседнего. Условно говоря, четные сектора — это сектора из исходного изображения (у вас все сектора из исходного), а нечетные — из изображения, зеркального к исходному. Это гарантирует совпадение краев секторов (как это происходит к классическом калейдоскопе). Правда сделать отражение изображения средствами лишь CSS — проблематично.
хммм… ну, если скормить две картинки, то над таким можно подумать…
а вообще, возможно стоит реализовать такой калейдоскоп на канвасе, там и отражение сделать можно будет
а вообще, возможно стоит реализовать такой калейдоскоп на канвасе, там и отражение сделать можно будет
Чёрт! Продолжим…
webkit.org/blog/182/css-reflections/
webkit.org/blog/182/css-reflections/
И опять мимо! :-)
Ну да, это бы помогло в плане спасения от канваса и дублирования картинок, но поддержка этого свойства пока еще довольно слабая.
ну так только сафари же… и то, не спасет.
можно попробовать SVG/VML, не помню, есть ли у них флипы… если есть, можно использовать их элементы вместо дивов…
можно попробовать SVG/VML, не помню, есть ли у них флипы… если есть, можно использовать их элементы вместо дивов…
О, вот, оказывается, для чего разумного можно применить
Ну просто придется 2 картинки взять: зеркальную и обычную.
шикарно, осталось только придумать куда приспособить)
Очень хорошо :) Я сам в последнее время иногда балуюсь как раз примерно с тем же — ротейтом блоков с фоном и у меня получалось побороть оперную хрень с непоказывающимся фоном при overflow:hidden прописывая картинку блоку через content:url(…), правда, в таком случае, придётся лишний блок использовать, т.к., понятное дело, никакого background-position не будет.
Спасибо очень интересная статья.
Про Оперу вы баг репорт можете отправить если не сложно? https://bugs.opera.com/wizard/
Про Оперу вы баг репорт можете отправить если не сложно? https://bugs.opera.com/wizard/
будет багрепорт)
надо бы только более подробно изучить баг. Вон, kizu новую инфу подогнал. Надо еще покурить
надо бы только более подробно изучить баг. Вон, kizu новую инфу подогнал. Надо еще покурить
Может Опера тормозит по сравнению с остальными, т.к. в ней самое красивое сглаживание получается при трансформациях?
www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/
www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/
Сразу обращаюсь к ребятам из Оперы, которые это прочтут — посмотрите на демо и оформите это как багрепорт.Вы можете сделать это сами за секунду. На той странице, где отображается что-то неверно, зайдите в «Справку» -> «Сообщить о проблеме с сайтом…»
Это — слишком длинный путь к разработчику. Придётся ждать, пока дойдёт дело до вашей жалобы, а потом кто-то из тестировавших должен будет сам написать рапорт об ошибке :-)
Лучше сразу сюда, если не лень: https://bugs.opera.com/wizard/
Лучше сразу сюда, если не лень: https://bugs.opera.com/wizard/
fatal всё правильно сказать, лучше пользоваться визардом.
Интересная работа, буду сейчас разбирать, спасибо.
А в калькуляторе ничего уж такого жизнеспасающего: всего-то синус и косинус считает :D
cos(A), sin(A), sin(A), cos(A)
cos(A), sin(A), sin(A), cos(A)
упс, перед первым синусом "-" потерял
та оно-то да, но я так и не могу вкурить эти чертовы матрицы.
да и согласитесь, указать градус и тыцнуть кнопку — много быстрее, чем считать вручную)
да и согласитесь, указать градус и тыцнуть кнопку — много быстрее, чем считать вручную)
Посмотрите в спецификации SVG, там достаточно легко для понимания описано.
Сектор можно сделать из двух блоков, на схеме это два наклонённых прямоугольника — в одном фон, второй отрезает нужный кусочек. Ну и можно оставить контейнер, если он действительно нужен, но не думаю, что он незаменим.
Вращение можно попробовать сделать вкладывая один сектор в другой, задавая относительное вращение каждого в 30 градусов.
Как уже выше сказали, изображение отражается от граней, стоит хотя бы сделать зеркальную картинку для нечётных граней. На деле там всё ещё сложнее, что и даёт замечательные эффекты :)
Ещё можно попробовать сделать перемешивание без js, с помощью background-attachment; при этом для перемешивания калейдоскопа его в прямом смысле надо будет трясти в стороны :)
Вращение можно попробовать сделать вкладывая один сектор в другой, задавая относительное вращение каждого в 30 градусов.
Как уже выше сказали, изображение отражается от граней, стоит хотя бы сделать зеркальную картинку для нечётных граней. На деле там всё ещё сложнее, что и даёт замечательные эффекты :)
Ещё можно попробовать сделать перемешивание без js, с помощью background-attachment; при этом для перемешивания калейдоскопа его в прямом смысле надо будет трясти в стороны :)
«Сектор можно сделать из двух блоков, на схеме это два наклонённых прямоугольника — в одном фон, второй отрезает нужный кусочек.»
— нет нельзя, потому что фон тогда под углом будет.
«Ну и можно оставить контейнер, если он действительно нужен, но не думаю, что он незаменим.»
— нет, он нужен, потому что иначе прийдется рассчитывать углы индивидуально для каждого повернутого блока, что будет полной лажей.
«Вращение можно попробовать сделать вкладывая один сектор в другой, задавая относительное вращение каждого в 30 градусов.»
— что приведет к еще большим нагрузкам на браузер
«Как уже выше сказали, изображение отражается от граней, стоит хотя бы сделать зеркальную картинку для нечётных граней. На деле там всё ещё сложнее, что и даёт замечательные эффекты :)»
— я эту фишку калейдоскопов вообще не заметил )))
«Ещё можно попробовать сделать перемешивание без js, с помощью background-attachment; при этом для перемешивания калейдоскопа его в прямом смысле надо будет трясти в стороны :) »
— да вы, батенька, извращенец ))))
— нет нельзя, потому что фон тогда под углом будет.
«Ну и можно оставить контейнер, если он действительно нужен, но не думаю, что он незаменим.»
— нет, он нужен, потому что иначе прийдется рассчитывать углы индивидуально для каждого повернутого блока, что будет полной лажей.
«Вращение можно попробовать сделать вкладывая один сектор в другой, задавая относительное вращение каждого в 30 градусов.»
— что приведет к еще большим нагрузкам на браузер
«Как уже выше сказали, изображение отражается от граней, стоит хотя бы сделать зеркальную картинку для нечётных граней. На деле там всё ещё сложнее, что и даёт замечательные эффекты :)»
— я эту фишку калейдоскопов вообще не заметил )))
«Ещё можно попробовать сделать перемешивание без js, с помощью background-attachment; при этом для перемешивания калейдоскопа его в прямом смысле надо будет трясти в стороны :) »
— да вы, батенька, извращенец ))))
нет нельзя, потому что фон тогда под углом будет.эм, не думаю, что это так критично, на цветочном орнаменте смотрится так же нормально)
а лучше вообще прямоугольники поворачивать на 0 и 30 градусов, тогда обрезается повёрнутым прямоугольником, а фон остаётся в нормально спозиционированном.
Сразу отвечу на комментарий ниже повтором — четвертый блок не нужен совсем :)
нет, он нужен, потому что иначе прийдется рассчитывать углы индивидуально для каждого повернутого блока, что будет полной лажей.внутренние блоки поворачиваются относительно родителя? если да, то нумерованные классы можно проставить одному из наклонных блоков (внешнему), опять же — оставив всего два контейнера.
что приведет к еще большим нагрузкам на браузерда, избавляюсь от лишних блоков, а тут ступил… не нужно, ок :)
«м, не думаю, что это так критично, на цветочном орнаменте смотрится так же нормально)»
отправилось случайно.
так вот:
«м, не думаю, что это так критично, на цветочном орнаменте смотрится так же нормально)»
он не только будет стоять под углом, но и сдвигаться под углом, что есть неправильно
так вот:
«м, не думаю, что это так критично, на цветочном орнаменте смотрится так же нормально)»
он не только будет стоять под углом, но и сдвигаться под углом, что есть неправильно
Эм, о чём мы вообще говорим? Под каким углом? У нас все сектора под углом. И два блока правда не нужны :)
Я таки сделал рабочий пример: quaint.su/for/habrahabr/kaleidoscope/
И там сделано зеркальное отражение, выглядит круто! Правда, тут виден плюс общего контейнера для сектора — матрицу можно было бы задать в одном месте для первого повёрнутого прямоугольника через .sc:nth-child(even) .rl{...}
Но этили лучше всё равно прописывать на js, так что без разницы.
С background-attachment проблемка — Fx не перерисовывает блоки с css-transform при изменении позиции, так что дальше ковырять не стал.
Я таки сделал рабочий пример: quaint.su/for/habrahabr/kaleidoscope/
И там сделано зеркальное отражение, выглядит круто! Правда, тут виден плюс общего контейнера для сектора — матрицу можно было бы задать в одном месте для первого повёрнутого прямоугольника через .sc:nth-child(even) .rl{...}
Но этили лучше всё равно прописывать на js, так что без разницы.
С background-attachment проблемка — Fx не перерисовывает блоки с css-transform при изменении позиции, так что дальше ковырять не стал.
1. отражение в хроме не работает
2. под обычным углом! боковое смещение картинок должно быть относительно «лучей», т.е. относительно медианы сектора! у вас же боковое смещение относительно одной из сторон сектора!
2. под обычным углом! боковое смещение картинок должно быть относительно «лучей», т.е. относительно медианы сектора! у вас же боковое смещение относительно одной из сторон сектора!
1. Забыл для всех браузеров циферки поменять, теперь работать должно.
2. Это калейдоскоп, там картинки перемешиваются! Смещение будет очевидно только при mousemove в первом секторе. Но я всё равно поправил, теперь поведение совсем как у вас было.
2. Это калейдоскоп, там картинки перемешиваются! Смещение будет очевидно только при mousemove в первом секторе. Но я всё равно поправил, теперь поведение совсем как у вас было.
а вот теперь действительно круто.
только в ИЕ не пашет )))
ну да ладно.
Сделаю апдейт к посту.
Вы молодец =)
только в ИЕ не пашет )))
ну да ладно.
Сделаю апдейт к посту.
Вы молодец =)
Я кусок для ие вообще убрал… Там нужно перемножить матрицы, которые есть сейчас, на матрицу, которую я указал выше (первые две строки только, конечно), причём я постоянно путаю, в какой последовательности, надо оба варианта испробовать. В общем, просто было лениво:)
кстати, все равно смещение фона относительно стороны, а не медианы )))
т.е. если все-таки не упразнять блоки, то выйдет еще правильней ))
но да, оно не особо заметно
т.е. если все-таки не упразнять блоки, то выйдет еще правильней ))
но да, оно не особо заметно
Здесь нужно смещение относительно общего контейнера (неясно — зачем). В вашем случае с вертикалью совпадала медиана первого сектора, в моём — его вертикальная сторона. Т.е. если будете водить мышью по первому сектору (справа от вертикали внизу), то паттерн будет двигаться ровно за мышкой, как и у вас.
в том-то и дело, что по-правильному смещение должно быть перпендикулярно медиане видимого сектора.
у меня оно не совпало так, я именно для этого и добавил внутрь еще один блок.
т.е. если идеально правильный калейдоскоп будет если добавить отражение (как у вас) и смещать относительно медианы сектора (как у меня)
у меня оно не совпало так, я именно для этого и добавил внутрь еще один блок.
т.е. если идеально правильный калейдоскоп будет если добавить отражение (как у вас) и смещать относительно медианы сектора (как у меня)
Что такое видимый сектор? О какой правильности смещения можно говорить, когда в одном предложении игрушка калейдоскоп и компьютерная мышь? ;) По правильному у нас должно быть несколько геометрических примитивов, которые будут перемешиваться при встряске калейдоскопа)
У меня относительный поворот калейдоскопа относительно вашего — 15 градусов. Если я сделаю смещение относительно медианы, то не будет прямой интуитивной связи движений мышки и движений рисунка, т.е. мышка будет как зерно в генераторах случайных чисел (хотя на самом деле я за такое поведение ;) ). У меня сделана привязка координат рисунка одного сектора к системе координат вьюпорта (как и у вас) — это соответствует физике этого мира :) В настоящем калейдоскопе незеркальный сектор обычно определить было невозможно, и «ортогональным» сектором может быть любой.
У меня относительный поворот калейдоскопа относительно вашего — 15 градусов. Если я сделаю смещение относительно медианы, то не будет прямой интуитивной связи движений мышки и движений рисунка, т.е. мышка будет как зерно в генераторах случайных чисел (хотя на самом деле я за такое поведение ;) ). У меня сделана привязка координат рисунка одного сектора к системе координат вьюпорта (как и у вас) — это соответствует физике этого мира :) В настоящем калейдоскопе незеркальный сектор обычно определить было невозможно, и «ортогональным» сектором может быть любой.
в ФФ швы полезли(
хотя да, можно четвертый блок упразнить, сгенерировав его в CSS при помощи того же :before
но вот стучаться к нему яваскриптом будет проблематично, да и опять же, на сколько мне известно, это понизит производительность (хотя тут могу ошибаться — чисто субъективные наблюдения)
но вот стучаться к нему яваскриптом будет проблематично, да и опять же, на сколько мне известно, это понизит производительность (хотя тут могу ошибаться — чисто субъективные наблюдения)
Возил мышкой минут 20… вспомнил игрушку с детства. :)
красота!
Большое спасибо, за хорошую статью. Как раз появилась необходимость создать калейдоскоп.
Ухх. Тёмный калейдоскоп со второго примера выбитыми пикселями пугает.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Делаем калейдоскоп на CSS+JS