CSS/LESS

Полезные сниппеты CSS-кода, статьи и хитрые решения разных непростых задач. Учтите, что веб-программист обязан быть неплохим верстальщиком, ведь хорошее знание возможностей CSS драматично упрощает работу над сайтом.

Послезные сниппеты кода

  • можно делать вот так: a:after { content: " <" attr(href) ">"; }

Как использовать Bootstrap Glyphicons в HTML?

Иногда бывает нужно использовать иконки Bootstrap внутри HTML-кода. Например, если мы хотим сделать кнопку типа «submit» в виде лупы.
Как это сделать? Вот так: <input type=submit value="&#xe003;" class="btn btn-link glyphicon">

Поясним:

  • btn btn-link -- застилили кнопку в виде текста
  • glyphicon -- подключили необходимый шрифт
  • value="&#xe003;" -- unicode необходимой иконки, удобно подсмотреть на сайте https://glyphicons.bootstrapcheatsheets.com

Как сделать треугольную стрелку внутри ссылки на CSS3

  1.  a:after {
  2.     content:""; // создаем блок
  3.     width: 0; height: 0; // нулевого размера
  4.     border-style: solid; // но с бордером
  5.  
  6.     border-color: transparent; // делаем бордеры прозрачными...
  7.     border-bottom-color: #EEE; // ...кроме нижнего
  8.     border-width: 0px 12px 20px 12px; // 20 - высота нижнего бордера (и стрелки), 12 ширины боковых, т.е. "стройность" стрелки
  9.  
  10.     position: absolute;
  11.     bottom: 0; // прилепим к нижнему краю ссылки
  12.     left: 50%; // сдвигаем на середину
  13.     margin-left: -12px; // и еще пододвигаем на величину левого бордера
  14.     }

Программирование цветов сайта с помощью LESS и базе одного опорного цвета

  1. @wtp-back: #FFCC33; // базовый цвет
  2. @wtp-back-dark: @wtp-back - #333; // темный цвет
  3. @wtp-back-dark-rgba: rgba(red(@wtp-back-dark), green(@wtp-back-dark), blue(@wtp-back-dark), 0.99);    // конвертируем в rgba. Важно! Обязательно указать прозрачность не 1.0, иначе умный компилятор заменит rba на hex и в следующей строчке все сломается!
  4. box-shadow: 0px 0px 2px 0px @wtp-back-dark-rgba; // итак, получили полупрозрачную тень темного цвета (базируясь только на стартовом цвете)

Статьи темы:

Как расставить запятые между тегами на CSS?

Филипп Казаков

Иногда проще что-то сделать на чистом CSS, чем на серверной стороне. Например, расставить запятые между тегами. Попробуем разделить подчеркнутые теги-ссылки на чистом CSS.

далее

Блог

Поломка админки NetCat 4.7 в Google Chrome и Opera

В современных версиях Google Chrome и Opera, вышедших в прошлом месяце, админка CMS NetCat 4.7 и младше вдруг сломалась. Поломка проявляется в том, что в правой части админки перестала показываться нижняя панель редактирования (там, где кнопки Добавить и прочие), а скролл-прокрутка не осуществляется до конца. Работать с сайтом и добавлять новые материалы не представляется возможным.

далее

NetCat: техническая поддержка и доработка сайтов

Мы работаем с CMS NetCat уже больше 10 лет. У нас большой опыт и ответственный подход к делу.

далее

Права Доступа в Компонентах: работают не так, как ожидается; но можно накостылить патч

Если в настройках Раздела или Инфоблока NetCat попробовать дать доступ на изменение объекта ВСЕМ, ничего не получится. Просмотр и Добавление работают одним образом, а Изменение, Включение и Удаление -- другим.

далее

Как расставить запятые между тегами на CSS?

Иногда проще что-то сделать на чистом CSS, чем на серверной стороне. Например, расставить запятые между тегами. Попробуем разделить подчеркнутые теги-ссылки на чистом CSS.

далее

Весь блог тут