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

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

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

https://htmlacademy.ru/demos/129

Вы разберётесь, как использовать 3D-трансформации, увидите, какой эффект дают свойства perspective и backface-visibility, поймёте принцип работы множественных трансформаций.

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

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

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

https://htmlacademy.ru/events/live_maximum

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

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

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

https://htmlacademy.ru/demos/131

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

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

https://htmlacademy.ru/demos/133

Мы создадим индикатор прочтения статьи без всякого JavaScript, с помощью scroll-timeline. Это новейшая технология, которая есть ещё не во всех браузерах. Рекомендуем смотреть демонстрацию в Chrome.

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

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

https://htmlacademy.ru/demos/135

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

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

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

https://htmlacademy.ru/demos/137

Вы познакомитесь со свойствами aspect-ratio и object-fit, а также поэкспериментируете с адаптивностью от контейнера, Container Queries.

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

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

https://htmlacademy.ru/demos/139

Ключевую роль в этой технике играют :has и CSS-переменные.

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

Научитесь создавать прилипающие блоки aka «sticky headers» в новом бесплатном курсе. Наглядно, интерактивно, без воды.

https://htmlacademy.ru/demos/141

Это хрестоматийный пример использования position: sticky.

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