css :hover presudo-class

Никто не любит визуально скучные сайты, никак не реагирующие на действия пользователя, например, наведение мыши на элемент. Ускорим процесс написания стилей для их реагирование на состояние блока используя Transition миксин.

Читать далее

Web-page layout with grid on the desctop and mobile

Использование сетки при разработки прототипа или макета сайта в последнее время стало обязательным условием. Для её создания создана масса инструментов, так же интернет пестрит подобными сервисами в огромном количестве. К сожалению, не все из них поддерживают дробные значения пикселей, что влечет за собой некоторую погрешность при генерации сетки с заданными параметрами.

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

Читать далее

  1. Не использовать свойство columns у <ul>, <ol>. Съедает маркеры. Применять к родительскому элементу;
  2. Overflow: hidden плохо работает у таблиц (и display: table);
  3. Position: absolute делает элемент блочным, за исключением элементов с display:table;
  4. To be continued…

171900_10151236273983571_1504363868_o

Существует проблема скачков страницы сайта после её открытия из-за последующей загрузки изображений. Особенно это заметно, если пролистать страницу, насыщенную изображениями, до конца и обновить её. Конечно же, можно указать фиксированные размеры изображения, однако в таком случае мы сильно потеряем в адаптивности страницы.

Читать далее

Задача: оформить dl-список так, чтобы термины и определения были по левую и правую сторону соответственно.

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

Less/Scss/Stylus

Css

 
Читать далее