Допустим, вы верстальщик, и дизайнер нарисовал вам такую довольно заурядную штуку:

Иконку можно перекрасить с использованием вектора: инлайновые svg или кастомный иконочный шрифт. Первый вариант не везде работает, а значит придётся делать ещё и растровые картинки для деградации, шрифты плохо выглядят в Винде. При этом оба варианта требуют лишних трудозатрат. Можно просто использовать две картинки, но это опять-таки ведёт к дополнительной ненужной работе.

Упросить жизнь поможет свойство filter, благодаря которому можно поменять оттенок, яркость, насыщенность и всё, что угодно:

.link {
  color: #0099DD;
  transition: color 0.2s;
}
.icon {
  float: left;
  width: 17px;
  height: 17px;
  background-image: url('burger.png');
  transition: filter 0.2s;
}
.link:hover {
  color: #DD3300;
}
.link:hover .icon {
  /* ради чего и собрались */
  filter: hue-rotate(160deg) brightness(0.77) saturate(1.3); 
}

В жизни выглядит это так:

Кроме того, filter отлично справляется с индикацией ховера разноцветных ссылок. Достаточно написать, например:

a:hover {
  filter: brightness(0.8);
}

C изящной деградацией (боже, как я ненавижу это выражение) тоже всё хорошо. Люди с недобраузерами просто не увидят всей этой красоты.

Придумал на днях, как реализовать на CSS вот такую красоту. Особый кайф, что она резиновая (подёргайте страницу).

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

Кривые Безье средствами CSS не рисуются, поэтому остаётся искать более извращённые способы. Например, отрезать дугу от эллипса.

Эллипс довольно просто (но несколько неожиданно) получается с помощью относительных значений свойства border-radius: 50% (проценты как раз и превращают овал в правильный эллипс). Нужная часть вырезается с помощью внешней обёртки и overflow: hidden.

Чтобы вырезать дугу с загибом в нужную сторону, достаточно сместить эллипс внутри обёртки. Это удобно делать с помощью position: absolute и свойств left, right, top и bottom:

Абсолютное позиционирование даёт еще один плюс: резиновость. При ширине и высоте эллипса примерно вдвое больших, чем у обёртки, получается дуга в 90° при любом размере линии выноски:

Контейнер:

.line {
  position: relative; /* чтобы эллипс спозиционировать абсолютно */
  width: 25%; /* нам же интересна именно резина */
  height: 50px;
  overflow: hidden; /* отрезаем дугу */
}

Эллипс можно нарисовать дополнительным блоком, но лучше использовать псевдоэлемент.

.line:before {
  content: "";
  position: absolute; 
  width: 220%;
  height: 210%;
  right: 0; /* вырезаем правую верхнюю часть эллипса */
  top: 0;
  border: 1px solid #ccc; /* цвет и вид линии */
}

Стилизация

Так как это обычный border, то к нему применимы все соответсвующие стили:

Меняя размеры (width и height) и смещение (top, bottom, left и right) эллипса внутри обёртки, получаем дуги разной формы:

Деградация

В браузерах, не поддерживающих border-radius, метод также работает, просто в соответствии с принципами изящной деградации выглядит стрёмно:

С удивлением обнаружил, что единственный браузер, вменяемо поддерживающий свойство letter-spacing — это (сюрприз!) Интернет Эксплорер 9. Вменяемость проявляется при значениях letter-spacing некратных пикселю, например, 0.5px.

Большинство браузеров (Хром, Сафари, Опера) просто откидывает дробную часть: 0.5px превращается в 0px, а 2.78px — в 2px. Гиковский браузер Файерфокс отличается в худшую, что неудивительно, сторону — он вроде как каждую букву смещает на нужное значение где-то у себя в уме, но на экран выводит всё равно с привязкой к пикселям, из-за чего буквы начинают плясать. При значении letter-spacing: 0.5px видно, что вместо смещения каждой буквы на полпикселя, Файерфокс смещает на целый пиксель каждую вторую.

Если отодвинутся от монитора и прищурить глаза, то выглядит вполне прилично — не иначе, Файерфокс программировали приверженцы выровненного с двух сторон текста.

Интернет Эксплорер, наоборот, внезапно порадовал. Он по-настоящему сдвигает каждую букву ровно на полпиксель, что легко заметить по отличающемуся рендерингу букв: «о» и «е» разные, в то время как «л» и «ч» выглядят одинаково.

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

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

Многие дизайнеры делают вот такие буллеты, например, в меню:

• Привет!
• Я пункт меню

Долгое время я делал их картинкой, пока не подумал: «Эй, графика кажется довольно примитивной. Может я смогу сделать тоже самое без картинки?» Решение пришло практически мгновенно, во многом благодаря замечательному уроку от Криса Койера, направившему мои мозги в нужное русло.

Так как в ХТМЛе всё прямоугольное, нам понадобится два элемента:

Раз их только две штуки, самым очевидным будет не плодить сущности, а воспользоваться многострадальными псевдо-элементами :before и :after. Четырёхпиксельные квадраты будут рисоваться бордером — так можно наследовать цвет родительского элемента.

ХТМЛ используется стандартный:

<body>
  <ul class="menu">
    <li><a href="#">Привет!</a>
    <li><a href="#">Я меню</a>
  </ul>
</body>

Всё интересное в стилях:

<style type="text/css">
  .menu {
    list-style: none /* убираем стандартные буллеты */
  }
  .menu a:before, .menu a:after {
    content: "";
    position: absolute;
    width: 2px;
    height: 2px;
    left: -1em; /* горизонтальный отступ относительно родительского элемента */
    top: 50%; /* центрируем по вертикали */ 
  }

  /* верхний и нижний квадраты */
  .menu a:before {
    border-top: 2px solid;  /* цвет не указываем, чтобы наследовался от родителя */
    border-bottom: 2px solid;
    margin-top: -3px; /* подтягиваем наверх на половину высоты (бордер учитывается) */
  }

  /* правый квадрат */ 
  .menu a:after {
    border-right: 2px solid;
    margin-top: -1px; /* высота меньше, поэтому и подтягиваем только на пиксель. */
  }

  /* чтобы псевдо-элементы позиционировались относительно 
  родительского элемента, добаляем ему position:relative */
  .menu a {
    position: relative
  }
</style>

В результате получается список, приведённый в начале заметки. Если включить воображение, можно поиграться с цветами, отступами, анимацией при наведении и тому подобным.