Веброзробка

Стилизация полосы прокрутки

Часто в блоках со сколом стандартная полоса прокрутки диссонирует с общим дизайном сайта, и возникает задача её стилизовать. Делаем это следующим образом:

Коментарів немає
Веброзробка

Прелоадер на сайте

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

Коментарів немає
Веброзробка

line-clamp – обрезаем текст до нужного количества строк средствами CSS

Свойство css line-clamp усекает текст до определенного количества строк и ставит троеточие в случае превышение. В данный момент в разработке, но уже вполне можно применять. Пример использования:

Коментарів немає
Веброзробка

Анімація в CSS-1. Прості анімації через transition

CSS дозволяє нам анімувати елементи на веб-сторінці. Це можуть бути як прості анімації, так і біль складніші. І тут є нюанси, в яких треба було б розібратися. Почнемо з азів.

Коментарів немає
Веброзробка

Flexbox-3. Flexbox на практике

В двух предыдущих записях Flexbox-1. Flex-контейнер и его свойства и Flexbox-2. Flex-элемент и его свойства – речь шла о теории, сейчас попробуем применить это всё на практике. И увидим, что flexbox – это действительно круто. Что мы будем делать? Мы создадим html-шаблон сайта, состоящий из шапки, меню, контента, двух боковых колонок и подвала. В общем […]

Коментарів немає
Веброзробка

Flexbox-2. Flex-элемент и его свойства

В предыдущей статье мы рассмотрели свойства flex-контейнера и поведение flex-элементов в зависимости именно от тех свойств, которые применяются к контейнеру. Теперь же изучим свойства, которые могут иметь непосредственно flex-элементы.

Коментарів немає
Веброзробка

Flexbox-1. Flex-контейнер и его свойства. (много текста с примерами)

Технология Flexbox сама по себе не нова. Появилась уже лет как десять назад. Но вот только последнее время стала повсеместно поддерживаться браузерами, так что время перехода на верстку с помощью flex’ов уже пришло. Более того, flexbox’ы уже активно применяется, и не знать их становиться моветоном. Поэтому я подготовил шпаргалку, разъясняющую основные моменты.

Веброзробка

Центрируем модальное окно по вертикали в Bootstrap 3

В Bootstrap 3.x модальные окна имеют фиксированный отступ от верхнего края. Когда окно небольшого размера, это не совсем правильно. Удобнее доя пользователя показывать его по центру окна браузера. Делаем это так:

Коментарів немає
Веброзробка

Стилизация Tooltip (Bootstrap 3)

Я чуть ранее писал о стилизации Tooltip для Bootstrap версии 4. Добавлю про стилизацию компонента всплывающих подсказок для 3-й версии.

Коментарів немає
Веброзробка

Стилизация tooltip (bootstrap 4)

В bootstrap есть компонент подсказок Tooltip. По умолчанию он не активен, его необходимо подключить. Как это сделать есть в документации, труда это составить не должно. Но вот внешний вид всплывающего окна один – черный фон, светлые буквы. Изменить стили окна можно следующим образом:

Коментарів немає