Когда требуется разместить на сайте видео, можно можно использовать HTML 5 тег video. А добавив несколько css стилей, он будет адаптироваться под разные экраны.


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

Просто памятка с примерном волны в формате SVG.


Пометки: Волна, Кривая линия svg

Итак задача: сделать плитки (карточки с фотографией и заголовками), все они были одного размера (в независимости от размера изображений) и переносились (адаптивность) при изменение размера экрана.

Результат:

pic1

- все картинки разного размера.


Категории: CSS
Пометки: object-fit

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


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

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

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

pic1


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

Пример того, как сделать шестиугольную рамку для фотографий на чистом CSS.


Категории: CSS
Пометки: Hexagon на CSS

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

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

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


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

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

pic1


Категории: CSS

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

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


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

Памятка с медиа запросами для основных типов экранов.


Категории: CSS
Пометки: Медиа запросы (media queries)
Яндекс.Метрика