nicecoder-school
11 subscribers
31 photos
8 videos
12 links
Привет!
Меня зовут Никита, я фронтенд разработчик на html css js, здесь делюсь полезностями в своей работе.
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Чтобы изменить маркеры (точки) для элементов <li>, можно использовать CSS.

Использование свойства list-style-image:


<style>
ul {
list-style-image: url('path/to/custom-marker.png');
}
</style>

<ul>
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
</ul>

В этом примере мы устанавливаем свойство list-style-image для элемента <ul>, указывая путь к пользовательскому изображению custom-marker.png. Вместо стандартных маркеров (точек) будет отображаться выбранное изображение.

Оба этих метода позволяют изменить маркеры для элементов списка <li> и создать собственное оформление. Вы можете применить стили к элементам <ul> или <ol> в CSS, чтобы изменить маркеры для всех списков на вашем сайте, или добавить классы к спискам и применить стили только к определенным спискам.
This media is not supported in your browser
VIEW IN TELEGRAM
Свойство justify-content: space-between является одним из значений для управления выравниванием элементов внутри контейнера с использованием Flexbox. Оно позволяет распределить свободное пространство между элементами, создавая равное расстояние между ними.

Когда вы устанавливаете justify-content: space-between для контейнера, элементы внутри контейнера будут распределены таким образом, чтобы между ними создалось равномерное пространство, а первый элемент прижимается к началу контейнера, а последний элемент прижимается к концу контейнера. Все остальные элементы будут равномерно распределены между первым и последним элементом.
👍1
В CSS можно использовать свойство border-radius для скругления углов элемента. Например, чтобы скруглить углы квадрата с классом "square" на 10px, нужно добавить следующее правило:

.square {
  border-radius: 10px;
}


Можно также задавать разные радиусы для каждого угла, используя значения в порядке верхний левый, верхний правый, нижний правый, нижний левый. Например:

.square {
  border-radius: 10px 20px 30px 40px;
}


Это задаст радиус 10px для верхнего левого угла, 20px для верхнего правого, 30px для нижнего правого и 40px для нижнего левого.

https://youtube.com/shorts/4mDgLdjo2NU?feature=share
👍1
Flex-wrap - это свойство CSS для контейнера flex, которое определяет, должны ли элементы внутри контейнера переноситься на новую строку или оставаться в одной строке.

Если flex-wrap установлен на nowrap (значение по умолчанию), элементы будут помещаться в одну строку, даже если это приведет к переполнению контейнера.

Если flex-wrap установлен на wrap, элементы будут переноситься на новую строку при переполнении контейнера


Flex-wrap также имеет значение wrap-reverse, которое переносит элементы на новую строку в обратном порядке.

https://youtu.be/j3im4Nwfvtw
This media is not supported in your browser
VIEW IN TELEGRAM
Transform rotate - это CSS свойство, которое позволяет вращать элемент вокруг его оси. Это свойство принимает значение угла в градусах и может быть использовано для создания анимации или изменения ориентации элемента. При использовании transform rotate, элемент остается на месте, а его содержимое вращается вокруг указанной оси.
Привет в этом видео будем верстать шапку сайта с помощью html css

Макет сайта - https://www.figma.com/file/bVSLw33NRw8zk3eGKtbVvs/%D1%81%D0%BA%D0%B5%D0%B9%D1%82%D0%B8%D0%BD%D0%B3?type=design&node-id=1%3A2&t=m5Bc0DIIdDctwD5b-1

Видео урок - https://youtu.be/y0cxjhwJNRE
Подпишитесь на канал, мне будет очень приятно!
Привет верстальщики!
Подготовил для вас еще один урок.
Курс по HTML CSS с практическими заданиями всего за 1290 рублей! 800 рублей

~ 20 видео уроков
Удобные домашние задания, с проверкой кода на правильность
Низкая цена
2 работы в портфолио
Верстка полноценного лендинга
Подойдёт даже новичкам
Можно проходить когда захочется

Промокод HTMLCSS на 500 рублей действует до 27 июля 2023 года


https://stepik.org/course/179516