🤯 Очень красивый эффект для блока карточки на 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 | #ресурсы

CSS Gradient — Этот сайт позволяет легко создавать градиенты с помощью интуитивно понятного интерфейса и генератора кода. Вы можете настроить цвета и сохранить свои градиенты для дальнейшего использования.

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

👩‍💻 Простой атрибут — translate

Он управляет тем, должно ли содержимое элемента переводиться, если страница переведена с использованием автоматических переводчиков.

Имеет два значения:

• translate="yes" (по умолчанию) — Должно быть переведено.

• translate="no" — Не должно быть переведено.

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

📣 Code Ready | #html

Знал ли ты, что можно не перепечатывать текст из видео вручную?

selectext — это расширение для Chrome, с помощью которого можно скопировать текст из видео, выделив область с текстом.

⬆️ Скачать расширение

➡️ Code Ready | #ресурсы

Уже были 2 игры для изучения флексов, но недавно нашел интересную игру уже для JavaScript

JSRobot — небольшая игра, в которой вам предстоит управлять роботом с помощью Javascript для преодоления препятствий и решения головоломок.

📌 Ссылочка: lab.reaal.me/jsrobot

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