Демонстрация простого трюка, который позволяет сделать диалоговое / модельное окно на чистом CSS.
CSS:
Модальное / диалоговое окно на чистом CSS
Многие кто только начинает верстать с использованием css flexbox зачастую сталкиваются со "странным поведением блоков", в частности с тем, что justify-content: space-between; не работает
Интересный эффект перелистывания фотографий
Данный пример основан на css свойстве position: sticky; и так листать можно любые элементы.
Повороты (наклоны) изображений сделаны для визуального оформления и получающаяся куча результат нехитрых манипуляций, код ниже.
Цветовые палитры
Иногда нужно подобрать несколько цветов, например, для тестов или для раздела который не был подготовлен дизайнером.
Если сложно выбрать несколько цветов из всего спектра, то для таких целей можно воспользоваться парой серивисов.
Когда требуется разместить на сайте видео, можно можно использовать HTML 5 тег video. А добавив несколько css стилей, он будет адаптироваться под разные экраны.
Еще одна кривая (наклонная) линия svg
Просто памятка с примерном волны в формате SVG.
Итак задача: сделать плитки (карточки с фотографией и заголовками), все они были одного размера (в независимости от размера изображений) и переносились (адаптивность) при изменение размера экрана.
Результат:
- все картинки разного размера.
Кривая / наклонная линия в SVG
Иногда требуется сверстать, например, горизонтальную наклонную линию. Ниже пример такой линии в формате SVG.
Красивый рекламный блок, пронизанный линией
Основная идея - создать блок, в котором расположены несколько заголовков пронизанных вертикальной линией так, что виден задний фон.
Такое проще показать, чем объяснить:
Шестиугольная рамка для картинки на CSS
Пример того, как сделать шестиугольную рамку для фотографий на чистом CSS.