CodeBase | Frontend
2.14K subscribers
380 photos
149 videos
5 files
566 links
Все самое интересное и полезное у нас 😎

Контакт: @Filgood777 (реклама, сотрудничество)
Download Telegram
⚙️ Что такое свойство object-position в CSS и зачем оно используется?

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

➡️ Пример:

<img src="image.jpg" class="preview" alt="Пример изображения">

<style>
.preview {
width: 300px;
height: 200px;
object-fit: cover;
object-position: top right; /* Смещаем фокус к верхнему правому углу */
}
</style>


🗣 В этом примере:

object-fit: cover; обрезает изображение, чтобы оно заполнило контейнер.
object-position: top right; указывает, какую часть изображения показывать в приоритете.
• Можно использовать значения вроде center, bottom, 20% 80% и др.

Свойство object-position позволяет точно управлять отображением медиа внутри контейнера и удобно при создании адаптивных и эстетичных интерфейсов.

CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
🖥 Курс: "Верстка простого сайта для самых маленьких, html/css подробное объяснение"!

🌟 Изучите шаг за шагом, как создать современный веб-макет с помощью HTML и CSS. Идеально подходит для новичков, желающих развить практические навыки в веб-разработке!

🕞 Продолжительность: 4:00:18

🔗 Ссылка

CodeBase | Frontend | #курс #html #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
Работать и не уставать, достигать цели, но делать это в кайф - реально!
Как научиться делать дела и не выгорать?

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

▪️ Как научиться отвлекаться от работы и отдыхать?
▪️ Как совместить кучу рабочих задач и время с семьей?
▪️ Как справиться с прокрастинацией?
▪️ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит?

Подписывайтесь на канал @vadimpetrov_psy и научитесь работать без упахивания, выгорания и ущерба для личной жизни!

👨🏻‍💻 Псс. Заходите в закреп канала - там много полезного, и даже бесплатный мини-курс.
👍4🔥1👌1
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️light/dark mode — Стильное переключение темной темы с анимацией.

Технологии: Pug, SCSS

🔗 Ссылка

CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥2👏2🤣1
🖥 Почти Ванильный Фронтэнд

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

🔗 Ссылка

CodeBase | Frontend | #article
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
👩‍💻 Что такое метод splice() в JavaScript и как он используется?

splice() — это метод массивов в JavaScript, который изменяет оригинальный массив, удаляя, добавляя или заменяя элементы. Он полезен для управления содержимым массива на месте.

➡️ Пример:

const numbers = [1, 2, 3, 4, 5];

// Удаляем 2 элемента, начиная с индекса 1
numbers.splice(1, 2);
console.log(numbers); // [1, 4, 5]

// Вставляем новые элементы на индекс 1
numbers.splice(1, 0, 99, 100);
console.log(numbers); // [1, 99, 100, 4, 5]


🗣️ В этом примере:

splice(1, 2) удаляет два элемента начиная с индекса 1.
splice(1, 0, 99, 100) вставляет два элемента без удаления.
• Метод изменяет исходный массив, в отличие от slice().

CodeBase | Frontend | #JS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥2👏1
Какой стул с багами выберешь ты?

CodeBase | Frontend | #meme
😁10👍32
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️Weather Widgets — Анимированный виджет погоды.

Технологии: SVG, SCSS и TypeScript

🔗 Ссылка

CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🔥1👏1
Интересная расшифровка

CodeBase | Frontend | #meme
😁11👍1🔥1
⚙️ Что такое атрибут disabled в HTML и зачем он используется?

Атрибут disabled делает элемент формы неактивным. Такой элемент не реагирует на действия пользователя и не отправляется вместе с формой.

➡️ Пример:

<form>
<label>
Email:
<input type="email" disabled>
</label>
<button type="submit">Отправить</button>
</form>


🗣️ Почему полезно:

disabled блокирует ввод и клики по элементу
• Поле с disabled не попадёт в данные формы при отправке
• Полезно для временного отключения полей, кнопок и выпадающих списков
• Можно использовать с JavaScript, чтобы включать/выключать поля динамически.

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

CodeBase | Frontend | #Основы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍101🔥1
Please open Telegram to view this post
VIEW IN TELEGRAM
😁8👍3🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️Text Illumination — Сцена с анимированным появлением текста.

Технологии: SVG и CSS

🔗 Ссылка

CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍81🤔1
⚙️ Что такое свойство white-space в CSS и зачем оно используется?

white-space
— это CSS-свойство, которое управляет отображением пробелов и переносом строк внутри элемента. Оно определяет, как браузер будет обрабатывать пробелы, табуляции и переводы строк.

➡️ Пример:

<div class="text">
Этот текст
сохраняет пробелы
и переносы.
</div>

<style>
.text {
white-space: pre; /* Сохраняем пробелы и переносы */
border: 1px solid black;
}
</style>


🗣 В этом примере:

white-space: normal; — пробелы схлопываются, текст переносится автоматически (значение по умолчанию).
white-space: nowrap; — текст не переносится.
white-space: pre; — сохраняются все пробелы и переносы, как в коде.

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

CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍93👏1
🖥 Firefox против гигантов: битва за интернет

История Firefox — про то, как маленький бунтарь выжил в мире монополий. В статье расскажут, как браузер ворвался на рынок, побил рекорды и заставил всех считаться с собой

🔗 Ссылка

CodeBase | Frontend | #article
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7👍41
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️Animated Navigation List — Анимированный список с кнопками навигации.

Технологии: CSS

🔗 Ссылка

CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍91🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️Card Mouse Hover Effect — Карточки с интересным эффектом при наведении.

Технологии: CSS и JavaScript

🔗 Ссылка

CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍41🔥1