Swiperjs - хороший адаптивный слайдер / карусель с множеством настроек и хорошими примерами.

pic1


Категории: Web
Пометки: Слайдер, карусель, prettyphoto, slider ,Carousel

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

Ниже будет пример того, как такое можно сделать с использованием css grid.


Категории: Web, CSS
Пометки: Как сделать двухколончатую таблицу на css grid, css grid таблица

Перечень основных терминов и сборник примеров по технологии css grid.


Категории: Web, CSS

Бывает нужен блок, который на больших экранах выглядит как таблица с несколькими колонками, а на экранах с маленьким разрешением как одна вертикальная полоса.

Ниже будет пример того, как это можно сделать с использованием css свойств flexbox.


Категории: Web, CSS, -Памятка-
Пометки: Как сделать двухколончатую таблицу на css flex css flex таблица, css flexbox

Красивая галерея Spotlight, думаю рассмотреть ее как замену устаревший и больше не обновляющейся prettyphoto

pic1

На полный экран:

pic1

pic1


Категории: Web
Пометки: prettyphoto

После выхода Font Awesome 5'ой версии, появление PRO, kit и т.д. стало сложно найти прямую ссылку на CDN шрифта. Оставлю тут памятку:

 
<link href="https://use.fontawesome.com/releases/v5.10.2/css/all.css" rel="stylesheet">

Проверка:

 
<i class="fas fa-check"></i>



Также SVG версия:

 
<script defer src="https://use.fontawesome.com/releases/v5.10.2/js/all.js"></script>


Категории: Web, HTML, CSS

Суть работы Barba.js очень проста - она перехватывает ссылки на страницы текущего сайта, загружает их в память, выделяет контейнер с контентом и заменяет его на странице. Все это может сопровождаться анимацией.

Хороший пример использования, на мой взгляд, можно посмотреть на странице документации.


Категории: Web, JavaScript

Довольно распространенная задача, когда нужно сделать поле с маской для ввода номера телефона, раньше использовал плагин jquery.mask.min.js, но он стал плохо работать, поэтому нашел вариант на чистом javascript.

pic1


Категории: Web, JavaScript
Пометки: Красивое поле с маской для ввода номера телефона на javascript javascript mask input phone

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

Также стоит учитывать, если лицензии нет и CMS Bitrix не обновляется, то расширения могут не заработать на старых версиях php.

Именно так и получилось, при установке расширения "Долями".


Категории: Web, PHP, Bitrix CMS
Пометки: долями bitrix ручная установка модуля

Уже есть небольшая памятка о том как стилизовать checkbox спрайтами, но я решил продемонстрировать вариант, когда поле ввода находиться внутри "этикетки" (тега label).


Категории: Web, HTML, CSS
Яндекс.Метрика