👩‍💻 Настраиваемая маска в CSS

Cвойство mask устанавливает изображение, которое используется как слой маски для элемента.

Принимаемые аргументы:

• mask-clip — определяет область распространения маски
• mask-size — размер маски
• mask-position — размещает маску относительно элемента
• mask-repeat — указывает, должна ли повторяться маска
• mask-mode — определяет, будет ли ссылка на маску
• mask-origin — задает начало координат маски.

📣 Code Ready | #css

👩‍💻 HTML для новичков с нуля!

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

Ссылочка на видео: YouTube 🖤

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

Уже были разные сайты, и пришло время быстренько изучить Git

learngitbranching — небольшая браузерная игра, которая поможет вам изучить Git. В ней вы познакомитесь с основными командами, которые пригодятся вам в повседневной работе.

📌 Как всегда, ссылочка: learngitbranching.js

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

👩‍💻 Разберем, как максимально просто вставить любую картинку в текст

Чтобы добиться такого эффекта, применяется несколько CSS-свойств, все они банальные, но всё же, вот пару свойств, с помощью которых можно создать этот эфффект:

• background-image — добавляет фоновое изображение

• background-size: cover — делает так, чтобы изображение полностью покрывало текст

• background-clip: text — обрезает фоновое изображение по форме текста.

• color: transparent — делает текст прозрачным, чтобы был виден только фон изображения.

📣 Code Ready | #css

Вот ещё один сайт, для изучения флексбоксов, думаю лишним не будет точно)

Flexer — CSS-песочница, в которой можно легко сгенерировать и расположить блоки. Нужно просто задать размеры и отступы элементам, а сайт сгенерирует CSS-код с flexbox.

📌 Куда без ссылочки: flexer.dev

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

👩‍💻 Покажу ещё один необычный атрибут — draggable

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

Атрибут имеет всего два значения:

• draggable="true" — элемент можно перетаскивать.

• draggable="false" — элемент нельзя перетаскивать.

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

Покажу ещё один хороший сайт, для изучения Git

Git How To — предлагает пошаговые руководства и практические примеры для изучения системы контроля версий Git, облегчая процесс освоения её основных команд и функционала.

📌 Как всегда, ссылочка: githowto.com

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

👩‍💻 Знакомы с shape-outside?

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

Ещё покажу основные параметры:

• circle (radius at position) — круг с заданным радиусом и позицией.
• ellipse (radius-x radius-y at position) — эллипс с заданными радиусами и позицией.
• polygon (point1, point2 ...) — многоугольник, где каждая точка указывается координатами.

Также, для правильного применения обтекания текста с помощью shape-outside, элемент должен быть плавающим. Поэтому обязательно используем float: left

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

Что ж, теперь итоги 2024 года...

Ровно год назад, минуту в минуту, я писал пост про итоги 2023 года, и вот, пришло время для нового года.

Хочу искренне поблагодарить каждого из вас за то, что вы читаете этот канал, ставите реакции и делитесь им с другими. В новом году я желаю вам достичь всех поставленных целей, чтобы 2025-й стал для вас лучшим и самым успешным годом!

За 2024, я успел сделать многое, думаю все уже видели мои новые каналы, про пайтон, C++ и другие. Надо их тоже развивать и делать ещё больше, до 2026 нужно успеть везде набрать больше 15000 подписчиков, ну и выйти на совсем другой уровень)

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

С наступающим новым годом! 🎄

До нового 2025 года остаётся всего час!
С наступающим всех! 🥂

hcdev — справочник по HTML, CSS и JS, который содержит в себе актуальные знания по всем технологиям, предназначенных для фронтенд-разработки.

📌 Ссылочка: hcdev.ru

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

Знали, что можно измерить любой элемент на сайте за несколько секунд?

Page Ruler — расширение для Chrome, которое позволяет пользователям измерять размеры и положение элементов на веб-страницах с помощью виртуальной линейки.

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

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