Демонстрация простого трюка, который позволяет сделать диалоговое / модельное окно на чистом CSS.

pic1


Категории: Web, HTML, CSS, -Памятка-
Пометки: CSS Модальное окно, CSS диалоговое окно

Многие кто только начинает верстать с использованием css flexbox зачастую сталкиваются со "странным поведением блоков", в частности с тем, что justify-content: space-between; не работает


Категории: CSS

Данный пример основан на css свойстве position: sticky; и так листать можно любые элементы.

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

pic1


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

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

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


Категории: Web, CSS, Сторонние сервисы
Пометки: css палетка цветов

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


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

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


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

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

Результат:

pic1

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


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

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


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

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

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

pic1


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

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


Категории: CSS
Пометки: Hexagon на CSS
Яндекс.Метрика