Pull to refresh

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

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

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


Минусы


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


Кому метод придется по душе, пользуйтесь на здоровье.
Tags:
Hubs:
+109
Comments 75
Comments Comments 75

Articles