Grid Garden — игра, которая учит основам CSS Grid, позволяя управлять растениями в саду, используя свойства для прохождения уровней.

📌 Ссылочка: cssgridgarden.com

📣 Code Ready | #ресурсы

🤯 Очень красивый эффект для блока карточки на CSS

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

Вот код карточки, но без доп. эффектов:

.card {
  background: #191c29;
  width: var(--card-width);
  height: var(--card-height);
  justify-content: center;
  align-items: center;
  color: rgb(88 199 250 / 0%);
}

Разберем самые важные функции:

• CSS-функция var() — подставляет кастомные свойства в качестве значения свойств

• Стилевая функция blur() — задаёт размытие по Гауссу изображений, фоновых картинок или текста.

• Функция calc() — производит математические вычисления прямо в css.

▶️ И конечно же полный код карточки на codepen.io

📣 Code Ready | #css

👩‍💻 Очередной атрибут — spellcheck

Который определяет, должна ли проверяться орфография содержимого элемента. Всё максимально просто.

Он может использоваться в таких элементах, как input, textarea, и даже в некоторых других контейнерных элементах, поддерживающих ввод текста.

Он имеет всего два значения:

• spellcheck="true" — Проверка орфографии включена.

• spellcheck="false" — Проверка орфографии отключена.

📣 Code Ready | #атрибут

Удобная фукнция от VS Code 👨‍💻

VS Code позаботился об управлении контролями версий и содержит себе много фишек, связанных с git

Здесь показано, как можно удобно отменить последний коммит, всего лишь одной кнопкой

📣 Code Ready | #vscode

👩‍💻 Уже пользовались свойство object-fit?

Оно позволяет управлять тем, как картинка <img> или видео <video> будет подстраиваться под заданные размеры. По своему поведению очень похоже на свойство background-size для фоновых изображений.

Параметры свойства:

1. fill — картинка полностью вписывается в указанные размеры
2. contain — картинка подстроится под заданные размеры так, чтобы поместиться внутри целиком без нарушения пропорций
3. cover — картинка заполнит всю доступную область, обрезая всё ненужное
4. scale-down — браузер сравнивает размеры картинки со значением none и contain и выбирает одно из них.
5. none — картинка отображается без изменения пропорций или размеров

📣 Code Ready | #свойство

flexboxdefense — игра в жанре Tower Defense, в которой нужно правильно расположить турели с помощью flexbox для защиты.

📌 Ссылочка: flexboxdefense.com

📣 Code Ready | #ресурсы