Демонстрация простого трюка, который позволяет сделать диалоговое / модельное окно на чистом CSS.
HTML:
Модальное / диалоговое окно на чистом CSS
Интересный эффект перелистывания фотографий
Данный пример основан на css свойстве position: sticky; и так листать можно любые элементы.
Повороты (наклоны) изображений сделаны для визуального оформления и получающаяся куча результат нехитрых манипуляций, код ниже.
Когда требуется разместить на сайте видео, можно можно использовать HTML 5 тег video. А добавив несколько css стилей, он будет адаптироваться под разные экраны.
Еще одна кривая (наклонная) линия svg
Просто памятка с примерном волны в формате SVG.
Сейчас все чаще надо размещать на сайтах изображения в формате svg.
Существует много способов, ниже приведу самый удобный из поддерживаемых.
Иногда требуется отсортировать HTML таблицу, без обращения к серверу. Это можно спокойно сделать на простом JavaScript.
Как не странно, но столкнулся с тем, что многие говорят, что у них видео, которое нужно залить на сайт, сделано в для igtv (Имеется в виду, что видео для Instagram было записано в вертикальном положении) и они не знают как разместить его на сайте.
Иногда пользователю нужно отправить на сервер не один файл, и не парочку из папки, а содержимое всей директории.
Чаще всего это делается через "выделить все", но есть более новый и удобный способ: webkitdirectory или directory, этот атрибут формы позволяет выбрать, используя стандартное окно выбора файла браузера, папку целиком.
Довольно эффектно смориться, если задний фон сайта не картина, а настоящие видео. Такое можно легко сделать на css и html 5.
Кривая / наклонная линия в SVG
Иногда требуется сверстать, например, горизонтальную наклонную линию. Ниже пример такой линии в формате SVG.