11 сентября 2011 в 19:52

Вкладки с внешними скруглениями перевод

Скругленные уголки на сегодняшний день делаются тривиально с помощью border-radius. Благодаря border-radius мы можем «обрезать» блоки сообразно необходимости, но что делать, если нам нужно скруглить «внешний» угол? Проблему проще пояснить графически:

На этой картинке показано о чем вообще идет речь
Верхние уголки сделать не проблема, а вот нижние — посложнее. Под катом поясняем как.


Чистый HTML


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

<ul class="tabs group">
  <li class="active"><a href="#one">One</a></li>
  <li><a href="#two">Two</a></li>
  <li><a href="#three">Three</a></li>
  <li><a href="#three">Four</a></li>
</ul>

Имя класса «active» обозначает активную вкладку.

Как это работает


Причина того, почему это сложно заключается в том, что нам нужно получить форму выходящую за пределы начального блока. Что бы этого достичь без дополнительной разметки мы импользуем псевдоэлементы. Если вам нужно освежить память по поводу того, что это за элементы такие, вы можете это сделав прочитав эту и эту статейки. Непосредственно через css мы можем добавлять дополнительные стилизируемые элементы на страницу. Каждый элемент может генерировать два дополнительных с помощью псевдоселекторов :before и :after. Для каждой вкладки мы будем использовать четыре. Это возможно засчет того, что каждая вкладка состоит из двух элементов: элемента списка и якоря.

Давайте визуализируем процесс шаг за шагом, не рассматривая пока код.

1) Начальное состояние
imageЭлементы списка обычно является блочным элементом, а якорь — строчным. Так что мы получаем вот такой лаяут.

2) Выстраиваем в один ряд
imageПрисвоив элементам списка float:left мы выстроим их в один ряд и укоротим до ширины якоря внутри. Фактически — до ширины контента.

3) Приводим к одинаковому размеру
imageСами по себе элементы списка не обладает отступами или полями (margin или padding), так что элементы списка и якоря вложенные в них обладают одинаковыми размерами.

4) Рассмотрим одну вкладку
imageДавайте внимательно рассмотрим одну вкладку

5) Окружности
imageМы используем два из четырех псевдоэлементов, что бы расположить окружности слева и справа у нижней грани вкладки.

6) Прямоугольники
imageC помощью оставшихся двух псевдоэлементов мы создадим меньшие прямоугольники.

7) Раскрасим вкладку и содержимое
imageУ активной вкладки и содержимого общий цвет фона.

8) Раскрашиваем псевдоэлементы
imageПрямоугольники соответствуют цвету активной вкладки, окружности соответствуют цвету фона за ними.

9) Перекрытие элементов
imageC помощью z-index мы обеспечиваем перекрытие прямоугольников окружностями.

10) Без рамки
imageРамка была просто на иллюстрации, на самом деле оно будет выглядеть где то так.

11) Заканчиваем
imageПрименяем тот же принцип для внешних вкладок и скругляем верхние уголки с помощью border-radius. Готово.

CSS


А это — огромный CSS блок, но я его подробно комментировал, что бы он был понятен.
.tabs li {
  /* Выстраиваем табы в полоску */
  float: left; 

  /* Что бы псевдоэлементы можно было абсолютно позиционировать в табах */
  position: relative;
}
.tabs a {
  /* Делаем якорь блочным элементом и укорачиваем до размера контента*/
  float: left;
  padding: 10px 40px;
  text-decoration: none;

  /* Цвета по умолчанию */
  color: black;
  background: #ddc385; 

  /* Скругляем верхние уголки */
  -webkit-border-top-left-radius: 15px;
  -webkit-border-top-right-radius: 15px;
  -moz-border-radius-topleft: 15px;
  -moz-border-radius-topright: 15px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.tabs .active {
  /* Активную вкладку помещаем поверх остальных */
  z-index: 3;
}
.tabs .active a {
  /* Цвета активной вкладке */
  background: white;
  color: black;
}
.tabs li:before, .tabs li:after,
.tabs li a:before, .tabs li a:after {
  /* Все псевдоэлементы абсолютно позиционированы относительно нижней грани*/
  position: absolute;
  bottom: 0;
}
/* Только первая, последная и активная вкладка создают псевдоэлементы, остальным они не нужны*/
.tabs li:last-child:after,   .tabs li:last-child a:after,
.tabs li:first-child:before, .tabs li:first-child a:before,
.tabs .active:after,   .tabs .active:before,
.tabs .active a:after, .tabs .active a:before {
  content: "";
}
.tabs .active:before, .tabs .active:after {
  background: white; 

  /* Прямоугольники под окружностями */
  z-index: 1;
}
/* Прямоугольники */
.tabs li:before, .tabs li:after {
  background: #ddc385;
  width: 10px;
  height: 10px;
}
.tabs li:before {
  left: -10px;
}
.tabs li:after {
  right: -10px;
}
/* Окружности */
.tabs li a:after, .tabs li a:before {
  width: 20px;
  height: 20px;
  /* Окружности … э … крууугггглыыыыыеееее */
  -webkit-border-radius: 10px;
  -moz-border-radius:    10px;
  border-radius:         10px;
  background: #222;

  /* Окружности над прямоугольниками */
  z-index: 2;
}
.tabs .active a:after, .tabs .active a:before {
  background: #ddc385;
}
/* Первая и последняя вкладки обладают разными фоновыми цветами у внешних элементов*/
.tabs li:first-child.active a:before,
.tabs li:last-child.active a:after {
  background: #222;
}
.tabs li a:before {
  left: -20px;
}
.tabs li a:after {
  right: -20px;
}


Вот и все!



Будет работать во всех современных браузерах включая IE9 и выше. В более старых браузерах деградирует (не будет скругленных уголочков).

Улучшаем мягкую деградацию


Эту главу написал переводчик для тех несчастных, которые так и не сумели пояснить клиенту, что отсутствие скругленных уголков в IE это не личное оскорбление со стороны верстальщика. Давайте улучшим мягкую деградацию, насколько это возможно.



Дополнительный CSS:

<style>
 /*Скругленные уголки вверху вкладок*/

/*ie 7*/
*+html .tabs li{
background: url("img/tabs.png") 0 -37px no-repeat;
}

*+html .tabs li a{
background: url("img/tabs.png") 100% -37px no-repeat;
padding: 10px 40px 10px 20px;
margin:0 0 0 20px;
}

*+html .tabs li.active{
background:url("img/tabs.png") 0 0 no-repeat;
}

*+html .tabs li.active a{
background:url("img/tabs.png") 100% 0 no-repeat;
}

*+html .tabs li{
zoom:expression(function(t) {
t.runtimeStyle.zoom = 1;
var before = document.createElement('span');
var after = document.createElement('span');

before.className = 'before-fix-for-ie';
after.className = 'after-fix-for-ie';

t.appendChild(before);
t.appendChild(after);
}(this));
}

/*ie 6*/		
* html .tabs li{
background:url("img/tabs.png") 0 -37px no-repeat;
}

* html .tabs li a{
background:url("img/tabs.png") 100% -37px no-repeat;
padding: 10px 40px 10px 20px;
margin:0 0 0 20px;
}

* html .tabs li.active{
background-position:0 0;
}

* html .tabs li.active a{
background:url("img/tabs.png") 100% 0 no-repeat;
}

* html .tabs li{
zoom:expression(function(t) {
t.runtimeStyle.zoom = 1;
var before = document.createElement('span');
var after = document.createElement('span');

before.className = 'before-fix-for-ie';
after.className = 'after-fix-for-ie';

t.appendChild(before);
t.appendChild(after);
}(this));
}

/*Внешние скругления*/
.tabs li .before-fix-for-ie{
position:absolute;
overflow:hidden;
font-size:0;
line-height:0;
top:27px;
left:-10px;
width:10px;
height:10px;
background:url("img/left.png") 0 0 no-repeat;
}
* html .tabs li .before-fix-for-ie{
background:none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='img/left.png', sizingMethod='image');
}

.tabs li.active .before-fix-for-ie{
background:url("img/active-left.png") 0 0 no-repeat;
}
* html .tabs li.active .before-fix-for-ie{
background:none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='img/active-left.png', sizingMethod='image');
}

.after-fix-for-ie{
position:absolute;
overflow:hidden;
font-size:0;
line-height:0;
top:27px;
right:-10px;
width:10px;
height:10px;
background:url("img/right.png") 0 0 no-repeat;
}
* html .tabs li .after-fix-for-ie{
background:none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='img/right.png', sizingMethod='image');
}

.tabs li.active .after-fix-for-ie{
background:url("img/active-right.png") 0 0 no-repeat;
}
* html .tabs li.active .after-fix-for-ie{
background:none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='img/active-right.png', sizingMethod='image');
}

</style>


<!--[if IE 8]>
<style>
/*ie 8*/
.tabs li{
background:transparent url("img/tabs.png") 0 -37px no-repeat;
}

.tabs li a{
background:transparent url("img/tabs.png") 100% -37px no-repeat;
padding: 10px 40px 10px 20px;
margin:0 0 0 20px;
}

.tabs li.active{
background:transparent url("img/tabs.png") 0 0 no-repeat;
}

.tabs li.active a{
background:transparent url("img/tabs.png") 100% 0 no-repeat;
}

body .tabs li:before{
content:".";
text-indent:-9000px;
overflow:hidden;
height:10px;
width:10px;
font-size:0;
line-height:0;
display:block;
position:absolute;
top:27px;
left:-10px;
z-index:10;
zoom:1;
background:transparent url("img/left.png") 0 0 no-repeat;
}

body .tabs li:after{
content:".";
text-indent:-9000px;
overflow:hidden;
height:10px;
width:10px;
font-size:0;
line-height:0;
display:block;
position:absolute;
top:27px;
right:-10px;
z-index:10;
zoom:1;
background:transparent url("img/right.png") 0 0 no-repeat;
}

body .tabs li.active:before{
content:".";
text-indent:-9000px;
overflow:hidden;
height:10px;
width:10px;
font-size:0;
line-height:0;
display:block;
position:absolute;
top:27px;
left:-10px;
z-index:10;
zoom:1;
background:transparent url("img/active-left.png") 0 0 no-repeat;
}

body .tabs li.active:after{
content:".";
text-indent:-9000px;
overflow:hidden;
height:10px;
width:10px;
font-size:0;
line-height:0;
display:block;
position:absolute;
top:27px;
right:-10px;
z-index:10;
zoom:1;
background:transparent url("img/active-right.png") 0 0 no-repeat;
}
</style>
<![endif]-->


Для ie8 пришлось вынести CSS в отдельный блок, выделенный условными комментариями, так как мне не удалось найти хака, который бы работал для ie8 и не работали бы для ie9. Если кто то знает такой — пожалуйста, поделитесь.

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

Надеюсь дополнение будет полезно.
+159
3647
427
SilentImp 66,6

Комментарии (104)

+5
Delka, #
Кроме того, так как в ie8 ЕЩЕ НЕТ CSS3, но УЖЕ НЕТ expression, то внешних уголков там все же не будет.
В таких случаях помогает PIE.htc. Уже год юзаем его на продакшене, клиенты живы.
В худшем случае — просто отмените его для стиля, где он не срабатывает или глючит.
+24
SilentImp, #
Вы знаете, когда мне предлагают использовать что то вроде PIE я сразу вспоминаю ie7.js/ie8.js и то, как когда то давно мне пришлось переверстывать проект с нагруженной версткой из за того, что скрипт обрабатывал dom почти 15 секунд.
Лучше пусть там просто не будет уголков или я сам напишу нужный скрипт, чем натравлю на проект подобное чудовище.
+1
zwie, #
Так в том-то и плюс, что этот костыль можно подцеплять выборочно, а не ко всему проекту.
+2
SilentImp, #
Да, видел. Но если для его подключения надо писать js (насколько я помню именно так для pie и делается — скармливается ему элемент по селектору), то мне проще написать самому скрипт, который добавит внутрь два элемента вместо expression. И не понадобиться подключать объемное чудище, устройства которого ты досконально не знаешь. Впрочем каждый решает для себя. Я не рискнул бы завязывать работу проекта на PIE, так как не могу быть уверен что при определенном размере dom или каких либо еще обстоятельствах этот пирог не вылезет мне боком.
+1
zwie, #
в CSS
selector {
behavior:url(PIE.htc);
}
Хотя в целом я с Вами согласен.
+1
SilentImp, #
Ух ты, просмотрел такой способ.
И действует только для выбранного селектора?
Надо запомнить, на всякий случай.

Хотя все равно не доверяю ему. :)
+2
Delka, #
Не нужно там js писать. Это в DD_someshit нужно было. Кстати ничего плохого тут нет, юзали.
Так вот — если где-то что-то не работает — вам ничто не мешает отключить pie для этого селектора и написать хак ручками. Или ничего не писать, ибо graceful degradation.
+4
Delka, #
«Не юзал, но осуждаю.»
Вы его смотрели вообще?! Или судите всё по тому что когда-то где-то увидели в этой же области?
Там вообще-то всё сделано очень правильно, вдохновляющей идеей был DD_belatedPNG с VML.

Конечно, хорошо думать что очень «круто» писать руками костыли, но это не так. Круто — это быстро сдавать работу и так чтоб она легко поддерживалась.
–2
SilentImp, #
Вообще смотрел и эксперементировал с ним.
На продакшене нагруженых проектов не использовал — слишком дорого для меня.
Опыт подсказывает что это плохая идея.
+2
Delka, #
Дорого сокращать время на разработку?
Опыт в таких ситуациях — плохой советчик, ибо это Baby Duck Syndrome.

Мы год юзаем pie в продакшене, начинали когда он был ещё в бетах. Есть сайты очень крупные и очень серьёзные, с ежемесячными продажами с кучей нулей, на них постоянно юзеры. С pie проблем не было ни разу.

Собственно — если проблема есть, если блок объявлений получается очень сложным и pie отчего-то не срабатывает или срабатывает не так — всегда можно тут же для этого селектора отключить.

Тормозов нет, и кстати уж если сравнивать expressions и VML например — то сравнение будет явно не в пользу expressions.
–1
SilentImp, #
Дорого переписывать и перепиливать, после того как окажеться, что это неприменимо.
+1
SilentImp, #
В целом звучит как миф.
Можно более подробно — что за проекты и какая посещаемость?
Что то, что можно пощупать.
С нагруженной версткой.
+3
Delka, #
Отправил в личку т.к. светить линки на паблике не имею права.
+1
SilentImp, #
Спасибо большое за ссылки. С большим интересом покопаюсь.
0
Seldon, #
Хотелось бы тоже оценить реальный проект, можете скинуть хотя бы одну ссылочку, где он активно используется.
Я не так давно пробовал его подключить. но он запорол так сказать верстку (было пара незначительных багов, мелочи, но заказчик встал на дыбы и говорит хочу идеально, пришлось руками писать).
0
Delka, #
Отправил в личку
0
soider, #
Можно тоже? Как раз сейчас с PIE вожусь.
+1
SilentImp, #
Я с ужасом представляю как завязав весь проект на pie, прописав его для конкретных классов через behaviour в css я обнаруживаю что с ним все плохо и мне приходиться сначала чистить весь css проекта от него, а затем писать нормальную деградацию руками. >____<
0
Delka, #
Это тоже самое как проприентарный префикс: работает — отлично, нет — не пишем, или делаем костыли.

Ну т.е. вот вы пишете например linear-gradient:
-webkit-linear-gradient, -moz-linear-gradient, ... и добавляете -pie-background: linear-gradient...
0
roman_tik, #
> проприентарный префикс

какой префикс?
0
VolCh, #
вендорский, наверное :)
+1
alexbeep, #
Были такие же сомнения, так же плевался с этим самым ie7/8.js много лет назад — так и не стал использовать нигде…

не PIE — это просто несравнимая с ним вещь, однозначно самый лучший костыль за все время моей работы
+1
derSmoll, #
странно
либо клиенты такие, либо проекты
pie, по-моему, подходит только для самых простых сайтов, визитки там, то-сё
0
SilentImp, #
Как и ie6.js, ie7.js imo.
Соглашусь.
0
Delka, #
Проекты с большой посещаемостью и десятками страниц.
0
zorro1211, #
Полностью поддерживаю, просто не все могут разобраться как он работает.
0
zizop, #
Кстати там интересные демки, по ссылке из статьи.
–2
zBit, #
Хех) Всё гениальное — просто)
+10
Palehin, #
Я бы не сказал, что, то что написал автор — просто…
+3
tenshi, #
раз уж мы делаем для ие картинками, то зачем тратить время на реализацию через цсс3? картинки будут работать везде, рендериться быстрее и вообще проще в реализации.
+7
roman_tik, #
Если для IE приходится делать картинками, то может ну его в жопу этот IE?
0
SilentImp, #
Если есть возможно — пожалуйста. Но в ряде случаев такой возможности нет.
Я написал «костыль» на случай, если он кому то понадобиться, но обычно достаточно того уровня деградации, который предложил автор.
–2
roman_tik, #
> Если есть возможно — пожалуйста.

ОК, спасибо, пойду поем.
0
SilentImp, #
Приятного апетита.

p.s. «есть такая возможность», естественно.
0
SilentImp, #
Выигрываем 4 http запроса и несколько килобайт трафика.
Кроме того CSS3 проще изменить быстро. А деградацию можно и позднее поправить.
Если бы пришлось править сразу с картинками — потребовало бы больше усилий.
–6
YoungSkipper, #
Картинки можно встроить так же в html — т.е. выйгрыша по http запросам нет. А вот размер этих картинок в png может оказаться сравнимым или даже месте с этой простыней кода.
+2
SilentImp, #
Если картинки в html, то у нас не происходит http запроса? Это что то новенькое. Или вы о data uri? Если да, то попробуйте написать это кроссбраузерно на практике и сравните размеры простыней и кода в кб.

Буду рад увидеть результат.

И нет, в HTML картинки встраивать не нужно. Представлению там не место.
+6
hshhhhh, #
учитывая спрайты запросов мы выигрываем ноль. два уголка будут весить меньше чем килобайт.
0
bRUtality, #
Спасибо за статью. Жаль, что не скоро найдет применение на практике, т.к. все еще много пользователей с браузерами, не поддерживающих CSS 3.0.
0
SilentImp, #
Пользуюсь уже больше года. На практике. :)
И вам советую.
Кроме того скажите, какие актуальные браузеры у нас не охвачены мягкой деградацией?
0
bRUtality, #
>Пользуюсь уже больше года. На практике. :)
И нет проблем с заказчиками?

>Кроме того скажите, какие актуальные браузеры у нас не охвачены мягкой деградацией?
Ну, на вскидку, опера ниже 11-ой версии не подерживает CSS 3.0.
0
SilentImp, #
Нет, с заказчиками проблем нет.
Делал например кое что для групона, zn.ua, znaki.fm … да много чего делал :)

>Ну, на вскидку, опера ниже 11-ой версии не подерживает CSS 3.0.
Опера, Хром, FF, Safari вполне себе обновляются. Так что стоит принимать во внимание последни 2 релиза, обычно. Не больше.
Скругленные уголки и :after, :before в опере работают очень давно. И неплохо.
Давайте, пожалуйста, более конкретно. Что и где не работает?
А я, возможно, подскажу как поправить.
А если не подскажу, то может быть Вадик Макеев подскажет. В общем — что нибудь придумаем ;)
0
bRUtality, #
Ну может сами сотрудники группона имеют обновленные браузеры и у них все ок. А вот что видят их клиенты — еще вопрос.

Я в верстке не силен, уж извиняйте если где глупость скажу. Но вот делали с полгода назад магазин, помню что дизайнеру пришлось закругленные кнопки рисовать в фотошопе, потому что у заказчика дома FF3.6, но на работе IE8, а у его жены на работе — IE6. Вот скажите, есть способ отрисовать закругленные кнопки средствами CSS так, чтобы работало вплоть до IE6?

И вот вы говорите, что браузеры обновляются. Но чаще наблюдаю такую картину: вылезает окно с предложением обновиться, пользователь жмет «отмена», потому что не понимает, для чего это нужно. А в настоящее время стоит у него какой-нить хороший браузер, но версии старой, который поставил знакомый «компьютерщик», когда винду переустанавливал, и сказал, «пользуйся этим, он кульный».
+1
SilentImp, #
Нет, с помощью CSS нельзя отрисовать скругленные уголки в IE6 или IE7.
Надо либо отказаться от скругленных уголков в браузерах, которые не поддерживают border-radius, либо достигать этого через хаки и использование изображений. Оба подхода имеют право на жизнь.

Что касается обновления браузеров, то тут можно доверять только статистике. Общей. Или, в идеале, для конкретного проекта. Именно по этой статистике и определяються актуальные для проекта браузеры, которые надо поддерживать.

Например
www.liveinternet.ru/stat/ru/browsers.html?period=month

www.w3schools.com/browsers/browsers_stats.asp
www.w3schools.com/browsers/browsers_explorer.asp

en.wikipedia.org/wiki/Usage_share_of_web_browsers
ru.wikipedia.org/wiki/%D0%91%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80
0
bRUtality, #
Так вот о том и речь. Пока столь высок процент старых браузеров (если верить верхней ссылке), будем рисовать в фотошопе, если целевая публика — простые юзеры.
+1
SilentImp, #
Эм? Процент каких это старых браузеров высок?
Либо я не понял о чем речь либо одно из двух.
0
bRUtality, #
IE8 — 10.9%
IE7 — 4.9%
Opera 10 — 2.3%
Firefox 3 — 7.6%
____________________
итого — 25.7% (если не ошибаюсь, перечисленные браузеры не поддерживают CSS3.0)

Четверть — не так уж и мало. Процент может значительно увеличиться в зависимости от целевой аудитории сайта.
0
SilentImp, #
2% imo можно уже игнорировать.
Но насколько я помню у opera 10 в любом случае нет проблем ни с border-radius, ни c :before/:after
У FF3 тоже нет проблем с border-radius или c :before/:after.
Вообще у какой то FF была проблема с невозмодностью position:absolute для псевдоэлементов, но тут можно было всегда выкрутится обыграв position:relative.

IE8 — да, однозначно актуален.
IE7 — в целом тоже, еще актуален, хотя уже можно начинать постепенно о нем забывать.

Но для этих IE предложены вполне приемлемые методы деградации.

В чем проблема то?
+1
bRUtality, #
Да я уж вроде не раз сказал, в чем проблема. Мы с вами как будто на разных языках разговариваем:(
+1
S1eng, #
Много лишнего. Зачем вам эти круги? Не проще ли поставить два прямоугольных дива и сделать border-bottom-(left|right)-radius: Хpx;? На мой взгляд это настраивается куда удобней, чем возня с кругами. А так тема рабочая, у меня уже давно на продакшене крутится, по поводу IE — тот кто им пользуется ССЗБ.
–2
SilentImp, #
Пример с тудию. Может и проще, но я, честно говоря, не очень понял о чем речь.

А что такое CC3Б?
У нас вся верховная рада им пользуется без альтернатив, к примеру. И на это, кажеться, были даже какие то объективные причины. Впрочем не вникал в то, какие.
0
NickyX3, #
ССЗБ = Сем Себе Злобный Буратино
–2
SilentImp, #
Кажеться понял идею. Как будете делать внешние скругления для крайних вкладок?
–2
SilentImp, #
А еще как вы будете скруглять вкладку перед выделенной?
0
spmbt, #
Да нет проблем (то же самое заметил при беглом просмотре идеи в статье):
<style>
#d1,#d2,#d3{
	width: 50px;
	height: 12px;
	margin-bottom: 12px;
	background: #699;
	border: 0;
	border-bottom-right-radius: 12px;
	border-bottom-left-radius: 12px;
}
#d2, #d3, #d4, #d5{width: 12px; height: 12px; border-bottom-right-radius: 0;}
#d2, #d4, #d5{border-radius:0; background: #edd; margin-bottom: 1px;}
#d5{background: #699; border-top-left-radius: 12px;}
</style>

<body>
<div id="d1"></div>
<div id="d2">
	<div id="d3"></div>
</div>
<div id="d4">
	<div id="d5"></div>
</div>

0
SilentImp, #
>____<
+2
q0p, #
Чего-то скриншоты мелкие, а нет хайреза?
+1
SilentImp, #
Картинки брал из оригинальной статьи.
0
de_arnst, #
Название активной вкладки получается кликабельным, конечно ничего такого, но как-то не хорошо
+1
SilentImp, #
Ну, добавьте cursor:default. Или замените a на span, соответственно изменив стили.
Это не проблема.
Думаю автор сосредоточился на иллюстрации идеи и не стал тратить время на подобные мелочи.
0
de_arnst, #
Я знаю как сделать, просто сужу по моему опыту, верстальщики не обращали внимания на мелочи и возникали не очень приятные ситуации
–1
SilentImp, #
Я при верстке макетов обращаю.
В зависимости от обстоятельств либо просто заменяеться курсор, либо скриптово/на стороне сервера якорь на другой элемент.
Найдите хорошего верстальщика и все будет хорошо. :)
+1
Masterkey, #
Тут позвольте не согласиться — не всегда подсвеченная активная вкладка является собственно страницей, это вполне может быть активный раздел, при многоуровневой структуре.
0
ShpuntiK, #
IE как всегда заставляет поработать…
+3
Squier, #
Молока у картинок больно много
0
SilentImp, #
Картинки брал из оригинальной статьи.
+2
Alexx_ps, #
Столько строк кода ради мизерного некроссбраузерного эффекта — по времени написания сравнимо с возней с гифками, так что гифки проще и надежней. Border-radius как раз и был хорош тем, что тремя строчками избавлял от всего гемора. Нужно что-то проще.
+5
SilentImp, #
Почему не кроссбраузерного?
Все основные браузеры охвачены.
Для IE предложены 2 варианта мягкой деградации.
Помоему вполне пригодно для использования. Максимально простой html. Вполне простой css. Хотя особенно с учетом ie6,7,8 несколько многострочный, да.

Но есть ли альтернатива лучше?
Я вижу ее только через дополнительную разметку. Мне кажеться то, что предлагает автор статьи — лучший выход.
Если можете предложить проще — буду рад почитать.
0
Kindman, #
Ну, а, SVG например? Чем не вариант?
+4
timonstr, #
Кроме того, так как в ie8 ЕЩЕ НЕТ CSS3, но УЖЕ НЕТ expression, то внешних уголков там все же не будет.

Expression был нужен для эмуляции псевдоэлементов :before и :after. IE8 уже умеет работать с ними, поэтому можно заменить необходимое картинками.
0
SilentImp, #
Кстати да, что то торможу. Сейчас сделаю.
0
SilentImp, #
Поправил. Спасибо.
+3
almazmusic, #
Пример плох тем, что народ поломится юзать псведоэлементы в других задачах, где не требуется цсс3 и это будет в ие8. И только потом столкнутся с тем, что псевдоэлементы ограничены как в некоторых свойствах в ие8, так и в динамике. Например, по ховеру и клику не работает background-position. В кач-ве свойства урезано opacity. Это только те, с которыми я столкнулся. Об этом в сети есть информации чуть меньше, чем ничего, хотя имеется в виду гугл. Официальные заявления МС я не смотрел, но думаю, что таковые имеются (или нет?).

Поэтому юзать псевдоэлементы в кач-ве декора, особенно кнопок, пока всё ещё нужно с допущениями.
0
SilentImp, #
Всегда надо думать что и где используешь и тщательно это тестировать. Это касается всех приемов в верстке.
0
SilentImp, #
Но сами попытки использования псевдоэлементов или чего бы то ни было еще для решения разнообразных и подчас весьма неожиданных задачь это благо. Да, будут обнаруживаться глюки и особенности работы браузеров. В результате глюки будут исправляться вендорами, особенности работы — обдумываться и использоваться в своих целях. Информации будет становаиться больше и больше, а мы будем получать новыше шаблонные решения вечных проблем. Именно так оно все и работает.
+2
almazmusic, #
Честно? Я привёл несколько технических багов, на которые было потрачено n часов, а вы воды налили в двух комментариях.

Да и в целом статья очень странная. Это типа, если я в фотошопе научусь два фильтра последовательно применять и напишу об этом статью. Есть инструмент «псевдоэлементы», у них есть описание, у них есть рекомендации по использованию. Для чего рассматривать конкретный случай, лично мне непонятно. Это я не вам, как переводчику говорю. Нет, статьи такие нужны, но псведоэлементам ой-ой сколько лет.
Меня так тематика частного случая задела потому, что я лично, для облегчения и повышения скорости верстки, сделал, если можно так сказать, модули. Иконки, уголки, кнопки. Придумал свою систему именования классов. Свою логическую систему форм, каркаса. Конечно, базой для этого служили множественные статьи от гуру фронт-энда вроде Харисова, Чикуенка и еже с ними. Но если провести аналогию, то псевдоэлементы тоже являются базой для данной статьи.

Хотя много средних верстальщиков скажут вам большое спасибо за перевод.
+2
SilentImp, #
Честно.

Спасибо за описание конкретных кейсов. Уверен, кому то они будут полезны и было бы здорово, если бы информации о подобных багов было как можно больше. Это спасло бы многих людей от мучительного поиска самостоятельного решения.

Эта статья рассматривает решение одной конкретной задачи. Не более. Но рассматривает его подробно и максимально наглядно.
Такие статьи очень полезны начинающим верстальщикам, когда есть макет и не очень понятно, как лучше решить эту задачу.

Когда у верстальщика наберется достаточная база подобных «шаблонных» подходов, ему будет интересны и понятны статьи про БЭМ, семантику, организацию кода. Но это уже после того, как они разберуться со скругленными уголками :)
0
Lsh, #
Здорово конечно… Жаль что браузеры еще не достаточно хорошо (да и не все) поддерживают SVG, используя его можно было бы не заморачиваться.
Интересно, можно ли на чистом SVG сделать сайт? Может кто нибудь пробовал?
Ну, а если нет, то SVG можно использовать как шаблон, встраивая в него html через ForeignObject.
+2
SilentImp, #
Думаю нет, нельзя. Разве что крохотную визитку.
А зачем весь сайт делать на SVG?
0
Lsh, #
За тем же, зачем и на Flash. Только в отличии от flash сайт будет полностью индексироваться поисковыми системами.
0
SilentImp, #
Ты знаешь, что то мне подсказывает, что лучше не надо :D
0
Masterkey, #
Да, можно. И при том размер пофиг.
Правда надо быть честным и сказать, что все кроме оперы забили на svg — в остальных броузерах работа с канвасом по скорости равна работе с svg.

Зачем, ну допустим вы художник и сваяли макет в inkskape вставили его в страницу, настроили стили для наведенных объектов и сайт готов.
+2
diamant, #
Не знаю, как весь сайт, а вот иконки всякие, буллиты, элементы оформления и т.п. лучше делать не в растре, а в векторе — svg. У меня разрешение экрана выше стандартного, и я обычно подкручиваю масштаб, так вот при масштабировании страницы растровые картинки выглядят как дерьмо.
+2
SilentImp, #
Угу, вот тут соглашусь.
Например иконки приложения, с которым работают через браузер, iphone, ipad.
Пару раз встречал подобное. svg для этого очень даже ОК.
+12
kizu, #
Надо будет, всё-таки, доделать англоязычную версию своих примеров и показать уже всем этим западникам как надо делать такие скругления на самом деле.

Не, ну правда, полтора года назад писал про это: kizu.ru/fun/rounded-inner-corners/, — а люди до сих пор придумывают неправильные методы с перекрытием окружностями прямоугольников.
+1
Masterkey, #
Шик
+3
SilentImp, #
По ссылке — интересное.
Сразу еще вот сюда kizmarh.ya.ru/replies.xml?item_no=1376 :)
+3
Serator, #
А я все искал ссылку на ваши эксперименты. yandex-ui.github.com/Examples/visibility/ — все просто :)
+2
kizu, #
Да, там я тот же метод использовал + добавил «рамочку» при помощи теней :)
0
mclander, #
А сложно сделать, чтобы выглядело как в статье? Т.е. вкладки близко-близко и уголки нижние на них наезжают.

* Ногами не бейте я с CSS скорее воюю, чем дружу
0
SilentImp, #
Нет, не особо сложно.
Главное понять принцип работы этого безобразия.
+4
kizu, #
Для yandex-ui.github.com/Examples/visibility/ всё просто: убираем вайтспейсы в html, добавляем отрицательный «-1» маджин у каждого таба — получим что-то такое: image

Вообще, там всё просто получается: каждый уголок — один псевдоэлемент, а табы можно сверстать как угодно.
+1
mclander, #
Супер. Спасибо.
0
KaLGaN, #
А я все думал, когда же ты отпишешься в этом топике… :)
0
Olegbl4, #
Да вообще, самое главное что наши верстальщики только и умеют, что западников переводить, нет чтобы поковыряться самим в вёрстке. На Яндекс.Почте мы сделали не только обратные скруглённые уголки, но и ещё кучу всего прочего, но хрен кто заметил, а тут «год спустя» западник додумался и всё!
Я жду, когда же кто-нибудь из западников про подкладывающиеся элементы напишет :)
+1
AlexandrNeo, #
Топик конечно интересен, автор невероятно хорошо расписал и показал процесс разработки. Но всё же предпочитаю на данный момент использовать «images» тем более что в данной ситуации их размер свёлся бы к минимуму т. е. один уголок завесил бы около 614 байт в JPEG, 137 байт в PNG8, 328 байт в GIF с matte и 319 байт в PNG 24 c полной поддержкой альфа канала. При это количество кода в css 2 было бы в разы меньше.
+3
JustLike, #
Столько кода ради скругления
+2
kulakowka, #
В таких случаях — я просто посылаю дизайнера куда подальше :) и делаю ровные уголки внизу. Потому что over9000 строк кода ради уголков — это идиотизм.
0
SilentImp, #
Зависит от бюджета и временных рамок.
Не вижу ничего зазорного в написании пары-тройки лишних строк кода, для того, что бы уголки скруглялись так, как придумал дизайнер и утвердил клиент.
0
kulakowka, #
Не, ну если делать на заказ… тогда само сабой. Но все равно, в таком случае — я бы сделал картинками. Гораздо быстрее и проще получилось бы.

С чисто теоретической точки зрения — эксперимент красивый. Но на практике — такие извращения ухищрения не нужны. Хватает картинок. Кроссбраузерней и быстрей. Тем более если это «на заказ», то и сроки скорее всего очень сжатые.

+2
kizu, #
Представьте, что нужно 20 блоков с разной величиной скругления и разными цветами самих уголков и фона под ними.

И плавные переходы цветов с транзишнами, конечно же!
0
SilentImp, #
Эм, сроки разные.
На практике такие изощрения использую уже года полтора и вполне ими доволен. Как и мои клиенты.
А зачем — kizu все отлично отписал ^_^
Обычно даже фаллбека к картинкам не делается.
Вот это уже специфическое извращение нужное в определенных случаях.
0
javascript, #
Роман Комаров написал про внутренние скруглённые углы на полтора года раньше.

Добавьте, пожалуйста, в конец поста ссылку на него, ради добра.
0
javascript, #

Кстати, у него без перекрытия. Просто clip-rect.

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