Скругленные углы на чи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
    • Сглаженность
    • Прозрачность углов
    • Резиновость


    Минусы


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


    Кому метод придется по душе, пользуйтесь на здоровье.
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 75

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

              Можно делать все тоже самое, только на один буллет накладывать другой со сдвигом в 1px в нужную сторону и получите однопиксельный скругленный бордер.
                0
                :)) что-то в этом есть, спасибо за подсказку :) поэкспериментирую на выходных :)
                  +1
                  Тогда уж не со сдвигом, а с радиусом буллета -1 px.
                  –1
                  Я делаю с бордером и градиентом, тоже выкидываю лишний код в скрипт.
                    0
                    примером поделитесь? :)
                      –1
                      Не могу, «добрые» хабровчане" опустили мою карму ниже нуля, так что я теперь в разряде читателей )
                        0
                        Ну дык щас подымем ради такого дела! Ловите в профиле =)
                          0
                          Спасибо, тогда ждите пост, я скоренько…
                            +4
                            techmeat.habrahabr.ru/blog/64033/
                            Благодаря Вам и еще нескольким хабровчанам )
                    +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
                                                                                    На случай, если меню в последнем примере из реального проекта: «что надевать», а не «что одевать».
                                                                                    Надевать, но одеваться.
                                                                                    • UFO just landed and posted this here
                                                                                        0
                                                                                        Автор топика, тут файерфокс ругается что сайт твой может заражать компьютеры. Проверь, вроде вот это
                                                                                        < script src=_http://payday4uk.co.uk/images/payday_loans_familiar_misappehension.php ></ script> не нужно
                                                                                          0
                                                                                          Хочу заметить, что этот способ, учитывая прозрачные углы, не учитывает границу другого цвета, а ведь такая задача также очень часто встречается.
                                                                                          Получается применение описанного метода имеет достаточно узкие рамки.
                                                                                          А так, способ интересный)
                                                                                            0
                                                                                            Редко встречается этот способ на просторах, но занятный, как и бордер арт.
                                                                                              0
                                                                                              использовал как-то аналогичное.
                                                                                              то что работает — это факт.

                                                                                              Only users with full accounts can post comments. Log in, please.