Как отразить элемент css

Синтаксис

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

Свойство (property) — идентификатор действия, которое будет применено к элементу (например, цвет, или размер границы, и т.д.).
Значение (value) — описывает, как именно свойство будет обработано браузером. Каждое свойство имеет набор допустимых значений, определённых формальными правилами, а также семантический смысл, реализованный движком браузера.

Объявления CSS

Задание CSS-свойствам определённых значений — это основная функция CSS. Пара свойство-значение называется объявлением. Работа CSS движка заключается в поиске соответствий между объявлениями стилей и элементом на странице, чтобы правильно отобразить и форматировать этот элемент.

И свойство, и значения регистрозависимы. Пара свойство-значение разделяется двоеточием, ‘ : ‘ ( U+003A COLON ), а пробелы до, между и после свойства или значения игнорируются.

css syntax - declaration.png

В CSS существует более ста различных свойств, и бесконечное число допустимых значений. Не все пары свойств и значений допускаются, и каждое свойство определяет, каковы допустимые значения. Когда значение не подходит для данного свойства, объявление считается недействительной и целиком игнорируются CSS-движком.

Блоки объявлений CSS

Объявления группируются в блоки, структура которых состоит из открывающейся , ‘ < ' ( U+007B LEFT CURLY BRACKET ), и закрывающейся, ' >‘ ( U+007D RIGHT CURLY BRACKET ) фигурных скобок.

css syntax - block.png

Такие блоки называются блоками объявлений, и объявления в них разделяются точкой с запятой, ‘ ; ‘ ( U+003B SEMICOLON ). Блок объявлений может быть пустым, т.е. не содержать объявлений. Пробелы между объявлениями игнорируются. Последнее объявление блока не нуждается в точке с запятой, хотя считается хорошим тоном добавить её для того, чтобы не допустить упущение этого знака при добавлении другого объявления в будущем.

css syntax - declarations block.png

Примечание: Содержимое блока объявлений CSS, т. е. объявления, разделённые точкой с запятой. Блок объявлений может быть помещён внутри атрибута style HTML-документа без фигурных скобок.

CSS rulesets

If style sheets could only apply a declaration to each element of a Web page, they would be pretty useless. The real goal is to apply different declarations to different parts of the document.

CSS allows this by associating conditions with declarations blocks. Each (valid) declaration block is preceded by a selector which is a condition selecting some elements of the page. The pair selector-declarations block is called a ruleset, or often simply a rule.

css syntax - ruleset.png

As an element of the page may be matched by several selectors, and therefore by several rules eventually containing a given property several times, with different values, the CSS standard defines which one has precedence over the other and must be applied: this is called the cascade algorithm.

Примечание: It is important to note that even if a ruleset characterized by a group of selectors is a kind of shorthand replacing rulesets with a single selector each, this doesn’t apply to the validity of the ruleset itself.

This leads to an important consequence: if one single basic selector is invalid, like when using an unknown pseudo-element or pseudo-class, the whole selector is invalid and therefor the entire rule is ignored (as invalid too).

CSS statements

Rulesets are the main building blocks of a style sheet, which often consists of only a big list of them. But there is other information that a Web author wants to convey in the style sheet, like the character set, other external style sheets to import, font face or list counter descriptions and many more. It will use other and specific kinds of statements to do that.

A statement is a building block that begins with any non-space characters and ends at the first closing brace or semi-colon (outside a string, non-escaped and not included into another <>, () or [] pair).

css syntax - statements Venn diag.png

There are different kinds of statements:

Rulesets (or rules) that, as seen, associate a collection of CSS declarations to a condition described by a selector.
At-rules that start with an at sign, ‘ @ ‘ ( U+0040 COMMERCIAL AT ), followed by an identifier and then continuing up the end of the statement, that is up to the next semi-colon (;) outside of a block, or the end of the next block. Each type of at-rules, defined by the identifier, may have its own internal syntax, and semantics of course. They are used to convey meta-data information (like @charset (en-US) or @import (en-US)), conditional information (like @media or @document ), or descriptive information (like @font-face ).

Any statement which isn’t a rule or an at-rule is invalid and ignored.

There is another group of statements, the nested statements, these are statements that can be used in a specific subset of at-rules, the conditional group rules. These statements only apply if a specific condition is matched: the @media at-rule content is applied only if the device on which runs the browser matches the expressed condition; the @document at-rule content is applied only if the current page matches some conditions, and so on. In CSS1 and CSS2.1, only rulesets could be used inside a conditional group rules. That was very restrictive and this restriction was lifted in CSS Conditionals Level 3. Now, though it still is experimental and not supported by every browser, a conditional group rules can contain a wider range of content, rulesets but also some, but not all, at-rules.

CSS свойство transform

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

В качестве начало координат преобразования при изменении элементов используется свойство transform-origin .

Функция поддерживается большинством браузеров, в некоторых прежних версиях была реализована с префиксом -webkit-.

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

transform: []* | none

Здесь – это желаемое действие над элементом, например, rotate (вращение). None – отменяет действие.

Функции transform

Трансформации бывают как 2d, так и 3d. Вторые являются расширением двухмерных функций. Сначала рассмотрим более актуальные 2d варианты.

Translate

Функция задает смещение по горизонтали и вертикали. Например, зададим смещение объект по горизонтали на 30px и по вертикали на 20px.

.element

Возникает вопрос, зачем нужна эта функция, которая повторяет уже существующие возможности CSS по сдвигу элемента, например position? Но каких-то разъяснений не нашел.

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

Также есть две функции для смещения элемента только одной оси X или Y.

transform: translateX(value); transform: translateY(value);

Scale

Растягивание (масштабирование) блока на плоскости. Масштаб задается по осям x и y – scale(x,y) . Если задано одно значение воздействие будет по двум осям сразу.

Создадим два блока с одинаковыми первоначальными размерами. Ко второму с красным прозрачным фоном применим transform: scale(2) .

На демонстрации элемент с красным фоном увеличился в 2 раза.

Для масштабирования по одной оси есть соответствующие функции scaleX и scaleY .

С помощью них можно зеркально отразить элемент.

transform: scale(-1, 1) — отразить по горизонтали;
transform: scale(1, -1) — отразить по вертикали;
transform: scale(-1, -1) — одновременно перевернуть изображение по горизонтали и вертикали.

Rotate

Разворачивает элемент на плоскости. Например, transform: rotate(45deg) повернет объект на 45% по часовой стрелке.

Вы можете, например, повернуть текст на 90 градусов следующей инструкцией:

transform: rotate(90deg);

deg обозначает градус поворота.

Scew

Наклоняет элемент влево или вправо, превращая прямоугольник в параллелограмм. skew() – это сокращение, которое объединяет skewX() и skewY(), принимая оба значения.

На примере ниже к синему квадрату применено transform:skew(20deg) (наклон только по горизонтали), а к красному функция transform:skew(20deg, 30deg) (наклон по обоим осям).

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

Matrix

Matrix можно использовать для объединения всех преобразований в одно выражение. Но вручную создавать такие выражения невозможно. Существуют сервисы, вроде The Matrix Resolutions, которые позволяют делать такие построения.

Например через matrix следующие две функции

rotate(30deg) translate(20px, 20px)

будут записаны как:

transform: matrix(0.866025, 0.5, -0.5, 0.866025, 7.32051, 27.3205)

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

3D функции

Большинство описанных выше функций имеет свои 3d аналоги. Те функции, чье название содержит в конце Z, работают с осью Z. Те же, чьи названия заканчиваются на 3d принимают 3 параметра для работы со всеми тремя осями.

TranslateZ

TranslateZ сдвигают объект относительно его положения по оси Z на заданное значение. Но эффект от применения будет заметен только при использовании перспективы (perspective) и поворота элемента по осям X или Y.

Также есть общая функция translate3d.

Matrix3d

Деформация элемента в трехмерном пространстве с помощью матрицы 4х4. Как писал выше сложность применения затрудняет ее использование в ручном режиме.

ScaleZ

Масштабирование по оси Z. Но эффект будет заметен только при использовании перспективы, поворота элемента по осям X или Y, и при смещении по оси Z.

Также есть общая функция scale3d.

Rotate3d.

Определяет вращение в трехмерном пространстве.

Что она делает проще показать на примере. На демонстрации размещено 4 блока с текстом, соответствующим применяемой к элементу функцией. Угол везде использован 50deg.

К первому синему элементу не применяется никакой трансформации. Ко второму элементу применена rotateX , к третьему – rotateX , к четвертому – rotateZ .

Perspective

Создает ощущение перспективы у объекта. В качестве параметра нужно указать расстояние от плоскости монитора до точки сходимости линий. Задавать нужно только положительное значение. Чем больше значение, тем менее выраженной будет перспектива и наоборот. Эффект заметен при одновременном применении функции rotate .

10 способов спрятать элементы на CSS

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

Анимации

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

Другие свойства, например, прозрачность, могут принимать значения в определенном диапазоне. К таким свойствам можно применить CSS-анимации для плавного изменения.

Помните, что анимация может вызывать дезориентацию, мигрень, судороги или другой физический дискомфорт у некоторых людей. Поэтому всегда используйте медиа-запрос prefers-reduced-motion, для учета пользовательских предпочтений.

Доступность

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

Для изменения этого поведения могут потребоваться дополнительные CSS-свойства или ARIA-атрибуты, вроде aria-hidden=»true» .

Обработка событий

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

Производительность

После того как браузер загрузит и распарсит HTML DOM и CSSOM, страница рендерится (и перерендеривается) в три этапа:

Layout: генерируется геометрия и позиция каждого элемента;
Paint: отрисовываются пиксели каждого элемента;
Composition: слои элементов располагаются в правильном порядке друг над другом.

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

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

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

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

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

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

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

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

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

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

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

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

Ключевое слово transparent . Устанавливает полную прозрачность, не поддерживает промежуточные анимации.
rgba(r, g, b,a) : красный, зеленый, синий и альфа-канал.
hsla(h, s, l, a) : оттенок, насыщенность, светлота и альфа-канал.
HEX-формат: #RRGGBBAA или #RGBA

Способ #3. transform

Свойство transform позволяет передвигать ( translate ), масштабировать ( scale ), вращать ( rotate ) или искажать ( skew ) элемент. Оно позволяет также его спрятать. Например, можно радикально уменьшить масштаб ( scale(0) ) или передвинуть блок за пределы вьюпорта ( translate(-999px, 0px) ).

CSS-трансформации предлагают великолепную производительность с использованием аппаратного ускорения. Трансформируемый элемент перемещается на отдельный слой и может изменяться, не затрагивая другие слои. Пространство, занимаемое блоком до изменения, остается на странице, но полностью скрытый элемент уже недоступен для взаимодействия.

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

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

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

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

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

Способ #5. visibility

Свойство visibility принимает одно из двух значений: visible или hidden . Для ячеек таблицы доступно также значение collapse .

Пространство, занимаемое элементом, остается на странице (кроме collapse ).

Метрика	Влияние
Браузерная поддержка	Отличная
Доступность скрытого элемента	Контент элемента недоступен
Вызывает изменение макета	Нет (кроме collapse )
Перерендеринг	Composition (кроме collapse )
Производительность	Хорошая
Покадровая анимация	Невозможна
Срабатывание событий на скрытом элементе	Нет

Способ #6. display

display , вероятно, самое популярное свойство для скрытия элементов на странице. Значение none эффективно удаляет блок, как будто его никогда и не существовало в DOM.

Однако в большинстве случаев display: none — самый плохой способ спрятать что-то. Это свойство нельзя анимировать, и оно вызывает перерисовку страницы (layout), если только элемент не вырван из общего потока документа ( position: absolute ) или если не используется новое свойство contain.

Кроме того, свойство display может принимать множество значений ( block , inline , flex , grid , table , …). Если вы сбрасываете его до значения none , то вернуть затем правильное отображение может быть затруднительно (может помочь значение unset).

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

Способ #7. Атрибут hidden

HTML-атрибут hidden можно добавить к любому элементу:

 Hidden content

К нему будут применены дефолтные стили браузера:

[hidden]

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

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

Свойство position позволяет переместить элемент из его исходной ( static ) позиции в общем потоке документа с помощью свойств top , bottom , left и right . Абсолютно спозиционированный элемент ( position: absolute ) можно вынести за пределы вьюпорта, например, установив ему свойство left: -999px (значение может быть другим).

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

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

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

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

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

Способ #10. Уменьшение размеров

Элемент можно спрятать, уменьшив его размеры с помощью свойств width , height , padding , border-width и/или font-size . При необходимости также можно использовать свойство overflow: hidden , чтобы избежать переполнения уменьшенного элемента контентом.

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

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

Выбор техники

Многие годы мы не раздумывая использовали display: none для скрытия элементов, однако у этого способа есть множество альтернатив — более гибких и производительных. Эта техника остается валидной, но в большинстве случаев лучше использовать другое решение. В первую очередь обратите особое внимание на максимально оптимизированные свойства opacity и transform .

Последний элемент flex-box

введите сюда описание изображения

Можно ли с помощью flex-box сделать так, что бы последний элемент был в конце а все предыдущие с левой стороны?

Отслеживать
задан 26 окт 2020 в 22:24
13 1 1 серебряный знак 3 3 бронзовых знака

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Для отбивки последнего блока задайте ему свойство margin-left: auto; :

.flex < display: flex; margin: 6px; padding: 3px; background-color: #bcbec0; >.flex > div < height: 60px; width: 60px; margin: 3px; font: 36px/60px Arial; text-align: center; background-color: #be1e2d; color: white; >.flex > div:last-of-type

Также это сработает для нескольких блоков. В этом случае, нужно добавить margin-left: auto; блоку, с которого нужна отбивка:

.flex < display: flex; margin: 6px; padding: 3px; background-color: #bcbec0; >.flex > div < height: 60px; width: 60px; margin: 3px; font: 36px/60px Arial; text-align: center; background-color: #be1e2d; color: white; >.flex > div:nth-of-type(3)

Отслеживать
ответ дан 27 окт 2020 в 0:05
33k 6 6 золотых знаков 29 29 серебряных знаков 71 71 бронзовый знак

В качестве альтернативного решения, можно использовать вариант с пустым блоком и свойством flex-grow .

.container < display: flex; background-color: darkblue; >.box < width: 60px; height: 60px; background-color: tomato; margin: 10px; >.spacer-box < flex-grow: 1; >.last-box

Отслеживать
ответ дан 27 окт 2020 в 0:35
620 3 3 серебряных знака 7 7 бронзовых знаков

Поставьте margin-left: auto для последнего элемента.

.container < display: flex; background-color: darkblue; >.box < width: 60px; height: 60px; background-color: tomato; margin: 10px; >.last-box

Отслеживать
ответ дан 26 окт 2020 в 23:40
Денис Степанов Денис Степанов
3,847 9 9 серебряных знаков 22 22 бронзовых знака

css
flexbox

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.