✈️ Code Ready | Frontend
Правильный порядок фокуса в сложном Grid без перестановки DOM!
CSS Grid позволяет визуально переставлять элементы, но раньше это создавало неприятную проблему: пользователь видит один порядок, а при нажатии Tab фокус может идти по исходному DOM.
Теперь для этого появился
Для Grid можно заставить последовательную навигацию следовать визуальным строкам:
.cards {
reading-flow: grid-rows;
}
Для Flex есть отдельный режим:
.toolbar {
reading-flow: flex-visual;
}
А если нужен контролируемый порядок, контейнер переводится в
.list {
reading-flow: source-order;
}
.featured {
reading-order: -1;
}
Это полезно в адаптивных интерфейсах, где Grid/Flex визуально меняет расположение карточек или контролов, но переписывать DOM только ради порядка клавиатурной навигации неудобно.
🔥
📣 Code Ready | #совет
Правильный порядок фокуса в сложном Grid без перестановки DOM!
CSS Grid позволяет визуально переставлять элементы, но раньше это создавало неприятную проблему: пользователь видит один порядок, а при нажатии Tab фокус может идти по исходному DOM.
Теперь для этого появился
reading-flow.Для Grid можно заставить последовательную навигацию следовать визуальным строкам:
.cards {
reading-flow: grid-rows;
}
Для Flex есть отдельный режим:
.toolbar {
reading-flow: flex-visual;
}
А если нужен контролируемый порядок, контейнер переводится в
source-order, после чего отдельным детям можно задавать reading-order..list {
reading-flow: source-order;
}
.featured {
reading-order: -1;
}
Это полезно в адаптивных интерфейсах, где Grid/Flex визуально меняет расположение карточек или контролов, но переписывать DOM только ради порядка клавиатурной навигации неудобно.
🔥
reading-flow решает проблему расхождения визуального порядка и последовательной навигации на уровне CSS.📣 Code Ready | #совет
This media is not supported in your browser
VIEW IN TELEGRAM
✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack
💾 Header Navigation Menu – кнопка с раскрывающимся меню сайта. Ее иконка трансформируется в крестик с помощью вращения ее элементов вокруг центра.
Сайтодел | #сниппет #css
💾 Header Navigation Menu – кнопка с раскрывающимся меню сайта. Ее иконка трансформируется в крестик с помощью вращения ее элементов вокруг центра.
Сайтодел | #сниппет #css
This media is not supported in your browser
VIEW IN TELEGRAM
✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack
💾 Landing Page HTML & CSS – галерея из раскрывающихся элементов. Заголовок, написанный вертикально, отображается в открытой карточке.
Сайтодел | #сниппет #css
💾 Landing Page HTML & CSS – галерея из раскрывающихся элементов. Заголовок, написанный вертикально, отображается в открытой карточке.
Сайтодел | #сниппет #css
✈️ [PYTHON:TODAY]
🚀 Самая жирная шпаргалка по Backend на русском!
Внутри:
🌍 Сети и интернет (без этого твой API — просто грустная пицца без начинки).
💻 Как устроен ПК (чтобы не плакать над железом).
🐧 Linux (священная ОС всех кодеров).
🗄 Базы данных (чтобы SELECT не превращался в рулетку).
🔗 API (общайся с фронтом как с друзьями, а не врагами).
🛡 Безопасность (да, SQL-инъекции всё ещё живы).
🧑💻 Тестирование (потому что баги — это тоже фича, но не всегда).
...и много чего интересного!
Три формата знаний:
💬 Визуал — картинки, таблицы и шпаргалки, нарисованные специально для этого проекта.
💬 Краткая выжимка — только самое важное, плюс ссылки на термины в вики.
💬 Источники — топовые и понятные ресурсы для глубокого изучения.
😰 Если ты новичок — это твой трамплин!
⚡️ Если ты профи — это твой ускоритель!
👨💻 Всё, что нужно бэкендеру, в одном месте.
Сохраняй, пригодится! 👍
#cheatsheet #github #python #git #linux #db #doc
🚀 Самая жирная шпаргалка по Backend на русском!
Внутри:
🌍 Сети и интернет (без этого твой API — просто грустная пицца без начинки).
💻 Как устроен ПК (чтобы не плакать над железом).
🐧 Linux (священная ОС всех кодеров).
🗄 Базы данных (чтобы SELECT не превращался в рулетку).
🔗 API (общайся с фронтом как с друзьями, а не врагами).
🛡 Безопасность (да, SQL-инъекции всё ещё живы).
🧑💻 Тестирование (потому что баги — это тоже фича, но не всегда).
...и много чего интересного!
Три формата знаний:
💬 Визуал — картинки, таблицы и шпаргалки, нарисованные специально для этого проекта.
💬 Краткая выжимка — только самое важное, плюс ссылки на термины в вики.
💬 Источники — топовые и понятные ресурсы для глубокого изучения.
😰 Если ты новичок — это твой трамплин!
⚡️ Если ты профи — это твой ускоритель!
👨💻 Всё, что нужно бэкендеру, в одном месте.
Сохраняй, пригодится! 👍
#cheatsheet #github #python #git #linux #db #doc
✈️ [PYTHON:TODAY]
В России можно посещать IT-мероприятия хоть каждый день: как оффлайн, так и онлайн
Но где их находить? Как узнавать о них раньше, чем когда все начнут выкладывать фотографии оттуда?
Переходите на канал IT-Мероприятия России. В нём каждый день анонсируются мероприятия со всех городов России
📆 в канале размещаются как онлайн, так и оффлайн мероприятия;
👩💻 можно найти ивенты по любому стеку: программирование, frontend-backend разработка, кибербезопасность, дата-аналитика, osint, devops и другие;
🎙 разнообразные форматы мероприятий: митапы с коллегами по цеху, конференции и вебинары с известными опытными специалистами, форумы и олимпиады от важных представителей индустрии и многое другое
А чтобы не искать по разным форумам и чатам новости о предстоящих ивентах:
🚀 IT-мероприятия России — подписывайся и будь в курсе всех предстоящих мероприятий!
В России можно посещать IT-мероприятия хоть каждый день: как оффлайн, так и онлайн
Но где их находить? Как узнавать о них раньше, чем когда все начнут выкладывать фотографии оттуда?
Переходите на канал IT-Мероприятия России. В нём каждый день анонсируются мероприятия со всех городов России
📆 в канале размещаются как онлайн, так и оффлайн мероприятия;
👩💻 можно найти ивенты по любому стеку: программирование, frontend-backend разработка, кибербезопасность, дата-аналитика, osint, devops и другие;
🎙 разнообразные форматы мероприятий: митапы с коллегами по цеху, конференции и вебинары с известными опытными специалистами, форумы и олимпиады от важных представителей индустрии и многое другое
А чтобы не искать по разным форумам и чатам новости о предстоящих ивентах:
🚀 IT-мероприятия России — подписывайся и будь в курсе всех предстоящих мероприятий!
This media is not supported in your browser
VIEW IN TELEGRAM
✈️ [PYTHON:TODAY]
🥹 Только посмотрите как счастлив чувак
Чел встретил Еву Эльфи и попросил маму сделать фотку.
— «Скажи маме, что за прекрасная леди?»
☺️ Да она просто блогер.
С добрым утром, хорошего дня! 😎
🥹 Только посмотрите как счастлив чувак
Чел встретил Еву Эльфи и попросил маму сделать фотку.
— «Скажи маме, что за прекрасная леди?»
☺️ Да она просто блогер.
С добрым утром, хорошего дня! 😎
This media is not supported in your browser
VIEW IN TELEGRAM
✈️ Code Ready | Frontend
✍️ Краткое руководство по HTML — основные теги и структура веб-страницы!
Здесь собраны основы HTML с понятными примерами: структура HTML-документа, работа с <head> и метатегами, HTML5-разметка, заголовки и текст, ссылки, изображения, таблицы и основные атрибуты элементов. В конце есть удобная таблица с популярными тегами и их назначением.
Оставляю ссылочку: GitHub 📱
📣 Code Ready | #репозиторий
✍️ Краткое руководство по HTML — основные теги и структура веб-страницы!
Здесь собраны основы HTML с понятными примерами: структура HTML-документа, работа с <head> и метатегами, HTML5-разметка, заголовки и текст, ссылки, изображения, таблицы и основные атрибуты элементов. В конце есть удобная таблица с популярными тегами и их назначением.
Оставляю ссылочку: GitHub 📱
📣 Code Ready | #репозиторий
✈️ Code Ready | Frontend
Делаем «сквиркл»-углы нативно в CSS!
Обычный
Раньше для точной формы приходилось использовать SVG,
Теперь форму угла можно менять отдельно от его радиуса:
.card {
corner-shape: squircle;
}
При этом
Есть и другие формы:
.card {
corner-shape: bevel;
}
И даже вогнутые углы:
.card {
corner-shape: scoop;
}
Причём границы, фон, outline и тени следуют новой форме углов, а сами формы можно анимировать. Поддержка пока ограничена.
🔥
📣 Code Ready | #совет
Делаем «сквиркл»-углы нативно в CSS!
Обычный
border-radius строит эллиптическое скругление. Но в интерфейсах часто нужны более плавные, «квадратные» скругления — squircle.Раньше для точной формы приходилось использовать SVG,
clip-path или маски.Теперь форму угла можно менять отдельно от его радиуса:
.card {
corner-shape: squircle;
}
При этом
border-radius всё ещё определяет область скругления — без ненулевого радиуса corner-shape визуально ничего не изменит.Есть и другие формы:
.card {
corner-shape: bevel;
}
И даже вогнутые углы:
.card {
corner-shape: scoop;
}
Причём границы, фон, outline и тени следуют новой форме углов, а сами формы можно анимировать. Поддержка пока ограничена.
🔥
corner-shape позволяет делать squircle, bevel и вогнутые углы двумя строками CSS — без дополнительной разметки и SVG.📣 Code Ready | #совет
✈️ Code Ready | Frontend
🔴 Тестовое собеседование на Frontend-разработчика со старшим разработчиком ex. Сбер
3 сентября(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика.
Как это будет:
📂 Даниил Дмитриев, старший разработчик в R-Vision, ex. Сбер, будет задавать реальные вопросы и задачи разработчику-добровольцу
📂 Даниил будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью
📂 В конце можно будет задать любой вопрос Даниилу
Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы.
Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot
Реклама.
О рекламодателе.
🔴 Тестовое собеседование на Frontend-разработчика со старшим разработчиком ex. Сбер
3 сентября(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика.
Как это будет:
📂 Даниил Дмитриев, старший разработчик в R-Vision, ex. Сбер, будет задавать реальные вопросы и задачи разработчику-добровольцу
📂 Даниил будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью
📂 В конце можно будет задать любой вопрос Даниилу
Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы.
Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot
Реклама.
О рекламодателе.
✈️ Code Ready | Frontend
👩💻 Можно ли стилизовать субтитры к видео с помощью CSS?
Псевдоэлемент
Внутри ::cue разрешён ограниченный набор свойств:
Поддержка
📣 Code Ready | #свойство
👩💻 Можно ли стилизовать субтитры к видео с помощью CSS?
Псевдоэлемент
::cue позволяет стилизовать текст субтитров и других текстовых дорожек, отображаемых внутри элемента <video>. Эти дорожки подключаются с помощью тега <track>. С помощью ::cue вы можете менять цвет, размер шрифта, фон и другие свойства субтитров, чтобы сделать их более читаемыми или соответствующими дизайну вашего сайта.Внутри ::cue разрешён ограниченный набор свойств:
• background, background-*
• color
• шрифтовые свойства: font, font-*
• outline, outline-*
• ruby-position
• text-combine-upright
• text-decoration, text-decoration-*
• text-shadow
• visibility
• white-space
Поддержка
::cue(<селектор>) может отличаться: в некоторых браузерах он недоступен. Всегда проверяйте поддержку для нужного браузера.📣 Code Ready | #свойство
This media is not supported in your browser
VIEW IN TELEGRAM
✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack
💾 One Element CSS Spinners – коллекция лоадеров, которые основаны на разных геометрических формах. Некоторые элементы меняют прозрачность, а другие имеют элементы 3D.
Сайтодел | #сниппет #css
💾 One Element CSS Spinners – коллекция лоадеров, которые основаны на разных геометрических формах. Некоторые элементы меняют прозрачность, а другие имеют элементы 3D.
Сайтодел | #сниппет #css
✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack
🎨 Цветовая палитра макета "Foodee Mobile App Interface":
Сайтодел | #палитра
🎨 Цветовая палитра макета "Foodee Mobile App Interface":
HEX | RGB #FECC87 | rgb(254,204,135)#F28582 | rgb(242,133,130)#689984 | rgb(104,153,132)
⚠️ Цвет копируется одним кликом!Сайтодел | #палитра
✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack
🐙 Meteor – современная платформа для создания мобильных и десктопных приложений. Поддерживает TypeScript и легко интегрируется с популярными фронтенд-фреймворками.
Сайтодел | #репозиторий #github
🐙 Meteor – современная платформа для создания мобильных и десктопных приложений. Поддерживает TypeScript и легко интегрируется с популярными фронтенд-фреймворками.
Сайтодел | #репозиторий #github