Мечтали о нативной CSS-функции, которая возвращает порядковый номер текущего элемента? Или чтобы attr() можно было использовать везде? Всё это готовится в одной из будущих спецификаций! Вот анонс предстоящих обновлений:

https://alvaromontoro.com/blog/68062/new-values-and-functions-in-CSS

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

«Не слишком люблю подобные анонсы, ибо
1. сильно похоже на "мы построим базу на Луне через 4 года".
2. использовать сейчас нельзя.
Однако как мечты и фантазии, имеющие вероятность воплощения - любопытно.»

---

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

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

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

https://htmlacademy.ru/demos/117

Бета-версия для мобильных
https://htmlacademy.ru/demos-mobile/117

Познакомимся с синтаксисом CSS Custom Properties и типовыми примерами их использования.

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

Простейшие советы для улучшения доступности.

https://piccalil.li/blog/practical-accessibility-tips-you-can-apply-today/

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

---

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

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

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

https://htmlacademy.ru/demos/119

Разберёмся, как разбивать на части многокомпонентные CSS-значения и удобно работать с отдельным компонентами. Что незаменимо при работе с цветами, тенями, градиентами, анимациями и другими составными CSS-значениями.

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

Можете ли вы сделать красивую градиентную рамку с помощью одного контейнера, без дополнительных обёрток и псевдоэлементов? Да ещё и анимировать её. Раскрываем секретные приёмы в новом интерактивном туториале

https://htmlacademy.ru/demos/121

Ключевую роль в этом приёме играют свойство background-origin и директива property.

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

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

https://htmlacademy.ru/demos/123

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

широкий_кекс.жпг

Когда картинка не соответствует размеру бокса, но её всё равно нужно добавить, используйте object-fit. Он определяет, как элемент реагирует на размеры своего бокса.

С помощью object-fit можно обрезать встроенное изображение и определить, как оно будет сжиматься и растягиваться.

Разбор свойства 👉️️️️ https://htmlacademy.ru/blog/css/objectfit

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

https://htmlacademy.ru/demos/125

Ключевую роль в реализации эффекта играют, сюрприз, CSS-тени. Откройте для себя новые тонкости работы привычных теней.

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

Выводим внешний контур на чистом CSS

В этом нам поможет свойство outline. В отличие от border, контур череp outline не влияет на размеры элемента и может быть смещён от его границ с помощью outline-offset.

👀 Подробнее об outline:

outline-style: стиль контура (сплошной, пунктирный и т.д.)
outline-width: ширина
outline-color: цвет;
outline-offset: отступ от границы элемента.

В итоге мы не просто нарисовали рамку, а использовали средства для вывода внешнего контура.

Добавьте в избранное, чтобы не потерять!

Вопрос дня #4

Девочка Света была известна своей внимательностью и любовью к программированию.

Она определила переменную a, равную трём с половиной, умножила b на 3, прибавила к результату корень (то ли квадратный, то ли кубический) из 19389, сложила результат со строкой NaNaNa, поделила его на семь и вывела результат в консоль.

Чему в итоге оказалась равна переменная a?

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

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

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

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

https://htmlacademy.ru/events/live_maximum

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

https://htmlacademy.ru/demos/127

Вы разберётесь, как использовать CSS-трансформации, тени и плавные переходы для создания иллюзии подъёма и вращения при наведении.

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