Работа с фоном и границами.

Свойства, которые задают фон начинаются со слова background, они включают:

background-color - цвет фона.
background-image - фоновое изображение.
Если добавлены оба эти свойства, то фоновое изображение всегда будет над цветом.

background-repeat - задает повторение фона. Если фоновое изображение меньше своего блока, то по-умолчанию оно будет повторяться пока не заполнит весь блок.

background-size - размер фонового изображения. Может быть в процентах, пикселях, значение cover - заполняет блок с сохранением пропорций изображения, contain - заполняет блок без сохранения пропорций.

background-position - расположение фонового изображения. Может быть в процентах, пикселях или обозначено словом, top, center, left, right, bottom.

В качестве фона можно задать линейный или радиальный градиент, указав свойство background-image: linear-gradient() или background-image: radial-gradient().

Чтобы задать элементу границу (рамку) используют свойство border.

border-width - толщина границы.
border-style - тип линии, например solid - сплошная.
border-radius - радиус скругления углов блока.

Примеры работы с фоновыми изображениями и границами.
#фронтенд_css_урок9

Чтобы лучше понимать какие значения бывают у разных свойств читайте статью https://developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Values_and_units

Стилизация изображений, видео и форм.

Если добавить изображение в блок, размер которого меньше размера изображения оно вылезет за границы блока.

Чтобы этого не происходило задавайте изображениям и другим встраиваемым объектам свойство max-width: 100%.

Чтобы изображение заполнило весь блок можно задать ему свойство object-fit: cover. Тогда части, которые не влезли в блок обрезаются.

Если изображение или видео находятся в grid или flex блоке оно не растягивается на весь родительский блок в отличие от других элементов.
Чтобы их растянуть нужно задать width: 100% и height: 100%.

Элементы форм самая сложная для стилизации часть страниц.

С простыми формами, состоящими только из полей <input type=”text”> и кнопки проблем не возникает, но другие типы полей ввода определяются операционной системой и не доступны для стилизации.

Еще одна проблема в том, что браузеры не имеют стандарта относительно стилей форм, а базовые стили страниц не применяются к ним по умолчанию. Поэтому стили для форм лучше задать отдельно.

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

button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
box-sizing: border-box;
padding: 0; margin: 0;
}

textarea {
overflow: auto;
}

Примеры стилизации изображений, видео и форм.
Подробная статья о стилизации форм на английском. Думаю перевести ее в свободное время)
#фронтенд_css_урок10

Всем привет! Новые материалы на канале будут после 20 сентября. Нам осталось разобрать несколько важных моментов по CSS и я сделаю большое тестирование.

Нужна запись трансляции? Рассказывала про верстку лендинга и сверстала 1 блок.

Запись эфира с разбором верстки лендинга, один блок верстаю онлайн https://youtu.be/f0hxFQTCFNY

Всем привет! Я ушла в работу и не выложила ссылки на самые интересные темы по CSS. Исправляюсь.

Большая статья по CSS свойствам display и position.

В статье разбирают все возможные варианты отображения блоков, в том числе display: flex и display: grid и различия между ними.

А также удаление элементов из нормального потока (normal flow) и их произвольное отображение при помощи свойства position.

Подробная статья по Flexbox.

Подробная статья по Grid Layout.

А еще MDN любезно собрал посты по HTML, CSS и JS в бесплатный курс по фронтенд разработке.

А еще я нашла анимированные тренажеры, которые помогут вам научиться работать с Flexbox и Grid Layout.

Тренажер по Flexbox.

Тренажер по Grid Layout.

Ребята всем привет! Я наконец-то выложила первое видео на Ютуб😱 Скро будет много годного контента, приходите смотреть😉https://youtu.be/_Ji4TsuOeIc

Ребята, всех с наступающим Новым Годом! Желаю вам профессиональных успехов😉

Новый видосик на канале😉 Буду рада получить фидбек) https://youtu.be/JRXEkmLBKuQ

Всем привет! По Инету ходят новости, что AppStore может удалить ТГ. Если у вас Айфон, проверьте чтоб было отключено автоудаление.

Apple возможно опять удалит Телеграм из appstore, не забудьте убрать автоудаление приложений!

Инструкция:

1. Настройки
2. Экранное время
3. Контент и конфиденциальность
4. Покупки iTunes Store и App Store
5. Удаление приложений
6. Нажать “нет”.

Android не умеет удалять принудительно приложения.

@matrixofdata

Статья для тех кто еще раздумывает стоит ли изучать веб-разработку в 2021) https://vc.ru/hr/189368-kakie-problemy-s-naymom-v-it-zhdut-v-2021-godu

Всем привет! Выложила новое видео о трендах в вебе на 2021 https://youtu.be/Wwv8ic5cDvM

Всем привет! В связи с высокой загрузкой по другим проектам у меня мало времени на ведение этого канала. Поэтому прикрепляю опрос в каком формате вам было бы интересно читать канал? От ваших ответов будет зависеть будущее канала, это очень важно!😉

Новое видео о том, чем занимаются веб-разработчики и какие ещё есть профессии в вебе😉 https://youtu.be/7o0dxE2-0Hc

Всем привет! Давненько не было полезного на канале. Исправляюсь и делюсь каналом, где вы можете скачать книги по программированию https://news.1rj.ru/str/progbook