Скругленные углы на чиcтом CSS без JS без картинок с анти-аллиасингом

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

    Хочу заметить, что это не улучшение какого-то из существующих методов, а совершенно новый (по крайней мере, я нигде не смог найти — наверное, плохо искал ;) метод. В статье 38 статей о создании закругленных углов на сайтах данный метод также не был упомянут.

    Итак, что же мы имеем: чистый CSS, без единой картинки, без JavaScript (хотя и с ним, для демонстрации, тоже сделаем), с анти-аллиасингом (то есть плавные переходы), прозрачные углы (то есть в фоне может быть что угодно), тянущийся по высоте и ширине и, конечно же, кроссбраузерный метод.



    HTML:


    <div class="box w60">
                <div class="box-c">
                    <em class="ctl"><b>&bull;</b></em>
                    <em class="ctr"><b>&bull;</b></em>
                </div>
                
                <div class="box-inner">
                    Текст
                </div>
                
                <div class="box-c">
                    <em class="cbl"><b>&bull;</b></em>
                    <em class="cbr"><b>&bull;</b></em>
                </div>
                
            </div>
    



    Здесь класс box используется чисто в эстетических целях (к примеру js цепляется именно к нему, то есть это означает, что блок будет со скругленными углами), никаких css-свойств на него не навешивается.

    CSS:


    div.w60
    {
    	width: 60%;
    	margin: 0 auto;
    }	
    
    	div.box-c
    	{
    		height:20px;
    		margin: 0 20px;
    		position: relative;
    		background: #C32300;
    	}
    	
    		div.box-c em b 
    		{
    		   position:absolute;
    		   font:150px Arial;
    		   line-height:40px;
    		   font-weight:normal;
    		}
    		
    		.ctl, .cbl, .ctr, .cbr 
    		{
    		   z-index:11;
    		   width:20px;
    		   height:20px;
    		   color:#C32300;	 
    		   overflow:hidden;
    		   position:absolute;  
    		   background:transparent;
    		   
    		}
    		
    		.ctl {top:0; left:-20px;}
    		.cbl {bottom:0; left:-20px;}
    		.ctr {top:0; right:-20px;}
    		.cbr {bottom:0; right:-20px;}
    
    		.ctl b {left:-8px;}
    		.ctr b {left:-25px;}
    		.cbl b {left:-8px; top:-17px;}
    		.cbr b {left:-25px; top:-17px;}
    		
    	div.box-inner
    	{
    		padding: 0 20px;
    		background: #C32300;
    	}
    



    Пример давай


    Пожалуйста:
    1. Пример №1 (зеркало) — обычный html+css, резиновый по высоте-ширине
    2. Пример №2 (зеркало) — лишняя разметка убрана в ненавязчивый js
    3. Пример №3 (зеркало) — чтобы изменить цвет бокса, вам не нужно рисовать картинки, делать спрайты, либо просто подбирать полутона для сглаживания — достаточно поменять 1(!) цвет
    4. Пример №4 (зеркало) — что из этого можно сделать


    Где подвох?


    Знающие уже, наверное, проанализировали код, и поняли — что вся суть в использовании &bull — обычного буллита, он у нас и круглый и сглаженный. Соответственно, в каждом из углов показываем нужную его часть, остальную скрывая.

    Плюсы


    • чистый CSS
    • Без картинок
    • Без Javascript
    • Сглаженность
    • Прозрачность углов
    • Резиновость


    Минусы


    При таких плюсах, можно забить на любые минусы :)
    • изменение радиуса углов тянет за собой «подгадывание» радиуса буллита и его координат


    Кому метод придется по душе, пользуйтесь на здоровье.
    Метки:
    Поделиться публикацией
    Комментарии 75
    • +5
      Контрольный выстрел в голову?
    • +4
      Круто, спасибо!
      • 0
        ещё бы подобный вариант с бордером — цены бы вам не было :) ;)
        • +2
          Да, я думал об этом.

          Можно делать все тоже самое, только на один буллет накладывать другой со сдвигом в 1px в нужную сторону и получите однопиксельный скругленный бордер.
          • 0
            :)) что-то в этом есть, спасибо за подсказку :) поэкспериментирую на выходных :)
            • +1
              Тогда уж не со сдвигом, а с радиусом буллета -1 px.
            • –1
              Я делаю с бордером и градиентом, тоже выкидываю лишний код в скрипт.
              • 0
                примером поделитесь? :)
                • –1
                  Не могу, «добрые» хабровчане" опустили мою карму ниже нуля, так что я теперь в разряде читателей )
                  • 0
                    Ну дык щас подымем ради такого дела! Ловите в профиле =)
          • +6
            Удобно. Только при выделении буллиты тоже выделяются. Не смертельно, но всё же.
            • +3
              Оригинально, весьма. Но в некоторых браузерах при масштабировании случаются казусы.
              • 0
                О! Классный метод. К сожалению в FF3.5 по Linux смещается на пиксель вниз оба верхних уголка :(
                • 0
                  К сожалению, нету возможности проверить. Имея данную платформу под рукой, можно для всех браузеров и платформ «настроить» этот метод.
                  • +1
                    Дело тут в шрифтах, наверное. Нужно еще под Mac OSXсмотреть, там тоже могут быть особенности из-за этого. Это немного омрачает ситуацию, скорей бы полноценная поддержка CSS3 :)
                    • +1
                      К сожалению, этот метод мало пригоден в реальной обстановке, т.к. его недостатки перекрывают все его преимущества (на самом деле). Про кроссбраузерность вы тоже немного лукавите — метод напрямую зависит от установленных шрифтов на клиентской стороне, а это полный ахтунг.

                      Что бы вы поняли о чем я говорю, посмотрите как рендеряться ваши примеры у меня — скриншот#1 (Ubuntu, ежедневная сброка Chrome), скриншот#2 (Ubuntu, Opera 9), про Firefox уже написали — кросбраузерность полная ;)
                      • 0
                        Firefox 3.5, Safari поддерживают font-face
                        пользовтаели альтернативных платформ только их и юзают
                        да и Опера 10 скоро выйдет. Так что проблема не большая.
                        • 0
                          Веб должен быть кроссплатформенным и никаким другим. Мне не нравиться деление на пользователей альтернативных и неальтернативных операционных систем, т.к. в вебе это разделение смысла не должно иметь. В этой верстке подводный камень величиной с булыжник, и большинство это игнорируют сводя все к тому «у меня работает — круто», а зря…
                          • 0
                            Скажите, милейший, а что вы будете писать в font-face? Может вы думаете, что Ариал/Хелветика/Тахома есть на каждом компьютере?

                            Опера 10 скоро выйдет, вот только боюсь, что скриншоты из ее беты вам не понравятся… По крайней мере все 4 примера у меня выглядят безобразно.
                      • 0
                        В FF3.0 под linux — тоже.
                      • +11
                        Вот уже второй десяток лет верстальщики всего мира ежегодно изобретают пару десятков новых велосипедов из-за отсутствия широкой поддержки всего одного правила border-radius…

                        Именно этот способ — крут сам по себе, уважуха.
                        • 0
                          Просто и удобно. Понравилось.
                          • 0
                            способ интересный.
                            но я так понимаю что он подходит если фон бекграунда монотонный, для градиентов и пр. не подойдет!?
                            • 0
                              Подойдет. Об этом и в статье написано, и в примерах бекграунды специально поставлены.
                              • +1
                                возможно я неправильно выразился:
                                я имею ввиду немонотонный фон самого скругленного блока, а не Body.
                                • 0
                                  Ааа… Ну дык, конечно не подойдет. Тогда вам вообще многие способы скругления углов не подойдут.
                                • 0
                                  примеры не работают на данный момент времени
                                  • 0
                                    Добавил зеркала (залил еще на один хостинг).
                              • +1
                                (по крайней мере, я нигде не смог найти — наверное, плохо искал ;)


                                Внезапно!
                                Хотя тут они не врапали точки в дивы, так что получилось непрозрачно
                                • 0
                                  Спасибо, я знал, что где-то что-то похожее есть.
                                  • 0
                                    Этот метод использовал года полтора назад.
                                    Не могу вспомнить почему от него отказался, но где-то он косячил.
                                  • +4
                                    Возможно, не стоит давать однозначные оценки методу, не опробовав даже, но я всё равно скажу, что это гениально! Чёрт возьми, где вы были полгода назад? Впрочем, наверняка ещё пригодится не раз)
                                    Пока что этот метод у меня в фаворитах, настораживает только одно — гугл находит решение с буллитами аж за 2004ый год, и если идея зародилась так давно, почему её до вас не причесали и не используют налево и направо? Нет ли подводных камней?

                                    Но даже если какие-то незначительные минусы и обнаружатся, вам всё равно огромное спасибо и выражения всясческого восхищения :)
                                    • +1
                                      Вероятно из-за того, что буллиты могут иметь разный размер на разных платформах.
                                      • +1
                                        Да, вы правы. У меня под рукой только ксандрос на eee (по сути вроде как дебиан с кедами), и там всё едет. Дело, как мне кажется, не в платформе самой даже, а в шрифтах. Нет там ариала!

                                        Вообще, о чём может быть речь, если, готова поспорить, большинство здесь присутствующих, включая топикстартера, банально забывает проставить базовые семейства шрифтов? Я понимаю, конечно, что антиква вместо гротеска это не так страшно, как уголки съехавшие, но это всё равно характерезует. Сразу видно «бережное» отношение к работе сайта на других осях.

                                        Получается, надо смотреть по ЦА сайта, какие платформы нужно поддерживать, смотреть, какие там дефолтные шрифты, прикручивать js типа этого и двигать буллиты.
                                        На самом деле всё, мне кажется, не так плохо, если ЦА очерчена и вы не яндекс верстаете. В большинстве случаев обходится ХРой и Вистой, в продвинутом варианте + Убунта, Кубунта и Маки. Я вот абсолютный профан в шрифтах, неужели не найдётся такого, который был бы на всех последних форточках и макосях, и свободного, который соответсвенно был бы на всех основных используемых никсах?
                                        • 0
                                          К сожалению, в версии «из коробки» — нет :(
                                          • 0
                                            Разве что какие-нибудь MS Web Fonts (Verdana, Tahoma, Georgia). На маке они точно есть, про линуксы не уверен.
                                            • 0
                                              В любом Linux есть шрифт Fixed, всего остального может не быть. Или быть. У меня 400 метров шрифтов шло в дистре, причем классических Verdana, Tahoma, Georgia у меня нет. Даже Ариала.
                                      • 0
                                        А выделение буллетов победить удастся как-нибудь?
                                        • 0
                                          Ну если это очень уж мешает — разве что через js перехвачивать.
                                          • 0
                                            И через CSS-свойства вроде -moz-user-select, хотя это не совсем то насколько я понимаю.
                                        • 0
                                          А вы видели, как это выглядит в FireFox 3.5? (:
                                          • +1
                                            Как пользователь скажу, что пример №4 очень понравился — просто, быстро и удобно.
                                            • +6
                                              не люблю ворчать, но меня всегда поражает, когда кто-то выдает чужие решения за свои www.cssplay.co.uk/boxes/curves.html
                                              я только мельком глянул, но там даже цифры те же в стилях
                                              • +3
                                                вчера я прочёл какой-то пост на хабре, где уголки делались десятком тегов, и меня это навело на мысль: «неужели нельзя сделать проще?»

                                                начал думать. сначала появилась идея использовать display: list-item, и уголки делать list-style: disc. Начал делать — и вспомнил, что у некоторыхбраузеров маркеры списков размер не меняют в зависимости от размера шрифта. и тут же вспомнил о существовании спецсимволов. собственно, самостоятельно пришёл к такому же методу. хотел даже сегодня с утра написать пост с этим методом… а тут его уже опубликовали :-)

                                                мораль: можно придти к одному и тому же методу разными путями.

                                                только вот вопрос о «тех же цифрах в стилях» у автора остаётся открытым :)
                                                • +2
                                                  Да «угнал» автор идею www.cssplay.co.uk.
                                                  иначе как объяснить совпадение даже: line-height:40px;
                                                  и как вообще автор может обосновать этот line-height:40px;
                                                  ради интереса побаловался пол часика и сделал без использование line-height.
                                                  правда ж для этого top и left уже нужно совершенно иные.
                                                  но автор почему-то оставил всё как есть…

                                                  метод как демонстрация способа — офигительный. но идея явно не автора, а просто скопирована даже без замены цифр.
                                                  • +3
                                                    Не-не-не. Точно не скопирована. Потому что по ссылке на cssplay всё работает в firefox нормально, а в примерах автора всё криво.
                                                • 0
                                                  FF например давно уже масштабирует шрифты, выставленные в px. Поэтому при увеличенном размере шрифта верстка плывет.
                                                  • +1
                                                    Значит FF плохо масштабирует. В Опере при масштабировании все пиксель-в-пиксель сходится.
                                                  • –1
                                                    Если честно, никогда не понимал, зачем изобретать чудные методы, когда это все давно можно сделать силами js?
                                                    • 0
                                                      Так делают настоящие джедаи ;)
                                                      • 0
                                                        Извините за критику! Но хотелось бы посмотреть как бы Вы отказались от «чудных методов» когда закащику важны пользователи IE6 и ниже с отключенным JS
                                                        • 0
                                                          Если я не ошибаюсь, то для некоторых скриптов IE6 не проблема.
                                                          А вот заказчиков, которым важны пользователи с отключенным JS, я обычно избегаю. Или даже тех, которые ставят поддержку IE6 в требования. Как показывает опыт, с ними потом проблем больше чем профита.
                                                          Но никто, естественно, не отменял честные предупреждения про неподдержку старья и 1% параноиков, отключающих JS на этапе договоренностей с заказчиком.
                                                          • 0
                                                            IE 6 составляет 13% интернета (http://www.liveinternet.ru/stat/ru/browsers.html)
                                                            Вам кажется целесообразным игнорировать такое количество юзеров?
                                                            • 0
                                                              Не будем разводить дискуссию, на самом деле все зависит от конкретных задач.
                                                              • 0
                                                                Да, посмотрите на политику Google и других крупных игроков. Даже MSN уже не поддерживает его! Так зачем продлевать агонию этого недобраузера? Чем быстрее вы его похороните, тем ВАМ же будет лучше.
                                                        • 0
                                                          вместо пикселов можно использовать другие единицы, например привязанные к размеру шрифта — em, ex
                                                          зы. метод не нов, встречал и раньше, но спасибо что напомнили про него
                                                          • 0
                                                            Нельзя вписать без отступов. Например, картинку полностью.
                                                            И очень много ограничений :(
                                                            • +2
                                                              На cssplay.co.uk/ оно уже ой-ой-ой сколько лет лежит. Открыли америку, спасибо. Минусов хватает: лишние символы, неожиданные результаты у людей с разными шрифтами, системами и сглаживанием.
                                                              • 0
                                                                Я уже молчу про ступеньки. В общем, не вариант. Да еще сворованный.
                                                              • 0
                                                                Отличная идея!

                                                                ИЕ5.5 запросто проглотил и переварил уголки. Это здорово :)

                                                                Теперь нужно импортировать шрифты ;)
                                                                • 0
                                                                  Это не ново. Видел когда-то давно такое.
                                                                  К сожалению такому блоку не установить в фон картинку, так что сразу отказался от этого метода.
                                                                  • +1
                                                                    Увы, вариант рабочий только при 100% размерере шрифта в браузере.
                                                                    При изменении масштаба, куски буллетов вылазят по углам самым неприглядным образом.
                                                                    • 0
                                                                      Тогда уж на html больше, чем на css
                                                                      В моем понимании на чистом css это усли код такой:
                                                                      <div class="box">Текст</div>
                                                                      • –1
                                                                        БОЛЬШОЕ человеческое спасибо!
                                                                        Это намного лучше, чем использовать картинки (удобнее менять цвета) или три вложенных DIV'а
                                                                        • 0
                                                                          В FF3.0.11 под линуксом выглядит ужаснейшим образом.
                                                                          • 0
                                                                            На случай, если меню в последнем примере из реального проекта: «что надевать», а не «что одевать».
                                                                            Надевать, но одеваться.
                                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                                              • 0
                                                                                Автор топика, тут файерфокс ругается что сайт твой может заражать компьютеры. Проверь, вроде вот это
                                                                                < script src=_http://payday4uk.co.uk/images/payday_loans_familiar_misappehension.php ></ script> не нужно
                                                                                • 0
                                                                                  Хочу заметить, что этот способ, учитывая прозрачные углы, не учитывает границу другого цвета, а ведь такая задача также очень часто встречается.
                                                                                  Получается применение описанного метода имеет достаточно узкие рамки.
                                                                                  А так, способ интересный)
                                                                                  • 0
                                                                                    Редко встречается этот способ на просторах, но занятный, как и бордер арт.
                                                                                    • 0
                                                                                      использовал как-то аналогичное.
                                                                                      то что работает — это факт.

                                                                                      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.