xandeadx.ru Блог музицирующего веб-девелопера

CSSПрозрачный треугольный вырез в элементе

Опубликовано в

Для создания вырезов в css есть свойство clip-path, позволяющее ограничить область элемента любой геометрической фигурой или полигоном. Работает во всех современных браузерах кроме IE (caniuse).

Пример треугольного выреза в активном пункте меню:

<ul class="menu">
  <li class="menu__item">Item One</li>
  <li class="menu__item menu__item--active">Item Two</li>

CSSКомпиляция LESS в PhpStorm на Windows с помощью less.php (без Ruby, без Node.js, без СМС)

Опубликовано в

Пример настройки PhpStorm для компиляции LESS в CSS, без необходимости установки Ruby, Node.js и подобного, достаточно только PHP и LESS компилятора oyejorge/less.php.

CSSЦикл по ассоциативному массиву в LESS

Опубликовано в

Например на сайте есть несколько разделов (foo, bar, baz), каждый раздел имеет свой цвет фона (green, blue, red). Способ реализации с помощью цикла по ассоциативному массиву:

// Создаём ассоциативный массив
@body-bg-array:
  foo green,
  bar blue,
  baz red;
 
// Создаём функцию для обхода массива
.body-bg-generator(@iterator: 1) when (@iterator <= length(@body-bg-array)) {
  @item: extract(@body-bg-array, @iterator);
  @category: extract(@item, 1);
  @color: extract(@item, 2);
 
  body.category-@{category} {
    background: @color;
  }

CSSЛинии с помощью linear-gradient

Опубликовано в

Благодаря тому, что градиент это фоновое изображение, ему (градиенту) можно задавать такие параметры как — размер, повторяемость и позицию. Таким образом для вывода линии достаточно создать одноцветный градиент нужного размера.

Пример подчёркнуто текста:

.underline {
  background-image: linear-gradient(black, black);
  background-size: 100% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
}

Демо

Пример двойного подчёркивания:

.double-underline {