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

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

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

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

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

.underlined {
  background-image: linear-gradient(to bottom, black, black);
  background-size: 1px 1px;
  background-repeat: repeat-x;
  background-position: 0 bottom;
}

Демо

CSSВыпадающее меню с задержкой

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

Обычное выпадающие css-меню сделанное с помощью переключения display:none;/display:block; повешенного на hover обладает двумя раздражающими недостатками:

— подменю показывается мгновенно, как только курсор мыши попал в область родительского пункта
— подменю мгновенно пропадает, как только курсор вышел за пределы подменю

Пример такого меню: