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
CodeBase | Frontend | #курс #html #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
Работать и не уставать, достигать цели, но делать это в кайф - реально!
Как научиться делать дела и не выгорать?
Психолог взрослого человека - канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам.
▪️ Как научиться отвлекаться от работы и отдыхать?
▪️ Как совместить кучу рабочих задач и время с семьей?
▪️ Как справиться с прокрастинацией?
▪️ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит?
Подписывайтесь на канал @vadimpetrov_psy и научитесь работать без упахивания, выгорания и ущерба для личной жизни!
👨🏻💻 Псс. Заходите в закреп канала - там много полезного, и даже бесплатный мини-курс.
Как научиться делать дела и не выгорать?
Психолог взрослого человека - канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам.
▪️ Как научиться отвлекаться от работы и отдыхать?
▪️ Как совместить кучу рабочих задач и время с семьей?
▪️ Как справиться с прокрастинацией?
▪️ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит?
Подписывайтесь на канал @vadimpetrov_psy и научитесь работать без упахивания, выгорания и ущерба для личной жизни!
👨🏻💻 Псс. Заходите в закреп канала - там много полезного, и даже бесплатный мини-курс.
👍4🔥1👌1
This media is not supported in your browser
VIEW IN TELEGRAM
Технологии: 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
This media is not supported in your browser
VIEW IN TELEGRAM
Технологии: SVG, SCSS и TypeScript
CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍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
👍10✍1🔥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
Технологии: SVG и CSS
CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8✍1🤔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
👍9❤3👏1
История Firefox — про то, как маленький бунтарь выжил в мире монополий. В статье расскажут, как браузер ворвался на рынок, побил рекорды и заставил всех считаться с собой
CodeBase | Frontend | #article
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7👍4✍1
This media is not supported in your browser
VIEW IN TELEGRAM
Технологии: CSS
CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9✍1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Технологии: CSS и JavaScript
CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4✍1🔥1