Visibility

Содержание:

Appear Inside — Clipping using Overflow:hidden and CSS transition on Top and Left
Способ #1. opacity и filter: opacity()
Синтаксис свойства CSS display
clip-path
Значения свойств
Способ #2. alpha-канал
Способ #9. Перекрытие другим элементом
Using CSS Transitions on the Transform Property to Fly In
- 2D Example
- 3D Example
Incomplete Workaround: Fade-In and -Out using Transitions on Opacity
CSS Containment #
Значения свойств
CSS Reference
CSS Properties
CSS Reference
CSS Properties
Пример: блог о путешествиях #
- Указание естественного размера элемента с помощью #
Использование display для строчных элементов
color Alpha Transparency
Способ #8. Абсолютное позиционирование
Способ #4. clip-path
CSS Справочники
CSS Свойства
CSS Reference
CSS Properties
CSS Tutorial

Appear Inside — Clipping using Overflow:hidden and CSS transition on Top and Left

The idea of this workaround is to simulate hidden visibility by
using the overflow:hidden specification for the outer div
element. This specification hides the inner div while it is positioned
outside the outer one. Then the transition moves the inner div outside and inside
the outer div. It will not move across the document but vanishes as soon as it leaves
the outer div.

Main difference of the example below is the overflow:hidden specification
for the outer div element.
This means that whenever the inner div is positioned outside the outer one,
it is hidden. This is done using left : 150px; top:-150px;.
When hovering over the outer div,
the .outer3:hover > div { left : 0px; top:40% } rule applies
and the inner div moves to its normal position inside the outer div
and thereby appears.

Sample Text
</div>

Hover Here
</div>

Sample Text

Hover Here

Способ #1. opacity и filter: opacity()

Overflow

Свойства и могут принимать значения в диапазоне от 0 до 1 (или от 0% до 100%), где 0 — это полная прозрачность элемента, а 1 — полная непрозрачность.

See the Pen hide with opacity: 0 by SitePoint (@SitePoint) on CodePen.

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

Свойство можно анимировать — и это очень хороший подход с точки зрения производительности.

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

Метрика	Влияние
Браузерная поддержка	Хорошая. В IE свойство opacity поддерживает только значения в диапазоне от 0 до 1
Доступность скрытого элемента	При значении 0 или 0% контент элемента недоступен
Вызывает изменение макета	Нет
Перерендеринг	Composition
Производительность	Хорошая, может использоваться аппаратное ускорение
Покадровая анимация	Возможна
Срабатывание событий на скрытом элементе	Да

Синтаксис свойства CSS display

Font

display: none;

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

Свойство HTML display также используется, чтобы изменить поведение строчных или блочных элементов:

display: inline;

Этот код задает для блочного элемента поведение строчного. Например, div представляет собой блочный элемент. Применив к нему display: inline, мы задаем для него поведение строчного элемента:

display: block;

Значение block делает противоположное. Например, элемент span является строчным. Если мы применим к нему display: block, он будет вести себя как блочный элемент.

clip-path

Свойство border в css

The property creates a clipping region that determines which parts of an element are visible. Using a value such as will completely hide the element.

See the Pen
hide with clip-path by SitePoint (@SitePoint)
on CodePen.

offers scope for interesting animations, although it should only be relied on in modern browsers.

metric	effect
browser support	modern browsers only
accessibility	content still read by some applications
layout affected?	no — the original dimensions remain
rendering required	paint
performance	reasonable
animation frames possible?	yes, in modern browsers
events triggered when hidden?	no

Значения свойств

Значение	Описание
visible	Значение по умолчанию. Элемент виден
hidden	Элемент скрыт (но все еще занимает место)
collapse	Только для строк таблицы (<TR>), групп строк (<tbody>), столбцов (<Col>), групп столбцов (<colgroup>). Это значение удаляет строку или столбец, но не влияет на макет таблицы. Пространство, занимаемое строкой или столбцом, будет доступно для другого содержимого. Если для других элементов используется свертывание, оно отображается как «скрытый»
initial	Присваивает этому свойству значение по умолчанию. (Читайте о initial)
inherit	Наследует это свойство из родительского элемента. (Читайте о inherit)

Способ #2. alpha-канал

Свойство влияет на элемент целиком, но вы можете также изменять видимость отдельных свойств: цвета (), фона () или рамки (). Чтобы скрыть их, используйте цвет в формате rgba (или hsla) и установите значение альфа-канала равным нулю, например, .

See the Pen hide with color alpha by SitePoint (@SitePoint) on CodePen.

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

Эту технику нельзя применить к фоновым изображения (кроме тех, которые созданы с помощью CSS-градиентов).

Способы управления альфа-каналом:

Ключевое слово . Устанавливает полную прозрачность, не поддерживает промежуточные анимации.
: красный, зеленый, синий и альфа-канал.
: оттенок, насыщенность, светлота и альфа-канал.
HEX-формат: или

Метрика	Влияние
Браузерная поддержка	Хорошая. В IE поддерживается только ключевое слово и rgba-формат.
Доступность скрытого элемента	Контент остается доступным
Вызывает изменение макета	Нет
Перерендеринг	Painting
Производительность	Хорошая, но медленнее, чем у
Покадровая анимация	Возможна
Срабатывание событий на скрытом элементе	Да

Способ #9. Перекрытие другим элементом

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

See the Pen hide with an overlay by SitePoint (@SitePoint) on CodePen.

Эта техника требует большего количества кода, чем остальные. В некоторых случаях ее применение может быть невозможным (сложный или неизвестный фон).

Метрика	Влияние
Браузерная поддержка	Отличная
Доступность скрытого элемента	Контент элемента остается доступным
Вызывает изменение макета	Нет, если используется абсолютное позиционирование
Перерендеринг	Paint
Производительность	При правильном использовании неплохая
Покадровая анимация	Возможна
Срабатывание событий на скрытом элементе	Да, если для перекрытия используется псевдоэлемент или дочерний элемент блока

Using CSS Transitions on the Transform Property to Fly In

Basic idea of this work around for visibility:hidden
is to use the CSS transition property to move the element
outside the document. This works nicely in newer browsers
and allows for interesting animations.

For older browsers you probably need workarounds as in .
It is clear that for browsers like IE 8 transitions do not work.
However most of the examples in the article still show and hide the elements
in IE8, just without animation. This is however not the case for the
two following examples (and also not for the first opacity example).

2D Example

The following examples show a fly in animation in 2D and then in 3D:

Sample Text
</div>

Hover Here
</div>

Sample Text

Hover Here

3D Example

Sample Text
</div>

Hover Here
</div>

Sample Text

Hover Here

Alternatively such an animation can be done with WebGL and taccgl.
This has the additional advantage of automatic lighting and shadows.
Lighting simulates a virtual light source and calculates the color for every
pixel of the animated element. So for instance an element that directly
faces the light source appears brighter than an element that rotates away.
This leads to a much more realistic rotation effect.

taccgl.a(document.body) .color(«white») .shadowOnly() .dur(4) .start();
a=taccgl.actor(«demo», null, «visible»);;
a.posZ(100) .resizeZ() .from(-200,a.y-20,1400).

rotateMiddle(0,1,0) .rotatePart(Math.PI,2*Math.PI) .vEnd(0,0,0) .dur(4) .start()

RUN

Incomplete Workaround: Fade-In and -Out using Transitions on Opacity

Most often the opacity property is used instead of visibility,
which results in a fade-in and fade-out effect. The idea is that a completely
transparent element is very similar to an element with visibility:hidden.

<span class=»hoverhere»>Hover over the Line Above this Line</span> <br>

fails on IE8 and still catches events while invisible

Sample Text

Hover over the Line Above this Line
fails on IE8 and still catches events while invisible

However care has to be taken with that approach, because unlike an invisible element (with visibility:hidden)
a fully transparent element (opacity:0) still catches events and e.g. a transparent link still
functions. The blog article CSS Transition Opacity for Fade Effects has a detailed description
and examples of that problem. Also old browsers like IE8.0 do not understand the opacity property
and so this simple approach will never hide the element in IE 8.

The solution is to combine the opcity transition with a
transition on visibility. Before we discuss that in detail
after the next the section, the next section itself explains
the detailed workings of transitions on visibility.

CSS Containment #

The key and overarching goal of CSS containment is to enable rendering performance improvements of web content by providing predictable isolation of a DOM subtree from the rest of the page.

Basically a developer can tell a browser what parts of the page are encapsulated as a set of content, allowing the browsers to reason about the content without needing to consider state outside of the subtree. Knowing which bits of content (subtrees) contain isolated content means the browser can make optimization decisions for page rendering.

There are four types of CSS containment, each a potential value for the CSS property, which can be combined together in a space-separated list of values:

: Size containment on an element ensures that the element’s box can be laid out without needing to examine its descendants. This means we can potentially skip layout of the descendants if all we need is the size of the element.
: Layout containment means that the descendants do not affect the external layout of other boxes on the page. This allows us to potentially skip layout of the descendants if all we want to do is lay out other boxes.
: Style containment ensures that properties which can have effects on more than just its descendants don’t escape the element (e.g. counters). This allows us to potentially skip style computation for the descendants if all we want is to compute styles on other elements.
: Paint containment ensures that the descendants of the containing box don’t display outside its bounds. Nothing can visibly overflow the element, and if an element is off-screen or otherwise not visible, its descendants will also not be visible. This allows us to potentially skip painting the descendants if the element is offscreen.

Значения свойств

Значение	Описание	Воспроизвести
visible	Значение по умолчанию. Элемент является видимым	Воспроизвести »
hidden	Элемент скрыт (но все равно занимает место)	Воспроизвести »
collapse	Только для строк таблицы (<tr>), групп строк (<tbody>), столбцов (<col>), группы столбцов (<colgroup>). Это значение удаляет строку или столбец, но это не влияет на макет таблицы. Пространство, занимаемое строкой или столбцом будет доступен для другого контента. Если collapse используется для других элементов, он отображает как «hidden»;	Воспроизвести »
initial	Устанавливает для этого свойства значение по умолчанию. Прочитать о initial	Воспроизвести »
inherit	Наследует это свойство от родительского элемента. Прочитать о inherit

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right
row-gap

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
caption-side
caret-color
@charset
clear
clip
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
object-fit
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes
resize
right
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
width
word-break
word-spacing
word-wrap
z-index

Пример: блог о путешествиях #

В этом примере мы базируем наш блог о путешествиях справа и применяем его к фрагментированным областям слева. Результаты показывают, что время рендеринга увеличивается с 232 мс до 30 мс при начальной загрузке страницы.

Блог о путешествиях обычно содержит набор историй с несколькими изображениями и некоторым описательным текстом. Вот что происходит в обычном браузере при переходе на блог о путешествиях:

Часть страницы загружается из сети вместе со всеми необходимыми ресурсами.
Браузер стилизует и размещает все содержимое страницы, не учитывая, является ли содержимое видимым для пользователя.
Браузер возвращается к шагу 1, пока не будут загружены все страницы и ресурсы.

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

Теперь подумайте, что произойдет, если вы разместите каждую из историй в блоге. Общий цикл тот же: браузер загружает и отображает фрагменты страницы. Однако разница заключается в объеме работы, выполняемой на шаге 2.

Благодаря видимости содержимого он будет стилизовать и разметить все содержимое, которое в настоящее время отображается пользователю (оно отображается на экране). Однако при обработке истории, которая полностью находится за пределами экрана, браузер пропустит работу по рендерингу и только создаст стиль и макет самого блока элемента.

Производительность загрузки этой страницы будет такой, как если бы она содержала полные экранные истории и пустые поля для каждой из закадровых историй. Это работает намного лучше, с ожидаемым снижением затрат на визуализацию загрузки на 50% или более . В нашем примере мы видим увеличение времени рендеринга с 232 мс до 30 мс . Это 7-кратный прирост производительности.

Какую работу нужно проделать, чтобы воспользоваться этими преимуществами? Сначала мы разбиваем контент на разделы:

Затем мы применяем к разделам следующее правило стиля:

PHP

.story {
content-visibility: auto;
contain-intrinsic-size: 1000px; /* Explained in the next section. */
}

1
2
3
4

.story{

content-visibilityauto;

contain-intrinsic-size1000px;/* Explained in the next section. */

}

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

Указание естественного размера элемента с помощью #

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

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

К счастью, CSS предоставляет другое свойство, которое эффективно определяет естественный размер элемента, если на элемент влияет ограничение размера . В нашем примере мы устанавливаем его как оценку высоты и ширины секций.

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

Использование display для строчных элементов

Свойство CSS display также используется для изменения поведения строчных и блочных элементов.

Напомню, что блочные элементы занимают все доступное им пространство и начинаются с новой строки. Например, абзацы или блоки div — это блочные элементы.

Строчные элементы занимают только необходимое для отображения пространство и не начинаются с новой строки. В качестве примеров строчных элементов можно привести span, тег ссылки и т.д.

Свойство HTML display позволяет изменять поведение строчных и блочных элементов.

Чтобы изменить поведение блочного элемента на поведение строчного:

display: inline;

Чтобы изменить поведение строчного элемента на поведение блочного:

display: block;

В следующем примере поведение элемента span изменяется на поведение блочного элемента. А поведение абзаца с помощью свойства CSS display изменяется на поведение строчного элемента.

Чтобы понять, в чем заключается разница, сначала посмотрите на приведенный ниже рисунок и исходный код, в котором свойство HTML display еще не применено:

Посмотреть онлайн демо-версию и код

На странице демо-версии отображен родительский div, а внутри него span и абзац. Изначально их поведение является стандартным для этих элементов:

Родительский div очерчен черной рамкой и занимает всю доступную ширину;
span очерчен синей рамкой, внутри div он занимает только необходимое для отображения пространство и начинается с той же самой строки;
Абзац, который очерчен красной рамкой, также занимает все доступное пространство и начинается с новой строки.

Теперь с помощью HTML display block я изменю поведение span на поведение блочного элемента, а поведение абзаца на поведение строчного. Родительский div остается без изменений. Смотрите результат и демо-версию:

Посмотреть онлайн демо-версию и код

span начинается с новой строки и границы абзаца заканчивается там, где заканчивается его текст. Он не занимает всю доступную ширину, как div или span.

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

color Alpha Transparency

affects the whole element, but it’s also possible to set the , , and properties separately. Applying a zero alpha channel using or similar renders an item fully transparent:

See the Pen
hide with color alpha by SitePoint (@SitePoint)
on CodePen.

Each property can be animated separately to create interesting effects. Note that transparency can’t be applied to elements with image backgrounds unless they’re generated using or similar.

The alpha channel can be set with:

: fully transparent (in-between animations are not possible)
: red, green, blue, and alpha
: hue, saturation, lightness, and alpha
and

metric	effect
browser support	good, but IE only supports and
accessibility	content still read
layout affected?	no
rendering required	painting
performance	good, but not as fast as
animation frames possible?	yes
events triggered when hidden?	yes

Способ #8. Абсолютное позиционирование

Свойство позволяет переместить элемент из его исходной () позиции в общем потоке документа с помощью свойств , , и . Абсолютно спозиционированный элемент () можно вынести за пределы вьюпорта, например, установив ему свойство (значение может быть другим).

See the Pen hide with position: absolute by SitePoint (@SitePoint) on CodePen.

Метрика	Влияние
Браузерная поддержка	Отличная, кроме
Доступность скрытого элемента	Контент элемента остается доступным
Вызывает изменение макета	Да, при изменении позиционирования
Перерендеринг	Зависит от ситуации
Производительность	При правильном использовании неплохая
Покадровая анимация	Возможна для свойств , , и
Срабатывание событий на скрытом элементе	Да, но если элемент вынесен за пределы вьюпорта, взаимодействие с ним затруднительно

Способ #4. clip-path

Свойство определяет область обрезки — часть блока, которая будет видима на странице. Если эта область занимает 0 пикселей, элемент будет скрыт: .

See the Pen hide with clip-path by SitePoint (@SitePoint) on CodePen.

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

Метрика	Влияние
Браузерная поддержка	Только современные браузеры
Доступность скрытого элемента	Контент остается доступным для некоторых приложений
Вызывает изменение макета	Нет, сохраняются оригинальные размеры блока
Перерендеринг	Paint
Производительность	Допустимая
Покадровая анимация	Возможна в современных браузерах
Срабатывание событий на скрытом элементе	Нет

CSS Справочники

CSS СправочникCSS ПоддержкаCSS СелекторыCSS ФункцииCSS ЗвукCSS Веб шрифтыCSS АнимацииCSS ДлиныCSS Конвертер px-emCSS Названия цветаCSS Значения цветаCSS по умолчаниюCSS Символы

CSS Свойства

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
caption-side
caret-color
@charset
clear
clip
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes
resize
right
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
width
word-break
word-spacing
word-wrap
writing-mode
z-index

CSS Reference

CSS Properties

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right
row-gap

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !important