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

https://htmlacademy.ru/demos/147

#туториалотhtmlacademy

Идёт набор на совместную программу обучения для компании Максимум:
— Обучение напрямую для работодателя
— Малая группа — 10 человек
— Старт — 11 ноября

Подробности программы и запись по ссылке:
https://tml.io/frontmaximum

В рубрике «сегодня я узнал» прекрасная история про таинственный третий регистр текста, или почему по строке mad в венгерском нельзя найти строку madzag.

https://habr.com/ru/articles/856784/

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

https://htmlacademy.ru/demos/149

Лоадер реализован с помощью единственного тега и линейных градиентов.

#туториалотhtmlacademy

Создайте галерею с красивейшим скользящим эффектом при наведении в новом бесплатном курсе. Наглядно, интерактивно, без воды.

https://htmlacademy.ru/demos/151

Вы научитесь пользоваться свойством clip-path, разберётесь с синтаксисом функции inset(), а также познакомитесь с продвинутой техникой использования :has.

#туториалотhtmlacademy

Визуализация схлопывания и выпадания маргинов

#visualization #css #margin

Ещё больше визуализаций и интерактивных туториалов → https://htmlacademy.ru/demos

Свежая статья про использование CSS-функции min() для создания адаптивных интерфейсов:

https://www.smashingmagazine.com/2024/10/css-min-all-the-things/

Комментарий от Николая Громова, ведущего разработчика интерфейсов компании Наука:

Любопытное описание небольшого исследования про min() в CSS.

Мне весьма понравился пример с .container { width: min(100%, 650px); } — это замечательная возможность использовать что-то типа minmax() из гридов.

И да, оно продакшен-реди: https://caniuse.com/css-math-functions

---

Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».

#полезноеотработодателей #полезноеотnauka

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

https://htmlacademy.ru/demos/153

На превью четыре разных индикатора загрузки. Но это один и тот же компонент с разными настройками внешнего вида.

Меняйте настройки на последнем шаге и делитесь результатами в комментариях!

#туториалотhtmlacademy

Идёт набор на совместную программу обучения для компании Максимум:
— Обучение напрямую для работодателя
— Малая группа — 10 человек
— Старт — 25 ноября

Подробности программы и запись по ссылке:
https://tml.io/backender-maximum

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

https://htmlacademy.ru/demos/155

Вы поработаете с масками для номеров телефонов, банковских карт и дат. Познакомитесь и с более сложными масками.

#туториалотhtmlacademy

Научитесь настраивать внешний вид курсора с помощью свойства cursor в новом бесплатном курсе. Наглядно, интерактивно, без воды.

https://htmlacademy.ru/demos/157

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

#туториалотhtmlacademy

Лайв с компанией Brew — обучение напрямую для работодателя

HTML Academy и Brew разработали совместную программу, цель которой — с нуля вырастить будущих сотрудников компании.

Обучение проходит в малой группе, успешные выпускники попадают в штат.

Приходите на лайв 18 ноября в 19:00, чтобы подробнее узнать о компании и программах обучения. Регистрируйтесь по ссылке, чтобы мы напомнили вам о старте мероприятия.

https://htmlacademy.ru/events/live_brew

Как выбрать <aside> и <article> при разметке страницы? Задавайте эти четыре вопроса.

А если не поможет, загляните в наш разбор.

Разбираемся, как создавать объёмную иконку в стиле глассморфизма в новом бесплатном курсе. Наглядно, интерактивно, без воды.

https://htmlacademy.ru/demos/159

Вы узнаете, как использовать свойства mask и clip-path для "вырезания" элементов сложной формы, разберётесь, как использовать тени для создания объёма и как создавать эффект матового стекла с помощью backdrop-filter

#туториалотhtmlacademy

margin и padding одной картинкой.

Вспомнить, что это 👉 https://tml.io/margin-padding

Автор написал собственный CSS-резет. Не общепринятый и популярный резет, не модификацию общепринятого резета, а просто свой небольшой резетик. А в статье объясняет, почему он так устроен. Рекомендуем для осторожного ознакомления с большой долей скепсиса

https://www.joshwcomeau.com/css/custom-css-reset/

Комментарий от Николая Громова, ведущего разработчика интерфейсов компании Наука:

Модернизированный CSS-reset. Интересная штука с объяснением что для чего нужно. Местами холиварная (интерлиньяж, кровавое убийство margin-ов), но никто не мешает взять это не целиком...

---

Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».

#полезноеотработодателей #полезноеотnauka

⚡️Как сделать всплывающую подсказку

Всплывающая подсказка — это небольшой блок, его также называют тултип, который появляется при наведении или нажатии на элемент. Цель такого блока — дать более подробную информацию о содержимом элемента. Часто тултипы используются вместе с формами, чтобы добавлять пояснения к полям.

Подсказку можно сделать, создав отдельный элемент в HTML-разметке и прописав ему нужные стили в CSS. В статье подробно рассмотрим процесс создания тултипа — https://tml.io/hvgnu

#htmlacademy_статьи

Наконец-то CSS, который мы заслужили

Через час, в 19:00, начнётся лайв с компанией Brew про обучение напрямую для работодателя.

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

https://htmlacademy.ru/events/live_brew

Начался лайв с компанией Brew про обучение напрямую для работодателя

Присоединяйтесь по ссылкам:
ВК — https://vk.com/video-38306835_456239533
Ютюб — https://www.youtube.com/live/_BdqAKVwPEg

Визуализация flex-grow

#visualisation #css #flexbox #flexgrow

Ещё больше визуализаций и интерактивных туториалов → https://htmlacademy.ru/demos