This media is not supported in your browser
VIEW IN TELEGRAM
CodeBase | Frontend | #js #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN 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
CodeBase | Frontend | #курс #html #css
Please open Telegram to view this post
VIEW IN TELEGRAM
Работать и не уставать, достигать цели, но делать это в кайф - реально!
Как научиться делать дела и не выгорать?
Психолог взрослого человека - канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам.
▪️ Как научиться отвлекаться от работы и отдыхать?
▪️ Как совместить кучу рабочих задач и время с семьей?
▪️ Как справиться с прокрастинацией?
▪️ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит?
Подписывайтесь на канал @vadimpetrov_psy и научитесь работать без упахивания, выгорания и ущерба для личной жизни!
👨🏻💻 Псс. Заходите в закреп канала - там много полезного, и даже бесплатный мини-курс.
Как научиться делать дела и не выгорать?
Психолог взрослого человека - канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам.
▪️ Как научиться отвлекаться от работы и отдыхать?
▪️ Как совместить кучу рабочих задач и время с семьей?
▪️ Как справиться с прокрастинацией?
▪️ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит?
Подписывайтесь на канал @vadimpetrov_psy и научитесь работать без упахивания, выгорания и ущерба для личной жизни!
👨🏻💻 Псс. Заходите в закреп канала - там много полезного, и даже бесплатный мини-курс.
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
Пробую минимализм на практике — создаю и обновляю DOM с помощью двух функций. Сравниваю с привычными инструментами и удивляюсь, насколько всё становится легче
CodeBase | Frontend | #article
Please open Telegram to view this post
VIEW IN TELEGRAM
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
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
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
Please open Telegram to view this post
VIEW IN TELEGRAM
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
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
История Firefox — про то, как маленький бунтарь выжил в мире монополий. В статье расскажут, как браузер ворвался на рынок, побил рекорды и заставил всех считаться с собой
CodeBase | Frontend | #article
Please open Telegram to view this post
VIEW IN TELEGRAM
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