CSS/LESS
Полезные сниппеты CSS-кода, статьи и хитрые решения разных непростых задач. Учтите, что веб-программист обязан быть неплохим верстальщиком, ведь хорошее знание возможностей CSS драматично упрощает работу над сайтом.
Послезные сниппеты кода
- можно делать вот так:
a:after { content: " <" attr(href) ">"; }
Как использовать Bootstrap Glyphicons в HTML?
Иногда бывает нужно использовать иконки Bootstrap внутри HTML-кода. Например, если мы хотим сделать кнопку типа «submit» в виде лупы.
Как это сделать? Вот так: <input type=submit value="" class="btn btn-link glyphicon">
Поясним:
btn btn-link-- застилили кнопку в виде текстаglyphicon-- подключили необходимый шрифтvalue=""-- unicode необходимой иконки, удобно подсмотреть на сайте https://glyphicons.bootstrapcheatsheets.com
Как сделать треугольную стрелку внутри ссылки на CSS3
- a:after {
- content:""; // создаем блок
- width: 0; height: 0; // нулевого размера
- border-style: solid; // но с бордером
- border-color: transparent; // делаем бордеры прозрачными...
- border-bottom-color: #EEE; // ...кроме нижнего
- border-width: 0px 12px 20px 12px; // 20 - высота нижнего бордера (и стрелки), 12 ширины боковых, т.е. "стройность" стрелки
- position: absolute;
- bottom: 0; // прилепим к нижнему краю ссылки
- left: 50%; // сдвигаем на середину
- margin-left: -12px; // и еще пододвигаем на величину левого бордера
- }
Программирование цветов сайта с помощью LESS и базе одного опорного цвета
- @wtp-back: #FFCC33; // базовый цвет
- @wtp-back-dark: @wtp-back - #333; // темный цвет
- @wtp-back-dark-rgba: rgba(red(@wtp-back-dark), green(@wtp-back-dark), blue(@wtp-back-dark), 0.99); // конвертируем в rgba. Важно! Обязательно указать прозрачность не 1.0, иначе умный компилятор заменит rba на hex и в следующей строчке все сломается!
- box-shadow: 0px 0px 2px 0px @wtp-back-dark-rgba; // итак, получили полупрозрачную тень темного цвета (базируясь только на стартовом цвете)
Glyphicon стрелки по бокам от Owl Carousel (LESS)
- /* СНИППЕТ: делает glyphicon стрелки по бокам от Owl Carousel.
- Требует следующей конфигурции вызова owl-carousel:
- nav: true,
- navText:["<div class='nav-btn prev-slide glyphicon'></div>","<div class='nav-btn next-slide glyphicon'></div>"],
- */
- .owl-nav {
- margin: 0; height:0; // чтобы кнопки не занимали места внизу
- .nav-btn{
- color: white;
- font-size: 50pt;
- transform: scale(1, 3);
- position: absolute;
- cursor: pointer;
- top: 110px !important;
- &:hover{ color: @rose;}
- &.prev-slide {left: -100px;}
- &.next-slide {right: -100px;}
- }
- .disabled .nav-btn {
- pointer-events: none;
- opacity: 0.2;
- }
- } // /СНИППЕТ
