Pull to refresh

Comments 79

Памятник тому прочитает каждую статью от и до.
Может, стоит выделить лучшие?
А мне пришлось каждый способ еще прочитать) чтобы его описать)
Имхо лучший вариант Заголовки и другие элементы картинками
один div, работает в IE (в комментариях на хабре есть важные правки для IE)
если ширина нефиксированна - картинки можно завернуть в спрайт,
а если нефиксирована, то внедрить в css через data:URL/mhtml
а если ширина нефиксированна?
А теперь хотелось бы выслушать начальника транспортного цеха ))
пример изначально работает для нефиксированной ширины
я говорю за дополнительную оптимизацию:
  • если фиксированна - можно неиспользовать content, а только background, а картинки соответственно сложить в спрайт
  • если нефиксированна - вместо 4-х картинок можно внедрить их в css через data:URL/mhtml
Мы тут позволили себе подшутить над Вашей опечаткой в комменте выше. Судя по всему, Вы не поняли :)
Слишком много картинок(4 вроде).
ну так и угла 4, а как ещё?
а картинки можно оптимизироват в спайты или data:URL
Это не лучший вариант. Это хороший вариант только если нужно сделать блок с закругленными углами с однородным фоном на однородном фоне. В других случаях этот вариант не годится. + используется expression для ie что не очень кошерно (без js круглых уголков не будет)
IE без js - редкость. Там не каждый найдёт где вообще этот js выключается.
Если у долей процента юзеров сайт рабочий, читабельный, но будет без нафик неужных круглых уголков - это нестрашно.
UFO just landed and posted this here
ну, первая не работает в опере, а у второй как-то все очень замудрено)
Хотя теперь вот упомянуты)
UFO just landed and posted this here
Согласен. Как для меня то в большинстве случаев использую:
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
и если в старых браузерах, не работает, то в основном не критично, зато очень просто.
Но другое дело, если стоит задача чтобы все работало во всех браузерах, тогда приведенная выше подборка будет полезна.

По моему очень полезная информация, думаю многие почитают!
да уж. автор этого обзора титан! много полезной информации
я использую PNG в качестве фона, и тени можно реализовать и полупрозначность, а для IE, есть фикс, который на хабре выкладывали!
Для этого есть много различных фиксов ;) каждый пользуется каким ему удобно.
15 статей на хабре со списком разного количества других статей.
Ну если вам удобно при необходимочти читать все 15, то я в общем-то не против)
Вы не поняли, я предложил тему для еще одной статьи :)
Мы уже думаем над этим и готовим материал))
UFO just landed and posted this here
От данной реализации пришлось откреститься, как от ужасающей по ресурсоёмкости (использовался jquery corners), данный метод работает только для IE6 из-за его болезней с позиционированием абсолютных углов внутри относительного родительского контейнера (да и то, работает неидеально).
Какой ужас. Видать, дизайнерам реально стало нечем заняться, раз они придумывают столько способов сделать одну из простейших вещей. Причём во всех случаях собствено скругления достигаются за счёт четырёх (а вернее — одного, но размноженного и отражённого) картинок-уголков. Насколько хорошо нарисовал уголок — настолько крутой будет блок со скруглением.
В последнее время попёр вал каких-то недотуториалов в подобном духе — 34 лучших буллета для списка, 65 видов иконок RSS, 77 туториалов как нарисовать жёлтую звёздочку с надписью NEW! и так далее... Какой-то разгул дешёвой кустарщины.
Это не "дешёвая кустарщина", как вы выразились, а профиссиональный подход к поставленному делу. А вы попробуйте сделать хотя бы половину работы автора!
Я не о работе составителя данного дайджеста. а о том многообразии подобных туториалов. неужто всем требуется такие простые вещи рассказывать? дожили...
Поймите сколько дизайнов, столько и подходов к ним - если у меня сайт в светло-жёлтых тонах, то мне захочеться зделать блок с такими(http://blog.josh420.com/archives/2007/11/how-to-create-fluid-width-div-layers-with-rounded-corners.aspx) краями а не с такими(http://www.schillmania.com/projects/dialog2/)
Не мне вам это обьяснять)
Ну и не мне объяснять, что такие или эдакие скругленные углы у прямоугольников никак не спасают ситуацию: если в целом дизайн бездарный, а юзабилити нелепое, то сайт таким и останется, хоть все поскругляй вокруг. А в 90% случаев скругление углов — есть признак дремучей попсы и бесконечной избитости приема. Ибо сайтов со скругленными углами миллионы. Есть смысл плодить очередной, даже если ты вооружен аж 38 методами?
Да!!!
Закрыли тему!
Глупость говорите.
>В последнее время попёр вал каких-то недотуториалов
В принципе да, надоедает. Но это намного лучше, чем полное отсутствие каких-либо туториалов и одни и те же вопросы у новичков.
может и так. да только что-то стало слишком много дайджестов туториалов для олигофренов, переводных статей ни о чем и прочей чепухи... от данного сайта почему-то ожидается большего. более интересного и оригинального, нежели перевод очередного руководства как рисовать кружочки.
Ну что-то новое и оригинальное в верстке найти сложно, если вы несколько лет этим занимаетесь. Имхо.
А при чём здесь дизайнеры? Это верстальщики буйствуют, вы не поверите!
Кстати, существуют и не-картиночные способы, правда они достаточно жутко выглядят и годятся только при маленьком радиусе закругления.

Особенно меня удивило, как вы мило побеседовали с двумя товарищами выше :) Никто не заметил, что один про фому, а другой про ерёму..
Оч. полезная статья, в избранное так скажем :) Но я все равно такие штуки верстаю с 4 картинками и таблицами, реализация простая и работает во всех браузерах корректно в отличие от различных вариантов с дивами. Вообще все стараюсь верстать блоками (DIV'ами), но иногда приходится и таблицы задействовать, ничего плохого в этом не вижу, зато все чинно и корректно вне зависимости от браузера. Как говорится, все для пользователя. :)
мне например удобней использовать jQuery т.к. я им пользуюсь, так что каждому свое)
Бесспорно, каждый выбирает вариант, который ему ближе, проще и интересней. Ничего одинакового не бывает, наверно это даже к лучшему :)
не знаю, я всегда либо 4 дивами с 4 картинками делаю (везде работает), либо вообще без картинок
Это надо закинуть в избранное и забыть об этом. Как инструментарий.
Спасибо автору!
Статья из разряда тех, которые разом не осилить, зато можно добавить в избранное и, при необходимости, обращаться
Спасибо. Статья не чтобы читать, а чтобы добавить в избранное и обращаться по необходимости.
сунул в фавориты

а вообще порой хочется убить дизайнера за подобные плюшки на каждой маломальской фиговине -.-
UFO just landed and posted this here
Минусители, которые там недовольны... Мол, труд составителя и все такое. Ну вот вам к вопросу об оригинальности статей на Хабре.... http://www.cssjuice.com/25-rounded-corne… Было 25. стало 38. Великий труд.
Автор хотя бы для приличия указал первоисточник. Но это в последнее время вполне распространенная тенденция. Хапнул инфу, перевел-как-смог... Дополнил 5-6 блоками в том же духе... И выставил как свое произведение.
А с чего вы взли что я брал с кссджус?!! нынче гугль моден.
Да какая разница откуда брал. Мож и на цссджус тоже слямзенное откуда. В любом случае, налицо использование чужого материала. И нелишне было бы привести ссылку на первоисточник, как это делают многие переводчики и составители дайджестов. Сугубо ради приличия хотя бы. Лично я свои статьи пишу сам, практически не используя никаких источников (ну разве только энциклопедические данные, позаимствованные из Википедии), но если вдруг решу написать (но вряд ли решу) статью на базе иноземного материала, даже если привнесу 70% собственных мыслей, все равно укажу первоисточник. Просто из вежливости и уважения к тому, кто натолкнул меня на идею написания такой статьи.
Что значит ссылка на первоисточник? первоисточник чего? или вы гугл имеете ввиду?
Ну и к чему это? Или вы утверждаете, что вот так вот сели и с нуля, не исопльзуя НИКАКИХ источников, написали эту статью, не зная, что существует еще с десяток подобных дайджестов:

http://www.smileycat.com/miaow/archives/…
http://www.cssjuice.com/25-rounded-corne…
Да или даже в гугле: http://www.google.ru/search?q=25+rounded…
Я не понимаю, что вы от меня хотите, у меня в закладках оперы порядка 60 статей про круглые углы, которые накопились за 6 месяцев, потом я разом открыд их всех и выбрал наиболее удачные. Дак в чем проблема?
Нда, почитала ваши комменты в других тредах.. это клиника.
Статьи про типографику, возможно, и хорошие, но с таким характером и такой страстью к говнометанию — лучше бы вы на хабре не появлялись, ей-богу.
Ты так думаешь? Ну ладно.
1. скриншоты у чувака вырезаны местами немного по-другому, и весят иначе. Вы действительно думаете, что он их передрал, чтобы сидеть, пережимать, подрезать и пересохранять каждый?

2. У всякого верстальщика в закладках постепенно скапливаются ссылки на кучу способов решения разных проблем. Я сейчас на основе закладок легко составлю дайджест "пять способов прижать футер к низу" или "десять статей про полупрозрачность в IE6".

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

На основе всего вышесказанного (если вы видите там ошибки — я вас внимательно слушаю) просится вывод, что вы залезли в тему, в которой не разбираетесь, а к автору "дое%ались"(с) на основе совершенно надуманных претензий.
Эт я вообще не ктому что, мол, дое%ался и все такое. Просто мне кажется, нужное какое-то уважительное отношение к тем, кто сделал что-то раньше вас. Хотя если вы точно без вообще каких-либо имеющихся статей вроде указанных абсолютно с нуля сделали свой обзор, то, разумеется, снимаю шляпу и все такое. Но почему-то не верится в это. Ведь даже скриншоты в западной статье и в вашей идентичны.
Эм...может вам еще PSD исходник этих картинок прислать? я в принципе могу...
ну если вы проверите, то там все 4 раздела вместе смешаны...
Спасибо.)
Только одно «но»: «Nifty углы без сглаживания» как раз-таки со сглаживанием, а оригинальные nifty — без. Об этом как раз говорит «Anti-aliased» на скришоте. :-)
Спасибо за усердность, хорошая подборка.
Спасибо за систематизацию и краткий обзор, как раз сейчас стою перед выбором.
Как раз интересуюсь... а тут стока вариантов... Конечно, все за раз не осилить, но как вариант очень полезно держать по близости. Мну, как новичку однозначно, в Абсолютное Избранное. Автору мега-респект и огромное человеческое спасибо!!!
Спасибо, пригодится.
Только не понимаю зачем размещать варианты, не работающие в IE? При всем желании пока что никто же не может посылать пользователей этого браузера.
UFO just landed and posted this here
UFO just landed and posted this here
По поводу «Как сделать тянущиеся по ширине divы с круглыми краями» и того, что не работает в IE: я делал точно такой же вариант и у меня все получилось. Может ему неповезло?
а есть решения для скругления (пусть даже и псевдо) углов изображений?
Sign up to leave a comment.

Articles