Как не странно, но столкнулся с тем, что многие говорят, что у них видео, которое нужно залить на сайт, сделано в для igtv (Имеется в виду, что видео для Instagram было записано в вертикальном положении) и они не знают как разместить его на сайте.


Категории: Web, HTML
Пометки: Вертикальное видео youtube, igtv

Иногда пользователю нужно отправить на сервер не один файл, и не парочку из папки, а содержимое всей директории.

Чаще всего это делается через "выделить все", но есть более новый и удобный способ: webkitdirectory или directory, этот атрибут формы позволяет выбрать, используя стандартное окно выбора файла браузера, папку целиком.


Категории: Web, HTML
Пометки: Отправка всей директории на сервер HTML форма

Довольно эффектно смориться, если задний фон сайта не картина, а настоящие видео. Такое можно легко сделать на css и html 5.


Категории: Web, HTML
Пометки: html video autoplay не работает

Иногда требуется сверстать, например, горизонтальную наклонную линию. Ниже пример такой линии в формате SVG.


Пометки: Волна. Как сделать наклонную горизонтальную линию на css. Верстка линия.

Основная идея - создать блок, в котором расположены несколько заголовков пронизанных вертикальной линией так, что виден задний фон.

Такое проще показать, чем объяснить:

pic1


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

Частая задача - красиво оформить поле для прикрепления файла.

Основной проблемой тут является то, что сам элемент input type="file" через CSS кастомизировать можно плохо, поэтому его просто скрывают и оформляют кнопку место его кнопку, ссылку, label...

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


Категории: Web, JavaScript, HTML, CSS
Пометки: css как красиво оформить прикрепленный файл (input file)

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

Самое простое и распространенное решение, это добавлять горизонтальную прокрутку через css свойство overflow, но при этом не всегда посетителям сайта очевидно, что на экране телефона таблица, особенно если первая колонка занимает все пространство.


Категории: HTML, CSS
Пометки: отзывчивые таблицы, responsive table, адаптивные html таблицы

Иногда нужно как-то выделить акцию, а делать для этого отдельную картинку - перебор. Тогда можно сделать красивую этикетку на css:

pic1


Категории: HTML, CSS, -Памятка-
Пометки: бэйдж со скидкой. Треугольник на css, акции, акция, баннер

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


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

Мета тег viewport, предназначен для указания, как на мобильных устройствах должна отображаться "область просмотра". Далее будет несколько примеров.


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