Персональный сайт Дмитрия Журавлева

Связь: dmitriyzhuravlev@yandex.ru

В очередной раз изобретаю велосипед. На этот раз выезжающее из-за левого края меню.

Читать далее...

Комментариев нет

Век живи - век учись. Как-то знание про многоколоночную вёрстку прошло мимо меня, но наверстать никогда не поздно. Многоколоночная вёрстка не имеет отношения к flex или grid, это ещё один способ организации контента внутри родителя. Причём поддержка идёт и в старых браузерах, что является незначительным плюсом. Вёрстка становится похожа на газетную, текст читается легче, правда не уверен, что на смартфонах будет удобно. Но никто не мешает для смартфонов это отключить, а для обычных мониторов оставить как есть. Для создания колонок на родителе используются CSS-свойства column-count, column-width, column-gap и column-rule. Причём column-rule - это shorthand-свойство для column-rule-width, column-rule-style и column-rule-color. Также есть свойство column-span, но оно ставится на потомка, а не родителя.
Этот блок простирается через все колонки, потому что у него установлено свойство column-span: all. У этого свойства могут быть только два значения - all или none.
Я сначала подумал, что это свойство будет "разрубать" колонки так, что текст каждой колонки будет снизу продолжаться, но нет, текст переносится вбок.

Свойство column-count разбивает контент родителя на заданное количество колонок. Если стоит auto, то количество зависит от заданного column-width. Свойство column-gap задаёт расстояние между колонками, причём это же свойство потом стали использовать при flex и grid вёрстке. Ну, у column-rule задаётся оформление разделителей между колонками, в виде привычного значения вроде column-rule: 2px dotted #606060;.

В общем, любопытный способ вёрстки, хотя имеет ограниченное применение, но выпендриться можно.

Кстати, если вы читаете этот пост на смартфоне с небольшим размером экрана, то никаких колонок вы здесь не увидете. Для ширины менее 430 пикселей поставил column-count: 1;.
Комментариев нет

У этого блока вращающаяся разноцветная рамка.
Реализовал "движущийся" border благодаря блоку-подложке, который вращается с помощью transform: rotate().
У идеи есть минус - блок должен иметь фиксированные высоту и ширину, хотя, думается мне, если постараться, то можно и для нефиксированного что-то придумать, двигая margin, padding и т.п.
Используются ванильные CSS-переменные, без всяких SASS. Можно толщину движущейся рамки менять с помощью значения переменной --borderSize.

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

Ещё один вариант реализации - это блок, внутри которого двигаются 4 блока, прижатых к краям. Это уже не моя идея, но постараюсь и её реализовать.

HTML и CSS код внутри...

Комментариев нет

Страницы: 1