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; // итак, получили полупрозрачную тень темного цвета (базируясь только на стартовом цвете)

Glyphicon стрелки по бокам от Owl Carousel (LESS)

  1.   /* СНИППЕТ: делает glyphicon стрелки по бокам от Owl Carousel.
  2.   Требует следующей конфигурции вызова owl-carousel:
  3.   nav: true,
  4.   navText:["<div class='nav-btn prev-slide glyphicon'>&#xe257;</div>","<div class='nav-btn next-slide glyphicon'>&#xe258;</div>"],
  5.   */
  6.   .owl-nav {
  7.     margin: 0; height:0; // чтобы кнопки не занимали места внизу
  8.  
  9.     .nav-btn{
  10.       color: white;
  11.       font-size: 50pt;
  12.       transform: scale(1, 3);
  13.       position: absolute;
  14.       cursor: pointer;
  15.       top: 110px !important;
  16.       &:hover{ color: @rose;}
  17.  
  18.       &.prev-slide {left: -100px;}
  19.       &.next-slide {right: -100px;}
  20.     }
  21.  
  22.     .disabled .nav-btn {
  23.       pointer-events: none;
  24.       opacity: 0.2;
  25.     }
  26.   } // /СНИППЕТ

Блог

Что с Мастерхостом? Когда заработает?!

Этот вопрос всё чаще задают в Интернете начиная примерно с 12:00 дня 2 марта. А всё потому, что он накрылся!

далее

Автоматизированная Система Управления Бэкапами

Автоматизированная Система Управления Бэкапами позволяет добиться полного контроля над резервными копиями сайтов внутри инфраструктуры веб-студии. Если вы поддерживаете десятки сайтов на разных хостингах, без подобной системы вы не можете быть на 100% уверены в том, что каждый из них был корректно зарезервирован прошлой ночью.

далее

WebSocket: интеграция с NetCat

Хотите добавить на сайт под управлением CMS NetCat поддержку технологии WebSocket? Обращайтесь к нам! Посетители сайта смогут получать мгновенные уведомления о событиях сайта без обращений к серверу и перезагрузок страниц. Превратите свой сайт в интерактивную площадку, работающую в реальном времени!

далее

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

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

далее

Весь блог тут