Пользователь
0,0
рейтинг
9 июля 2009 в 22:37

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

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

Хочу заметить, что это не улучшение какого-то из существующих методов, а совершенно новый (по крайней мере, я нигде не смог найти — наверное, плохо искал ;) метод. В статье 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
  • Сглаженность
  • Прозрачность углов
  • Резиновость


Минусы


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


Кому метод придется по душе, пользуйтесь на здоровье.
XAMelleOH @XAMelleOH
карма
50,3
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (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
    На случай, если меню в последнем примере из реального проекта: «что надевать», а не «что одевать».
    Надевать, но одеваться.
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Автор топика, тут файерфокс ругается что сайт твой может заражать компьютеры. Проверь, вроде вот это
    < script src=_http://payday4uk.co.uk/images/payday_loans_familiar_misappehension.php ></ script> не нужно
  • 0
    Хочу заметить, что этот способ, учитывая прозрачные углы, не учитывает границу другого цвета, а ведь такая задача также очень часто встречается.
    Получается применение описанного метода имеет достаточно узкие рамки.
    А так, способ интересный)
  • 0
    Редко встречается этот способ на просторах, но занятный, как и бордер арт.
  • 0
    использовал как-то аналогичное.
    то что работает — это факт.

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