HTML Academy

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

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

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

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

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

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

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

https://htmlacademy.ru/demos/125

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

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

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

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

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

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

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

https://htmlacademy.ru/demos/123

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

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

https://htmlacademy.ru/demos/121

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

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

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

https://htmlacademy.ru/demos/119

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

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

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

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

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

---

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

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

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

https://htmlacademy.ru/demos/117

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

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

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

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

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

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

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

---

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

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

Создаём простую и красивую анимацию волн в новом интерактивном туториале

https://htmlacademy.ru/demos/109

В реализации используются CSS-анимации. Ключевую роль для создания эффекта многослойности играет свойство opacity.

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

Бесплатный учебник для изучения Git и GitHub

Git и GitHub — системы контроля версий с возможностью отслеживать все изменения в коде.

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

В начале изучения Git и GitHub легко запутаться в пушах и пулах. В помощь вам — собрали всё важное, что нужно знать о гите в учебник. В 11 главах познакомитесь с основными командами, узнаете, как настроить Git в VS Сode или консоли.

Читайте, добавляйте в закладки 👉️️ Читать