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


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

Используя свойство object-fit удобно красиво выводить картинки товаров, особенно если они разных размеров.

Ниже несколько, для демонстрации вариантов отобрадения.


Категории: HTML, CSS
Пометки: Вписать изображение в блок

Думаю все мы уже привыкли видит на сайтах значок рубля, вместо приписки "руб.", но что делать если кодировка сайта не utf-8, а windows-1251?


Категории: Web, HTML, CSS
Пометки: web шрифт со знаком рубля, знак рубля шрифтом

Emmet

29.10.2019

Уже давно использовал, в разных редакторах, возможность генерации целых блоков html по шаблонам вида: div.class>ul+.
И вот решил выяснить про данный функционал подробнее.


Категории: Web, HTML, CSS
Пометки: автокомплит, ctrl+e в codelobster

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


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

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

Итак атрибут srcset позволяет задать какие картинки, при какой ширине экрана нужно загружать. Это позволяет не только экономить трафик, но и проходить Google pagespeed.


Категории: Web, HTML, CSS
Пометки: Адаптивные картинки, Адаптивные изображения используя srcset

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

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


Категории: HTML

Иногда нужно заменить старую табличную верстку (HTML таблицу), на отзывчивую (Responsive), правильный вариант, это переверстать (на эту тему есть заметка Замена таблиц на flexbox ), но иногда это слишком затратно по ресурсам.

Тут есть простое решение - превратить таблицу в flexbox


Категории: HTML, CSS
Пометки: Переделка табличной верстки на flexbox

При использовании flexbox некоторые привычные методы, например, выравнивание элементов по центру внутри flex блока, работаю по другому.

Ниже пример выравнивания текста по вертикали в flexbox


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

Интересная библиотека, например, для интерактивного бэкграунда.

pic1

Сайт разработчика VincentGarreau/particles.js

Живое Demo


Категории: JavaScript, HTML, CSS
Пометки: Постоянно изменяющиеся частицы, рисование на канве, конвас, canvas
Яндекс.Метрика