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

Связь: dmitriyzhuravlev@yandex.ru

Сделать видео фоном для div-блока? Без проблем. На airbnb схожий приём был раньше со счатливыми лицами людей.
Тегу video нужно поставить атрибуты autoplay, muted и loop.
Если не поставить muted, то autoplay не заработает в современных браузерах.

Кстати, моя умная кошка советует не использовать слишком много свистелок на сайте

Можно хоть для всего сайта сделать фоном (но не надо).
Работает даже в IE11.
Комментариев нет

HTML
<div class=""></div>
<a href=""></a>
<div style=""></div>
<input type="number">
<ul></ul>
<select></select>
<button></button>
<span></span>
<h1><h1/>
CSS
font-size: 1.1em;
user-select: none;
animation-duration: 4s;
box-sizing: border-box;
height: var(--size);
position: relative;
width: 100%;
word-break: keep-all;
white-space: nowrap;
top: -60px;
clip-path: circle(50%);
transform: translateX(10px);
JavaScript
fetch('https://api.example.org')
.then((r) => r.json())
.then((data) => {
productsArr.push(data.result);
})
.catch((e) => handleError(e));
setTimeout(hideWarning, 4000);
if (user.isAuthed === false) {
updateRoute(); }
Комментариев нет

Наконец-то изучил SVG. Как-то всё не было то ли времени, то ли потребности, чаще использовал готовые картинки.

В общем, моё первое баловство с SVG:
Комментариев нет

Баловство с CSS-тенями. Наведите курсор мыши на блок - появится светящаяся тень. Идея не моя, я лишь под себя подогнал и анимаций добавил.
Вообще, работа с тенями в браузере - штука ресурсозатратная. В данном случае теней используется много плюс анимация перехода. На медленном смартфоне у меня подтормаживание плавности.
FF тоже отрабатывает не идеально, а вот древние IE11 и Opera 12 - без тормозов.

DimaDima



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

Увидел прикольную анимацию - раскрывающаяся папка с вылазящими документами, решил сделать свой вариант.
Читать далее...

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

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

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

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

Век живи - век учись. Как-то знание про многоколоночную вёрстку прошло мимо меня, но наверстать никогда не поздно. Многоколоночная вёрстка не имеет отношения к 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