Made in HTML/CSS – Telegram
Made in HTML/CSS
1.38K subscribers
754 photos
41 videos
2 files
677 links
Научись классно верстать и создавать сайты благодаря Made in HTML/CSS.
По рекламе - https://news.1rj.ru/str/ZilantTG
Download Telegram
Свойство top в CSS определяет вертикальное положение элемента относительно верхней границы его родительского контейнера.

Оно применяется в сочетании с позиционированием элементов, такими как position: absolute;, position: relative;, position: fixed; или position: sticky;.



Made in HTML/CSS
👍9🔥3👨‍💻2
Свойство z-index в CSS определяет порядок наложения элементов на странице (трехмерную ось Z).
Оно позволяет управлять тем, какие элементы располагаются поверх других, когда они пересекаются.

Как работает z-index

- z-index применяется только к элементам с позиционированием, т.е. у элементов должно быть установлено значение свойства position в absolute, relative, fixed, или sticky.
- Значения z-index могут быть как положительными, так и отрицательными, а также равными нулю.
- Элементы с более высоким z-index располагаются выше элементов с более низким значением.
👍12🔥2👨‍💻2
Свойство border-collapse в CSS применяется к элементам таблицы и определяет, как границы ячеек внутри таблицы должны обрабатываться.

Оно может иметь два основных значения:

1. collapse: Границы ячеек объединяются. Когда две ячейки имеют общую границу, граница отображается только один раз.

2. separate: Границы ячеек отображаются отдельно, и между ячейками создается пространство.



Made in HTML/CSS
👍8🔥4👨‍💻2
Свойство border-spacing в CSS применяется к таблицам с установленным значением border-collapse: separate.

Оно определяет расстояние между границами ячеек в таблице, позволяя установить горизонтальное и вертикальное расстояние между ними.



Made in HTML/CSS
🔥9👍3👨‍💻3
Свойство table-layout в CSS управляет тем, как таблицы отображаются и как вычисляются ширины ячеек.

Оно определяет алгоритм, по которому браузер будет генерировать макет таблицы.


Made in HTML/CSS
👍9🔥6👨‍💻4
Свойство list-style-image в CSS используется для задания изображения в качестве маркера списка.

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

Это свойство применяется к элементам неупорядоченного (<ul>) или упорядоченного (<ol>) списков.


Made in HTML/CSS
👍10🔥3👨‍💻3
Свойство list-style-position в CSS определяет, как маркеры списка (например, точки или номера) будут выровнены относительно содержимого элементов списка.

Оно применяется к элементам неупорядоченных (<ul>) и упорядоченных (<ol>) списков.


Made in HTML/CSS
👍10🔥2👨‍💻2
Свойство list-style-type в CSS определяет внешний вид маркеров (точек, цифр и т. д.) для элементов списков, таких как неупорядоченные (<ul>) и упорядоченные (<ol>) списки.

Это свойство позволяет выбирать различные стили для маркеров, которые будут применяться к элементам списка.


Made in HTML/CSS
👍7🔥4👨‍💻2
Свойство list-style в CSS используется для задания общего стиля маркеров списка (для неупорядоченных и упорядоченных списков).

Оно сочетает в себе несколько свойств, таких как list-style-type, list-style-position и list-style-image, позволяя быстро задавать все параметры для списка.


Made in HTML/CSS
👍8🔥2👨‍💻2
Свойство counter-increment в CSS используется для управления счетчиками, позволяя увеличивать значение счетчика на определённое количество при каждом использовании CSS-свойства.

Это может быть полезно для нумерации элементов на странице, таких как списки или заголовки.


Made in HTML/CSS
👍7🔥3👨‍💻3
Свойство cursor в CSS используется для изменения внешнего вида курсора мыши, когда он находится над элементом.
Это свойство позволяет пользователям интуитивно понимать, какие действия можно выполнить с элементом (например, нажать кнопку или изменить размер).

Основные значения свойства cursor:

1. default: стандартный курсор (стрелка).
2. pointer: курсор в виде руки, обычно указывает на кликабельный элемент (ссылки).
3. text: курсор в виде символа I (для выбора текста).
4. move: курсор, указывающий на возможность перемещения элемента.
5. resize: курсоры для изменения размера, например:
6. crosshair: курсор в виде перекрестия.
7. not-allowed: курсор в виде квадрата с перекрестием, указывает, что действие запрещено.
8. wait: курсор в виде песочных часов, указывает, что операция выполняется.



Made in HTML/CSS
👍10🔥4👨‍💻3
Свойство box-shadow в CSS используется для добавления теней к блочным элементам.
Оно позволяет управлять размерами, размытием и цветом тени, создавая эффект глубины и выделяя элемент на странице.

Параметры:

1. Смещение по горизонтали: Оно определяет, насколько тень смещена вправо (положительное значение) или влево (отрицательное значение).
2. Смещение по вертикали: Оно определяет смещение тени вниз (положительное значение) или вверх (отрицательное значение).
3. Размытие (необязательно): Чем больше значение, тем более размытая будет тень.
4. Распространение (необязательно): Положительное значение увеличивает размер тени, отрицательное уменьшает его.
5. Цвет (необязательно): Цвет тени.


Made in HTML/CSS
👍9🔥4👨‍💻3
Свойство text-shadow в CSS используется для добавления теней к тексту, создавая эффект глубины и выделяя его на фоновом изображении или цвете.

Это свойство позволяет управлять смещением, размитием и цветом тени текста.


Made in HTML/CSS
👍8🔥4👨‍💻2
Свойство scrollbar-color в CSS позволяет управлять цветом ползунков и треков (фона) прокрутки для браузеров, поддерживающих данное свойство.

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


Made in HTML/CSS
👍8🔥2👨‍💻2
Свойство scrollbar-width в CSS позволяет задавать ширину полосы прокрутки для элементов в браузерах, которые поддерживают это свойство.

Это свойство применимо к элементам, которые имеют прокрутку (например, с заданным overflow: auto или overflow: scroll).


Made in HTML/CSS
👍8🔥4👨‍💻2
Свойство transition-property в CSS используется для указания, какие свойства элемента должны анимироваться при применении переходов (transitions).

Это свойство является частью CSS-transitions, которые позволяют создавать плавные переходы между состояниями элемента.


Made in HTML/CSS
👍9🔥3👨‍💻2
Свойство transition в CSS позволяет создать плавные переходы между состояниями элементов при изменении их свойств.

Оно объединяет в себе несколько отдельных свойств, таких как transition-property, transition-duration, transition-timing-function и transition-delay.

Это свойство упрощает определение анимации, делая код более компактным и читабельным.


Made in HTML/CSS
👍8🔥4👨‍💻1
Свойство transition-timing-function в CSS определяет скорость изменения свойства в процессе перехода (transition).

Это позволяет управлять тем, как анимация будет ощущаться визуально, задавая различные кривые для изменения скорости перехода в разные моменты времени.

Возможны значения:

ease – Переход начинается медленно, резко ускоряется, а затем постепенно замедляется к концу (по умолчанию).
ease-in – Переход начинается медленно, ускоряется к концу.
ease-out – Переход начинается быстро, замедляется к концу.
ease-in-out – Переход начинается медленно, постепенно ускоряется, а затем постепенно замедляется к концу.
linear – Переход начинается и заканчивается с одинаковой скоростью.
cubic-bezier – Скорость перехода задается в виде кривой Безье.



Made in HTML/CSS
👍9🔥4👨‍💻1
Свойство transition-delay в CSS используется для установки задержки перед началом перехода (transition). Это позволяет контролировать время, в течение которого анимация не будет запускаться после изменения свойства элемента.

Задержка может быть полезна для синхронизации анимаций или для создания пауз перед началом эффекта.


Made in HTML/CSS
👍8🔥5
CSS-стиль transform используется для изменения размера, положения и формы элемента на веб-странице.

Он позволяет применять трансформации, такие как перемещение, вращение, масштабирование и искажение.
👍9🔥5👨‍💻2
CSS-стиль transform-origin определяет точку, относительно которой будут применяться трансформации (например, вращение, масштабирование) для элемента.

По умолчанию эта точка располагается в центре элемента, но ее можно изменять, чтобы настроить, как будет происходить трансформация.
👍7🔥5👨‍💻2