Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 109
Демку выложите? В фаербаге и при зуме поюзать хочется.
интересный метод, а главное простой что очень важно, и с первого взгляда вроде бы не кривой :)
Да. Он лежал на поверхности. Я сам удивился, когда при длительном поиске так и не нашел ничего похожего. Может, конечно, плохо искал.
Я, увидев вашу аватарку, подумал на Хабре появился какой-то новый функционал, потом подумал, что зайдя пару минут на ваш Аскдев я установил какой-нибудь скрипт для Гризманки :))
Кстати неплохая идея — ответы на спорные вопросы искать на Аскдеве по средствам скрипта для Гризманки :) Или хотя бы знать, что данный вопрос раскрыт на вашем сайте :)
Кстати неплохая идея — ответы на спорные вопросы искать на Аскдеве по средствам скрипта для Гризманки :) Или хотя бы знать, что данный вопрос раскрыт на вашем сайте :)
главный минус из всех ваших минусов:
Метод нельзя использовать при плавающей ширине
к которому еще нужно прибавить «Метод нельзя использовать при плавающей Высоте»
поэтому какая польза от этого способа,
если при фиксированном варианте вполне можно обойтись одним дивом и одним изображением:
<div style=«background:url(большой прямоугольник с скругленными углами.png) repeat; padding: 10px;»>
…
много текста разного тут
…
</div>
* 1 div
* одна строка сss
* Без javascript
?
Метод нельзя использовать при плавающей ширине
к которому еще нужно прибавить «Метод нельзя использовать при плавающей Высоте»
поэтому какая польза от этого способа,
если при фиксированном варианте вполне можно обойтись одним дивом и одним изображением:
<div style=«background:url(большой прямоугольник с скругленными углами.png) repeat; padding: 10px;»>
…
много текста разного тут
…
</div>
* 1 div
* одна строка сss
* Без javascript
?
repeat лишний
Если высота плавающая — используем line-height:1em;
И тогда высота подстраивается нормально.
Насчет
позволю себе с вами не согласиться, так как размеров блоков может быть много. А под каждый из них создавать свое изображение — это уж увольте.
И тогда высота подстраивается нормально.
Насчет
при фиксированном варианте вполне можно обойтись одним дивом и одним изображением
позволю себе с вами не согласиться, так как размеров блоков может быть много. А под каждый из них создавать свое изображение — это уж увольте.
Насчет repeat-а — я знаю, что это значение по-умолчанию. Добавил для наглядности. И кроме того — у меня есть мысль, что при указанном свойстве браузер реагирует быстрее (могу и ошибаться).
Вместо того, чтобы проверять указан ли repeat-x, repeat-y, no-repeat, и не обнаружив ни одного из них присваивать дефолтовое значение, браузер сразу понимает, что надо повторять по обеим осям.
Возможно это миф. Но мне с ним легче жить)
Спасибо за комментарий
Вместо того, чтобы проверять указан ли repeat-x, repeat-y, no-repeat, и не обнаружив ни одного из них присваивать дефолтовое значение, браузер сразу понимает, что надо повторять по обеим осям.
Возможно это миф. Но мне с ним легче жить)
Спасибо за комментарий
И тутже ничого хорошого не выйдет, нужно всиравно както залить сободное пространство внутри, потомучто выйдет как на етой картинке
Вполне согласен. Можно придумать невероятно кроссбраузерный способ, но грош ему цена, если он никак не растягивается.
у вас нет связи между 16px и 20em (в природе ее тоже нет), поэтому: вот (измененный шрифт).
Не будет работать с прозрачностью!!!
Я говорю не будет работать!!! Прозрачностть будет! Но кругляшки будут просвечивать!!! Попробуйте сами!!!
я так понимаю, webportal справедливо заметил, что сделать полупрозрачный блок вашим способом ну никак не получится.
Знаете, ерунду вы придумали, с кучей ограничений к применению. Например, размер блока должен быть кратным диаметру окружности на бэкграунде. С тем же успехом можно было ограничиться одним div-ом с картинкой закругленного блока на фоне. Минусы: все те же минусы, что и у вас. Плюсы: можно сделать полупрозрачный блок
Знаете, ерунду вы придумали, с кучей ограничений к применению. Например, размер блока должен быть кратным диаметру окружности на бэкграунде. С тем же успехом можно было ограничиться одним div-ом с картинкой закругленного блока на фоне. Минусы: все те же минусы, что и у вас. Плюсы: можно сделать полупрозрачный блок
В купе с типографской сеткой шириной вопрос на счет кратности уходит сразу.
а для блока с другим радиусом скругления углов будем строить новую сетку?
взяли за стандарт скругление радиусом 0.5 em, что будет равно в итоге 1 em, и как ты не старайся у тебя при использовании сетки будет все четко, читайте таблоиды смотрите внимательнее в сетки
Расскажите, пожалуйста, как вы собираетесь нарисовать на картинке объект размером в 0.5em? Насколько я знаю, в том же PNG используются только пиксели в качестве единиц измерения.
первое — размер будет не 0,5em а 1em так как диаметр = 2 радиуса.
второе — 1em = 16px это уже почти стандарт от которого пляшут.
второе — 1em = 16px это уже почти стандарт от которого пляшут.
1em = 16px это уже почти стандарт от которого пляшут.
Стандарт? А то, что этот «стандарт» напрямую от кучи факторов, начиная от типа шрифта, заканчивая настройками размера этого самого шрифта у ОС и браузера о чем-нибудь говорит? Вот вам примеры, как такой «стандарт» работает в жизни:
habrahabr.ru/blogs/css/63836/#comment_1774551
habrahabr.ru/blogs/css/63836/#comment_1774578
habrahabr.ru/blogs/css/63836/#comment_1776413
Ну и вопрос на засыпку: при «1em = 16px это уже почти стандарт» могу ли я, например, сделать скругление уголков в 30 пикселей с таким подходом?
Вот только мне интересно за что минусуют???? Или уже хабр превратился в хрен знай что????
> Без javascript
Слава Богу что и без PHP+Ajax :-)
Слава Богу что и без PHP+Ajax :-)
поправьте ошибку Медод
Интересный способ. Думаю, стоит взять на заметку. В жизни может разное пригодится. Особенно, при верстке шаблонов с жестким размером.
Спасибо.
Спасибо.
В Chrome 3.0 не работает
В FF и Opera — нормально
В FF и Opera — нормально
Вот скриншот в подтверждение: i28.tinypic.com/2ywvbz4.png
Удивительно.
Во всех версиях, работает нормально.
От 0.3 до 2 все ок. Надо протестить.
Во всех версиях, работает нормально.
От 0.3 до 2 все ок. Надо протестить.
Я думаю, это из-за текста. habrahabr.ru/blogs/css/63836/#comment_1773884
В Chrome 2.0 работает.
Сплошной глюк в Opera 10.00 Beta 2 Build 1615:
> В Chrome 3.0 не работает
> В FF и Opera — нормально
У меня наоборот:
Chrome 3 — работает
Opera 9.64 — не работает
Выглядит вот так
> В FF и Opera — нормально
У меня наоборот:
Chrome 3 — работает
Opera 9.64 — не работает
Выглядит вот так
Используйте таблицы (3 x 3).
И всё будет работать.
И всё будет работать.
Интересная реализация!
Как вариант весьма оригинально, большой минус это ширина, но стоит подумать надо этим :)
а если мне нужен градиентный блок с закругленными углами?
))
))
И с розочками по периметру %)
по-моему, я не сказал ничего сверхестественного
сегодня такое часто встречается в нормальном дизайне
а вот «розочки по периметру» — это уже другое
сегодня такое часто встречается в нормальном дизайне
а вот «розочки по периметру» — это уже другое
В общем и целом — возможно.
«градиентный блок» — это завышенные требования к именно этому рецепту. Он (как и многие) имеет смысл в определенном случае, в частности, когда цвет блока монотонный.
Возможно, конечно, сделать и градиентный блок этим способом, вымерив и нарезав картинки для фона, но, имхо, это сводит на нет основное достоинство способа — простоту.
«градиентный блок» — это завышенные требования к именно этому рецепту. Он (как и многие) имеет смысл в определенном случае, в частности, когда цвет блока монотонный.
Возможно, конечно, сделать и градиентный блок этим способом, вымерив и нарезав картинки для фона, но, имхо, это сводит на нет основное достоинство способа — простоту.
Почему нельзя использовать при плавающей ширине? Можно. Надо просто сделать так, чтобы ширина была кратна размеру кржочка. Это делается заданием ширины в процентах (100 * диаметр кружочка)
Вариант, похоже, интересен только в теории. Попробуйте увеличить масштаб страницы — нехорошо себя ведет.
Firefox 3, Мак — не работает. И не будет работать у тех у кого, как у меня выставлено: минимум размера шрифта 12.
А почему не использовать чисто CSS-ный метод, типа этого (http://www.shtorkin.ru/demo_rc)?
Полностью кроссбраузерный, без изображений, поддерживается полупрозрачность, при масштабировании страницы вроде не разъезжается.
Из минусов только фиксированный радиус скругления (3px) и алиазинг.
Полностью кроссбраузерный, без изображений, поддерживается полупрозрачность, при масштабировании страницы вроде не разъезжается.
Из минусов только фиксированный радиус скругления (3px) и алиазинг.
Вернее, можно и два, но если делать больше, уже не смотрится совсем.
В этом методе нет сглаживания, типа алисинг в фотошопе. Видна не большая лесенка. А используя подготовленную картинку скругление будет смотреться мягче. И, кстати, если увеличить радиус, то надо добавить еще тегов и задать им новые параметры. Если радиус 5, то внутренних тегов должно быть 5. Чем больше радиус, тем меньше обращает на себя внимания «Лесенка».
Метод поста может быть полезен в случае, если надо сделать много разных блоков, с одинаковым скруглением и при фиксированных ширине и высоте. Тогда загружается всего одна картинка, и используются одни и те же три строки CSS во всех блоках.
Блоки должны быть строго фиксированны, ширина и высота кратны диаметру картинки. Только в этом случае решение оправдано.
Да! Очень важно! А когда мы, наконец, займемся проблемой заострения углов?
Метод поста может быть полезен в случае, если надо сделать много разных блоков, с одинаковым скруглением и при фиксированных ширине и высоте. Тогда загружается всего одна картинка, и используются одни и те же три строки CSS во всех блоках.
Блоки должны быть строго фиксированны, ширина и высота кратны диаметру картинки. Только в этом случае решение оправдано.
Да! Очень важно! А когда мы, наконец, займемся проблемой заострения углов?
Ну поэтому я и написал, что это минус. С другой стороны, читая сайт с приемлемого расстояния в 60-70 см, рекомендованного минздравом для ПК-юзеров, алиазина почти не видно, особенное, если цвет блока не так сильно контрастирует с бэкграйндом, как в наших примерах (на сером блоке #aaaaaa уже не видно).
Кстати, если для скругления углов можно провести параллель с padding`ом, то ваше предложение — прямо margin какой-то :-)
Кстати, если для скругления углов можно провести параллель с padding`ом, то ваше предложение — прямо margin какой-то :-)
В принципе, в варианте с лесенкой нет ничего плохого. Пиксель-арт рулит, если не очень контрасно, то не заметно, из далека и правда не видно. А если учесть, что экраны становятся все больше, а размер пикселя, соответственно, меньше, то можно говорить о том, что отсутствие алисинга не проблема.
Кстати, специально замерил. Если суммировать вес кода CSS поста и вес картинки, то получится примерно столько же, как и на Шторкине.ру.
Кстати, специально замерил. Если суммировать вес кода CSS поста и вес картинки, то получится примерно столько же, как и на Шторкине.ру.
Кстати, чтобы качественно подготовить изображения для спрайтов, для дальнейшего использования в таких вот блоках, надо помнить и резкости. Вот, например, в вашем примере верхняя или левая граница блика в изображении имеет гораздо бОльшую резкость, нежели место скругления. Так что не всякий анти-алиасинг приводит к приемлемым результатам, тут надо либо аншарп-маск применять, либо создавать заведомо бОльшую картинку, а потом ее уменьшать с соответствующими алгоритмами интерполяции.
Для заострения, думаю, можно использовать отрицательный border-radius (-:
Немножко страшно смотрится, но вообще мы тоже используем этот метод :)
Масштаб увеличиваем и получаем плохой результат elfiki.com/habr/block.png
Очень хорошая идея. И мне почему-то кажется, что её всё-таки можно использовать и при при плавающей ширине, и с бордером.
А как, извините?
Вариант с плавающей шириной: добавляется ещё один слой, в котором фон выравнивается по правому краю, и добавляется внешний отступ слева. В остальном всё то же самое.
Вариант с border-ом: Рисуется не круг, а окружность. Для блоков просто задаются border-ы: для одного — вертикальные, для другого — горизонтальные.
Вариант с border-ом: Рисуется не круг, а окружность. Для блоков просто задаются border-ы: для одного — вертикальные, для другого — горизонтальные.
А можно на рабочий пример взглянуть?
Вот рабочий пример и с мёдом, и со сгущённым молоком (и с border-ом и с плавающей шириной)
www.yanajy.com/files/corners-by-yanajy.rar
Делал под лисичку, под ослика нужно немного подправить, но суть метода от этого меняется.
По высоте не растягивал (опять-таки, дело не в высоте, её можно регулировать лайн-хайтом).
www.yanajy.com/files/corners-by-yanajy.rar
Делал под лисичку, под ослика нужно немного подправить, но суть метода от этого меняется.
По высоте не растягивал (опять-таки, дело не в высоте, её можно регулировать лайн-хайтом).
я, конечно, хотел написать, что суть метода НЕ меняется :)
По высоте не растягивал (опять-таки, дело не в высоте, её можно регулировать лайн-хайтом).
А может все-таки попробуете сделать так, чтобы он и по высоте нормально растягивался, и чтобы текст можно было нормально читать (скромный намек на line-height, который в вашем случае должен быть кратен диаметру круга), и не зависел от типа и размера шрифта у пользователя?
Респект! Везде работает кроме ие6 (в ие7 и ие8 работает)
молодец, что не поленились. Не знаю как это удалось, но ie6 даже текст в блоке не показывает. IE8 — та же неудача что и у автора:
если в .panel вложить .panel2 с таким же фоном, но по правому краю, то нужно добавлять левый margin, чтобы показался фон(кружочки) «заднего» дива, и блок .w нужно сдвигать влево на минус margin или не выйдет ничего с идеей про бордеры. В итоге решение превращается просто в набор костылей. У автора оно не идеальное, а с этим предложением и вовсе ужас. На верстку такого блока будет уходить море времени.
На вёрстку этого блока у меня ушло 10 минут.
Ещё минуты 3 уйдёт на подбор line-height-a для растягивания блока по высоте.
И ещё минут 7 — на исправления под ослика.
Итого 20 минут. А если код уже готов, то подогнать его под любой дизайн — пятиминутное дело. Имхо, очень хороший способ.
Ещё минуты 3 уйдёт на подбор line-height-a для растягивания блока по высоте.
И ещё минут 7 — на исправления под ослика.
Итого 20 минут. А если код уже готов, то подогнать его под любой дизайн — пятиминутное дело. Имхо, очень хороший способ.
или у нас разные понятия времени, или я чего-то не понял: 20 минут — это нормально? имхо — до фига.
плюс лично мне неприятно писать жидкий нестабильный код, насыщенный хаками и извратом.
ps: и если не сложно — пример выложите, хочу краш-тест устроить 8)
плюс лично мне неприятно писать жидкий нестабильный код, насыщенный хаками и извратом.
ps: и если не сложно — пример выложите, хочу краш-тест устроить 8)
это уже не тема этого обсуждения. о хаках и т.д. и т.п. и так куча всего написана.
решение считается удобным и лучшим к применению в работе если:
— код понятен
— адекватен
— по возможности минимален
ваше решение отдыхает по всем трем направлениям, и это не другая тема, а просто тема не стоит выеденного яйца и её не стоило даже развивать.
ps: никуда 20 минут у вас не ушло, ибо говорили об этом в прошедшем времени «у меня ушло» (якобы сделал), а примера до сих пор не вижу, или я не прав и еще должна теплится надежда, что пример мы таки увидим?
— код понятен
— адекватен
— по возможности минимален
ваше решение отдыхает по всем трем направлениям, и это не другая тема, а просто тема не стоит выеденного яйца и её не стоило даже развивать.
ps: никуда 20 минут у вас не ушло, ибо говорили об этом в прошедшем времени «у меня ушло» (якобы сделал), а примера до сих пор не вижу, или я не прав и еще должна теплится надежда, что пример мы таки увидим?
Я НЕ говорю о том, что это «лучшее к применению» решение. Обратите внимание на мой первый коммент в этой ветке, с которого всё обсуждение началось. Я говорю о том, что это ВОЗМОЖНО, а пользоваться этим методом или нет — решать будет всё равно каждый сам в каждом конкретном случае. Я, например, в некоторых случаях использовал бы этот метод.
Ах, да. Пример я уже давно выложил: habrahabr.ru/blogs/css/63836/#comment_1775724
если кажется — креститься надо :)
У меня DPI 150% в системе -))
Монитор 26 дюймовый и разрешение поэтому огромное.
Это был намек на счет углов -)))
Монитор 26 дюймовый и разрешение поэтому огромное.
Это был намек на счет углов -)))
Мне кажется, что если поиграться с line-height и использовать шрифт только одного размера, то можно достигнуть резиновости по высоте. Но вот только на практике это может быть не совсем подходяще.
> Минимум css
А на мой взгляд много :)
А на мой взгляд много :)
не хочу кого-то переубеждать (ибо в гробу чужие предубеждения и тем более холивойны), но задавая ширину-высоту блоков в em попробуйте всё это дело в IE, предварительно установив увеличенные шрифты в системе (это часто делается пользователями при серфинге используя плазму, на дорогих мониторах с мелким зерном, и просто уважайте людей со слабым зрением). Ваш пример скругления уголков метод показывает верный, но то что он «рабочий» — согласиться трудно.
Вещь короче не кросс браузерная :(
На ооочень старых браузерах вообще красота, кружавчики по краям )
api.browsershots.org/png/512/87/8778174d64eb833aa185cea324fd16b0.png
api.browsershots.org/png/512/87/8778174d64eb833aa185cea324fd16b0.png
Столько усилий, и в итоге работает только лишь в некоторых случаях. Я просто изменяю размер шрифта — и уголки разъехались.
Вердикт — метод никуда не годится, плюсов как таковых нет — ну какая разница три или четыре дива? Вот если был один, то да, это огромный плюс.
И достаточно что лишь в одном популярном браузере, при любых нестандартных настройках это не работает — считай что этот метод не работает совсем. Лучше уж тогда применять новое свойство CSS — когда в новых и прогрессивных браузерах уголки закруглятся, а в остальных будут острые углы, но хоть верстка от этого не развалится, и сайт будет выглядеть вполне нормально, правда если вёрстка была на заказ, то её никто у вас не примет.
Вердикт — метод никуда не годится, плюсов как таковых нет — ну какая разница три или четыре дива? Вот если был один, то да, это огромный плюс.
И достаточно что лишь в одном популярном браузере, при любых нестандартных настройках это не работает — считай что этот метод не работает совсем. Лучше уж тогда применять новое свойство CSS — когда в новых и прогрессивных браузерах уголки закруглятся, а в остальных будут острые углы, но хоть верстка от этого не развалится, и сайт будет выглядеть вполне нормально, правда если вёрстка была на заказ, то её никто у вас не примет.
Windows XP, FireFox 3.5
помоему Ваши минусы сильно перевалили за плюсы :)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Скругленные углы в 3 div-a