ЗАГОТОВКИ CSS

Символ рубля - ₽

Стили для полос прокрутки


body::-webkit-scrollbar {
  width: 11px;    /* ширина scrollbar */
}

body::-webkit-scrollbar-track {
  background: #CCBFAF;   /* цвет дорожки */
}

body::-webkit-scrollbar-thumb {
  background-color: #764E2B;  /* цвет плашки */
  border-radius: 20px;       /* закругления плашки */
  border: 1px solid #CCBFAF;  /* padding вокруг плашки */
}
.modal-body::-webkit-scrollbar {
    width: 11px;
}

.modal-body::-webkit-scrollbar-thumb { 
    background: #CCBFAF;
} 

.modal-body::-webkit-scrollbar-track { 
    background-color: #764E2B;    /* цвет плашки */
    border-radius: 20px;       /* закругления плашки */
    border: 1px solid #CCBFAF;  /* padding вокруг плашки */
}

 .flex {

display: flex;

flex-direction: column;

justify-content: center;

}

.flex {

display: inline-flex !important;

justify-content: center;

flex-direction: column;


@primary-color: #112233;

background-color: darken(@primary-color, 10%);
background-color: lighten(@primary-color, 10%);
-webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
     -o-transition: all 0.2s linear;
        transition: all 0.2s linear;


.background {
    background-position: 50% 50%;
    background-repeat: no-repeat !important;
    background-size: 100%;
    background-size: cover !important

}
Трансформации
-webkit-transform: rotate(15deg); /* Для Safari, Chrome, iOS */
   -moz-transform: rotate(15deg); /* Для Firefox */
    -ms-transform: rotate(15deg); /* Для IE */
     -o-transform: rotate(15deg); /* Для Opera */
        transform: rotate(15deg);
 
-webkit-transform: scale(1.5,1.3);
   -moz-transform: scale(1.5,1.3);
    -ms-transform: scale(1.5,1.3);
     -o-transform: scale(1.5,1.3);
        transform: scale(1.5,1.3);

 
-webkit-transform:scale(1.1,1.1);
   -moz-transform:scale(1.1,1.1);
        transform:scale(1.1,1.1);

-webkit-transform: translate(42px, 18px);
   -moz-transform: translate(42px, 18px);
        transform: translate(42px, 18px);

required="true"
rel="nofollow"
target="_blank"
<!--noindex--> <!--//noindex-->
Закругление углов для блоков
-webkit-border-radius: 4px;
   -moz-border-radius: 4px;
        border-radius: 4px;
 
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
        border-radius: 50%;
 
-webkit-border-radius: 100px / 10px;
-moz-border-radius: 100px / 10px;
border-radius: 100px / 10px;

Тени

-webkit-box-shadow: 1px 1px 15px hsla(0, 0%, 0%, 0.2);
   -moz-box-shadow: 1px 1px 15px hsla(0, 0%, 0%, 0.2);
        box-shadow: 1px 1px 15px hsla(0, 0%, 0%, 0.2);


-webkit-box-shadow: 0 0 25px hsla(0, 0%, 0%, 0.3);
   -moz-box-shadow: 0 0 25px hsla(0, 0%, 0%, 0.3);
        box-shadow: 0 0 25px hsla(0, 0%, 0%, 0.3);

-webkit-box-shadow: 0px 0px 5px 5px hsla(0, 0%, 0%, 0.15);
   -moz-box-shadow: 0px 0px 5px 5px hsla(0, 0%, 0%, 0.15);
        box-shadow: 0px 0px 5px 5px hsla(0, 0%, 0%, 0.15); 
box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */

box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1);

Стили для placeholder

::-webkit-input-placeholder{color:#777;font-size:13px;}

::-moz-placeholder{color:#777;font-size:13px;}

::-ms-input-placeholder{color:#777;font-size:13px;}

::-ms-input-placeholder{color:#777;font-size:13px;}
 

word-break: normal | break-all | keep-all; //перенос строк внутри слов, которые не помещаются по ширине в заданную область.

word-wrap: normal | break-word | inherit; //переносить или нет длинные слова, которые не помещаются по ширине в заданную область

Стили для списков


/* Partial list of types */

list-style-type: none;

list-style-type: disc;

list-style-type: circle;

list-style-type: square;

list-style-type: decimal;

list-style-type: georgian;

list-style-type: trad-chinese-informal;

list-style-type: kannada;

list-style-type: custom-counter-style;

list-style-type: "-";
 

/* Global values */

list-style-type: inherit;

list-style-type: initial;

list-style-type: revert;

list-style-type: revert-layer;

list-style-type: unset;
 

text-decoration: none | underline
 

position: relative;

position: absolute;

position: fixed;

content: ";

 
margin: 15px auto;

margin-top: 15px

margin-left: 15px;

margin-right: 15px;

margin-bottom: 15px;
 

padding-top: 15px

padding-left: 15px;

padding-right: 15px;

padding-bottom: 15px;
 

border:1px solid #ccc;

border-top:1px solid #ccc;

border-bottom:1px solid #ccc;

border-left:1px solid #ccc;

border-right:1px solid #ccc;

Стили для шрифта


font-size: .9em;

font-weight: 600;

font-style: normal | italic | oblique;

font-family: Geneva, Arial, Helvetica, sans-serif;

font-variant: normal | small-caps;

 

text-transform: uppercase;

text-align: center | justify | left | right | inherit;

text-decoration: underline | none;

text-decoration-color: #dedede;

text-decoration-style: solid | double | dotted | dashed | wavy;

text-transform: capitalize | lowercase | uppercase | none;

text-overflow: clip | ellipsis;

text-shadow: 1px 1px 2px black, 0 0 1em red;

 

line-height:1.1em;

Заливки фона


background:#fff;

background-color:#fff;

background-size:100%;

 

background: #014464;

background: -moz-linear-gradient(top, #0272a7, #013953);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

 

vertical-align:middle;


 
/*===== BUTTON =====*/

button {

background:transparent;

border:0

}

.btn {

text-align: center;

font-weight: 500;

font-size: 11px;

padding: 10px 35px;

text-transform: uppercase;

letter-spacing: 1px;

vertical-align: top;

-webkit-border-radius:25px;

-moz-border-radius:25px;

border-radius:25px;

position: relative;

text-decoration:none;

}

.btn,

.btn.btn-transparent:hover {

background-color: @primary-color;

color: #fff;

}

.btn:hover {

opacity: 1;

text-decoration: none;

color: #fff;

background-color: @primary-color;

box-shadow: 0 5px 20px -10px @primary-color;

}

.btn.btn-transparent {

background: transparent;

border: 1px solid @primary-color;

color: @primary-color;

}

.btn-secondary,

.btn-secondary.btn-transparent:hover {

background-color: @secondary-color;

color: #fff;

border-color: @secondary-color;

}

.btn-secondary:hover {

opacity: 1;

text-decoration: none;

color: #fff;

background-color: @secondary-color;

box-shadow: 0 5px 20px -10px @secondary-color;

border-color: @secondary-color;

}

.btn-secondary.btn-transparent {

border: 1px solid @secondary-color;

color: @secondary-color;

}

.btn-third,

.btn-third.btn-transparent:hover {

background-color: @third-color;

color: #fff;

border-color: @third-color;

}

.btn-third:hover {

opacity: 1;

text-decoration: none;

color: #fff;

background-color: @third-color;

box-shadow: 0 5px 20px -10px @third-color;

border-color: @third-color;

}

.btn-third.btn-transparent {

border: 1px solid @third-color;

color: @third-color;

}

.btn-fifth,

.btn-fifth.btn-transparent:hover {

background-color: #bbb;

border-color: @fifth-color;

}

.btn-fifth.btn-transparent {

border: 1px solid #bbb;

color: #bbb;

}

.btn-fifth:hover {

opacity: 1;

text-decoration: none;

color: #fff;

background-color: #bbb;

box-shadow: 0 5px 20px -10px #bbb;

border-color: @fifth-color;

}

.btn-sm {

padding: 5px 15px !important;

letter-spacing: 0;

}

.in { opacity: 1 !important; }

h1:before {content: "";display: block;height: 2px;background: #fff;width: 100%;position: absolute;bottom: 0;}

html {position: relative; min-height: 100%;}

.section-parallax-background, .section-background {background-attachment: fixed !important; background-position: 50% 0; background-repeat: no-repeat; background-size: cover !important;}

.mobile .section-parallax-background {background-attachment: scroll !important;}

.section-background {background-attachment: scroll !important;}

.section-relative {position: relative;}

.section-fixed-size {overflow: hidden;}

.section-full-height {height: 100vh;}

.section-bg-adapted {background-attachment: scroll; background-position: 50% 0; background-repeat: no-repeat; background-size: cover;}

.section--gray {background-color: #444444;}

.section--light-gray {background-color: #f0f0f0;}

.section--dark-gray {background-color: #3c3c3c;}

.section-container {padding: 0; position: relative; z-index: 3;}
CSS

@-webkit-keyframes

Правило @-webkit-keyframes — позволяет пользователю описать анимацию CSS свойств в виде перечня ключевых кадров.

Синтаксис

@-webkit-keyframes <имя анимации> {
    <селектор кадра 1> {
        <свойство 1>:<значение 1>;
        <свойство 2>:<значение 1>;
    }
    <селектор кадра 2> {
        <свойство 1>:<значение 2>;
        <свойство 2>:<значение 2>;
    }
    .....................
    <селектор кадра n> {
        <свойство 1>:<значение n>;
        <свойство 2>:<значение n>;
    }   
}
  • <имя анимации> — задает имя анимации в виде строки в одинарных кавычках (это имя потом используется при вызове анимации в качестве значения свойства -webkit-animation-name)
  • <селектор кадра> — задает селекторы которые определяют ключевые кадры. Они могут принимать значения:
    • from — внутри этого селектора описывается значения анимированных свойств в начальный момент анимации (также можно описать начальный кадр анимации, используя эквивалентный селектор 0%)
    • to — внутри этого селектора описывается значения анимированных свойств в конечный момент анимации (также можно описать конечный кадр анимации, используя эквивалентный селектор 100%)
    • <процент> — описывает значения анимированных свойств в данный момент времени (момент времени отсчитывается в процентном отношении от значения свойства -webkit-animation-duration)
  • <свойство> — анимируемое CSS свойство
  • <значение> — значения анимированного свойств в момент, описываемый селектором кадра

Пример кода

CSS
div {
        top:50px;
        left:0px;
        -webkit-animation-name:'movement';
        -webkit-animation-duration:10s;
}
@-webkit-keyframes 'movement' {
    from {
        top:50px;
        left:0px;
    }
    50% {
        top:150px;
        left:100px;
    }
    to {
        top:400px;
        left:300px;
    }   
}
В примере описана анимация перемещения (изменение координат блока с течением времени). В первый момент анимации, описываемый селектором кадра from, координаты блока top:50px, left:0px. Следующий ключевой кадр описывает значения свойств через 50% времени анимации (в данном примере - 5 секунд). Координаты блока станут top:150px, left:100px. В последний момент времени описываемый селектором кадра to (через 10с) блок получит абсолютные координаты top:400px, left:300px. Замечание! Анимация происходит не в три рывка, а плавно.
CSS, CSS Анимация, Анимация

CSS3-трансформации

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

CSS3-трансформации позволяют сдвигать, поворачивать и масштабировать элементы. Трансформации преобразовывают элемент, не затрагивая остальные элементы веб-страницы, т.е. другие элементы не сдвигаются относительно него.

В HTML трансформируемый элемент это: элемент с display: block; и display: inline-block;, а также элементы, значение свойства displayкоторых вычисляется как table-row, table-row-group, table-header-group, table-footer-group, table-cell или table-caption.

Трансформированным считается элемент с любым установленным значением свойства transform, отличным от none.

В SVG трансформируемый элемент — это элемент, который имеет атрибуты transform, patternTransform или gradientTransform.

Существуют два вида CSS3-трансформаций – 2Dи 3D. 2D-трансформации преобразовывают элементы в двумерном пространстве c помощью 2D-матрицы преобразований. Эта матрица применяется для вычисления новых координат объекта, на основе значений свойств transformи transform-origin. Преобразования влияют только на визуальный рендеринг. В отношении макета страницы они могут отразиться на переполнении содержимого блока. По умолчанию точка трансформации находится в центре элемента.

2D-трансформации элементов

1. Функции 2D-трансформации: свойство transform

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

Свойство не наследуется.

Функция

Описание

none

Значение по умолчанию, означает отсутствие трансформации. Также отменяет трансформацию для элемента из группы трансформируемых элементов.

matrix(a, c, b, d, x, y)

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

Значение aизменяет масштаб по горизонтали. Значение от 0 до 1 уменьшает элемент, больше 1 — увеличивает.

Значение cдеформирует (сдвигает) стороны элемента по оси Y, положительное значение — вверх, отрицательное — вниз.

Значение bдеформирует (сдвигает) стороны элемента по оси X, положительное значение — влево, отрицательное — вправо.

Значение dизменяет масштаб по вертикали. Значение меньше 1 уменьшает элемент, больше 1 — увеличивает.

Значение xсмещает элемент по оси X, положительное — вправо, отрицательное — влево.

Значение yсмещает элемент по оси Y, положительное значение — вниз, отрицательное — вверх.

translate(x,y)

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

translateX(n)

Сдвигает элемент относительно его обычного положения по оси X.

translateY(n)

Сдвигает элемент относительно его обычного положения по оси Y.

scale(x,y)

Масштабирует элементы, делая их больше или меньше. Значения от 0 до 1 уменьшают элемент. Первое значение масштабирует элемент по ширине, второе — по высоте. Отрицательные значения отображают элемент зеркально.

scaleX(n)

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

scaleY(n)

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

rotate(угол)

Поворачивает элементы на заданное количество градусов, отрицательные значения от -1degдо -360degповорачивают элемент против часовой стрелки, положительные — по часовой стрелке. Значение rotate(720deg)поворачивает элемент на два полных оборота.

skew(x-угол,y-угол)

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

skewX(угол)

Деформирует стороны элемента относительно оси X.

skewY(угол)

Деформирует стороны элемента относительно оси Y.

initial

Устанавливает значение свойства в значение по умолчанию.

inherit

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

Допустимые значения:

matrix()— любое число
translate(), translateX(), translateY()— единицы длины (положительные и отрицательные), %
scale(), scaleX(), scaleY()— любое число
rotate()— угол (deg, grad, radили turn)
skew(), skewX(), skewY()— угол (deg, grad, rad)

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

Синтаксис

transform: none;
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: rotate(45deg);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: inherit;
transform: initial;

2. Точка трансформации: свойство transform-origin

Свойство transform-origin позволяет сместить центр трансформации, относительно которого происходит изменение положения/размера/формы элемента. Значение по умолчанию — center, или 50% 50%. Задаётся только для трансформированных элементов.

Свойство не наследуется.

transform-origin

Значения:

ось Х(left, center, right, длина, %)

ось Y(top, center, bottom, длина, %)

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

initial

Устанавливает значение свойства в значение по умолчанию.

inherit

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

Синтаксис

transform-origin: 2px;
transform-origin: bottom;
transform-origin: 3cm 2px;
transform-origin: left 2px;
transform-origin: right top;
transform-origin: inherit;
transform-origin: initial;

3. Область преобразования: свойство transform-box

Все преобразования, определяемые свойством transform и transform-origin, относятся к положению и размерам опорного блока элемента. Опорный блок элемента это виртуальный прямоугольник вокруг элемента, который формирует систему координат для отрисовки.

В некоторых браузерах опорный блок принимает центр SVG-холста в качестве точки преобразования. Чтобы решить эту проблему, можно задать для элемента transform-box.

Опорный блок добавляет дополнительное смещение к исходной точке, заданной свойством transform-origin.

Свойство не наследуется.

transform-box

Значения:

content-box

В качестве опорного блока выступает область содержимого элемента. Для элемента <table>эта область включает также заголовок таблицы и рамку.

border-box

В качестве опорного блока выступает область рамки элемента. Для элемента <table>эта область включает также заголовок таблицы и рамку.

fill-box

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

stroke-box

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

view-box

В качестве опорного блока используется область просмотра на SVG-холсте, которая определяет прямоугольную область, в которую отображается содержимое SVG.

initial

Устанавливает значение свойства в значение по умолчанию.

inherit

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

Синтаксис

transform-box: content-box;
transform-box: border-box;
transform-box: fill-box;
transform-box: stroke-box;
transform-box: view-box;
transform-box: inherit;
transform-box: initial;
CSS, CSS3, Формы, SVG, html

Input type number

В HTML5 появилось специальное поле <input> с атрибутом type="number" для вода чисел.
Рассмотрим его возможности.
Для поля доступны следующие атрибуты:
Атрибут
Описание
step
Шаг изменения значения
max
Максимальное значение
min
Минимальное значение
placeholder
Подсказка
readonly
Только для чтения
disabled
Заблокирован
list
Связка со списком опций datalist по id
required
Обязательный для заполнения

1 Шаг изменения

Атрибут step="1" задает на сколько будет увеличиваться или уменьшаться значение в поле. Может быть как целым (10) так и дробным (0.1).
<input type="number" step="1" placeholder="step = 1"> <input type="number" step="10" placeholder="step = 10"> <input type="number" step="0.1" placeholder="step = 0.1">

2 Минимальное значение

Атрибут min="1" задает минимально возможное значение value. Это значение должно быть меньше или равно значению max. Может быть целым, отрицательным или дробным.
<input type="number" step="10" min="0" placeholder="min = 0"> <input type="number" step="10" min="-100" placeholder="min = -100"> <input type="number" step="0.1"min="-0.1" placeholder="min = -0.1">

3 Максимальное значение

Атрибут max="100" задает максимально возможное значение value.
<input type="number" step="1" max="10" placeholder="max = 10"> <input type="number" step="10" max="100" placeholder="max = 100"> <input type="number" step="0.1" max="1.5" placeholder="max = 1.5">

4 Опции по умолчанию

У поля есть возможность задать список с рекомендуемыми значениями с помощью элемента <datalist>.
<input type="number" list="input-list"> <datalist id="input-list"> <option value="111"> <option value="222"> <option value="333"> <option value="444"> <option value="555"> </datalist>

5 Валидация

Если указать атрибут required, то при отправки формы будет проверятся заполнено поле или нет, а также превышение введенного значения value в атрибутах min и max.
Проверить значение регулярным выражением с помощью атрибута pattern не получится, т.к. он не поддерживается.
<form> <input type="number" step="10" min="0" max="100" required> <input type="submit" value="Отправить"> </form>

Также доступны CSS псевдо свойства :invalid и :valid, с помощью них можно применить стили к неправильно заполненному полю.

<form> <div class="row"> <input type="number" step="10" min="0" max="100" required> <span></span> </div> <div class="row"> <input type="number" step="10" min="0" max="100" required> <span></span> </div> </form>

HTML

input[type="number"]:invalid+span:after { content: '✖'; padding-left: 5px; color: red; } input[type="number"]:valid+span:after { content: '✓'; padding-left: 5px; color: green; }

6 Стилизация

Стандартными CSS-стилями можно изменить инпут:
input[type="number"] { background-color: #eee; vertical-align: top; outline: none; padding: 0; height: 40px; line-height: 40px; text-indent: 10px; display: inline-block; width: 100%; box-sizing: border-box; border: 1px solid #ddd; font-size: 14px; border-radius: 3px; } input[type="number"]:focus { outline: 2px solid blue; }

7 Убрать стрелки

input[type="number"] { -moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { display: none; }

8 Как стилизовать стрелки

К стрелкам не применить CSS стили, но есть JS-методы stepUp()и stepDown()для изменения значения. Так можно скрыть стрелки и добавить свои кнопки:

HTML

<div class="number"> <button class="number-minus" type="button" onclick="this.nextElementSibling.stepDown(); this.nextElementSibling.onchange();">-</button> <input type="number" min="0" value="1" readonly> <button class="number-plus" type="button" onclick="this.previousElementSibling.stepUp(); this.previousElementSibling.onchange();">+</button> </div>

CSS

.number { display: inline-block; position: relative; width: 100px; }
.number input[type="number"] { display: block; height: 32px; line-height: 32px; width: 100%; padding: 0; margin: 0; box-sizing: border-box; text-align: center; -moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield; }
.number input[type="number"]::-webkit-outer-spin-button, .number input[type="number"]::-webkit-inner-spin-button { display: none; }
.number-minus { position: absolute; top: 1px; left: 1px; bottom: 1px; width: 20px; padding: 0; display: block; text-align: center; border: none; border-right: 1px solid #ddd; font-size: 16px; font-weight: 600; }
.number-plus { position: absolute; top: 1px; right: 1px; bottom: 1px; width: 20px; padding: 0; display: block; text-align: center; border: none; border-left: 1px solid #ddd; font-size: 16px; font-weight: 600; }
CSS, CSS3, input

Swiper API

Полный HTML-макет Swiper

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

Стили

Пакет Swiper содержит различные наборы стилей CSS, Less и SCSS:

Стили CSS

Стили CSS для версии пакета:

  • swiper-bundle.css— все стили Swiper, включая стили всех модулей (например, навигации, постраничной навигации и т. д.)
  • swiper-bundle.min.css- такой же, как предыдущий, но уменьшенный

Стили CSS для версии пакета (импорт пакета):

  • swiper/css— все стили Swiper, включая стили всех модулей (например, навигации, постраничной навигации и т. д.)
  • swiper/css/bundle- такой же, как предыдущий, но уменьшенный

Стили CSS для базовой версии и модулей (импорт пакетов):

  • swiper/css- только основные стили Swiper
  • swiper/css/a11y- стили, необходимые для модуля A11y
  • swiper/css/autoplay- стили, необходимые для модуля автозапуска
  • swiper/css/controller- стили, необходимые для модуля контроллера
  • swiper/css/effect-cards- стили, необходимые для модуля Cards Effect
  • swiper/css/effect-coverflow- стили, необходимые для модуля Coverflow Effect
  • swiper/css/effect-creative- стили, необходимые для модуля Creative Effect
  • swiper/css/effect-cube- стили, необходимые для модуля Cube Effect
  • swiper/css/effect-fade- стили, необходимые для модуля эффекта затухания
  • swiper/css/effect-flip- стили, необходимые для модуля Flip Effect
  • swiper/css/free-mode- стили, необходимые для модуля свободного режима
  • swiper/css/grid- стили, необходимые для модуля Grid
  • swiper/css/hash-navigation- стили, необходимые для модуля навигации по хэшу
  • swiper/css/history- стили, необходимые для модуля Истории
  • swiper/css/keyboard- стили, необходимые для модуля клавиатуры
  • swiper/css/manipulation- стили, необходимые для модуля манипулирования
  • swiper/css/mousewheel- стили, необходимые для модуля Mousewheel
  • swiper/css/navigation- стили, необходимые для навигационного модуля
  • swiper/css/pagination- стили, необходимые для модуля разбивки на страницы
  • swiper/css/parallax- стили, необходимые для модуля Parallax
  • swiper/css/scrollbar- стили, необходимые для модуля полосы прокрутки
  • swiper/css/thumbs- стили, необходимые для модуля Thumbs
  • swiper/css/virtual- стили, необходимые для виртуального модуля
  • swiper/css/zoom- стили, необходимые для модуля масштабирования

Меньше стилей

Меньшие стили - это отдельные стили для базовой версии и модулей (импорт пакетов):

  • swiper/less- только основные стили Swiper
  • swiper/less/bundle— все стили Swiper, включая стили всех модулей (например, навигации, постраничной навигации и т. д.)
  • swiper/less/a11y- стили, необходимые для модуля A11y
  • swiper/less/autoplay- стили, необходимые для модуля автозапуска
  • swiper/less/controller- стили, необходимые для модуля контроллера
  • swiper/less/effect-cards- стили, необходимые для модуля Cards Effect
  • swiper/less/effect-coverflow- стили, необходимые для модуля Coverflow Effect
  • swiper/less/effect-creative- стили, необходимые для модуля Creative Effect
  • swiper/less/effect-cube- стили, необходимые для модуля Cube Effect
  • swiper/less/effect-fade- стили, необходимые для модуля эффекта затухания
  • swiper/less/effect-flip- стили, необходимые для модуля Flip Effect
  • swiper/less/free-mode- стили, необходимые для модуля свободного режима
  • swiper/less/grid- стили, необходимые для модуля Grid
  • swiper/less/hash-navigation- стили, необходимые для модуля навигации по хэшу
  • swiper/less/history- стили, необходимые для модуля Истории
  • swiper/less/keyboard- стили, необходимые для модуля клавиатуры
  • swiper/less/manipulation- стили, необходимые для модуля манипулирования
  • swiper/less/mousewheel- стили, необходимые для модуля Mousewheel
  • swiper/less/navigation- стили, необходимые для навигационного модуля
  • swiper/less/pagination- стили, необходимые для модуля разбивки на страницы
  • swiper/less/parallax- стили, необходимые для модуля Parallax
  • swiper/less/scrollbar- стили, необходимые для модуля полосы прокрутки
  • swiper/less/thumbs- стили, необходимые для модуля Thumbs
  • swiper/less/virtual- стили, необходимые для виртуального модуля
  • swiper/less/zoom- стили, необходимые для модуля масштабирования

Стили SCSS

Стили SCSS также являются отдельными стилями для основной версии и модулей (импортируемых пакетов):

  • swiper/scss- только основные стили Swiper
  • swiper/scss/bundle— все стили Swiper, включая стили всех модулей (например, навигации, постраничной навигации и т. д.)
  • swiper/scss/a11y- стили, необходимые для модуля A11y
  • swiper/scss/autoplay- стили, необходимые для модуля автозапуска
  • swiper/scss/controller- стили, необходимые для модуля контроллера
  • swiper/scss/effect-cards- стили, необходимые для модуля Cards Effect
  • swiper/scss/effect-coverflow- стили, необходимые для модуля Coverflow Effect
  • swiper/scss/effect-creative- стили, необходимые для модуля Creative Effect
  • swiper/scss/effect-cube- стили, необходимые для модуля Cube Effect
  • swiper/scss/effect-fade- стили, необходимые для модуля эффекта затухания
  • swiper/scss/effect-flip- стили, необходимые для модуля Flip Effect
  • swiper/scss/free-mode- стили, необходимые для модуля свободного режима
  • swiper/scss/grid- стили, необходимые для модуля Grid
  • swiper/scss/hash-navigation- стили, необходимые для модуля навигации по хэшу
  • swiper/scss/history- стили, необходимые для модуля Истории
  • swiper/scss/keyboard- стили, необходимые для модуля клавиатуры
  • swiper/scss/manipulation- стили, необходимые для модуля манипулирования
  • swiper/scss/mousewheel- стили, необходимые для модуля Mousewheel
  • swiper/scss/navigation- стили, необходимые для навигационного модуля
  • swiper/scss/pagination- стили, необходимые для модуля разбивки на страницы
  • swiper/scss/parallax- стили, необходимые для модуля Parallax
  • swiper/scss/scrollbar- стили, необходимые для модуля полосы прокрутки
  • swiper/scss/thumbs- стили, необходимые для модуля Thumbs
  • swiper/scss/virtual- стили, необходимые для виртуального модуля
  • swiper/scss/zoom- стили, необходимые для модуля масштабирования

Инициализировать Swiper

Теперь, когда у нас есть HTML-код Swiper, нам нужно инициализировать его с помощью следующей функции:

новый Swiper (swiperContainer, параметры) - инициализирует swiper с помощью опций

  • swiperContainer — HTMLElement или строка (с CSS-селектором) HTML-элемента контейнера свипера. Обязательно.
  • параметры - объект - объект с параметрами Swiper. Необязательно.
  • Метод возвращает инициализированный экземпляр Swiper

Например:

const swiper = new Swiper('.swiper', {
  speed: 400,
  spaceBetween: 100,
});

Послеинициализации Swiper можно получить доступ к экземпляру Swiper в его HTMLElement. Этоswiperсвойство HTML-элемента контейнера Swiper:

const swiper = document.querySelector('.swiper').swiper;

// Now you can use all slider methods like
swiper.slideNext();

Параметры

Давайте посмотрим на список всех доступных параметров:

Имя Тип По умолчанию Описание
a11y Любой

Объект с параметрами a11y или логическийtrueдля включения с настройками по умолчанию.

const swiper = new Swiper('.swiper', {
  a11y: {
    prevSlideMessage: 'Previous slide',
    nextSlideMessage: 'Next slide',
  },
});
allowSlideNext логическое значение верно

Установите значениеfalseдля отключения перехода к следующему направлению (вправо или вниз)
allowSlidePrev логическое значение верно

Установите значениеfalseдля отключения перехода к предыдущему направлению скольжения (влево или вверх)
Разрешить касание логическое значение верно

Еслиfalse, то единственный способ переключиться на другой слайд — использовать внешние функции API, такие как slidePrev или slideNext
Автоматический рост логическое значение ложь

Задайте значениеtrueи обёртка слайдера будет подстраивать свою высоту под высоту активного слайда
автоматическое воспроизведение Любой

Объект с параметрами автозапуска или логическим значениемtrueдля включения с настройками по умолчанию

const swiper = new Swiper('.swiper', {
 autoplay: {
   delay: 5000,
 },
});
точки останова объект

Позволяет задавать разные параметры для разных точек останова (размеров экрана). Не все параметры можно изменить в точках останова, только те, которые не требуют другого макета и логики, напримерslidesPerView,slidesPerGroup,spaceBetween,grid.rows. Такие параметры, какloopиeffectне будут работать

const swiper = new Swiper('.swiper', {
  // Default parameters
  slidesPerView: 1,
  spaceBetween: 10,
  // Responsive breakpoints
  breakpoints: {
    // when window width is >= 320px
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // when window width is >= 480px
    480: {
      slidesPerView: 3,
      spaceBetween: 30
    },
    // when window width is >= 640px
    640: {
      slidesPerView: 4,
      spaceBetween: 40
    }
  }
})

const swiper = new Swiper('.swiper', {
  slidesPerView: 1,
  spaceBetween: 10,
  // using "ratio" endpoints
  breakpoints: {
    '@0.75': {
      slidesPerView: 2,
      spaceBetween: 20,
    },
    '@1.00': {
      slidesPerView: 3,
      spaceBetween: 40,
    },
    '@1.50': {
      slidesPerView: 4,
      spaceBetween: 50,
    },
  }
});
База контрольных точек «контейнер»|«окно» "окно"

База для точек останова (бета-версия). Может бытьwindowилиcontainer. Если установлено значениеwindow(по умолчанию), то клавиши точек останова означают ширину окна. Если установлено значениеcontainer, то клавиши точек останова рассматриваются как ширина контейнера свипера
Эффект карты Любой

Объект с картами-параметры эффекта

const swiper = new Swiper('.swiper', {
  effect: 'cards',
  cardsEffect: {
    // ...
  },
});
Центрирующие оползни логическое значение ложь

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

Еслиtrue, то активное слайд-шоу будет отображаться по центру, а не всегда слева.
Центрированные скользящие границы логическое значение ложь

Еслиtrue, то активный слайд будет центрирован без добавления пробелов в начале и в конце слайдера. ТребуетсяcenteredSlides: true. Не предназначено для использования сloopилиpagination
containerModifierClass строка "swiper-"

Начало CSS-класса модификатора, который можно добавить в контейнер Swiper в зависимости от различных параметров
контроллер Любой

Объект с параметрами контроллера или логическим значениемtrueдля включения с настройками по умолчанию

const swiper = new Swiper('.swiper', {
  controller: {
    inverse: true,
  },
});
Эффект coverflowEffect Любой

Объект с параметрами эффекта Coverflow.

const swiper = new Swiper('.swiper', {
  effect: 'coverflow',
  coverflowEffect: {
    rotate: 30,
    slideShadows: false,
  },
});
createElements логическое значение ложь

При включении Swiper автоматически обернет слайды элементом swiper-wrapper и создаст необходимые элементы для навигации, разбивки на страницы и полосы прокрутки, если они включены (с соответствующим объектом параметров или с логическим значениемtrue))
Творческий эффект Любой

Объект с параметрами креативного эффекта

const swiper = new Swiper('.swiper', {
  effect: 'creative',
  creativeEffect: {
    prev: {
      // will set `translateZ(-400px)` on previous slides
      translate: [0, 0, -400],
    },
    next: {
      // will set `translateX(100%)` on next slides
      translate: ['100%', 0, 0],
    },
  },
});
cssMode логическое значение ложь

При включении он будет использовать современный CSS Scroll Snap API. Он поддерживает не все функции Swiper, но потенциально может значительно повысить производительность в простых конфигурациях.

Это то, что не поддерживается, когда оно включено:

  • Эффект куба
  • speedпараметр может не иметь никакого эффекта
  • Все события, связанные с началом / завершением перехода (используйтеslideChangeвместо этого)
  • slidesPerGroupимеет ограниченную поддержку
  • simulateTouchне имеет эффекта, а «перетаскивание» с помощью мыши не работает
  • resistanceне имеет никакого эффекта
  • allowSlidePrev/Next
  • swipeHandler

Если вы используете его с другими эффектами, особенно с 3D-эффектами, необходимо обернуть содержимое слайда элементом<div className="swiper-slide-transform">. И если вы используете какие-либо пользовательские стили для слайдов (например, цвета фона, радиус границы, границу и т. д.), их следует задавать для элементаswiper-slide-transform.

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <!-- wrap slide content with transform element -->
      <div class="swiper-slide-transform">
        ... slide content ...
      </div>
    </div>
    ...
  </div>
</div>
<script>
const swiper = new Swiper('.swiper', {
   effect: 'flip',
   cssMode: true,
 });
</script>
Эффект куба Любой

Объект с параметрами кубического эффекта

const swiper = new Swiper('.swiper', {
  effect: 'cube',
  cubeEffect: {
    slideShadows: false,
  },
});
направление «по горизонтали»|«по вертикали» "горизонтальный"

Может быть'horizontal'или'vertical'(для вертикального слайдера).
Обнаружение кромки строка|логическое значение ложь

Включите события Swiper для работы с возвратом свайпом в приложении. Если установлено значение'prevent', то вместо этого будет предотвращаться системная навигация с возвратом свайпом. Эта функция работает только с событиями «касания» (а не с событиями указателя), поэтому она будет работать на устройствах iOS/Android и не будет работать на устройствах Windows с событиями указателя (касания).
edgeSwipeThreshold номер 20

Область (в пикселях) от левого края экрана для отпускания сенсорных событий при свайпе назад в приложении
эффект строка "слайд"

Эффект перехода. Может быть'slide','fade','cube''coverflow','flip''creative',,,,, или'cards'
включен логическое значение верно

Независимо от того, был ли Swiper изначально включен. Если Swiper отключен, он скроет все элементы навигации и не будет реагировать на какие-либо события и взаимодействия
eventsPrefix строка `swiper`

Префикс имени события для всех событий DOM, генерируемых элементом Swiper (веб-компонентом)
Эффект затухания Любой

Объект с параметрами эффекта затухания

const swiper = new Swiper('.swiper', {
  effect: 'fade',
  fadeEffect: {
    crossFade: true
  },
});
flipEffect Любой

Объект с параметрами эффекта переворота

const swiper = new Swiper('.swiper', {
  effect: 'flip',
  flipEffect: {
    slideShadows: false,
  },
});
Фокусируемые элементы строка «ввод, выбор, опция, текстовое поле, кнопка, видео, метка»

Селектор CSS для элементов, на которые можно навести курсор. Свайпинг будет отключен для таких элементов, если они «наведены»
followFinger логическое значение верно

Если функция отключена, то ползунок будет анимироваться только при отпускании, он не будет двигаться, пока вы удерживаете на нём палец
Бесплатный режим Любой

Включает функции бесплатного режима. Объект с параметрами бесплатного режима или логическое значениеtrueдля включения с настройками по умолчанию.

const swiper = new Swiper('.swiper', {
  freeMode: true,
});

const swiper = new Swiper('.swiper', {
  freeMode: {
    enabled: true,
    sticky: true,
  },
});
grabCursor логическое значение ложь

Эта опция может немного улучшить удобство использования Swiper на компьютере. Еслиtrue, пользователь увидит курсор «захвата» при наведении на Swiper
сетка Любой

Объект с параметрами сетки для включения ползунка «многострочный».

const swiper = new Swiper('.swiper', {
  grid: {
    rows: 2,
  },
});
Хэшнавигация Любой

Включает навигацию по хэш-ссылкам для слайдов. Объект с параметрами хэш-навигации или логическое значениеtrueдля включения с настройками по умолчанию

const swiper = new Swiper('.swiper', {
  hashNavigation: {
    replaceState: true,
  },
});
высота нулевой|номер null

Высота Swiper (в пикселях). Параметр позволяет задать высоту Swiper. Полезно только в том случае, если вы инициализируете Swiper, когда он скрыт, а также в средах SSR и Test для правильной инициализации Swiper

Установка этого параметра приведет к тому, что Swiper перестанет реагировать
история Любой

Включает функцию сохранения состояния истории, при которой у каждого слайда будет свой URL-адрес. В этом параметре необходимо указать URL-адрес основного слайда, например"slides"и указать URL-адрес каждого слайда с помощью атрибутаdata-history.

Объект с параметрами навигации по истории или логическим значениемtrueдля включения с настройками по умолчанию

const swiper = new Swiper('.swiper', {
  history: {
    replaceState: true,
  },
});

<!-- will produce "slides/slide1" url in browser history -->
<div class="swiper-slide" data-history="slide1"></div>
инициализация логическое значение верно

Следует ли инициализировать Swiper автоматически при создании экземпляра. Если эта функция отключена, то вам нужно инициализировать Swiper вручную, вызвавswiper.init()
initialSlide номер 0

Порядковый номер начального слайда.
Инжектные стили строка[]

Внедрите стили текста в теневой DOM. Только для использования с элементом Swiper
injectStylesUrls строка[]

Внедрите стили<link>в теневой DOM. Только для использования с элементом Swiper
клавиатура Любой

Позволяет перемещаться по слайдам с помощью клавиатуры. Объект с параметрами клавиатуры или логическое значениеtrueдля включения с настройками по умолчанию

const swiper = new Swiper('.swiper', {
  keyboard: {
    enabled: true,
    onlyInViewport: false,
  },
});
lazyPreloadPrevNext номер 0

Количество следующих и предыдущих слайдов для предварительной загрузки. Применимо только при использовании отложенной загрузки.
Класс lazyPreloaderClass строка "swiper-ленивый предварительный загрузчик"

Имя CSS-класса ленивого предварительного загрузчика
Длинные наконечники логическое значение верно

Установите значениеfalse, если вы хотите отключить длинные прокрутки
longSwipesMs номер 300

Минимальная продолжительность (в миллисекундах) для перехода к следующему/предыдущему слайду при длительном смахивании
Стратегия длинных свайпов номер 0.5

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

Установите значениеtrue, чтобы включить режим непрерывного цикла

Из-за особенностей работы режима цикла (он меняет порядок слайдов) общее количество слайдов должно быть:

  • больше или равноslidesPerView+slidesPerGroup
  • даже дляslidesPerGroup(или использоватьloopAddBlankSlidesпараметр)
  • даже дляgrid.rows(или использоватьloopAddBlankSlidesпараметр)
loopAddBlankSlides логическое значение верно

Автоматически добавляет пустые слайды, если вы используете сетку илиslidesPerGroupи общее количество слайдов не равноslidesPerGroupилиgrid.rows
loopAdditionalSlides номер 0

Позволяет увеличить количество закольцованных слайдов
loopPreventsSliding логическое значение верно

Если эта функция включена, то кнопки «Далее» и «Назад» не будут работать, пока слайдер анимируется в режиме цикла
maxBackfaceHiddenSlides номер 10

Если общее количество слайдов меньше указанного здесь значения, то Swiper включитbackface-visibility: hiddenна элементах слайдов, чтобы уменьшить визуальное «мерцание» в Safari.

Не рекомендуется включать эту функцию на большом количестве слайдов, так как это снизит производительность
модули любой[]

Массив с модулями Swiper

import Swiper from 'swiper';
import { Navigation, Pagination } from 'swiper/modules';

const swiper = new Swiper('.swiper', {
   modules: [ Navigation, Pagination ],
 });
колесо мыши Любой

Позволяет перемещаться по слайдам с помощью колёсика мыши. Объект с параметрами колёсика мыши или логическое значениеtrueдля включения с настройками по умолчанию

const swiper = new Swiper('.swiper', {
  mousewheel: {
    invert: true,
  },
});
навигация Любой

Объект с параметрами навигации или логическим значениемtrueдля включения с настройками по умолчанию.

const swiper = new Swiper('.swiper', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
вложенный логическое значение ложь

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

Включать / отключать прокрутку элементов, соответствующих классу, указанному вnoSwipingClass
noSwipingClass строка "swiper-без пролистывания"

УкажитеnoSwipingcss-класс элемента
noSwipingSelector строка

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

Нормализует индекс слайда.
Наблюдаем за родителями логическое значение ложь

Установите значениеtrueесли вам также нужно отслеживать изменения родительских элементов Swiper
Наблюдает за детьми логическое значение ложь

Установите значениеtrueесли вам также нужно отслеживать изменения для дочерних элементов слайдов Swiper
наблюдатель логическое значение ложь

Задайте значениеtrueдля включения наблюдателя за изменениями в Swiper и его элементах. В этом случае Swiper будет обновляться (перезапускаться) каждый раз, когда вы меняете его стиль (например, скрываете/отображаете) или изменяете дочерние элементы (например, добавляете/удаляете слайды)
вкл . объект

Регистрация обработчиков событий
На любом функция(обработчик)

Добавьте прослушиватель событий, который будет запускаться при всех событиях

const swiper = new Swiper('.swiper', {
   onAny(eventName, ...args) {
     console.log('Event: ', eventName);
     console.log('Event data: ', args);
   }
 });
oneWayMovement логическое значение ложь

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

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

const swiper = new Swiper('.swiper', {
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
  },
});
параллакс Любой

Объект с параметрами параллакса или booleantrueдля включения с настройками по умолчанию.

const swiper = new Swiper('.swiper', {
  parallax: true,
});
Пассивные прослушиватели логическое значение верно

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

Установите значениеtrueдля предотвращения случайных нежелательных переходов по ссылкам во время прокрутки
Предотвращение распространения Clicksprop логическое значение верно

Установите значениеtrue, чтобы остановить распространение событий кликов по ссылкам во время прокрутки
Предотвращение взаимодействия при переходе логическое значение ложь

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

Установите значениеfalse, если вы хотите отключить устойчивые границы
Сопротивление номер 0.85

Эта опция позволяет вам контролировать коэффициент сопротивления
Сервер изменения размера логическое значение верно

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

Установите значениеtrueдля включения режима «перемотки». При включенном режиме нажатие кнопки «следующий слайд» (или вызов.slideNext()) при нахождении на последнем слайде приведет к переходу на первый слайд. Нажатие кнопки «предыдущий слайд» (или вызов.slidePrev()) при нахождении на первом слайде приведет к переходу на последний слайд.

Не следует использовать вместе сloopmode
Длина круга логическое значение ложь

Задайтеtrueдля округления значений ширины и высоты слайдов, чтобы текст не был размытым на экранах с обычным разрешением (если у вас такие есть)
runCallbacksOnInit логическое значение верно

При инициализации свипера запускаются события Transition/SlideChange/Start/End. Такие события будут запускаться при инициализации, если ваш initialSlide не равен 0 или вы используете режим цикла
полоса прокрутки Любой

Объект с параметрами полосы прокрутки или логическим значениемtrueдля включения с настройками по умолчанию.

const swiper = new Swiper('.swiper', {
  scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true,
  },
});
setWrapperSize логическое значение ложь

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

Установите значениеfalse, если вы хотите отключить короткие прокрутки
simulateTouch логическое значение верно

ЕслиtrueSwiper будет принимать события мыши, такие как события касания (щелкните и перетащите для смены слайдов)
slideActiveClass строка "swiper-slide-активный"

Имя CSS-класса текущего активного слайда

При изменении классов вам также потребуется изменить CSS Swiper, чтобы отразить изменения в классах

Не поддерживается в компонентах Swiper React / Vue
slideBlankClass строка "swiper-slide-пустой"

Имя CSS-класса пустого слайда, добавляемого в режиме цикла (при включенииloopAddBlankSlides).

Не поддерживается в Swiper React / Vue
slideClass строка "swiper-слайд"

Имя CSS-класса слайда

При изменении классов вам также потребуется изменить CSS Swiper, чтобы отразить изменения в классах

Не поддерживается в компонентах Swiper React / Vue
slideFullyVisibleClass строка "swiper-слайд-полностью-виден"

Имя CSS-класса для полностью (когда весь слайд находится в области просмотра) видимого слайда

Не поддерживается в Swiper React / Vue
slideNextClass строка "swiper-slide-next"

Имя CSS-класса слайда, которое находится сразу после текущего активного слайда

При изменении классов вам также потребуется изменить CSS Swiper, чтобы отразить изменения в классах

Не поддерживается в Swiper React / Vue
slidePrevClass строка 'swiper-slide-предыдущий'

CSS-класс slide, который находится прямо перед текущим активным слайдом

При изменении классов вам также потребуется изменить CSS Swiper, чтобы отразить изменения в классах

Не поддерживается в Swiper React / Vue
slideToClickedSlide логическое значение ложь

Установите значениеtrueи нажмите на любой слайд, чтобы перейти к этому слайду
slideVisibleClass строка "видимый слайд swiper"

Имя CSS-класса текущего / частично видимого слайда

При изменении классов вам также потребуется изменить CSS Swiper, чтобы отразить изменения в классах

Не поддерживается в Swiper React / Vue
slidesoffset после номер 0

Добавьте (в пикселях) дополнительное смещение слайда в конце контейнера (после всех слайдов)
slidesOffsetBefore номер 0

Добавьте (в пикселях) дополнительное смещение слайда в начале контейнера (перед всеми слайдами)
slidesPerGroup номер 1

Задайте количество слайдов для определения и включения группового скольжения. Полезно использовать с slidesPerView > 1
slidesPerGroupAuto логическое значение ложь

Этот параметр предназначен для использования только сslidesPerView: 'auto'иslidesPerGroup: 1. Если он включен, то при вызове методов.slideNext()и.slidePrev()будут пропускаться все слайды в режиме просмотра, при нажатии «кнопок» навигации и при автозапуске.
slidesPerGroupSkip номер 0

Параметр работает следующим образом: ЕслиslidesPerGroupSkipравно0(по умолчанию), слайды не исключаются из группировки, и результат будет таким же, как и без этого изменения.

ЕслиslidesPerGroupSkipравно или больше1, то первые X слайдов рассматриваются как отдельные группы, а все последующие слайды группируются по значениюslidesPerGroup
Просмотр слайдов номер|"авто" 1

Количество слайдов на один просмотр (количество слайдов, одновременно отображаемых в контейнере слайдера).

slidesPerView: 'auto'в настоящее время не поддерживается многострочный режим, когдаgrid.rows> 1
Расстояние между строка|номер 0

Расстояние между слайдами в пикселях.

Если вы используете свойство CSS «margin» для элементов, которые входят в Swiper и в которые вы передаёте параметр «spaceBetween», навигация может работать некорректно.
Скорость номер 300

Продолжительность перехода между слайдами (в мс)
Манипулятор прокрутки Любой null

Строка с CSS-селектором или HTML-элементом контейнера с разбивкой на страницы, которая будет работать как единственный доступный обработчик для прокрутки
swiperElementNodeName строка "SWIPER-КОНТЕЙНЕР"

Имя узла элемента swiper; используется для определения рендеринга веб-компонента
пороговое значение номер 5

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

Объект с параметрами компонента thumbs

const swiper = new Swiper('.swiper', {
  ...
  thumbs: {
    swiper: thumbsSwiper
  }
});
Touchangle'а номер 45

Допустимый угол (в градусах) для запуска сенсорного перемещения
touchEventsTarget 'контейнер'|'обёртка' "оболочка"

Целевой элемент для прослушивания событий касания. Может быть'container'(для прослушивания событий касания на слайдере) или'wrapper'(для прослушивания событий касания на оболочке слайдера)
touchMoveStopPropagation логическое значение ложь

Если эта функция включена, то распространение события «касание» будет остановлено
Сенсорное управЛение номер 1

Коэффициент соприкосновения
touchReleaseOnEdges логическое значение ложь

Включите отработку событий касания в крайних положениях ползунка (начало, конец), чтобы обеспечить дальнейшую прокрутку страницы. Эта функция работает только с событиями касания (а не с событиями указателя), поэтому она будет работать на устройствах iOS/Android и не будет работать на устройствах Windows с событиями указателя. Такжеthresholdпараметр должен быть установлен на0
touchStartForcePreventDefault логическое значение ложь

Принудительно всегда предотвращать событие по умолчанию дляtouchstart(pointerdown)
touchStartPreventDefault логическое значение верно

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

Если включено (по умолчанию) и параметры элементов навигации передаются в виде строки (например,".pagination"), то Swiper сначала будет искать такие элементы среди дочерних элементов. Применяется для нумерации страниц, кнопок «предыдущая»/«следующая» и элементов полосы прокрутки
Обновите размер окна логическое значение верно

Swiper будет пересчитывать положение слайдов при изменении размера окна (ориентации)
url нулевая|строка null

Требуется для активного обнаружения слайдов при рендеринге на стороне сервера и включенной истории
Пользовательский агент нулевая|строка null

строка userAgent. Требуется для определения браузера/устройства при рендеринге на стороне сервера
виртуальный Любой

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

const swiper = new Swiper('.swiper', {
  virtual: {
    slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5'],
  },
});
Виртуальный перевод логическое значение ложь

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

При включении Swiper будет отключён и скроет кнопки навигации, если для скольжения недостаточно слайдов.
watchSlidesProgress логическое значение ложь

Включите эту функцию, чтобы рассчитать прогресс и видимость каждого слайда (слайды в области просмотра будут иметь дополнительный класс видимости)
ширина нулевой|номер null

Ширина Swiper (в пикселях). Параметр позволяет задать ширину Swiper. Полезно только в том случае, если вы инициализируете Swiper, когда он скрыт, а также в средах SSR и Test для правильной инициализации Swiper

Установка этого параметра приведет к тому, что Swiper перестанет реагировать
КЛАСС -оболочка строка "swiper-оболочка"

Имя CSS-класса оболочки слайдов

При изменении классов вам также потребуется изменить CSS Swiper, чтобы отразить изменения в классах

Не поддерживается в Swiper React / Vue
масштабирование Любой

Включает функцию масштабирования. Объект с параметрами масштабирования или логическое значениеtrueдля включения с настройками по умолчанию

const swiper = new Swiper('.swiper', {
  zoom: {
    maxRatio: 5,
  },
});

Методы и свойства

После инициализации Slider мы получаем его инициализированный экземпляр в переменной (например, переменнаяswiperв приведённом выше примере) с полезными методами и свойствами:

Свойства
swiper.a11y Любой
swiper.activeIndex номер

Индексный номер текущего активного слайда

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

Отключите / включите возможность перехода к следующим слайдам, присвоивfalse/trueэтому свойству
swiper.allowSlidePrev логическое значение

Отключите / включите возможность перехода к предыдущим слайдам, присвоивfalse/trueэтому свойству
swiper.allowTouchMove логическое значение

Отключите / включите возможность перемещать ползунок, захватив его мышью или коснувшись пальцем (на сенсорных экранах), назначивfalse/trueдля этого свойства
swiper.анимация логическое значение

trueесли swiper находится на переходном этапе
swiper.автозапуск Любой
swiper.cardэффект Любой
swiper.clickedIndex номер

Индексный номер последнего нажатого слайда
swiper.clickedSlide HTMLЭлемент

Ссылка на слайд, на который щелкнули последним (HTMLElement)
swiper.контроллер Любой
swiper.coverflowEffect Любой
swiper.creativeffect Любой
swiper.cubeEffect Любой
swiper.defaults Любой

Параметры Swiper по умолчанию
swiper.el HTMLЭлемент

HTML-элемент контейнера слайдера
swiper.extendedDefaults Любой

Объект с глобальными расширенными опциями Swiper
swiper.fadeEffect Любой
swiper.flipEffect Любой
swiper.свободный режим Любой
swiper.хэшнавигация Любой
swiper.height номер

Высота контейнера
swiper.история Любой
swiper.isBeginning логическое значение

trueесли ползунок находится в крайнем левом/верхнем положении
swiper.isEnd логическое значение

trueесли ползунок находится в крайнем «правом»/«нижнем» положении
swiper.isLocked логическое значение

trueесли слайд «заблокирован» (с помощьюwatchOverflow) и слайды не могут быть, например, когда количество слайдов меньше, чем количество просмотров
swiper.клавиатура Любой
swiper.колесо мыши Любой
swiper.навигация Любой
swiper.originalParams Любой

Объект с исходными параметрами инициализации
swiper.разбивка на страницы Любой
swiper.параллакс Любой
swiper.параметры Любой

Объект с переданными параметрами инициализации
swiper.Предыдущий индекс номер

Индексный номер ранее активного слайда
swiper.прогресс номер

Текущий прогресс перевода оболочки (с 0 на 1)
swiper.realIndex номер

Индексируйте количество активных в данный момент слайдов с учетом переставленных слайдов в режиме цикла
swiper.полоса прокрутки Любой
swiper.слайды HTMLЭлемент[]

Массив HTML-элементов slides. Чтобы получить конкретный HTMLЭлемент slide, используйтеswiper.slides[1]
swiper.snapGrid номер []

Скользит по сетке привязки
swiper.snapIndex номер

Индексный номер текущей оснасткиsnapGrid
swiper.swipeDirection 'предыдущая'|'следующая'

Направление скольжения
swiper.thumbs Любой
swiper.касания объект

Объект со следующими свойствами события касания:

  • swiper.touches.startX
  • swiper.touches.startY
  • swiper.touches.currentX
  • swiper.touches.currentY
  • swiper.touches.diff
swiper.translate номер

Текущее значение wrapper translate
swiper.virtual Любой
swiper.width номер

Ширина контейнера
swiper.wrapperEl HTMLЭлемент

HTML-элемент-оболочка
swiper.zoom Любой
Методы
swiper.attachEvents()

Снова подключите все прослушиватели событий
swiper.changeDirection(направление,требуется обновление)

Изменяет направление ползунка с горизонтального на вертикальное и обратно.

  • направление—'горизонтальное'|'вертикальное'— новое направление. Если не указано, то автоматически изменится на противоположное направление
  • needUpdate—логическое значение— вызовет функцию swiper.update(). По умолчанию true
swiper.changeLanguageDirection(направление)

Изменяет язык слайдера

  • направление—'rtl'|'ltr'— новое направление. Должно быть `rtl` или `ltr`
swiper.destroy(удаление,чистые стили)

Уничтожьте экземпляр слайдера и отсоедините все прослушиватели событий

  • deleteInstance—логическое значение— установите значение false (по умолчанию оно равно true), чтобы не удалять экземпляр Swiper
  • cleanStyles—логическое значение— установите значение true (по умолчанию оно равно true), и все пользовательские стили будут удалены из слайдов, обертки и контейнера. Полезно, если вам нужно уничтожить Swiper и инициализировать его заново с новыми параметрами или в другом направлении
swiper.detachEvents()

Отсоединить все прослушиватели событий
swiper.отключить()

Отключите Swiper (если он был включён). Когда Swiper будет отключен, он скроет все элементы навигации и не будет реагировать на какие-либо события и взаимодействия
swiper.emit(событие,аргументы)

Событие срабатывания в экземпляре
swiper.enable()

Включить Swiper (если он был отключен)
swiper.extendDefaults(опции)

Расширение глобальных настроек Swiper по умолчанию
swiper.getTranslate()

Получить текущее значение swiper wrapper css3 transform translate
swiper.init(el)

Инициализировать слайдер
swiper.maxTranslate()

Получить текущее максимальное значение перевода
swiper.minTranslate()

Получить текущее минимальное значение перевода
swiper.off(событие,обработчик)

Удалить обработчик событий
swiper.offAny(обработчик)

Удалить прослушиватель событий, который будет запускаться при всех событиях
swiper.on(событие,обработчик)

Добавить обработчик событий
swiper.onAny(обработчик)

Добавьте прослушиватель событий, который будет запускаться при всех событиях
swiper.once(событие,обработчик)

Добавьте обработчик событий, который будет удален после его запуска
swiper.setGrabCursor()

Установить курсор захвата
swiper.setProgress(прогресс,скорость)

Задайте значение прогресса перемещения Swiper (от 0 до 1). Где 0 — начальная позиция (смещение) на первом слайде, а 1 — максимальная позиция (смещение) на последнем слайде

  • прогресс—число— прогресс перевода Swiper (от 0 до 1).
  • скорость-число- Длительность перехода (в мс).
swiper.setTranslate(переводить)

Установите значение translate пользовательского преобразования css3 для swiper wrapper
swiper.slideNext(скорость,обратные вызовы)

Запустите переход к следующему слайду.

  • скорость-число- Длительность перехода (в мс).
  • runCallbacks—логическое значение— установите значение false (по умолчанию оно равно true), и переход не будет генерировать события перехода.
swiper.slidePrev(скорость,обратные вызовы)

Запустите переход к предыдущему слайду.

  • скорость-число- Длительность перехода (в мс).
  • runCallbacks—логическое значение— установите значение false (по умолчанию оно равно true), и переход не будет генерировать события перехода.
swiper.slideReset(скорость,обратные вызовы)

Сбросьте положение слайдера до текущего активного слайда на время, равное параметру «скорость».

  • скорость-число- Длительность перехода (в мс).
  • runCallbacks—логическое значение— установите значение false (по умолчанию оно равно true), и переход не будет генерировать события перехода.
swiper.slideTo(индекс,скорость,обратные вызовы)

Выполните переход к слайду с номером, равным параметру «index», в течение времени, равного параметру «speed».

  • index-число- порядковый номер слайда.
  • скорость-число- Длительность перехода (в мс).
  • runCallbacks—логическое значение— установите значение false (по умолчанию оно равно true), и переход не будет генерировать события перехода.
swiper.slideToClosest(скорость,обратные вызовы)

Сбросьте положение ползунка до ближайшей точки перехода/фиксации на время, равное параметру «скорость».

  • скорость-число- Длительность перехода (в мс).
  • runCallbacks—логическое значение— установите значение false (по умолчанию оно равно true), и переход не будет генерировать события перехода.
swiper.slideToLoop(индекс,скорость,выполнить обратные вызовы)

Делает то же самое, что и .slideTo, но для случая, когда используется с включённым циклом. Таким образом, этот метод будет переходить к слайдам с realIndex, соответствующим переданному индексу

  • index-число- порядковый номер слайда.
  • скорость-число- Длительность перехода (в мс).
  • runCallbacks—логическое значение— установите значение false (по умолчанию оно равно true), и переход не будет генерировать события перехода.
swiper.slidesPerViewDynamic()

Получите динамически рассчитываемое количество слайдов на просмотр, полезно только в том случае, если для slidesPerView установлено значениеauto
swiper.translateTo(translate,скорость,запускать обратные вызовы,переводить границы)

Анимируйте пользовательское значение преобразования CSS3 для обёртки Swiper

  • translate-число- Перевод значения (в пикселях)
  • скорость-количество- Длительность перехода (в мс)
  • runCallbacks—логическое значение— установите значение false (по умолчанию оно равно true), и переход не будет генерировать события перехода
  • translateBounds—логическое значение— установите значение false (по умолчанию оно равно true), и значение перехода может выходить за пределы минимального и максимального значений translate
swiper.unsetGrabCursor()

Сбросить курсор захвата
swiper.update()

Вы должны вызывать его после добавления/удаления слайдов вручную, после их скрытия/показа или выполнения любых пользовательских изменений DOM с помощью Swiper. Этот метод также включает в себя вызов следующих методов, которые можно использовать отдельно:
swiper.updateAutoHeight(скорость)

Заставьте свипер обновлять высоту (при включенном параметре autoHeight) в течение времени, равного параметру «скорость»

  • скорость-число- Длительность перехода (в мс).
swiper.UpdateProgress()

пересчитать прогресс swiper
swiper.updateSize()

пересчитайте размер контейнера swiper
swiper.updateSlides()

пересчитать количество слайдов и их смещения. Полезно после добавления/удаления слайдов с помощью JavaScript
swiper.updateSlidesClasses()

обновите активные / предыдущие / следующие классы на слайдах и маркерах
swiper.use(модули)

Устанавливает модули на Swiper во время выполнения.

Мероприятия

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

  1. Использованиеonпараметра при инициализации swiper:

    const swiper = new Swiper('.swiper', {
  // ...
  on: {
    init: function () {
      console.log('swiper initialized');
    },
  },
});

  2. Использованиеonметода после инициализации swiper.

    const swiper = new Swiper('.swiper', {
  // ...
});
swiper.on('slideChange', function () {
  console.log('slide changed');
});
Пожалуйста, обратите внимание, чтоthisключевое слово в обработчике событий всегда указывает на экземпляр Swiper
Имя Аргументы Описание
activeIndexChange (swiper)

Событие будет срабатывать при активном изменении индекса
afterInit (swiper)

Событие будет запущено сразу после инициализации
beforeDestroy (swiper)

Событие будет запущено непосредственно перед уничтожением Swiper
Перед запуском (swiper)

Событие будет запущено непосредственно перед инициализацией
beforeLoopFix (swiper)

Событие будет запущено непосредственно перед "исправлением цикла"
Перед обработкой (swiper)

Событие будет запущено перед обработчиком изменения размера
beforeSlideChangeStart (swiper)

Событие будет запущено до начала перехода к смене слайда
Перед началом перехода (swiper, скорость, внутренний)

Событие будет запущено до начала перехода
точка останова (swiper, параметры точки останова)

Событие будет запущено при изменении точки останова
Измененное направление (swiper)

Событие будет запущено при изменении направления
нажмите (swiper, событие)

Событие будет запущено, когда пользователь нажмёт/коснётся Swiper. Получаетpointerupсобытие в качестве аргумента.
уничтожить (swiper)

Событие будет запущено при уничтожении swiper
Двойной щелчок (swiper, событие)

Событие будет запущено, когда пользователь дважды щелкнет по Swiper
Двойной щелчок (swiper, событие)

Событие будет запущено, когда пользователь дважды коснётся контейнера Swiper. Получаетpointerupсобытие в качестве аргумента
fromEdge (swiper)

Событие будет запущено, когда Swiper перейдет из начальной или конечной позиции
инициализация (swiper)

Сработал сразу после инициализации Swiper.

Обратите внимание, что синтаксисswiper.on('init')будет работать только в том случае, если вы зададите параметрinit: false

const swiper = new Swiper('.swiper', {
  init: false,
  // other parameters
});
swiper.on('init', function() {
 // do something
});
// init Swiper
swiper.init();

// Otherwise use it as the parameter:
const swiper = new Swiper('.swiper', {
  // other parameters
  on: {
    init: function () {
      // do something
    },
  }
});
блокировка (swiper)

Событие будет запущено, когда swiper заблокирован (когдаwatchOverflowвключено)
Исправление цикла (swiper)

Событие будет запущено после "исправления цикла"
Мгновенный скачок (swiper)

Событие будет запущено при отскоке импульса
Обновление наблюдения (swiper)

Событие будет запущено, если observer включен и он обнаруживает мутации DOM
изменение ориентации (swiper)

Событие будет запущено при изменении ориентации (например, альбомная -> портретная)
прогресс (swiper, прогресс)

Событие будет запущено при изменении прогресса Swiper. В качестве аргументов оно получает прогресс, который всегда находится в диапазоне от 0 до 1
Начало работы (swiper)

Событие будет запущено, когда Swiper достигнет своего начала (начальной позиции)
reachEnd (swiper)

Событие будет запущено, когда Swiper достигнет последнего слайда
Реальный обмен данными (swiper)

Событие будет запущено при реальном изменении индекса
изменение размера (swiper)

Событие будет запущено при изменении размера окна непосредственно перед обработкой Swiper onresize
setTransition (swiper, переход)

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

Событие будет запущено, когда обёртка Swiper изменит своё положение. Получает текущее значение перевода в качестве аргумента
Изменение слайдов (swiper)

Событие будет запущено при изменении текущего активного слайда
slideChangeTransitionEnd (swiper)

Событие будет запущено после анимации другого слайда (следующего или предыдущего).
slideChangeTransitionStart (swiper)

Событие будет запущено в начале перехода на другой слайд (следующий или предыдущий).
slideNextTransitionEnd (swiper)

То же, что и «slideChangeTransitionEnd», но только для направления «вперёд»
slideNextTransitionStart (swiper)

То же, что и «slideChangeTransitionStart», но только для направления «вперёд»
slidePrevTransitionEnd (swiper)

То же, что и «slideChangeTransitionEnd», но только для «обратного» направления
slidePrevTransitionStart (swiper)

То же, что и «slideChangeTransitionStart», но только в направлении «назад»
slideResetTransitionEnd (swiper)

Событие будет запущено в конце анимации при переходе на следующий слайд
slideResetTransitionStart (swiper)

Событие будет запущено в начале анимации перехода на текущий слайд
sliderFirstMove (swiper, событие)

Событие будет запущено при первом касании / перетаскивании
sliderMove (swiper, событие)

Событие будет запущено, когда пользователь коснётся Swiper и проведёт по нему пальцем. Получаетpointermoveсобытие в качестве аргумента.
slidesGridLengthChange (swiper)

Событие будет запущено при изменении сетки слайдов
Изменение длины слайда (swiper)

Событие будет запущено при изменении количества слайдов
Обновлено слайд-шоу (swiper)

Событие будет запущено после того, как слайды и их размеры будут рассчитаны и обновлены
snapGridLengthChange (swiper)

Событие будет запущено при изменении привязки сетки
snapIndexChange (swiper)

Событие будет запущено при изменении индекса привязки
нажмите (swiper, событие)

Событие будет запущено, когда пользователь нажмёт/коснётся Swiper. Получаетpointerupсобытие в качестве аргумента.
toEdge (swiper)

Событие будет запущено, когда Swiper перейдет в начальную или конечную позицию
touchEnd (swiper, событие)

Событие будет запущено, когда пользователь отпустит Swiper. Получаетpointerupсобытие в качестве аргумента.
touchMove (swiper, событие)

Событие будет запущено, когда пользователь коснётся Swiper и проведёт по нему пальцем. Получаетpointermoveсобытие в качестве аргумента.
touchMoveOpposite (swiper, событие)

Событие будет запущено, когда пользователь коснётся Swiper и проведёт пальцем в направлении, противоположном параметру направления. Получаетpointermoveсобытие в качестве аргумента.
Сенсорный запуск (swiper, событие)

Событие будет запущено, когда пользователь коснётся Swiper. Получаетpointerdownсобытие в качестве аргументов.
Завершение перехода (swiper)

Событие будет запущено после перехода.
Начало перехода (swiper)

Событие будет запущено в начале перехода.
разблокировать (swiper)

Событие будет запущено, когда swiper будет разблокирован (когдаwatchOverflowвключено)
Обновить (swiper)

Событие будет запущено после вызова swiper.update()

Модули

Имя Тип По умолчанию Описание
Отключенный класс строка "swiper-кнопка-отключена"

Имя класса CSS добавляется к кнопке навигации, когда она становится отключенной
включен логическое значение

Логическое свойство для использования с точками останова, чтобы включить/отключить навигацию по определённым точкам останова
Скрытый класс строка "swiper-кнопка-скрыта"

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

Переключать видимость кнопок навигации после нажатия на контейнер слайдера
Класс блокировки строка "swiper-блокировка кнопок"

Имя класса CSS добавляется к кнопке навигации, когда она отключена
navigationDisabledClass строка "swiper-навигация-отключена"

Имя CSS-класса добавлено в контейнер swiper, когда навигация отключена точкой останова
nextEl Любой null

Строка с CSS-селектором или HTML-элементом элемента, который будет работать как кнопка «Далее» после нажатия на неё
превЕл Любой null

Строка с CSS-селектором или HTML-элементом элемента, который будет работать как кнопка «предыдущая» после нажатия на неё
Свойства
swiper.nextEl HTMLЭлемент

HTMLЭлемент навигационной кнопки "далее"
swiper.превЕл HTMLЭлемент

HTMLЭлемент кнопки навигации "предыдущий"
Методы
swiper.уничтожить()

Уничтожить навигацию
swiper.init()

Инициализация навигации
swiper.update()

Обновить состояние кнопок навигации (включено / отключено)
Имя Аргументы Описание
Скрытая навигация (swiper)

Событие будет запущено при скрытии навигации
navigationNext (swiper)

Событие будет запущено при следующем нажатии кнопки навигации
Руководство по навигации (swiper)

Событие будет запущено при нажатии предыдущей кнопки навигации
Навигационное шоу (swiper)

Событие будет запущено при показе навигации

 
 {
  --swiper-navigation-size: 44px;
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 10px;
  --swiper-navigation-color: var(--swiper-theme-color);
}

Разбивка на страницы

Параметры разбивки на страницы

Имя Тип По умолчанию Описание
bulletActiveClass строка "swiper-разбивка на страницы-маркер-активен"

Имя CSS-класса для маркера разбиения на страницы, активного в данный момент
Маркированный класс строка "swiper-разбивка на страницы-маркер"

Имя CSS-класса для отдельного маркера разбивки на страницы
bulletElement строка "диапазон"

Определяет, какой HTML-тег будет использоваться для отображения одиночной кнопки постраничной навигации. Только для'bullets'типа постраничной навигации.
кликабельный логическое значение ложь

Еслиtrueто нажатие на кнопку разбивки на страницы приведёт к переходу на соответствующий слайд. Только для типа разбивки на страницы с помощью маркеров
clickableClass строка "swiper-разбивка на страницы-кликабельный"

Имя CSS-класса устанавливается в разбивку на страницы, когда оно доступно для кликабельности
Текущий класс строка "swiper-разбивка на страницы-текущая"

Имя CSS-класса элемента с текущим активным индексом в «фрагментарной» разбивке на страницы
Динамические пакеты логическое значение ложь

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

Количество основных маркеров, видимых приdynamicBulletsвключении.
el Любой null

Строка с CSS-селектором или HTML-элементом контейнера с разбиением на страницы
включен логическое значение

Логическое свойство для использования с точками останова, чтобы включить/отключить разбиение на страницы в определённых точках останова
formatFractionCurrent функция (номер)

отформатируйте дробную часть текущего номера. Функция получает текущий номер, и вам нужно вернуть отформатированное значение
formatFractionTotal функция (номер)

отформатируйте общее количество разбиений на страницы. Функция получает общее количество, и вам нужно вернуть отформатированное значение
Скрытый класс строка "swiper-разбиение на страницы-скрыто"

Имя класса CSS для разбивки на страницы, когда он становится неактивным
Скрытый клик логическое значение верно

Переключение (скрытие/показ) видимости контейнера разбивки на страницы после нажатия на контейнер слайдера
Горизонтальный класс строка "swiper-разбивка на страницы-горизонтальная"

Имя CSS-класса, заданное для разбиения на страницы в горизонтальном Swiper
Класс блокировки строка 'swiper-блокировка разбивки на страницы'

Имя класса CSS устанавливается в разбивку на страницы, когда оно отключено
Модифицирующий класс строка 'swiper-разбивка на страницы-'

Начало имени CSS-класса модификатора, который будет добавлен к разбивке на страницы в зависимости от параметров
paginationDisabledClass строка "swiper-разбивка на страницы-отключена"

Имя CSS-класса, добавляемое к контейнеру Swiper и элементу разбивки на страницы, когда разбивка на страницы отключена из-за точки останова
progressbarFillClass строка "swiper-разбивка на страницы-панель выполнения-заполнение"

Имя CSS-класса элемента заполнения панели прогресса разбивки на страницы
progressbaroposite логическое значение ложь

Делает индикатор выполнения противоположным параметру Swiperdirection: вертикальный индикатор выполнения для горизонтального направления Swiper и горизонтальный индикатор выполнения для вертикального направления Swiper
progressbarOppositeClass строка «swiper-pagination-progressbar-opposite»

Имя CSS-класса панели прогресса разбивки на страницы напротив
renderBullet функция (индекс,имя_класса)

Этот параметр позволяет полностью настроить маркеры нумерации страниц. Вам нужно передать сюда функцию, которая принимаетindexколичество маркеров нумерации страниц и имя класса необходимого элемента (className). Только для'bullets'типа нумерации

const swiper = new Swiper('.swiper', {
  //...
  renderBullet: function (index, className) {
    return '<span class="' + className + '">' + (index + 1) + '</span>';
  }
});
Настройка визуализации функция (swiper,текущий,общий)

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

const swiper = new Swiper('.swiper', {
  //...
  renderCustom: function (swiper, current, total) {
    return current + ' of ' + total;
  }
});
Преобразование рендеринга функция (currentClass,totalClass)

Этот параметр позволяет настроить «дробную» нумерацию страниц в HTML. Только для'fraction'типа нумерации

const swiper = new Swiper('.swiper', {
  //...
  renderFraction: function (currentClass, totalClass) {
      return '<span class="' + currentClass + '"></span>' +
              ' of ' +
              '<span class="' + totalClass + '"></span>';
  }
});
renderProgressbar функция(progressbarFillClass)

Этот параметр позволяет настроить «прогрессивную» разбивку на страницы. Только для'progress'типа разбивки на страницы

const swiper = new Swiper('.swiper', {
  //...
  renderProgressbar: function (progressbarFillClass) {
      return '<span class="' + progressbarFillClass + '"></span>';
  }
});
Общий класс строка "swiper-разбивка на страницы-всего"

Имя CSS-класса элемента с общим количеством «отрывков» в «дробной» нумерации
Тип 'индикатор выполнения'|'маркеры'|'дробь'|'пользовательский' "пули"

Строка с типом нумерации страниц. Может быть'bullets','fraction','progressbar'или'custom'
Вертикальный класс строка "swiper-разбивка на страницы-по вертикали"

Имя CSS-класса, заданное для разбиения на страницы в вертикальном Swiper

Методы разбивки на страницы

Свойства
swiper.пули HTMLЭлемент[]

Массив HTML-элементов маркеров разбивки на страницы. Чтобы получить конкретный HTML-элемент слайда, используйтеswiper.pagination.bullets[1].
swiper.el HTMLЭлемент

HTMLЭлемент элемента контейнера для разбивки на страницы
Методы
swiper.уничтожить()

Уничтожить разбивку на страницы
swiper.init()

Инициализировать разбивку на страницы
swiper.render()

Визуализировать макет разбивки на страницы
swiper.update()

Обновить состояние разбивки на страницы (включено / отключено / активно)

События разбивки на страницы

Имя Аргументы Описание
Отображение страниц (swiper)

Событие будет запущено при разбиении на страницы скрыть
paginationRender (swiper, paginationEl)

Событие будет запущено после отображения разбивки на страницы
Отображение страниц (swiper)

Событие будет запущено при разбиении на страницы show
Обновление страницы (swiper, paginationEl)

Событие будет запущено при обновлении разбивки на страницы

Пользовательские свойства CSS Разбиения на страницы

 {
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0, 0, 0, 0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
}

Полоса прокрутки

Параметры полосы прокрутки

Имя Тип По умолчанию Описание
Класс перетаскивания строка "swiper-полоса прокрутки-перетаскивание"

CSS-класс перетаскиваемого элемента полосы прокрутки
Размер перетаскивания номер|"авто" "авто"

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

Установите значениеtrueдля включения перетаскивания полосы прокрутки, что позволит вам управлять положением ползунка
el Любой null

Строка с CSS-селектором или HTML-элементом контейнера с полосой прокрутки.
включен логическое значение

Логическое свойство для использования с точками останова для включения/отключения полосы прокрутки в определённых точках останова
скрыть логическое значение верно

Автоматически скрывает полосу прокрутки после взаимодействия с пользователем
Горизонтальный класс строка "swiper-полоса прокрутки-горизонтальная"

Имя класса CSS, заданное как полоса прокрутки в горизонтальном Swiper
Класс блокировки строка "swiper-полоса прокрутки-блокировка"

Элемент полосы прокрутки - дополнительный CSS-класс, когда он отключен
scrollbarDisabledClass строка "swiper-полоса прокрутки-отключена"

Имя CSS-класса, добавляемого к контейнеру Swiper и элементу полосы прокрутки, когда полоса прокрутки отключена в точке останова
snapOnRelease логическое значение ложь

Установите значениеtrueдля привязки положения ползунка к слайдам при отпускании полосы прокрутки
Вертикальный класс строка "swiper-полоса прокрутки-вертикальная"

Имя класса CSS, заданное как полоса прокрутки в вертикальном Swiper

Методы полосы прокрутки

Свойства
swiper.dragEl HTMLЭлемент

HTMLЭлемент перетаскиваемого элемента обработчика полосы прокрутки
swiper.el HTMLЭлемент

HTMLЭлемент элемента контейнера полосы прокрутки
Методы
swiper.уничтожить()

Уничтожить полосу прокрутки
swiper.init()

Инициализировать полосу прокрутки
swiper.setTranslate()

Обновляет перевод полосы прокрутки
swiper.updateSize()

Обновляет дорожку полосы прокрутки и размеры обработчика

События полосы прокрутки

Имя Аргументы Описание
scrollbarDragEnd (swiper, событие)

Событие будет запущено при перетаскивании перетаскиваемой полосы прокрутки
scrollbarDragMove (swiper, событие)

Событие будет запущено при перетаскивании полосы прокрутки drag move
scrollbarDragStart (swiper, событие)

Событие будет запущено при запуске перетаскиваемой полосы прокрутки drag start

Пользовательские свойства CSS полосы прокрутки

 {
  --swiper-scrollbar-border-radius: 10px;
  --swiper-scrollbar-top: auto;
  --swiper-scrollbar-bottom: 4px;
  --swiper-scrollbar-left: auto;
  --swiper-scrollbar-right: 4px;
  --swiper-scrollbar-sides-offset: 1%;
  --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
  --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
  --swiper-scrollbar-size: 4px;
}

Автоматическое воспроизведение

Параметры автозапуска

Имя Тип По умолчанию Описание
задержка номер 3000

Задержка между переходами (в мс). Если этот параметр не указан, автоматическая игра будет отключена

Если вам нужно указать разную задержку для определённых слайдов, вы можете сделать это с помощью атрибутаdata-swiper-autoplay(в миллисекундах) на слайде.

<!-- hold this slide for 2 seconds -->
<div class="swiper-slide" data-swiper-autoplay="2000">
отключениевзаимодействия логическое значение верно

Установите значениеfalseи автозапуск не будет отключаться после взаимодействия с пользователем (пролистывания), он будет запускаться каждый раз после взаимодействия
pauseOnMouseEnter логическое значение ложь

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

Включает автозапуск в обратном направлении
stopOnLastSlide логическое значение ложь

Включите этот параметр, и автоматическое воспроизведение будет остановлено, когда вы дойдёте до последнего слайда (не действует в режиме повтора)
Ожидание перехода логическое значение верно

При включённой функции автозапуска будет ожидаться завершение перехода оболочки. Можно отключить в случае использования Virtual Translate, когда ваш слайдер может не иметь перехода

Методы автозапуска

Свойства
swiper.приостановлено логическое значение

Приостановлено ли автозапуск
swiper.running логическое значение

Включено ли и работает ли автозапуск
swiper.TimeLeft номер

Если автовоспроизведение приостановлено, отображается оставшееся время (в мс) до перехода к следующему слайду
Методы
swiper.pause()

Приостановить автозапуск
swiper.resume()

Возобновить автозапуск
swiper.start()

Запустить автозапуск
swiper.stop()

Остановить автозапуск

Автоматическое воспроизведение событий

Имя Аргументы Описание
автоматическое воспроизведение (swiper)

Событие будет запущено при смене слайда с помощью автозапуска
Автозапуск (swiper)

Событие будет запущено при приостановке автозапуска
Автоматическое воспроизведение (swiper)

Событие будет запущено при возобновлении автозапуска
Автозапуск (swiper)

Событие будет запущено при запуске автозапуска
Автоматическая остановка воспроизведения (swiper)

Событие будет запущено при остановке автозапуска
Выбор времени автозапуска (swiper, временное отклонение, процент)

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

Бесплатный режим

Параметры свободного режима

Имя Тип По умолчанию Описание
включен логическое значение ложь

Включен ли бесплатный режим
Минимальная скорость номер 0.02

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

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

Установите значениеfalse, если вы хотите отключить отскок импульса в бесплатном режиме
Мгновенное переключение номер 1

Более высокое значение создает больший эффект отскока импульса
Мгновенный анализ номер 1

Более высокое значение создает большее расстояние импульса после того, как вы отпустите ползунок
Мгновенная скорость номер 1

Более высокое значение приводит к увеличению скорости вращения после отпускания ползунка
липкий логическое значение ложь

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

Сетка

Параметры сетки

Имя Тип По умолчанию Описание
заполнение 'строка'|'столбец' "столбец"

Может быть'column'или'row'. Определяет, как слайды должны заполнять строки, по столбцам или по строкам

при использовании в режиме повтора убедитесь, что количество слайдов указано в требованиях к режиму повтора, или включите параметрloopAddBlankSlides
строки номер 1

Количество строк слайдов для многострочной компоновки

Манипуляции

Удалить
Добавить

Модуль манипуляций добавляет полезные методы Swiper для управления слайдами. Его имеет смысл использовать только с версией Swiper Core, он не предназначен для использования с Swiper React или Vue.

Методы манипулирования

Методы
swiper.addSlide(индекс,слайды)

Добавьте новые слайды в нужный индекс. Слайды могут быть HTMLElement или строкой HTML с новым слайдом или массивом таких слайдов, например:

addSlide(1, '<div class="swiper-slide">Slide 10"</div>')

addSlide(1, [
 '<div class="swiper-slide">Slide 10"</div>',
 '<div class="swiper-slide">Slide 11"</div>'
]);
swiper.appendSlide(слайды)

Добавьте новые слайды в конец. Слайды могут быть HTMLElement или HTML-строкой с новым слайдом или массивом таких слайдов, например:

appendSlide('<div class="swiper-slide">Slide 10"</div>')

appendSlide([
 '<div class="swiper-slide">Slide 10"</div>',
 '<div class="swiper-slide">Slide 11"</div>'
]);
swiper.prependSlide(слайды)

Добавьте новые слайды в начало. Слайды могут быть HTMLElement или строкой HTML с новым слайдом или массивом таких слайдов, например:

prependSlide('<div class="swiper-slide">Slide 0"</div>')

prependSlide([
 '<div class="swiper-slide">Slide 1"</div>',
 '<div class="swiper-slide">Slide 2"</div>'
]);
swiper.removeAllSlides()

Удалить все слайды
swiper.удаляет слайд(slideIndex)

Удалите выбранные слайды. slideIndex может быть числом с индексом слайда для удаления или массивом с индексами.

removeSlide(0); // remove first slide
removeSlide([0, 1]); // remove first and second slides
removeAllSlides();    // Remove all slides

Параллакс

Swiper поддерживает эффекты перехода с эффектом параллакса для вложенных элементов swiper/slides. Поддерживаются два типа элементов с эффектом параллакса:

  • Прямые дочерние элементыswiper. Эффект параллакса для таких элементов будет зависеть от общего положения ползунка. Полезно для параллакс-фонов
  • Вложенные элементы слайдов. Эффект параллакса для таких элементов будет зависеть от хода слайда

Чтобы включить эффект параллакса, необходимо инициализировать Swiper с помощью переданного параметраparallax:trueи добавить один из следующих (или их сочетание) атрибутов к нужным элементам:

  • data-swiper-parallax- включить преобразование-перевод параллаксного перехода. Этот атрибут может принимать:
    • number- значение в пикселях (как для заголовка, подзаголовка в примере выше) для перемещения элемента в зависимости от прогресса. В этом случае такой элемент будет перемещён на ± это значение в пикселях в зависимости от положения слайда (следующий или предыдущий)
    • percentage- (как для «параллакс-фона») для перемещения элемента в зависимости от прогресса и его размера. В этом случае такой элемент будет перемещён на ± этот процент от его размера (ширины в горизонтальном направлении и высоты в вертикальном направлении) в зависимости от положения слайда (следующий или предыдущий). Таким образом, если ширина элемента составляет 400 пикселей, а вы указали data-swiper-parallax = «50%», то он будет перемещён на ± 200 пикселей
  • data-swiper-parallax-xто же самое, но для направления по оси x
  • data-swiper-parallax-yто же самое, но для направления по оси y
  • data-swiper-parallax-scale— коэффициент масштабирования элемента параллакса, когда он находится в «неактивном» (не на активном слайде) состоянии
  • data-swiper-parallax-opacity— непрозрачность элемента параллакса, когда он находится в «неактивном» (не на активном слайде) состоянии
  • data-swiper-parallax-duration- настраиваемая продолжительность перехода для элементов parallax
<div class="swiper">
  <!-- Parallax background element -->
  <div
    class="parallax-bg"
    style="background-image:url(path/to/image.jpg)"
    data-swiper-parallax="-23%"
  ></div>
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <!-- Each slide has parallax title -->
      <div class="title" data-swiper-parallax="-100">Slide 1</div>
      <!-- Parallax subtitle -->
      <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
      <!-- And parallax text with custom transition duration -->
      <div
        class="text"
        data-swiper-parallax="-300"
        data-swiper-parallax-duration="600"
      >
        <p>Lorem ipsum dolor sit amet, ...</p>
      </div>
      <!-- Opacity parallax -->
      <div data-swiper-parallax-opacity="0.5">I will change opacity</div>
      <!-- Scale parallax -->
      <div data-swiper-parallax-scale="0.15">I will change scale</div>
    </div>
    ...
  </div>
</div>

Параметры Параллакса

Имя Тип По умолчанию Описание
включен логическое значение ложь

Включите, если вы хотите использовать «параллаксовые» элементы внутри слайдера

Отложенная загрузка

Начиная с версии 9 у Swiper нет специального API для отложенной загрузки, так как он полагается на встроенную функцию отложенной загрузки браузера. Чтобы использовать отложенную загрузку, нам нужно просто установитьloading="lazy"для изображений и добавить элемент предварительной загрузки:

<div class="swiper">
  <div class="swiper-wrapper">
    <!-- Lazy image -->
    <div class="swiper-slide">
      <img src="path/to/picture-1.jpg" loading="lazy" />
      <div class="swiper-lazy-preloader"></div>
    </div>

    <!-- Lazy image with srcset -->
    <div class="swiper-slide">
      <img
        src="path/to/logo-small.png"
        srcset="path/to/logo-large.png 2x"
        loading="lazy"
      />
      <div class="swiper-lazy-preloader"></div>
    </div>
  </div>
</div>

Как вы видите:

  • Ленивое изображение должно иметьloading="lazy"атрибут
  • Добавьте на слайд анимированный индикатор загрузки, который будет удалён автоматически после загрузки изображения:
<div class="swiper-lazy-preloader"></div>

Или белый для темного макета:

<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>

Эффект затухания

Чтобы это сработало, убедитесь, что параметрeffectустановлен на'fade'

Обратите внимание, чтоcrossFadeследует заменить наtrue, чтобы не видеть содержимое позади или под ним.

Параметры эффекта затухания

Имя Тип По умолчанию Описание
Перекрестное затухание логическое значение ложь

Позволяет слайдам перекрестно исчезать

Эффект Coverflow

Чтобы это сработало, убедитесь, что параметрeffectустановлен на'coverflow'

Параметры эффекта Coverflow

Имя Тип По умолчанию Описание
глубина номер 100

Смещение глубины в пикселях (слайды перемещаются по оси Z)
модификатор номер 1

Множитель эффекта
вращать номер 50

Поворот слайда в градусах
масштабирование номер 1

Эффект масштабирования слайдов
Тени для слайдов логическое значение верно

Позволяет создавать тени на слайдах
растягивание номер 0

Растянуть пространство между слайдами (в пикселях)

Эффект переворота

Чтобы это сработало, убедитесь, что параметрeffectустановлен на'flip'

Параметры эффекта переворота

Имя Тип По умолчанию Описание
Ограничение скорости логическое значение верно

Ограничение вращения краевых слайдов
Тени для слайдов логическое значение верно

Позволяет создавать тени на слайдах

Эффект куба

Чтобы это сработало, убедитесь, что параметрeffectустановлен на'cube'

Параметры эффекта куба

Имя Тип По умолчанию Описание
тень логическое значение верно

Включает тень основного слайдера
shadowOffset номер 20

Основное смещение тени в пикселях
Масштабирование теней номер 0.94

Коэффициент масштабирования основной тени
Тени для слайдов логическое значение верно

Позволяет создавать тени на слайдах

Эффект карт

Чтобы это сработало, убедитесь, что параметрeffectустановлен на'cards'

Параметры эффекта карт

Имя Тип По умолчанию Описание
perSlideOffset номер 8

Расстояние смещения для каждого слайда (в пикселях)
perSlideRotate номер 2

Угол поворота для каждого слайда (в градусах)
вращать логическое значение верно

Позволяет вращать карты
Тени для слайдов логическое значение верно

Позволяет создавать тени на слайдах

Творческий эффект

Чтобы это сработало, убедитесь, что параметрeffectустановлен на'creative'

Параметры креативного эффекта

Имя Тип По умолчанию Описание
limitProgress номер 1

Ограничьте прогресс/смещение количеством боковых слайдов. Если1, то все слайды после предыдущего/следующего будут иметь одинаковое состояние. Если2, то все слайды после второго активного до/после будут иметь одинаковое состояние и т. д.
Далее creativeffecttransform

Следующие преобразования слайдов.

{
  // Array with translate X, Y and Z values
  translate: (string | number)[];
  // Array with rotate X, Y and Z values (in deg)
  rotate?: number[];
  // Slide opacity
  opacity?: number;
  // Slide scale
  scale?: number;
  // Enables slide shadow
  shadow?: boolean;
  // Transform origin, e.g. `left bottom`
  origin?: string;
}
перспектива логическое значение верно

Включите этот параметр, если ваши пользовательские преобразования требуют 3D-преобразований (translateZ,rotateX,rotateY)
Пред. creativeffecttransform

Предыдущие преобразования слайдов. Принимает объект следующего типа:

{
  // Array with translate X, Y and Z values
  translate: (string | number)[];
  // Array with rotate X, Y and Z values (in deg)
  rotate?: number[];
  // Slide opacity
  opacity?: number;
  // Slide scale
  scale?: number;
  // Enables slide shadow
  shadow?: boolean;
  // Transform origin, e.g. `left bottom`
  origin?: string;
}
Умножитель прогресса номер 1

Позволяет многократно изменять прозрачность слайдов.
shadowPerProgress логическое значение ложь

Разделяет «непрозрачность» тени на каждом слайде в зависимости отlimitProgress(только если включена трансформация теней). Например, при установкеlimitProgress: 2и включенииshadowPerProgressнепрозрачность тени будет равна0.5и1на двух слайдах рядом с активным. Если этот параметр отключен, все слайды, кроме активного, будут иметь тень с непрозрачностью1

Большие пальцы

В дополнение к компонентуControllerSwiper поставляется с компонентом Thumbs, который предназначен для более корректной работы с дополнительным свайпером Thumbs, чем компонент Controller, используемый для синхронизации двух свайперов.

Параметры Thumbs

Имя Тип По умолчанию Описание
autoScrollOffset номер 0

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

При включении может быть активировано несколько миниатюр слайдов
slideThumbActiveClass строка "swiper-slide-thumb-активный"

Дополнительный класс, который будет добавлен к активированному слайду thumbs swiper
swiper Любой null

Экземпляр Swiper, используемый в качестве больших пальцев, или объект с параметрами Swiper для инициализации больших пальцев Swiper
thumbsContainerClass строка "swiper-thumbs"

Дополнительный класс, который будет добавлен в thumbs swiper

Методы Thumbs

Свойства
swiper.swiper Любой

Swiper экземпляр thumbs swiper
Методы
swiper.init()

Инициализировать большие пальцы
swiper.обновление (начальное)

Обновите thumbs

Масштабирование

Swiper поддерживает функцию масштабирования изображений (аналогичную той, что вы видите в iOS при просмотре одной фотографии), когда вы можете увеличить изображение с помощью жеста сжатия или уменьшить/увеличить его двойным нажатием. В этом случае требуется дополнительная настройка:

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="swiper-zoom-container">
        <img src="path/to/image1.jpg" />
      </div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-zoom-container">
        <img src="path/to/image2.jpg" />
      </div>
    </div>
    <div class="swiper-slide">Plain slide with text</div>
    <div class="swiper-slide">
      <!-- Override maxRatio parameter -->
      <div class="swiper-zoom-container" data-swiper-zoom="5">
        <img src="path/to/image1.jpg" />
      </div>
    </div>
  </div>
</div>
  • Все изображения, которые можно увеличивать, должны быть заключены в элемент div с классомswiper-zoom-container.
  • По умолчанию предполагается, что вы увеличиваете масштаб одного из элементовimg,pictureилиcanvas. Если вы хотите увеличить масштаб какого-то другого пользовательского элемента, просто добавьте к нему классswiper-zoom-target. Например: 
    <div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="swiper-zoom-container">
        <!-- custom zoomable element -->
        <div
          class="swiper-zoom-target"
          style="background-image: url(...)"
        ></div>
      </div>
    </div>
  </div>
</div>
  • Вы можете переопределить параметрmaxRatioдля конкретных слайдов, используя атрибутdata-swiper-zoomв контейнере масштабирования.

Параметры масштабирования

Имя Тип По умолчанию Описание
Контейнерный класс строка "swiper-zoom-контейнер"

Имя CSS-класса контейнера масштабирования
Ограниченный исходный размер логическое значение ложь

Если установлено значение true, изображение не будет масштабироваться более чем на 100% от исходного размера
Максимальная скорость номер 3

Максимальный множитель масштабирования изображения
Минимизация номер 1

Минимальный множитель масштабирования изображения
переключение логическое значение верно

Включение / отключение увеличения двойным касанием слайда
Увеличенный скользящий класс строка "swiper-слайд-масштабирование"

Имя CSS-класса увеличенного контейнера

Методы масштабирования

Свойства
swiper.включен логическое значение

Включен ли модуль масштабирования
swiper.scale номер

Текущее соотношение масштаба изображения
Методы
swiper.отключить()

Отключить модуль масштабирования
swiper.enable()

Включить модуль масштабирования
swiper.in(соотношение)

Увеличьте изображение текущего активного слайда. При необходимости можно задать собственное соотношение сторон
swiper.out()

Уменьшите масштаб изображения текущего активного слайда
swiper.toggle(событие)

Переключение масштаба изображения текущего активного слайда

Масштабирование событий

Имя Аргументы Описание
Изменение масштаба (swiper, масштабирование, imageEl, slideEl)

Событие будет запущено при изменении масштаба

Управление с клавиатуры

←→

Параметры управления клавиатурой

Имя Тип По умолчанию Описание
включен логическое значение ложь

Установите значениеtrue, чтобы включить управление с клавиатуры
onlyInViewport логическое значение верно

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

Когда он включен, он позволяет осуществлять навигацию по клавиатуре с помощью клавиш Page Up и Page Down

Методы управления клавиатурой

Свойства
swiper.включен логическое значение

Включено ли управление с клавиатуры
Методы
swiper.отключить()

Отключить управление с клавиатуры
swiper.enable()

Включить управление с клавиатуры

События клавиатуры

Имя Аргументы Описание
Нажатие клавиши (swiper, ключевой код)

Событие будет запущено при нажатии клавиши

Управление колесиком мыши

↑
↓

Параметры управления колесиком мыши

Имя Тип По умолчанию Описание
включен логическое значение ложь

Установите значениеtrue, чтобы включить управление колесом мыши
eventsTarget Любой "контейнер"

Строка с CSS-селектором или HTML-элементом контейнера, принимающего события колесика мыши. По умолчанию это swiper
Силовая ось логическое значение ложь

Установите значениеtrueдля принудительного прокручивания колесика мыши по оси. Таким образом, в горизонтальном режиме колесико мыши будет работать только при горизонтальной прокрутке, а в вертикальном режиме — только при вертикальной прокрутке.
инвертировать логическое значение ложь

Установите значениеtrueдля инвертирования направления скольжения
Класс noMousewheelClass строка "swiper-без колеса мыши"

Прокрутка элементов с этим классом будет игнорироваться
Возможности выпуска логическое значение ложь

Установите значениеtrueи swiper будет отключать событие прокрутки колесом мыши и позволять прокручивать страницу, когда swiper находится на краю (в начале или в конце)
чувствительность номер 1

Множитель данных о колесе мыши, позволяет настроить чувствительность колесика мыши
thresholdDelta нулевой|номер null

Минимальная дельта прокрутки колесика мыши для запуска смены слайда swiper
Время удержания порога нулевой|номер null

Минимальная разница во времени прокрутки колесика мыши (в мс) для запуска смены слайдов в свипере

Методы управления колесиком мыши

Свойства
swiper.включен логическое значение

Включено ли управление колесиком мыши
Методы
swiper.отключить()

Отключить управление колесиком мыши
swiper.enable()

Включить управление колесиком мыши

События Колеса мыши

Имя Аргументы Описание
прокрутка (swiper, событие)

Событие будет запущено при прокрутке колеса мыши

Виртуальные слайды

Модуль «Виртуальные слайды» позволяет хранить в DOM только необходимое количество слайдов. Это очень полезно с точки зрения производительности и проблем с памятью, если у вас много слайдов, особенно слайдов с тяжёлым деревом DOM или изображениями.

Обратите внимание, что в соответствии с реализацией Virtual Slides онне работаетс модулем Grid иslidesPerView: 'auto'

Параметры виртуальных слайдов

Имя Тип По умолчанию Описание
addSlidesAfter номер 0

Увеличивает количество предварительно отрисованных слайдов после активного слайда
addSlidesBefore номер 0

Увеличивает количество предварительно отрисованных слайдов перед активным слайдом
Кэш логическое значение верно

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

Включены ли виртуальные слайды
Внешний рендеринг функция (данные)

Функция для внешнего рендеринга (например, с использованием другой библиотеки для обработки манипуляций с DOM и состояния, такой как React.js или Vue.js). В качестве аргумента она принимаетdataобъект со следующими свойствами:

  • offset- смещение влево / вверх в пикселях
  • from- индекс первого слайда, необходимого для рендеринга
  • to- индекс последнего слайда, необходимого для рендеринга
  • slides- массив с элементами слайдов для рендеринга
renderExternalUpdate логическое значение верно

Если он включен (по умолчанию), то обновит макет Swiper сразу после вызова renderExternal. Полезно отключать и обновлять Swiper вручную при использовании с библиотеками рендеринга, которые выполняют рендеринг асинхронно
renderSlide функция (слайд,указатель)

Функция для отображения слайда. В качестве аргумента она принимает текущий элемент слайда дляslidesмассива и номер индекса текущего слайда. Функция должна возвращать внешний HTML-код слайда или HTML-элемент слайда.
слайды T[] []

Массив со слайдами

Методы виртуальных слайдов

Свойства
swiper.cache объект

Объект с кэшированными элементами slides HTML
swiper.from номер

Индекс первого отрисованного слайда
swiper.слайды T[]

Массив с элементами слайда, передаваемыми параметромvirtual.slides
swiper.to номер

Индекс последнего отрисованного слайда
Методы
swiper.appendSlide(слайд)

Добавить слайд.slidesЭто может быть один слайд или массив таких слайдов.

Только для версии Core (в React и Vue это нужно делать путём изменения массива/данных/источника слайдов)
swiper.добавитьslide(слайд)

Предварительный слайд.slidesможет быть отдельным слайдом или массивом таких слайдов.

Только для версии Core (в React и Vue это нужно делать путём изменения массива/данных/источника слайдов)
swiper.removeAllSlides()

Удалить все слайды

Только для версии Core (в React и Vue это нужно делать путём изменения массива/данных/источника слайдов)
swiper.removeSlide(индексы скольжения)

Удалите конкретный слайд или слайды.slideIndexesЭто может быть число с индексом слайда для удаления или массив с индексами.

Только для версии Core (в React и Vue это нужно делать путём изменения массива/данных/источника слайдов)
swiper.обновить(принудительно)

Обновить состояние виртуальных слайдов

Виртуальные слайды Dom

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

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    ...
    <div class="swiper-slide">Slide 100</div>
  </div>
</div>
<script>
  const swiper = new Swiper('.swiper', {
    virtual: {
      enabled: true,
    },
  });
</script>

Навигация по хэшу

https://myweb.site/
https://myweb.site/#слайд-2

Хэш-навигация предназначена для создания ссылки на конкретный слайд, которая позволяет загрузить страницу с открытым конкретным слайдом.

Чтобы это работало, вам нужно включить его, передав параметрhashNavigation:trueи добавив хэши слайдов в атрибутdata-hash:

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide" data-hash="slide1">Slide 1</div>
    <div class="swiper-slide" data-hash="slide2">Slide 2</div>
    <div class="swiper-slide" data-hash="slide3">Slide 3</div>
    <div class="swiper-slide" data-hash="slide4">Slide 4</div>
    <div class="swiper-slide" data-hash="slide5">Slide 5</div>
    ...
  </div>
</div>

const swiper = new Swiper('.swiper', {
  //enable hash navigation
  hashNavigation: true,
});

Параметры хэш-навигации

Имя Тип По умолчанию Описание
getSlideIndex функция (swiper,хэш)

Предназначен для использования с виртуальными слайдами, когда невозможно найти слайд в DOM по хешу (например, он ещё не отобразился)
replaceState логическое значение ложь

Работает в дополнение к hashnav, заменяя текущий URL-адрес новым вместо добавления его в историю
Состояние наблюдения логическое значение ложь

Задайте значениеtrueдля включения навигации по слайдам (при включенном hashnav) с помощью истории браузера или путем непосредственного указания хэша в адресе документа

Хэширование событий Навигации

Имя Аргументы Описание
Хэш-обмен (swiper)

Событие будет запущено при изменении хэша окна
Набор хэшей (swiper)

Событие будет запущено, когда swiper обновит хэш

Навигация по истории

https://myweb.site/
https://myweb.site/слайд-2/

История Параметров навигации

Имя Тип По умолчанию Описание
включен логическое значение ложь

Включает плагин History.
keepQuery логическое значение ложь

Сохраняйте параметры запроса при изменении URL браузера.
Клавиша строка "слайды"

URL-ключ для слайдов
replaceState логическое значение ложь

Работает в дополнение к hashnav или истории, заменяя текущий URL-адрес новым вместо добавления его в историю
root строка ''

Корневая страница Swiper, полезная для указания, когда вы используете режим истории Swiper не на главной странице сайта. Например, это может бытьhttps://my-website.com/илиhttps://my-website.com/subpage/или/subpage/

Контроллер

Параметры контроллера

Имя Тип По умолчанию Описание
Автор: «слайд»|«контейнер» "слайд"

Определяет способ управления другим слайдером: слайд за слайдом (относительно сетки другого слайдера) или в зависимости от всех слайдов/контейнера (в зависимости от общего процента слайдера).
управление Любой

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

Установите значениеtrue, и управление будет осуществляться в обратном направлении

Методы контроллера

Свойства
swiper.control Любой

Передайте сюда другой экземпляр Swiper или массив с экземплярами Swiper, которыми должен управлять этот Swiper

Доступность (a11y)

Предыдущий слайд
Следующий слайд

Параметры доступности

Имя Тип По умолчанию Описание
Контейнерное сообщение нулевая|строка null

Сообщение для программ чтения с экрана для внешнего контейнера swiper
Контейнерная роль нулевая|строка null

Значение атрибута «роль», которое необходимо задать для контейнера свипера
containerRoleDescriptionMessage нулевая|строка null

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

Включает A11y
firstSlideMessage строка "Это первый слайд"

Сообщение для программ чтения с экрана для предыдущей кнопки, когда swiper находится на первом слайде
ID null|строка|число null

Значение атрибутаidдолжно быть задано для swiper-wrapper. Еслиnullбудет сгенерировано автоматически
itemRoleDescriptionMessage нулевая|строка null

Сообщение для программ чтения с экрана, описывающее роль элемента slide
lastSlideMessage строка "Это последний слайд"

Сообщение для программ чтения с экрана для кнопки "Далее", когда swiper находится на последнем слайде
nextSlideMessage строка "Следующий слайд"

Сообщение для программ чтения с экрана для кнопки "Далее"
Класс уведомлений строка "swiper-уведомление"

Имя CSS-класса уведомления A11y
paginationBulletMessage строка «Перейти к слайду{{index}}»

Сообщение для программ чтения с экрана для маркера с одной страницей
prevSlideMessage строка "Предыдущий слайд"

Сообщение для программ чтения с экрана для предыдущей кнопки
scrollOnFocus логическое значение верно

Позволяет прокручивать слайд, на котором был сделан фокус
slideLabelMessage строка '{{index}}/{{slidesLength}}'

Сообщение для программ чтения с экрана с описанием метки элемента слайда
slideRole строка "группа"

Значение атрибута swiper sliderole

Пользовательская сборка

У вас есть два варианта создания пользовательской версии Swiper.

Использование модулей JS

Если вы используете в своём проекте сборщик с поддержкой модулей JS, вы можете импортировать только те модули, которые вам нужны:

// Import Swiper and modules
import Swiper from 'swiper';
import { Navigation, Pagination, Scrollbar } from 'swiper/modules';

// Now you can use Swiper
const swiper = new Swiper('.swiper', {
  // Install modules
  modules: [Navigation, Pagination, Scrollbar],
  speed: 500,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  // ...
});

Экспортируются следующие модули:

  • Virtual- Модуль виртуальных слайдов
  • Keyboard- Модуль управления клавиатурой
  • Mousewheel- Модуль управления колесиком мыши
  • Navigation- Навигационный модуль
  • Pagination- Модуль разбиения на страницы
  • Scrollbar- Модуль полосы прокрутки
  • Parallax- Модуль Параллакса
  • FreeMode- Модуль Свободного режима
  • Grid- Модуль сетки
  • Manipulation- Модуль управления слайдами (только для базовой версии)
  • Zoom- Модуль масштабирования
  • Controller- Модуль контроллера
  • A11y- Модуль специальных возможностей
  • History- Модуль навигации по истории
  • HashNavigation- Модуль навигации по хэшу
  • Autoplay- Модуль автозапуска
  • EffectFade- Модуль эффекта затухания
  • EffectCube- Модуль эффекта куба
  • EffectFlip- Модуль эффекта переворота
  • EffectCoverflow- Модуль эффекта Coverflow
  • EffectCards- Модуль эффектов карт
  • EffectCreative- Модуль создания креативных эффектов
  • Thumbs- Модуль Thumbs

Использование скрипта сборки

Swiper поставляется с конструктором gulp, который позволяет создавать пользовательские версии библиотек, включающие только необходимые модули. Нам нужно следующее:

  1. Загрузите и распакуйтерепозиторий Swiper GitHubв локальную папку

  2. Установить Node.js (если не установлен)

  3. Теперь нам нужно установить необходимые зависимости. Перейдите в папку с загруженным и распакованным репозиторием Swiper и выполните в терминале:

    $ npm install

  4. Открытьscripts/build-config.jsфайл:

    module.exports = {
  // remove modules you don't need
  modules: [
    'virtual',
    'keyboard',
    'mousewheel',
    'navigation',
    'pagination',
    'scrollbar',
    'parallax',
    'zoom',
    'controller',
    'a11y',
    'history',
    'hash-navigation',
    'autoplay',
    'thumbs',
    'free-mode',
    'grid',
    'manipulation',
    'effect-fade',
    'effect-cube',
    'effect-flip',
    'effect-coverflow',
    'effect-creative',
    'effect-cards',
  ],
};

  5. Теперь мы готовы создать пользовательскую версию Swiper:

    $ npm run build:prod

  6. Вот и всё. Сгенерированные файлы CSS и JS и их сжатые версии будут доступны в папкеdist/

Определения TypeScript

Swiper полностью типизирован, он экспортируетSwiperиSwiperOptionsтипы:

// main.ts
import Swiper from 'swiper';
import { SwiperOptions } from 'swiper/types';

const swiperParams: SwiperOptions = {
  slidesPerView: 3,
  spaceBetween: 50,
};

const swiper = new Swiper('.swiper', swiperParams);

Вы также можете просмотреть автоматически сгенерированныеопределения TypeScriptдля всех типов, параметров, свойств и методов.

CSS, CSS3, grid, title, Слайдер, CSS Анимация, Javascript, HTTPS, Анимация, html

Движущиеся облака с анимацией на CSS3

Движущиеся облака с анимацией на CSS3

Красивый эффект, который накладывает летящие облака на произвольный фон.

Облака - это изображения облаков на прозрачном фоне в формате .png или .webp. Заготовки можно найти в интернете на свой вкус и под задачу - белые летние облака, либо темные грозовые.

HTML

<div class="cloud">
<div class="cloudcontent">
Текст на фоне
</div>
<img src="cloud-01.png" alt="" class="cloud1">
<img src="cloud-02.png" alt="" class="cloud2">
<img src="cloud-03.png" alt="" class="cloud3">
<img src="cloud-04.png" alt="" class="cloud4">
</div>

CSS

.cloud {
overflow: hidden;
position: relative;
width:100%;
padding-bottom: 56.25%;
height: 0;
background: url(mountain.jpg);
background-size: cover;
}
.cloudcontent {
position: relative;
padding:30px;
color: #337AB7;
font-size:22px;
font-weight:bold;
z-index:100;
}
.cloud img {
width: 100%;
left: 0;
top: 0;
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
}
@-webkit-keyframes animCloud {
from {
-webkit-transform: translateX(100%)
}
to {
-webkit-transform: translateX(-100%)
}
}
@-moz-keyframes animCloud {
from {
-moz-transform: translateX(100%)
}
to {
-moz-transform: translateX(-100%)
}
}
@keyframes animCloud {
from {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%)
}
to {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%)
}
}
.cloud1 {
-webkit-animation: animCloud 20s infinite linear;
-moz-animation: animCloud 20s infinite linear;
animation: animCloud 20s infinite linear
}
.cloud2 {
-webkit-animation: animCloud 40s infinite linear;
-moz-animation: animCloud 40s infinite linear;
animation: animCloud 40s infinite linear
}
.cloud3 {
-webkit-animation: animCloud 60s infinite linear;
-moz-animation: animCloud 60s infinite linear;
animation: animCloud 60s infinite linear
}
.cloud4 {
-webkit-animation: animCloud 80s infinite linear;
-moz-animation: animCloud 80s infinite linear;
animation: animCloud 80s infinite linear
}
CSS, CSS3

Добавить шрифт с сервера в CSS

Создаём на сервере папку fonts и загружаем в неё файлы шрифта.

В CSS указываем путь к файлам через @font-face:
@font-face {
    font-family: 'Oranienbaum Regular';
    src: url('/fonts/Oranienbaum.eot');
    src: url('/fonts/Oranienbaum.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Oranienbaum.woff') format('woff'),
    url('/fonts/Oranienbaum.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    }

Затем для body прописываем шрифт по умолчанию

body {
	font-family: 'Oranienbaum Regular', Arial, sans-serif;
}

Названия шрифтов, состоящие из нескольких слов, заключаем в одинарные кавычки

Шрифты, CSS

Как сделать заставку на сайт на CSS и JavaScript

Задачу можно сформулировать так: при первом посещении сайта посетителю показывается "заставка", а при дальнейшем перемещении по внутренним ссылкам — главная страница.
Собственно говоря, есть два варианта:
  1. sessionStorage — заставка нужна при каждом новом открытии вкладки (не страницы),
  2. localStorage — заставка нужна для одного человека только один раз за всю его историю посещения сайта.
<div id="pop-up">
  <div onclick="popUp()">посмотреть
реализацию</div>
</div>
Это самый упрощённый вариант. Количество элементов в заставке (например, наличие социальных кнопок) каждый определяет сам.

Скрипт хорош тем, что не нарушает правил Google AdSense, заставка не перекрывает рекламные объявления, так как те не загружаются. Но код JavaScript нужно расположить выше кода AdSense.

JavaScript / jQuery

var popup = document.getElementById('pop-up');
function popUp() {
sessionStorage.setItem('popup', 'none');
location.reload();
}
if(sessionStorage.getItem('popup') || !window.sessionStorage) {
popup.parentNode.removeChild(popup);
}else{
if(window.stop !== undefined) {
window.stop();
} else if (document.execCommand !== undefined) {
document.execCommand("Stop", false);
}
}

Стили CSS

#pop-up {
position: fixed; top: 0; bottom: 0; left: 0; right: 0;
z-index: 100;
background: rgba(0,0,0,.5) url(http://www.afsklyar.ru/zaglu1.jpg) no-repeat 50% 50%;
background-size: cover;
}
#pop-up div {
position: absolute;
right: 10%;
top: 20%;
padding: 3%;
border-radius: 3%;
font-size: 300%;
white-space: pre-wrap;
line-height: 100%;
color: #fff;
background: red;
cursor: pointer;
}
CSS, Javascript

Кнопка button с эффектом при наведении

<button>Button
  <div class="star-1">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" class="fil0"></path></g></svg>
  </div>
  <div class="star-2">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" class="fil0"></path></g></svg>
  </div>
  <div class="star-3">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" class="fil0"></path></g></svg>
  </div>
  <div class="star-4">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" class="fil0"></path></g></svg>
  </div>
  <div class="star-5">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" class="fil0"></path></g></svg>
  </div>
  <div class="star-6">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" class="fil0"></path></g></svg>
  </div>
</button>

Стили CSS

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
html,
body {
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color: #212121;
}
button {
  position: relative;
  padding: 12px 35px;
  background: #FFFFFF;
  font-size: 17px;
  font-weight: 500;
  color: #000000;
  border: 3px solid #0e3a3a;
  border-radius: 8px;
  box-shadow: 0 0 0 #fec1958c;
  transition: all .3s ease-in-out;
}
.star-1 {
  position: absolute;
  top: 20%;
  left: 20%;
  width: 25px;
  height: auto;
  filter: drop-shadow(0 0 0 #fffdef);
  z-index: -5;
  transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);
}
.star-2 {
  position: absolute;
  top: 45%;
  left: 45%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 0 #fffdef);
  z-index: -5;
  transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}
.star-3 {
  position: absolute;
  top: 40%;
  left: 40%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 0 #fffdef);
  z-index: -5;
  transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}
.star-4 {
  position: absolute;
  top: 20%;
  left: 40%;
  width: 8px;
  height: auto;
  filter: drop-shadow(0 0 0 #fffdef);
  z-index: -5;
  transition: all .8s cubic-bezier(0, 0.4, 0, 1.01);
}
.star-5 {
  position: absolute;
  top: 25%;
  left: 45%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 0 #fffdef);
  z-index: -5;
  transition: all .6s cubic-bezier(0, 0.4, 0, 1.01);
}
.star-6 {
  position: absolute;
  top: 5%;
  left: 50%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 0 #fffdef);
  z-index: -5;
  transition: all .8s ease;
}
button:hover {
  background: #0e3a3a;
  color: #FFFFFF;
  box-shadow: 0 0 25px #0e3a3a;
border: 3px solid #FFF;
}
button:hover .star-1 {
  position: absolute;
  top: -80%;
  left: -30%;
  width: 25px;
  height: auto;
  filter: drop-shadow(0 0 10px #fffdef);
  z-index: 2;
}
button:hover .star-2 {
  position: absolute;
  top: -25%;
  left: 10%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 10px #fffdef);
  z-index: 2;
}
button:hover .star-3 {
  position: absolute;
  top: 55%;
  left: 25%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 10px #fffdef);
  z-index: 2;
}
button:hover .star-4 {
  position: absolute;
  top: 30%;
  left: 80%;
  width: 8px;
  height: auto;
  filter: drop-shadow(0 0 10px #fffdef);
  z-index: 2;
}
button:hover .star-5 {
  position: absolute;
  top: 25%;
  left: 115%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 10px #fffdef);
  z-index: 2;
}
button:hover .star-6 {
  position: absolute;
  top: 5%;
  left: 60%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 10px #fffdef);
  z-index: 2;
}
.fil0 {
  fill: #FFFDEF
}
CSS

Перенос слов

Стили CSS для организации переноса строки по словам или буквам, когда она не вмещается в заданные границы

overflow-wrap: break-word;
word-wrap: break-word;
white-space: nowrap / white-space: normal: nowrap;
word-break: keep-all  / word-break: break-all;
line-break: loose / normal / strict;
hyphens: none / auto;

Синтаксис

white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit

Значения

normal

Текст в окне браузера выводится как обычно,  переносы строк устанавливаются автоматически.

nowrap

Пробелы не учитываются,  переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега <br>  переносит текст на новую строку.

pre

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

pre-line

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

pre-wrap

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

Наследует значение родителя.

Пример 1.  Использование тега <wbr>

.word {
width: 160px;
background: #f0f0f0;
border: 1px solid #333;
padding: 10px;
font-size: 18px;
}
<p class="word">Один<wbr>надцатиклас<wbr>сница Анжелика после окончания школы выбрала профессию дело<wbr>произ<wbr>водитель<wbr>ницы.</p>

Пример 2. Мягкий  перенос

.word {
width: 160px;
background: #f0f0f0;
border: 1px solid #333;
padding: 10px;
font-size: 18px;
}
<p class="word">Один&shy;надцатиклас&shy;сница Анжелика после окончания школы выбрала профессию дело&shy;произ&shy;водитель&shy;ницы.</p>

Пример 3. Свойство word-break

.word {
width: 160px;
background: #f0f0f0;
border: 1px solid #333;
padding: 10px;
font-size: 18px;
word-break: break-all;
}
<p class="word">Одиннадцатиклассница Анжелика после окончания школы выбрала профессию делопроизводительницы.</p>

Пример 4. Использование hyphens

.word {
width: 160px;
background: #f0f0f0;
border: 1px solid #333;
padding: 10px;
font-size: 18px;
-moz-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
}

Пример 5. Запрет  переносов

.word {
width: 160px;
background: #f0f0f0;
border: 1px solid #333;
padding: 10px;
font-size: 18px;
}
<p class="word">Озеро по координатам 70°&nbsp;58′&nbsp;19″&nbsp;с.&nbsp;ш.97°&nbsp;24′&nbsp;5″&nbsp;в.&nbsp;д. расположено в Таймырском Долгано-Ненецком районе Красноярского края России.</p>
CSS

Плавающий блок с призывом добавить товар в Избранное (на Bootstrap)

В XSL шаблон карточки товара над иконкой Избранного добавляем код:

<div class="alert alert-primary d-flex align-items-center alert-dismissible fade show alert-info-modal" role="alert">
     <small>Понравился товар? Добавьте его в избранное</small>
     <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Закрыть"></button>
</div>

Блок будет показываться с небольшой задержкой. Для этого используем возможности CSS3

@keyframes showDiv {
  0%,
  94% {
    opacity: 0;
  }
  95% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

Для кода использованы стили alert фреймворка Bootstrap 5

Закрывается блок нажатием на крестик.

Стили CSS

.alert-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}
.alert-info-modal {
  background-color: #ff8100;
  border: 0;
  color: #fff;
  position: absolute;
  bottom: 95%;
  left: 50%;
  min-width: 280px;
  padding: 10px 15px;
  animation: showDiv 3s forwards;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.alert-info-modal:before {
  border-width: 0.4rem 0.4rem 0;
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
  border-top-color: #ff8100;
  top: 100%;
  left: 0px;
  transform: translate(50px,0px);
}
.alert-info-modal:after {
  margin-top: -1px;
  transform: rotate(45deg);
}
@keyframes showDiv {
  0%,
  94% {
    opacity: 0;
  }
  95% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

Bootstrap 5, CSS, CSS3, Товар, XSL

Работа с изображениями в веб

Одно из решений, которые приходится принимать фронтенд-разработчику при создании сайта, касается выбора способа включения изображений в состав веб-страниц. Этот способ может заключаться в использовании HTML-тега <img> . Это может быть применение CSS-свойства background или тега <image> элемента <svg> . Выбор правильного подхода к работе с изображениями весьма важен, так как это может очень сильно повлиять на производительность и доступность проекта.

HTML-элемент <img>

Элемент <img>  в простейших вариантах его использования содержит лишь необходимый для его правильной работы атрибут src

<img src="cool.jpg" alt="">

Настройка атрибутов width и height

Если не будут настроены ширина и высота изображения, то при загрузке странице с последующей загрузкой изображения макет страницы может понадобиться перестроить. Для того чтобы этого избежать, можно задать атрибуты width и height тега <img> :

<img src="cool.jpg" width="200" height="100" alt="">

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

Здесь показана панель Network инструментов разработчика браузера и продемонстрирован процесс загрузки пары изображений. Одно из них, расположенное слева, представлено тегом <img>, у которого атрибуты width и height не заданы. У другого значения этих атрибутов заданы.
Вы заметили, что на странице место под правое изображение резервируется ещё до того, как это изображение будет загружено? Всё дело в заданных атрибутах width и height. Обратите внимание и на то, что происходит с подписями к изображениям в процессе их загрузки. Это — наглядная демонстрация силы атрибутов width и height.

Скрытие изображения средствами CSS

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

Вот CSS-код, скрывающий изображение:
img {
display: none;
}
Повторюсь: при таком подходе браузер будет загружать изображение, делая это даже в том случае, если оно оказывается невидимым. Дело тут в том, что элемент  <img> считается замещаемым элементом, поэтому наши возможности по управлению таким элементом из CSS ограничены.

О доступности контента

Доступность изображений, выводимых на страницах с помощью HTML-элемента  <img>, обеспечивается их атрибутами alt. В таком атрибуте должно содержаться понятное описание изображения. Это может очень пригодиться пользователям, применяющим средства для чтения с экрана.

Однако в том случае, если в  alt-описании изображение не нуждается, этот атрибут, всё равно, удалять не рекомендуется. Дело в том, что если это сделать, то «озвучено» будет содержимое атрибута src. Это очень плохо для доступности контента.

Но атрибут alt полезен не только в вышеописанном случае. Если по какой-то причине изображение не будет загружено, и у него имеется атрибут alt, то текст из этого атрибута будет выведен вместо изображения. Хочу проиллюстрировать вышесказанное следующим примером.

У нас есть пара изображений:
<img class="food-thumb" width="300" height="200" src="cheescake.jpg">
<img class="food-thumb" width="300" height="200" src="cheescake.jpg" alt="">

В атрибуте src записан неправильный адрес к графическому файлу, этот файл не может быть загружен браузером. У первого <img> нет атрибута alt, а у второго есть такой атрибут, в который записана пустая строка. Как вы думаете, как эти элементы будут выведены на странице?
Слева — изображение без атрибута alt. Справа — с пустым атрибутом alt

Под изображение без атрибута  alt резервируется пространство страницы, что может запутать пользователя и ухудшить доступность контента. А другое изображение занимает совсем мало места, которое нужно для вывода «содержимого» пустого атрибута alt. В результате оно больше похоже на точку, а не на изображение. Происходит это и-за настроек свойства border изображения.

Правда, когда в атрибут alt что-то записано, изображение будет выглядеть уже по-другому.
Справа — изображение, в атрибут alt которого записан текст

Это гораздо лучше, чем ничего. Кроме того, если не удаётся загрузить файл, выводимый в  <img>, можно добавить к нему псевдо-элемент.

Отзывчивые изображения

Изображения разных размеров

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

Отзывчивый набор изображений можно настроить двумя способами.

1. Атрибут srcset

Вот код изображения, в котором используется атрибут srcset:
<img src="small.jpg" srcset="medium.jpg 500w, large.jpg 800w" alt="">
Это — простой пример. Я не считаю идеальным решением использование  srcset для описания изображений разных размеров, выводимых на экранах с разными характеристиками. Дело в том, что в такой ситуации последнее слово остаётся за браузером, а разработчик на выбор браузера повлиять не может.

2. HTML-элемент picture

Вот код, в котором используется элемент  <picture>:
<picture>
<source srcset="large.jpg" media="(min-width: 800px)" />
<source srcset="medium.jpg" media="(min-width: 500px)" />
<img src="small.jpg" />
</picture>
Другой вариант создания отзывчивых изображений заключается в использовании элемента  <picture>. Мне больше нравится этот подход из-за того, что он проще, и из-за того, что он даёт более предсказуемые результаты.

Изменение размеров изображений

Слева — изображение, у которого не задано CSS-свойство object-fit. Справа — изображение, у которого это свойство задано

CSS-свойства object-fit и object-position — это замечательные инструменты, которые можно использовать с элементом <img>. Они дают нам контроль над тем, как изменяется и позиционируется содержимое элемента <img>. Это напоминает работу с CSS-свойством background.

Свойство  object-fit может иметь следующие значения: fill, contain, cover, none, scale-down.
Вот как им пользоваться:
img {
object-fit: cover;
object-position: 50% 50%;
}
Теперь, когда мы немного разобрались с элементом  <img>, пришло время двигаться дальше и осваивать следующую методику работы с изображениями.

Изображения, задаваемые CSS-свойством background

Когда для вывода изображений используют CSS-свойство background, нужно, чтобы это свойство применялось бы к элементу с неким содержимым, или к элементу, у которого заданы размеры. Обычно главной сферой использования этого свойства являются декоративные элементы.

Как пользоваться CSS-свойством background

Для того чтобы воспользоваться CSS-свойством  background, нам сначала понадобится элемент:
<div class="element">Some content</div>
Потом понадобится стиль:
.element {
background: url('cool.jpg');
}

Задание нескольких изображений в свойстве background

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

.element {
background: url('cool-1.jpg'), url('cool-2.jpg');
}

Скрытие изображения

Средствами CSS можно скрывать и показывать изображения в конкретной области просмотра. При этом изображения, которые не будут выводиться, не будут и загружаться. Если изображение в CSS не настроено как видимое, то и загружаться оно не будет. Это — дополнительное преимущество CSS-свойства  background перед элементом <img>.

@media (min-width: 700px) {
.element {
background: url('cool-1.jpg');
}
}
В этом примере описано фоновое изображение, которое выводится только в том случае, когда ширина области просмотра больше 700px.

О доступности контента

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

Сложности с загрузкой background-изображений обычными пользователями

Обычные пользователи знают о том, что если нужно сохранить некое изображение — достаточно щёлкнуть по нему правой кнопкой мыши и выбрать соответствующую команду контекстного меню. Может, это покажется вам забавным, но с изображениями, задаваемыми с помощью CSS-свойства  background, этот приём не работает. Такое изображение обычным способом не загрузить. Для его загрузки потребуется исследовать код элемента в инструментах разработчика и воспользоваться ссылкой из url.

Псевдо-элементы

Псевдо-элементы можно использовать и с изображениями, задаваемыми CSS-свойством background. Например — для показа одного изображения поверх другого. В случае с элементом <img> этого можно достичь только с использованием дополнительного элемента, накладываемого на другой элемент.

Теперь поговорим об использовании SVG-изображений

SVG-изображения

Основной сильной стороной SVG-изображений считается возможность их масштабирования без потери качества. Более того, элемент  <svg> может выводить, помимо SVG-изображений, ещё и файлы формата JPG и PNG. Вот HTML-код SVG-изображения:

<svg width="200" height="200">
<image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>

JPG-изображение, выведенное средствами элемента SVG

Обратили внимание на атрибут  preserveAspectRatio? Благодаря ему изображение занимает полную ширину и высоту элемента <svg>, не растягиваясь и не сжимаясь.

Если ширина элемента  <image> больше, оно заполнит родительский элемент ( <svg>) по ширине, но при этом не будет растягиваться.
Изображение не растягивается

Это очень похоже на то, как работают CSS-свойства object-fit: cover или background-size: cover.

О доступности контента

Если говорить о доступности контента при использовании SVG-изображений, то могу сказать, что такой разговор сразу напоминает мне об элементе <title>. Ниже показан пример кода, в котором к изображению, выводимому средствами <svg>, добавлен такой элемент:
<svg width="200" height="200">
<title>A photo of blueberry Cheescake</title>
<image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>
Тут, более того, можно воспользоваться и элементом <desc>:
<svg width="200" height="200">
<title>A photo of blueberry Cheescake</title>
<desc>A meaningful description about the image</desc>
<image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>

Сложности с загрузкой <svg>-изображений обычными пользователями

Изображение, выведенное с помощью <svg>, можно загрузить, лишь проанализировав его код и добравшись до ссылки на изображение. Это минус, но  в том случае, если некто хочет ограничить возможности обычных пользователей по загрузке изображений, эта особенность может и пригодиться. По меньшей мере, это снизит шансы на загрузку такого изображения.

Сценарии использования разных способов вывода изображений

Раздел страницы, выводимый в её верхней части

Проектируя раздел страницы, находящийся в её верхней части (такой раздел называют «Hero Section»), иногда нужно сделать так, чтобы в нём выводилось бы изображение, поверх которого выводится заголовок и какие-то другие данные о странице. Выглядеть это может примерно так, как показано ниже.

Верхняя часть страницы с изображением и надписями

Обратите внимание на то, что тут имеется фоновое изображение. Как бы вы подошли к разработке подобного раздела страницы? Но, прежде чем вы ответите на этот вопрос, позвольте мне сформулировать некоторые требования:

  • Изображение должно поддерживать лёгкую динамическую смену при интеграции страницы с бэкенд-CMS.
  • Поверх изображения должен быть наложен элемент, упрощающий чтение текста.
  • Нужно поддерживать вывод изображения в трёх размерах: в маленьком, среднем и большом. Каждый из них предназначен для собственной области просмотра.

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

  1. Важно ли это изображение с точки зрения пользователя, или он ничего не потеряет в том случае, если оно будет не видно?
  2. Нужно ли, чтобы это изображение выводилось в областях просмотра всех размеров?
  3. Является ли это изображение статическим, или оно динамически меняется (из CMS, например)?

Рассмотрим пару вариантов решения этой задачи.

Первый вариант решения задачи

Используя CSS-свойство background с несколькими заданными в нём изображениями, одно из них можно использовать для элемента, накладываемого на основное изображение, а другое — для представления самого изображения. Взгляните на этот CSS-код:
.hero {
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var('landscape.jpg');
background-repeat: no-repeat;
background-size: 100%, cover;
}
Этот подход позволяет достичь желаемого, background-image можно менять средствами JavaScript:

<section class="hero" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('landscape.jpg');">
<!-- Hero content -->
</section>
Свойство background я определил во встраиваемом стиле. Хотя это и рабочий код, выглядит он плохо и отличается непрактичностью.

Может быть, можно воспользоваться здесь CSS-переменными?
<section class="hero" style="--bg-url: url('landscape.jpg')">
<!-- Hero content -->
</section>
Вот результат исследования стиля.
Исследование стиля элемента
Теперь для изменения фонового изображения нам достаточно поменять переменную --bg-url. Это в миллион раз лучше, чем встроенные стили.

Анализ

  1. Предложенный здесь вариант решения задачи хорош лишь в том случае, если изображение не особенно важно.
  2. Он может подойти в том случае, если изображение не планируется менять динамически, средствами CMS, используемой на бэкенде проекта.

Второй вариант решения задачи

Здесь мы воспользуемся HTML-средствами вывода изображения:
<section class="hero">
<h2 class="hero__title">Using Images in CSS</h2>
<p class="hero__desc">An article about which and when to use</p>
<img src="landscape.jpg" alt="">
</section>
В CSS надо настроить абсолютное позиционирование изображения, расположив его под текстом. Кроме того, тут нам понадобится псевдо-элемент, который будет играть роль элемента, накладываемого на изображение:

.hero {
position: relative;
}

.hero img {
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
}

.hero:after {
content: "";
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
}
Это решение хорошо тем, что при его использовании очень легко поменять атрибут изображения src. Кроме того, оно лучше для того случая, когда выводимое изображение важно.

Кроме того, отмечу, что мне нравится в <img>-изображениях то, что при их использовании можно использовать резервные механизмы, срабатывающие в том случае, если файл изображения загрузить не удаётся. Такой вспомогательный механизм, скажем, вывод вместо изображения простого цветного фона, по крайней мере, позволит пользователям прочитать текст:
.hero img {
/* Другие стили */
background: #2962ff;
}
Фоновый цвет, выводимый в том случае, если изображение загрузить не удаётся

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

Логотип веб-сайта

Логотип — это очень важно. Логотипы добавляют сайтам уникальности. Для того чтобы вывести на странице логотип, мы можем прибегнуть к нескольким возможностям:
  • Элемент <img>, выводящий PNG, JPG или SVG-изображение.
  • Встроенное SVG-изображение.
  • Фоновое изображение.

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

Логотип с множеством деталей

Если логотип имеет множество деталей или содержит много фигур, вывод его с использованием встроенного SVG-изображения может оказаться не такой уж хорошей идеей. В такой ситуации я рекомендую использовать тег <img>, средствами которого выводится PNG, JPG или SVG-изображение.
Разные логотипы

Вот код для вывода подобного логотипа, хранящегося в формате SVG:
<a href="#"><img src="logo.svg" alt="Nature Food"></a>

Простой логотип, который нужно анимировать

Простой анимированный логотип

Рассмотрим ситуацию, когда имеется простой логотип, содержащий некую фигуру или текст. При наведении на него указателя мыши нужно изменить цвет фигуры и текста. Как это сделать? Мне кажется, что в этой ситуации лучше всего воспользоваться встроенным SVG-изображением:
<a href="#">
<svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
<rect fill="#D8D8D8" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
<text font-family="Rubik-Medium, Rubik" font-size="25" font-weight="400" fill="#6F6F6F">
<tspan x="63.923" y="36.923">Rect</tspan>
</text>
</g>
</svg>
</a>
Вот стили:
.logo rect,
.logo text {
transition: 0.3s ease-out;
}

.logo:hover rect,
.logo:hover text {
fill: #4a7def;
}

Отзывчивый логотип

Когда я подумал об отзывчивых логотипах, то вспомнил логотип Smashing Magazine. Мне нравится то, как меняется его размер. Вот макет, иллюстрирующий базовый логотип и логотип, выводимый в больших областях просмотра.
Отзывчивый логотип

Для реализации такого поведения логотипа идеально подойдёт элемент <picture>, который позволяет описать две версии логотипа:
<a class="logo" href="/">
<picture>
<source media="(min-width: 1350px)" srcset="sm-logo--full.svg"><img src="sm-logo.svg" alt="Smashing Magazine"></picture>
</a>
В CSS нужно поменять ширину логотипа в том случае, если ширина область просмотра будет равной или большей 1350px:
.logo {
display: inline-block;
width: 45px;
}

@media (min-width: 1350px) {
.logo {
width: 180px;
}
}
Перед нами — простое и понятное решение проблемы отзывчивых логотипов.

Логотип с градиентом

Пример логотипа с градиентом

Работая с логотипами, на которых имеется градиент, нужно знать о том, что экспорт подобного логотипа из приложения для дизайна, вроде Adobe Illustrator или Sketch, может завершиться далеко не идеально. В ходе этого процесса что-то в логотипе может «поломаться».

При использовании формата SVG можно легко применить к логотипу градиентный цвет. В следующем примере я использовал <linearGradient>, настроив с его помощью атрибут текста fill:
<svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient" x1="0%" y1="100%" x2="0%" y2="0%">
<stop offset="0%" stop-color="#4a7def"></stop>
<stop offset="50%" stop-color="#ab4787"></stop>
</linearGradient>
</defs>
<g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
<rect fill="#AB4787" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
<text font-family="Rubik-Medium, Rubik" font-size="30" font-weight="400" fill="url(#gradient)">
<tspan x="63.923" y="36.923">Rect</tspan>
</text>
</g>
</svg>

Аватар пользователя

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

Для начала взгляните на следующий макет. Обратите внимание на то, что там представлены два аккуратных аватара с чёткими краями.
Пара удачных аватаров

А что если пользователь, в качестве аватара, решит использовать картинку с почти белым фоном? Если так — то аватар будет выглядеть уже далеко не так хорошо.
Неудачный аватар

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

Решить эту задачу можно несколькими способами:
  • С использованием <img>.
  • С использованием <img> и вспомогательного элемента <div>.
  • С использованием <div> и CSS-свойства background.
  • С использованием <image> в <svg>.

Что тут подходит лучше всего? Давайте выясним.

Использование <img>

Как решить эту задачу? Может — просто настроить границу элемента? Исследуем эту возможность (сразу извиняюсь за то, что ниже вы часто будете видеть мою фотографию).

Вот CSS-код:
.avatar {
border: 2px solid #f2f2f2;
}
Вот как это выглядит.
Результат оказался не таким, как ожидается: тёмная граница расположена за пределами границ изображения

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

Использование <img> и вспомогательного элемента <div>

Напомню, что перед нами стоит задача добавления к изображению внутренней тени. Эту задачу мы не можем решить с помощью внутренней тени (box-shadow) и ключевого слова inset, так как HTML-элементы <img> внутреннюю тень не поддерживают. Для решения этой задачи нужно поместить аватар в элемент <div> и воспользоваться ещё одним элементом, единственное предназначение которого — вывод внутренней границы.

Вот HTML-код:
<div class="avatar-wrapper">
<img class="avatar" src="shadeed2.jpg" alt="A photo of Ahmad Shadeed">
<div class="avatar-border"></div>
</div>
Вот стили:
.avatar-wrapper {
position: relative;
width: 150px;
height: 150px;
}

.avatar-border {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid rgba(0, 0, 0, 0.1);
}

Если у элемента <div> имеется граница, окрашенная в 10%-й чёрный цвет, это обеспечит нам то, что такая граница на тёмном изображении будет не видна, а на светлом будет заметна, выделяя его границу. Вот как это выглядит.
Внутренняя граница, видимая только на светлых изображениях

Использование <div> и CSS-свойства background

Если бы я использовал для вывода аватара элемент <div>, то это, возможно, значило бы, что изображение играет декоративную роль. Мне тут приходит в голову один пример, показанный ниже. Здесь разные аватары просто разбросаны по странице.
Аватары, разбросанные по странице

HTML-код здесь будет таким:
<div class="avatar" style="--img-url: url(shadeed2.jpg)"></div>
Вот стиль:
.avatar {
background: var(--img-url) center/cover;
width: 150px;
height: 150px;
border-radius: 50%;
box-shadow: inset 0 0 0 2px rgba(#000, 0.1);
}

Использование <image> в <svg>

Я полагаю, что это — наиболее интересное решение нашей задачи. Я обнаружил этот приём, изучая новый дизайн Facebook.

Вот разметка:
<svg role="none" style="height: 36px; width: 36px;">
<mask id="avatar">
<circle cx="18" cy="18" fill="white" r="18"></circle>
</mask>
<g mask="url(#avatar)">
<image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>
<circle cx="18" cy="18" r="18"></circle>
</g>
</svg>
Сначала разберём этот код. Вот что тут есть:

  1. Маска, обрезающая изображение в виде круга.
  2. Группа, к которой применяется маска.
  3. Само изображение с атрибутом preserveAspectRatio=«xMidYMid».
  4. Круг, который используется в роли внутренней границы.

Вот как это стилизуется:
circle {
stroke-width: 2;
stroke: rgba(0, 0, 0, 0.1);
fill: none;
}
С аватарами мы на этом разобрались. Поэтому идём дальше.

Поле ввода с иконкой

Вот пример поля ввода с иконкой.
Поле ввода с иконкой
Такие поля встречаются довольно часто. Как оснастить поле иконкой? Что происходит при получении таким полем фокуса? Исследуем эти вопросы.
Вот HTML-код:
<p>
<label for="name">Full name</label>
<input type="text" id="name">
</p>
Я полагаю, что лучшее решение этой задачи заключается в использовании фоновых изображений, задаваемых средствами CSS. Это просто, быстро и не требует привлечения дополнительных HTML-элементов:
input {
background-color: #fff;
background-image: url('user.svg');
background-size: 20px 20px;
background-position: left 10px center;
background-repeat: no-repeat;
}
Для изменения цвета иконки при получении полем фокуса можно использовать URL-кодированное SVG-изображение. Сделать это очень легко. Например, для этого предназначен данный инструмент, разработанный Yoksel.

CSS-стили для печати

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

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

Постарайтесь не включать в страницы, предназначенные для печати, изображения, выводимые с помощью CSS-свойства background

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

От такой печатной версии рецепта будет мало пользы. Исправить это можно, заставив браузер выводить подобные изображения в печатной версии страницы. Но этот подход не работает в Firefox и в IE. Вот как это выглядит в CSS:
.element {
background: url('cheesecake.png') center/cover no-repeat;
-webkit-print-color-adjust: exact; /* Принудительный вывод фонового изображения в режиме печати */
}

В подобных ситуациях лучше всего пользоваться HTML-элементом <img>. Изображения, включённые в страницу с помощью этого элемента, выводятся на печать без проблем.
html, CSS, CSS3

Руководство по Flexbox

Полное руководство по CSS flexbox. Это полное руководство объясняет все о flexbox, сосредотачиваясь на всех возможных свойствах для родительского элемента (контейнер flex) и дочерних элементов (элементы flex). Оно также включает в себя историю, демонстрации, шаблоны и таблицу поддержки браузеров.

Свойства для Родителя (flex контейнер)

display

Определяет flex контейнер; inline или block в зависимости от заданного значения. Включает flex контекст для всех потомков первого уровня.
.container {
display: flex; /* or inline-flex */
}
Имейте в виду:
Обратите внимание, что CSS-столбцы columns не влияют на flex контейнер.

flex-direction

Устанавливает основную ось, таким образом определяя направление flex элементов, помещаемых в flex контейнер. Flexbox — это (помимо дополнительной упаковки) концепция однонаправленного макета. Думайте о flex элементах, как о первичных раскладках в горизонтальных рядах или вертикальных столбцах.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
  • row (по умолчанию): слева направо в ltr; справа налево в rtl
  • row-reverse справа налево ltr; слева направо в rtl
  • column: так же, как и rowно сверху вниз
  • column-reverse: то же самое, row-reverseно снизу вверх

flex-wrap

По умолчанию гибкие элементы будут пытаться уместиться на одной строке. Вы можете изменить это и позволить элементам переходить на новую строку по мере необходимости с помощью этого свойства.
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap (по умолчанию): все flex элементы будут в одной строке
  • wrap: flex-элементы будут перенесены на несколько строк сверху вниз.
  • wrap-reverse: flex-элементы будут перенесены на несколько строк снизу вверх.
Посмотреть визуальные демоверсии поведения flex-wrap можно здесь.

flex-flow (Применяется к: родительскому элементу flex-контейнера)

Это сокращение для flex-direction и flex-wrap свойств, которые вместе определяют основные и поперечные оси flex контейнера. Значением по умолчанию является row nowrap.
flex-flow: <‘flex-direction’> || <‘flex-wrap’>

justify-content

Это свойство определяет выравнивание вдоль главной оси. Оно помогает распределить дополнительный остаток свободного пространства, когда-либо все flex элементы в строке негибкие, либо гибкие, но достигли своего максимального размера. Это также обеспечивает некоторый контроль над выравниванием элементов, когда они переполняют линию.
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
  • flex-start (по умолчанию): элементы сдвинуты в начало flex-direction направления.
  • flex-end: элементы сдвинуты ближе к концу flex направления.
  • start: элементы сдвинуты к началу writing-modeнаправления.
  • end: элементы сдвинуты в конце writing-modeнаправления.
  • left: элементы сдвинуты по направлению к левому краю контейнера, если это не имеет смысла flex-direction, тогда он ведет себя как start.
  • right: элементы сдвинуты по направлению к правому краю контейнера, если это не имеет смысла flex-direction, тогда он ведет себя как start.
  • center: элементы центрированы вдоль линии
  • space-between: элементы равномерно распределены по линии; первый элемент находится в начале строки, последний элемент в конце строки
  • space-around: элементы равномерно распределены по линии с одинаковым пространством вокруг них. Обратите внимание, что визуально пространства не равны, так как все элементы имеют одинаковое пространство с обеих сторон. Первый элемент будет иметь одну единицу пространства напротив края контейнера, но две единицы пространства между следующим элементом, потому что у следующего элемента есть свой собственный интервал, который применяется.
  • space-evenly: элементы распределяются таким образом, чтобы расстояние между любыми двумя элементами (и расстояние до краев) было одинаковым.
Обратите внимание, что поддержка браузером этих значений имеет свои нюансы. Например, space-between никогда не получал поддержку Edge, а start / end / left / right еще нет в Chrome. В MDN есть подробные графики. Самые безопасные значения это flex-start, flex-end и center.
Есть также два дополнительных ключевых слова, которые вы можете связать с этими значениями: safeи unsafe. Использование safe гарантирует, что как бы вы ни занимались этим типом позиционирования, вы не сможете расположить элемент таким образом, чтобы он отображался за пределами экрана (например, сверху) так, чтобы содержимое тоже не могло быть прокручено (это называется «потеря данных»).

align-items

Это свойство определяет поведение по умолчанию того, как flex элементы располагаются вдоль поперечной оси на текущей линии. Думайте об этом как о justify-content версии для поперечной оси (перпендикулярной главной оси).
.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
  • stretch (по умолчанию): растягивать, чтобы заполнить контейнер (все еще соблюдаются min-width / max-width)
  • flex-start/ start/ self-start: элементы размещаются в начале поперечной оси. Разница между ними невелика и заключается в соблюдении flex-direction правил или writing-mode правил.
  • flex-end/ end/ self-end: элементы располагаются в конце поперечной оси. Разница опять-таки тонкая и заключается в соблюдении flex-direction или writing-mode правил.
  • center: элементы центрированы по поперечной оси
  • baseline: элементы выровнены, по их базовой линии
safe и unsafe ключевые слова модификаторов могут быть использованы в сочетании со всеми из этих ключевых слов (хотя это поддерживается не всеми браузерами), это помогает предотвратить выравнивание элементов таким образом, что содержание становится недоступным.

align-content

Это свойство выравнивает линии в пределах flex контейнера, когда есть дополнительное пространство на поперечной оси, подобно тому, как justify-content выравнивает отдельные элементы в пределах главной оси.
Примечание: это свойство не действует, когда есть только одна строка flex элементов.
.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
  • flex-start/ start: элементы, сдвинуты в начало контейнера. Более поддерживаемый flex-startиспользует, flex-directionв то время как startиспользует writing-modeнаправление.
  • flex-end/ end: элементы, сдвинуты в конец контейнера. Более поддерживаемый flex-endиспользует flex-directionв то время как endиспользует writing-modeнаправление.
  • center: элементы выровнены по центру в контейнере
  • space-between: элементы равномерно распределены; первая строка находится в начале контейнера, а последняя — в конце
  • space-around: элементы равномерно распределены с равным пространством вокруг каждой строки
  • space-evenly: элементы распределены равномерно, вокруг них одинаковое пространство
  • stretch (по умолчанию): линии растягиваются, чтобы занять оставшееся пространство
safe и unsafe ключевые слова модификаторов могут быть использованы в сочетании со всеми из этих ключевых слов (хотя это поддерживается не всеми браузерами), это помогает предотвратить выравнивание элементов таким образом, что содержание становится недоступным.

Свойства для первых дочерних элементов(flex элементы)

order

По умолчанию flex элементы располагаются в исходном порядке. Однако свойство orderуправляет порядком их появления в контейнере flex.
.item {
order: <integer>; /* default is 0 */
}

flex-grow

Это свойство определяет способность flex элемента растягиваться в случае необходимости. Оно принимает значение от нуля, которое служит пропорцией. Это свойство, какое количество доступного пространства внутри гибкого контейнера должен занимать элемент.
Если для всех элементов flex-growустановлено значение 1, оставшееся пространство в контейнере будет равномерно распределено между всеми дочерними элементами. Если один из дочерних элементов имеет значение 2, этот элемент займет в два раза больше места, чем остальные (или попытается, по крайней мере).
.item {
flex-grow: <number>; /* default 0 */
}
Отрицательные числа не поддерживаются.

flex-shrink

Это свойство определяет способность гибкого элемента сжиматься при необходимости.
.item {
flex-shrink: <number>; /* default 1 */
}
Отрицательные числа не поддерживаются.

flex-basis

Это свойство определяет размер элемента по умолчанию перед распределением оставшегося пространства. Это может быть длина (например, 20%, 5rem и т.д.) Или ключевое слово. Ключевое слово autoозначает «смотри на мое width или height свойство». Ключевое слово contentозначает «размер на основе содержимого элемента» — это ключевое слово все еще не очень хорошо поддерживается, так что трудно проверить что для него используется max-content, min-contentили fit-content.
.item {
flex-basis: <length> | auto; /* default auto */
}
Если установлено значение 0, дополнительное пространство вокруг содержимого не учитывается. Если установлено значение auto, дополнительное пространство распределяется в зависимости от его flex-growзначения.
Смотрите этот рисунок.

flex

Это сокращение для использования flex-grow, flex-shrink и flex-basis вместе. Второй и третий параметры (flex-shrink и flex-basis) являются необязательными. По умолчанию это 0 1 auto.
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
Рекомендуется использовать это сокращенное свойство, а не устанавливать отдельные свойства. Это сокращение разумно устанавливает другие значения.

align-self

Это свойство позволяет переопределить выравнивание по умолчанию (или указанное с помощью align-items) для отдельных элементов flex.
Пожалуйста, смотрите align-items свойство, чтобы понять доступные значения.
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Обратите внимание что свойства float, clear и vertical-align не влияют на flex элементы.

Примеры

Давайте начнем с очень простого примера, решающего почти ежедневную проблему: идеальное центрирование. Самое простое решение для этой задачи — это использовать flexbox.
.parent {
display: flex;
height: 300px; /* Или что угодно */
}

.child {
width: 100px; /* Или что угодно */
height: 100px; /* Или что угодно */
margin: auto; /* Магия! */
}
Так происходит благодаря тому, что свойство вертикального выравнивания margin установленное в autoво flex контейнере, поглощает дополнительное пространство. Таким образом, установка margin в autoсделает объект идеально отцентрированным по обеим осям.
Теперь давайте используем еще несколько свойств. Рассмотрим список из 6 элементов, все с фиксированными размерами, но могут быть и авторазмеры. Мы хотим, чтобы они были равномерно распределены по горизонтальной оси, чтобы при изменении размера браузера все масштабировалось хорошо и без медиа запросов.
.flex-container {
/* Сначала мы создаем flex контекст */
display: flex;
/* Затем мы определяем flex-direction и разрешаем элементам переходить на новые строки
* Запомните, что это то же самое что и:
* flex-direction: row;
* flex-wrap: wrap;
*/

flex-flow: row wrap;
/* Затем мы определяем, как распределяется оставшееся пространство */
justify-content: space-around;
}
Готово. Все остальное — это просто стайлинг.
Если изменить разрешение экрана ли масштаб, то будет так:
Давайте попробуем что-нибудь еще. Представьте, что у нас есть выровненные по правому краю элементы навигации в верхней части нашего веб-сайта, но мы хотим, чтобы они были выровнены по ширине на экранах среднего размера и располагались в один столбец на небольших устройствах. Это достаточно просто.
/* Большие экраны */
.navigation {
display: flex;
flex-flow: row wrap;
/* Это выровняет элементы по конечной части линии на главной оси */
justify-content: flex-end;
}

/* Средние экраны */
@media all and (max-width: 800px) {
.navigation {
/* На экранах среднего размера мы центрируем элементы, равномерно распределяя пустое пространство вокруг элементов */
justify-content: space-around;
}
}

/* Маленькие экраны */
@media all and (max-width: 500px) {
.navigation {
/* На маленьких экранах мы больше не используем направление строки, а используем столбец */
flex-direction: column;
}
}
Давайте попробуем что-то еще лучше, играя с гибкостью flex элементов! Как насчет 3-колоночного макета в полную высоту страницы с хедором и футером. И не зависит от исходного порядка элементов.
.wrapper {
display: flex;
flex-flow: row wrap;
}

/* Мы говорим, что все элементы имеют ширину 100%, через flex-base */
.wrapper > * {
flex: 1 100%;
}

/* Мы используем исходный порядок для первого мобильно варианта
* 1. header
* 2. article
* 3. aside 1
* 4. aside 2
* 5. footer
*/

/* Средние экраны */
@media all and (min-width: 600px) {
/* Мы говорим обеим боковым панелям встать в одну строку */
.aside { flex: 1 auto; }
}

/* Большие экраны */
@media all and (min-width: 800px) {
/* Мы инвертируем порядок первой боковой панели и основной и говорим главному элементу, чтобы он занимал вдвое большую ширину, чем две другие боковые панели
*/

.main { flex: 2 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}
Большие экраны
Средние экраны
Маленькие экраны

Префикс для Flexbox

Flexbox требует префикса для лучшей поддержки в разных браузерах. Он не только включает в себя предварительные настройки с префиксом вендора, в нем есть совершенно разные имена свойств и значений. Это связано с тем, что спецификации Flexbox со временем менялись, существуют «старые», «tweener» и «новые» версии.
Возможно, лучший способ справиться с этим — написать новый (и последний) синтаксис и запустить свой CSS через Autoprefixer, который очень хорошо справляется с fallback.
Кроме того, вот Sass @mixin, чтобы помочь с некоторыми префиксами, который также дает вам представление о том, что нужно сделать:
@mixin flexbox() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}

@mixin flex($values) {
-webkit-box-flex: $values;
-moz-box-flex: $values;
-webkit-flex: $values;
-ms-flex: $values;
flex: $values;
}

@mixin order($val) {
-webkit-box-ordinal-group: $val;
-moz-box-ordinal-group: $val;
-ms-flex-order: $val;
-webkit-order: $val;
order: $val;
}

.wrapper {
@include flexbox();
}

.item {
@include flex(1 200px);
@include order(2);
}

CSS синтаксис

flex: flex-grow flex-shrink flex-basis | auto | none | initial | inherit;

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

Значение
Описание
flex-grow
Коэффициент растяжения. Коэффициент увеличения ширины флекс-элемента относительно других флекс-элементов.
flex-shrink
Коэффициент сужения. Коэффициент уменьшения ширины флекс-элемента относительно других флекс-элементов.
flex-basis
Базовая ширина флекс-элемента.
auto
Эквивалентно "flex: 1 1 auto;".
none
Эквивалентно "flex: 0 0 auto;".
inherit
Значение наследуется от родительского элемента.
initial
Эквивалентно "flex: 0 1 auto;".

Пример использования

Устанавливаем единую длину для всех флекс-элементов не зависимо от их содержимого
#main div {
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: 1;
}
Flexbox, CSS

Селекторы CSS. Виды, группировка и специфичность

Что такое CSS селекторы

селектор {
свойство: значение;
свойство: значение;
...
}
Селекторы — это один из фундаментальных механизмов CSS. Именно они определяют то, к каким элементам будут применены стили, указанные в фигурных скобках.
Пример CSS правила:
p {
text-align: center;
font-size: 20px;
}
В этом CSS правиле, p— это селектор, в данном случае — это селектор элемента. Это CSS правило устанавливает стили (CSS свойства, описанные в нём) для всех элементов pна странице.
В CSS очень много различных типов селекторов. Используя один из них или комбинацию из нескольких можно очень точно применить стили к нужным элементам.

Базовые селекторы

К базовым селекторам можно отнести селектор по классу, тегу, идентификатору, атрибуту и универсальный селектор.

Селектор по элементу (тегу)

Селектор по элементу предназначен для выбора элементов по имени тега.
Синтаксис: имяТега
Пример задания правила для всех элементов pна странице:
/* селектор p выберет все элементы p на странице */
p {
padding-bottom: 15px;
}

Селектор по классу

Селектор по классу предназначен для выбора элементов по классу (значению атрибута class).
Синтаксис:.имяКласса
Пример задания правила для всех элементов, имеющих класс center:
/* селектор .center выберет все элементы, имеющие класс center */
.center {
text-align: center;
}

Селектор по идентификатору (id)

Селектор по идентификатору предназначен для выбора элемента по идентификатору (значению атрибута id).
Синтаксис: #имяИдентификатора
Пример задания правила для элемента, имеющего в качестве значения атрибута idзначение footer:
/* селектор #footer выберет элемент, имеющий идентификатор footer */
#footer {
height: 50px;
margin-top: 20px;
}

Универсальный селектор

Универсальный селектор (селектор звёздочка) предназначен для выбора всех элементов.
Синтаксис:*
Пример задания правила для всех элементов на странице:
/* селектор * выберет все элементы на странице */
* {
margin: 0;
padding: 0;
}

CSS селекторы по атрибуту

Селекторы по атрибуту предназначены для выбора элементов по имени атрибута и (или) его значению.
Типы селекторов по атрибуту:
[attr]– по имени атрибута;
[attr=value]– по имени и значению атрибута;
[attr^=value]– по имени и значению, с которого оно должно начинаться;
[attr|=value]– по имени атрибута и его значению, которое равно valueили начинается со value-;
[attr$=value]– по имени атрибута и значению, на которое оно должно заканчиваться;
[attr*=value]– по указанному атрибуту и значению, которое должно содержать value;
[attr~=value]– по имени атрибута и значению, которое содержит valueотделённое от других с помощью пробела.

[attr]

Пример задания правила для всех элементов на странице, имеющих атрибут target:
/* селектор [target] выберет все элементы на странице, имеющих атрибут target */
[target] {
background-color: red;
}

[attr=value]

Пример задания правила для всех элементов на странице, имеющих атрибут relсо значением nofollow:
/* селектор [rel="nofollow"] выберет все элементы на странице, имеющих атрибут rel со значением nofollow */
[rel="nofollow"] {
background-color: green;
}

[attr^=value]

Пример задания правила для всех элементов на странице, имеющих атрибут class, значение которого начинается с col:
/* селектор [class^="col"] выберет все элементы на странице, имеющих атрибут class, значение которого начинается с col */
[class^="col"] {
background-color: yellow;
}

[attr|=value]

Пример задания правила для всех элементов на странице, имеющих атрибут class, значение которого равно testили начинается с test-(т.е. с обязательным дефисом, после которого идёт остальное содержимое значения):
/* селектор [class|="test"] выберет все элементы на странице, имеющих атрибут class, значение которого равно test или начинается с test- */
[class|="test"] {
background-color: orange;
}

[attr$=value]

Пример задания правила для всех элементов на странице, имеющих атрибут class, значение которого заканчивается на color:
/* селектор [class$="color"] выберет все элементы на странице, имеющих атрибут class, значение которого заканчивается на color */
[class$="color"] {
background-color: yellow;
}

[attr*=value]

Пример задания правила для всех элементов на странице, имеющих атрибут href, значение которого содержит подстроку youtu. be (например будет выбран элемент, если атрибут href у него равен https:// youtu.be/TEOSuiNfUMA):
/* селектор [href*="youtu.be"] выберет все элементы на странице, имеющих атрибут href, значение которого содержит youtu.be */
[href*="youtu.be"] {
background-color: green;
}

[attr~=value]

Пример задания правила для всех элементов на странице, имеющих атрибут data-content, значение которого содержит news, отделённое от других с помощью пробела (например будет выбран элемент, если у него атрибут data-content равен hot-news news news-football):
/* селектор [data-content~="news"] выберет все элементы на странице, имеющих атрибут data-content, значение которого содержит news, отделённое от других с помощью пробела */
[data-content~="news"] {
background-color: brown;
}

Псевдоклассы

Псевдоклассы предназначены для более точного выбора элементов в зависимости от их динамического состояния или расположения. С помощью них можно, например, установить стили элементу при поднесении к нему курсора или стилизовать элемент в зависимости от того какой он имеет порядковый номер.
Псевдоклассы — это дополнение к основному селектору, которое позволяет выбрать элемент в зависимости от его особого состояния. Добавляется он к селектору c помощью символа :, т.е. так селектор:псевдокласс.

Псевдоклассы для выбора элементов в зависимости от их состояния

К этой группе псевдоклассов можно отнести псевдоклассы: :link, :visited, :hover, :active и :focus.
Псевдоклассы :linkи :visitedпредназначены исключительно для ссылок (элементов aс атрибутом href).
Псевдоклассы :hover, :activeи :focusмогут применяться не только к ссылкам, но и к другим элементам.

Псевдокласс :link

Псевдокласс :link предназначен для выбора не посещённых ссылок.
Пример задания правила для всех элементов aс классом external, которые пользователь ещё не посетил:
/* селектор a.external:link выберет все элементы a с классом external пользователь по которым ещё не переходил */
a.external:link {
color: red;
}

Псевдокласс :visited

Псевдокласс :visited предназначен для выбора посещённых ссылок.
Пример задания правила для всех элементов a, расположенных в .aside, пользователь которые уже посетил:
/* селектор .side a:visited выберет все элементы a, находящиеся в .aside, пользователь которые уже посетил */
.aside a:visited {
color: #000;
}

Псевдокласс :active

Псевдокласс :active предназначен для выбора элементов в момент когда они активируются пользователем. Например, когда пользователь нажал левой кнопкой мышкой на ссылку, но её ещё не отпустил. В основном данный класс применяется для ссылок (a) и кнопок (button), но может также использоваться и для других элементов.
Пример задания CSS правила для всех элементов aкогда они активируются пользователем:
/* селектор a:active выберет все элементы a, находящиеся в активном состоянии */
a:active {
background-color: yellow;
}

Псевдокласс :hover

Псевдокласс :hover предназначен для выбора элементов при поднесении к ним курсора (при наведении на них).
Пример задания CSS правила для всех элементов .btn-warningпри поднесении к ним курсора:
/* селектор .btn-warning:hover выберет все элементы .btn-warning при поднесении к ним курсора */
.btn-warning:hover {
color: #fff;
background-color: #ff8f00;
}
При задании CSS-правил для ссылок с использованием псведоклассов :link, :visited, :hoverи :active, их следует распологать в следеующем порядке:
a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }
Если CSS-правила расположить в другом порядке, то часть из них могут не работать.

Псевдокласс :focus

Предназначен для выбора элемента, который в данный момент находится в фокусе. Например, данное состояние может активироваться когда мы кликаем мышью в текстовое поле или переходим в него с помощью клавиши tabна клавиатуре.
Пример задания CSS правила для элемента input[type="text"] при нахождении его в фокусе:
/* селектор input[type="text"] найдет элемент input с атрибутом type="text" при нахождении его в фокусе */
input[type="text"]:focus {
background-color: #ffe082;
}

По расположению среди соседей

При выборе элементов можно дополнительно с помощью псевдоклассов задать условие (фильтр) по их расположению (порядковому номеру) в родителе.
Псевдоклассы, предназначенные для этого: :first-child, :last-child, :only-child, :nth-child (выражение), :nth-last-child (выражение).

Псевдокласс :first-child

Псевдокласс :first-child применяется для выбора элементов, которые являются первыми дочерними элементами своего родителя.
Пример задания CSS правила для элементов liявляющимися первыми дочерними элементами своего родителя:
/* селектор li:first-child выберет элементы li, которые являются первыми элементами своего родителя */
li:first-child {
font-weight: bold;
}

Псевдокласс :last-child

Псевдокласс :last-child применяется для выбора элементов, которые являются последними дочерними элементами своего родителя.
Пример задания CSS правила для элементов .alert-warning, которые являются последними дочерними элементами своего родителя:
/* селектор .alert-warning:last-child выберет элементы .alert-warning которые являются последними элементами своего родителя */
.alert-warning:last-child {
font-weight: bold;
}

Псевдокласс :only-child

Псевдокласс :only-child используется для выбора элементов, если они являются единственными дочерними элементами внутри родительского контейнера.
Например:
h2:only-child {
...
}
Селектор h2:only-child выберет все элементы h2, если они являются единственными дочерними элементами своего родителя.
Действие аналогичное only-child можно выполнить с помощью псевдоклассов :first-child и :last-child. Например селектор h2:only-child можно ещё реализовать так: h2:last-child:first-child.

Псевдокласс :nth-child (выражение)

Псевдокласс :nth-child() применяется для выбора элементов по их порядковому номеру в родителе. В качестве выражения можно использовать число, формулу или ключевые слова odd или even. Отсчёт элементов в родителе начинается с 1.
Например:
/* селектор .li:nth-child(2) выберет элементы li, которые явлются вторыми элементами своего родителя */
.li:nth-child(2) { ... }
/* селектор .li:nth-child(odd) выберет элементы li, которые явлются нечётными элементами (1, 3, 5, ...) своего родителя */
.li:nth-child(odd) { ... }
/* селектор .li:nth-child(even) выберет элементы li, которые явлются чётными элементами (2, 4, 6, ...) своего родителя */
.li:nth-child(even) { ... }
/* селектор .li:nth-child(2n+1) выберет элементы li, которые имеют порядковые номера 1, 3, 5, 7, ... внутри своего родителя */
.li:nth-child(2n+1) { ... }
Формула имеет следующую запись: An + B. Aи B- это числа, а n— счетчик, принимающий целые значения, начиная с 0 (т.е. 0, 1, 2, 3 ...).
Например, формула вида 3n + 2будет определять элементы с порядковыми номерами (2, 5, 8, ...). Т.е. 3 * 0 + 2, 3 * 1 + 2, 3 * 2 + 2, ...
А например, формула вида 5nбудет определять элементы с порядковыми номерами (0, 5, 10, ...). Т.е. 5 * 0, 5 * 1, 5 * 2, ...

Псевдокласс :nth-last-child (выражение)

Псевдокласс :nth-last-child() выполняет те же действия что и :nth-child() за исключением того, что отсчет элементов в родителе вёдется не с начала, а с конца. В псведоклассе :nth-last-child (выражение)в качестве выражения можно использовать те же вещи, т.е. число, формулу, или ключевые слова oddили even

По расположению среди соседей с учётом типа элемента

В CSS имеются псевдоклассы аналогичные :first-child, :last-child и т.д. Они отличаются от них только тем, что выполняют это с учётом типа элемента.
Список псевдоклассов, предназначенных для этого: :first-of-type, :last-of-type, :only-of-type, :nth-of-type (выражение), :nth-last-of-type (выражение).

Псевдокласс :first-of-type

Данный псевдокласс очень похож на :first-child, но в отличие от него он выбирает не просто первый элемент, а первый элемент своего родителя с учётом его типа.
Например, выберем все элементы p, которые являются первыми элементами указанного типа у своего родителя:
p:first-of-type {
...
}
HTML:
<section>
<h2>...</h2>
<p>...</p> <!-- будет выбран этот элемент -->
<p>...</p>
</section>
<section>
<h2>...</h2>
<p>...</p> <!-- будет выбран этот элемент -->
<p>...</p>
</section>
При использовании селектора p:first-child, не один элемент pне был выбран, т.к. не один из них не является первым дочерним элементом своего родителя.

Псевдокласс :last-of-type

Данный псевдокласс предназначен для выбора элементов, которые являются последними дочерними элементами данного типа своего родителя.
Пример записи:
li:last-of-type {
...
}

Псевдокласс :only-of-type

Псевдокласс :only-of-type применяется для выбора элементов, если каждый из них являются единственным дочерним элементом данного типа внутри своего родителя. В отличие от :only-child псведокласс :only-of-type работает аналогично, но с учётом типом элемента.
Пример:
p:only-of-type {
...
}
В этом примере стили будут применены к элементам p, которые являются единственным элементом p внутри своего родителя.

Псевдокласс :nth-of-type (выражение)

Данный псевдокласс предназначен для выбора элементов по их порядковому номеру в родителе с учетом их типа.
Псевдокласс :nth-of-type (выражение)похож на :nth-child (выражение) с разницей лишь а том, что он учитывает тип элемента. В качестве выражения также можно использовать число, формулу или ключевые слова odd или even. Отсчёт элементов в родителе начинается с 1.
Например:
<section>
<h2>...</h2>
<p>...</p> <!-- Селектор p:nth-child(2) выберет этот элемент -->
<p>...</p> <!-- Селектор p:nth-of-type(2) выберет этот элемент -->
</section>
Селектор p:nth-child(2) выберет второй по счёту элемент, если он является p, а селектор p:nth-of-type(2) веберет второй дочерний элемент p среди дочерних p.

Псевдокласс :nth-last-of-type (выражение)

Псевдокласс :nth-last-of-type (выражение)аналогичен классу :nth-of-type (выражение) с разницей в том, что отсчёт дочерних элементов ведётся с конца.

Псевдоклассы для элементов форм

К этой группе можно отнести псевдоклассы :enabled, :disabled и :checked.
Псевдоклассы этой группы, а также :hover, :active и :focus ещё называют событийными селекторами, т.к. они позволяют применить стили при наступлении определённых событий.

Псевдокласс :checked

Псевдокласс :checked предназначен для выбора элементов radio, checkbox и option внутри select, которые находятся во включенном состоянии.
Пример:
<div class="form-group">
<input type="checkbox" id="answer-1">
<label for="answer-1">Я знаю что такое :checked</label>
</div>
CSS:
input:checked + label {
background-color: yellow;
}
В этом примере фон элемента label при отмеченном checkbox выделяется цветом. Выбор включенного чекбокса выполняется с помощью псевдокласса :checked.

Псевдокласс :enabled

Псевдокласс :enabled предназначен для выбора включенных элементов формы, с которыми пользователь может взаимодействовать, например, нажать на него или внести текст.
Пример, в котором установим для всех включенных элементов input фон:
input:enabled {
background-color: yellow;
}

Псевдокласс :disabled

Элементы формы могут кроме включенного состояния находиться ещё в отключенном.
Псевдокласс :disabled предназначен для выбора отключенных элементов формы, т.е. элементов с которыми пользователь в данный момент не может взаимодействовать.
Например, выберем все отключенные элементы input:
input:disabled {
...
}

Остальные псевдоклассы

Псевдокласс :not (селектор)

Псевдокласс :not() предназначен для выбора элементов, которые не содержат указанный селектор.
Например:
/* Селектор .aside > div:not(:first-child) выберет все элементы div кроме первого непосредственно расположенные в .aside */
.aside > div:not(:first-child) { ... }
В качестве селектора можно указывать селекторы по тегам, классам, атрибутам, использовать псевдоклассы, т.е. всё кроме псведокласса :not(), несколько сгруппированных селекторов, псевдоэлементы, дочерние и вложенные селекторы:
/* такие конструкция работать не будет */
:not(:not(...)) { ... }
div:not(.alert.alert-warning) { ... }
.item:not(::before) { ... }
.slider .slider__item:not(.active img) { ... }
td:not(.row + td) { ... }
При необходимости можно использовать несколько псевдоклассов :not().
Например:
/* применим стили ко всем элементам div, расположенных непосредственно в .message, за исключением .alert-warning и .alert-danger */
.message > div:not(.alert-warning):not(.alert-danger) { ... }
Пример CSS селектора для выбора элементов, которые не содержат некоторый класс:
// этот селектор выберет все элементы p, которые не содержат класс alert
p:not(.alert) {
...
}

Псевдокласс :empty

Псевдокласс :empty предназначен для выбора пустых элементов (т.е. элементов, у которых нет дочерних узлов, в том числе текстовых).
Пример:
div:empty {
...
}
Селектор div:empty выберет все пустые элементы div на странице.

Псевдокласс :root

Псевдокласс :rootпредназначен для выбора корневого элемента документа. В HTML документе данным элементом является <html>. В отличие от селектора по тегу htmlданный псевдокласс имеет более высокий приоритет.
Применять :root можно например для объявления CSS переменных:
:root {
--text-info: hotpink;
--text-warning: hotpink;
--aside-padding: 10px 15px;
}

Псевдокласс :target

Псевдокласс :target предназначен для выбора элемента, идентификатор которого соответствует хэшу в URL-адресе.
Например:
<h2 id="header-1">...</h2>
<h2 id="header-2">...</h2>
CSS-правило:
:target {
color: red;
}
В этом примере стили будут применены к элементу с id="header-1", если хэш URL страницы будет равен #header-1. Если же хэш будет равен #header-2, то псевдокласс :target соответственно выберет элемент с id="header-2" и стили уже будут применены к нему.

Группировка селекторов

Для задания правил нескольким селекторам одновременно их необходимо перечислить через запятую.
Синтаксис: селектор1, селектор2, ...
Пример задания правила для всех элементов h3 и h4 на странице:
/* селектор h3, h4 выберет все элементы на странице, имеющих тег h3 и h4 */
h3, h4 {
font-size: 20px;
margin-top: 15px;
margin-bottom: 10px;
}

Комбинирование селекторов

В CSS селекторы можно комбинировать. Осуществляется это очень просто, посредством последовательного их записывания, без использования пробела.
Пример селектора для выбора элементов, которые имеют одновременно два класса:
.modal.open {
...
}
Пример селектора для выбора элементов, которые имеют указанный класс, атрибут, и является первым дочерним элементом в своём родителе:
.btn[data-toggle="collapse"]:first-child { ... }

Селекторы отношений

В HTML документе каждый элемент всегда связан с другими элементами.
Виды отношений между HTML элементами:
  • родитель– элемент, непосредственно в котором находится рассматриваемый элемент;
  • предок– это элемент, который расположен на одном из уровней иерархии элементов, до которого можно дойти двигаясь от рассматриваемого элемента к его родителю, от его родителя к родителю его родителя и т.д.
  • дети– это элементы, непосредственно расположенные в текущем рассматриваемом элементе;
  • потомки (дочерние элементы)– это любые элементы, которые находятся в текущем элементе вне зависимости от уровня иерархии, в котором они расположены;
  • соседи (сиблинги)– это элементы, расположенные на том же уровне вложенности (иерархии), что и рассматриваемый элемент; или другими словами — это все другие элементы, которые имеют того же родителя что и текущий рассматриваемый элемент.
Более наглядно про отношения элементов приведено на рисунке. На этом рисунке отношения рассмотрены относительно элемента выделенного синим цветом.

Виды отношений между HTML элементами

В CSS имеется 4 вида селекторов отношений.
Первые два из них X Y и X > Y относятся к вложенным селекторам. Они предназначены для поиска элементов в зависимости от их нахождения внутри других.
Остальные два X + Y и X ~ Y являются CSS селекторами для выбора соседних элементов.
Эти селекторы называют составными или комбинацией селекторов. Так как они на самом деле состоят из нескольких селекторов, разделённых между собой с помощью специальных символов (комбинаторов). Всего различают 4 символа: пробел, знак >(больше), знак +и ~(тильда).

Селектор X Y (для выбора вложенных или дочерних элементов)

Селектор X Y(предок потомки) предназначен для выбора элементов Y, находящихся в X.
Другими словами, селектор X Y предназначен для выбора элементов Y, являющихся потомками элементов определяемым селектором X.
Селекторы X Y называют контекстными или вложенными.
Например, селектор дочерних элементов div pвыберет все элементы p, расположенные в div.

Селектор X > Y

Селектор X > Y (родитель > дети) предназначен для выбора элементов, определяемым селектором Yнепосредственно расположенных в элементе, определяемым селектором X.
По другому можно сказать, что селектор X > Y предназначен для выбора Y, у которых родителем является элемент, определяемым X.
Например, комбинация селекторов li > ul выберет все элементы ul, которые непосредственно расположены в li.

Селектор X + Y

Селектор X + Y предназначен для выбора элементов Y, каждый из которых расположен сразу же после X. Элементы определяемым селектором X и Y должны находиться на одном уровне вложенности, т.е. быть по отношению друг к другу соседями (сиблингами).
Например, комбинация селекторов input +  label выберет все элементы label, которые расположены сразу же за элементом input, и являющиеся друг по отношению к другу соседями (сиблингами).

Селектор X ~ Y

Селектор X ~ Y предназначен для выбора элементов Y, которые расположены после X. При этом элементы, определяемые селектором X и Y, должны являться по отношению друг к другу соседями (сиблингами).
Например, p ~ span выберет все элементы span, расположенные после элемента p на том же уровне вложенности.

Приоритет селекторов

Когда в CSS имеется несколько правил, устанавливающих одно и тоже CSS свойство некоторому элементу, приоритетным из них является то, в котором селектор имеет большую специфичность (вес).
Специфичность селекторов удобно представлять в виде 4 чисел: 0,0,0,0.
При этом сравнение селекторов по весу нужно выполнять слева направо. Если первая цифра одного селектора больше, чем у другого, то он является более специфичным и к элементу будет применяться CSS-свойство, заданное в нём. Если цифры равны, то выполняем сравнение следующих цифр селекторов и т.д.
Если у сравниваемых селекторов все цифры равны, то будет применяться тот, который ниже из них расположен по коду.
Как считать эти цифры? Каждый селектор в зависимости от типа имеет вес:
  • универсальный селектор (не добавляет вес) – 0,0,0,0;
  • селекторы по тегу, псевдоэлемент добавляют единичку к четвёртой цифре – 0,0,0,1;
  • селекторы по классу и по атрибуту, псевдоклассы добавляют единичку ко третьей цифре – 0,0,1,0;
  • селектор по идентификатору добавляют единичку ко второй цифре – 0,1,0,0;
Стили, расположенные в атрибуте styleэлемента, являются более специфичными по сравнению с селекторами. Вес этих стилей определяется единицей в первой цифре – 1,0,0,0.
Например:
*– 0,0,0,0;
li– 0,0,0,1;
li::before– 0,0,0,2;
ul > li– 0,0,0,2;
div input+label– 0,0,0,3;
h1 + div[data-target]– 0,0,1,2;
.btn.show– 0,0,2,0;
ul li a.item– 0,0,1,3;
#aside div.show– 0,1,1,1;
style="..."– 1,0,0,0;
Повысить важность определённого CSS свойства можно с помощью ключевого слова !important. В этом случае будет использоваться именно данное CSS-свойство.
Например:
<div class="alert-warning" style="background-color: #ffc107;"> ... </div>
В CSS:
.alert-warning {
background-color: #ffa000 !important;
}
В этом примере элементу будет установлен тот фон к которому добавлено слово !important. !important перебивает любой вес.
Интересный случай, когда нужно определить какое значение CSS-свойства будет применено к элементу, если !important добавлено к нескольким из них.
В этом случае будет применено то значение CSS-свойства c !important у которого больше вес селектора.
К примеру, если добавить !important к CSS-свойству расположенному в style, то получим максимальную возможную специфичность, которую уже никак не перебьёшь.
Например:
<p id="message" style="font-size: 20px !important;">...</p>
CSS:
p#message {
font-size: 16px !important;
}
В этом примере к элементу #message будет применено CSS-свойство font-sizeсо значением 20px, т.к. хоть у каждого из них имеется состояние !importants, но специфичность style (1,0,0,0) больше чем у селектора p#message(0,1,0,1).

Каких селекторов нет в CSS

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

Слова, часто используемые в CSS-классах

Изображения

image, img, picture, pic

— картинка

icon — иконка

logo — логотип

userpic, avatar — юзерпик, маленькая картинка пользователя

thumbnail, thumb — миниатюра, уменьшенное изображение

Текст

title, subject, heading, headline, caption — заголовок

subtitle — подзаголовок

slogan — слоган

lead, tagline — лид-абзац в тексте

text — текстовый контент

desc — описание, вариант текстового контента

excerpt — отрывок текста, обычно используется перед ссылкой «Читать далее...»

quote, blockquote — цитата

snippet — пример кода

link — ссылка

copyright, copy — копирайт

Списки

list, items — список

item — элемент списка

Блоки

page — корневой элемент страницы

header — шапка (страницы или элемента)

footer — подвал (страницы или элемента)

section — раздел контента (один из нескольких)

main, body — основная часть (страницы или элемента)

content — содержимое элемента

sidebar — боковая колонка (страницы или элемента)

aside — блок с дополнительной информацией

widget — виджет, например, в боковой колонке

Раскладка

wrapper, wrap — обёртка, обычно внешняя

inner — внутренняя обёртка

container, holder, box — контейнер

grid — раскладка (страницы или элемента) в виде сетки (обычно содержит в себе row и  col)

row — контейнер в виде строки

col, column — контейнер в виде столбца

Элементы управления

button, btn — кнопка, например, для отправки формы

control — элемент управления, например, стрелки «Вперёд/назад» в фотогалерее, кнопки управления слайдером

dropdown — выпадающий список

Медиавыражения

phone, mobile — мобильные устройства

phablet — телефоны с большим экраном (6-7")

tablet — планшеты

notebook, laptop — ноутбуки

desktop — настольные компьютеры

Размеры

tiny, xs — маленький, крохотный

small, sm — небольшой

medium, base — средний

big, large, lg — большой

huge, xl — огромный

narrow — узкий

wide — широкий

Разное

search — поиск

socials — блок иконок соцсетей

advertisement, adv, commercial, promo — рекламный блок (режутся Адблоком, не рекомендуется использовать такие классы для блоков с внутренней рекламой)

features, benefits — список основных особенностей товара, услуги

slider, carousel — слайдер, интерактивный элемент с прокруткой содержимого

pagination — постраничная навигация

user, author — пользователь, автор записи или комментария

meta — блок с дополнительной информацией, например, блок тегов и даты в посте

cart, basket — корзина

breadcrumbs — навигационная цепочка, «хлебные крошки»

more, all — ссылка на полную информацию

modal — модальное (диалоговое) окно

popup — всплывающее окно

tooltip, tip — всплывающее подсказки

preview — анонс, отрывок, например новости или поста, может состоять из заголовка, описания и картинки. Предполагается ссылка на полную версию

overlay — перекрывающий слой, например, для затемнения изображений или создания модальных окон

Состояния

active, current — активный элемент, например, текущий пункт меню

visible — видимый элемент

hidden — скрытый элемент

error — статус ошибки

warning — статус предупреждения

success — статус успешного выполнения задачи

pending — состояние ожидания, например, перед сменой статуса на error или success

Примеры использования

Простой список

<ul class="list">
  <li class="item">Первое</li>
  <li class="item">Второе</li>
  <li class="item">Третье</li>
</ul>




Картинка пользователя (юзерпик)




<div class="user">
  <img class="user__img" src="userpic.png" alt="Дормидонт Петрович">
  <a class="user__link" href="#">Дормидонт Петрович</a>
</div>






Галерея




<div class="gallery">
  <ul class="gallery__list">
    <li class="gallery__item">
      <img class="gallery__img" src="flowers.jpg" alt="Цветём как в последний раз">
    </li>
    <li class="gallery__item">
      <img class="gallery__img" src="trees.jpg" alt="Парк «Три сосны»">
    </li>
  </ul>
</div>






Навигация




<nav class="nav">
  <a class="nav__link nav__link--active">Главная</a>
  <a class="nav__link" href="#">Второстепенная</a>
  <a class="nav__link" href="#">Третья с конца</a>
  <a class="nav__link" href="#">Предпоследняя</a>
  <a class="nav__link" href="#">Совсем конец</a>
</nav>
<nav class="nav">
  <ul class="nav__list">
    <li class="nav__item nav__item--current">
      <a class="nav__link">Главная</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">Статьи</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">Фотогалерея</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">Контакты</a>
    </li>
  </ul>
</nav>






Виджет в боковой колонке




<div class="widget">
  <h4 class="widget__title">Выращиваем желе</h4>

  <div class="widget__content">
    <p>Чтобы вырастить общительное дружелюбное желе,
    нам потребуется рулон поролона, два килограмма сахара,
    три яйца и пол чайной чашки ацетона.</p>

    <a class="widget__link" href="#">Не читать дальше...</a>
  </div>
</div>






Блок новостей




<div class="news">
    <h3 class="news__title">Вчерашние новости</h3>

    <ul class="news__list">
        <!-- к классу элемента добавляем класс блока,
             чтобы создать новое пространство имён -->
        <li class="news__item item-news">
            <h4 class="item-news__title">Соревнования среди воблы по конькобежному спорту</h4>
            <div class="item-news__text">
              <p>Победила команда килек из Петрозаводска</p>

              <a href="#" class="item-news__link">Читать дальше</a>
            </div>
        </li>

        <li class="news__item item-news">
            <h4 class="item-news__title">Учёные уточнили роль напильника в уходе за ногтями</h4>
            <div class="item-news__text">
              <p>Британские учёные высоко оценили вклад
                напильника в отращивание полутораметровых ногтей.</p>

              <a href="#" class="item-news__link">Не читать дальше</a>
            </div>
        </li>
    </ul>
</div>








Статья или пост в блоге (простой вариант)




<article class="article">
  <h3 class="article__title">Нащупываем чакры у пучка петрушки</h3>
  <time class="article__datetime">32 мая, 10:87</time>

  <div class="article__author author-article">
    <img class="author-article__img" src="userpic.png" alt="Клешня Андреевна">
    <a class="author-article__link" href="#">Клешня Андреевна Долгорукая</a>
    <div class="author-article__desc">Наш эксперт по чакрам</div>
  </div>

  <div class="article__content">
    Сходите на рынок и купите у старушек пучок петрушки грамм на 100.
    Как следует переберите, очистите от жуков и гусениц. Жуков отдайте поиграться
    коту, гусениц поселите в горшок с кактусами, пусть одна будет Джоном,
    вторая Билли, а у вас в горшке теперь будет Дикий Запад. Вернитесь
    к пучку петрушки. Ласково взгляните на него и как следует почешите
    за ухом, можно себе или коту. Перевяжите атласной ленточкой,
    непременно завяжите бант. Поздравляем! Теперь у вас есть полностью
    одомашненный пучок петрушки, который будет весело бегать за вами
    по пятам и проращивать свои семена в ваших тапках.
  </div>
</article>








Статья или пост в блоге (сложный вариант)




<article class="entry">
  <header class="entry__header">
    <h3 class="entry__title title-entry">
      <a class="title-entry__link" href="#">Резиновые уточки как способ самопознания</a>
    </h3>

    <time class="entry__datetime">32 мая, 10:87</time>
  </header>

  <div class="entry__author author-entry">
    <img class="author-entry__img" src="userpic.png" alt="Василиса Сергеевич">

    <a class="author-entry__link" href="#">Василиса Сергеевич</a>
  </div>

  <div class="entry__content">
    Достаньте с чердака коробку с полусотней резиновых уточек,
    оставшихся после празднования нового года. Из уточек
    и горящих свечей выложите пентаграмму на полу комнаты.
    Сядьте посередине в позу лотоса, в каждую руку возьмите
    по немецко-бразильскому словарю, прокашляйтесь, наберите
    полную грудь воздуха и громко и уверенно,
    с полной самоотдачей скажите "Кря!"
  </div>

  <div class="entry__tags tags-entry">
    <h4 class="tags-entry__title">Метки</h4>

    <ul class="tags-entry__list">
      <li class="tags-entry__item">
        <a class="tags-entry__link" href="#">хоровод своими руками</a>
      </li>
      <li class="tags-entry__item">
        <a class="tags-entry__link" href="#">фарфоровые тапки</a>
      </li>
      <li class="tags-entry__item">
        <a class="tags-entry__link" href="#">гуталин в кулинарии</a>
      </li>
    </ul>
  </div>

  <div class="entry__actions actions-entry">
    <ul class="actions-entry__list">
      <li class="actions-entry__item actions-entry__item--read">
        <a class="actions-entry__link" href="#">238 ответов</a>
      </li>
      <li class="actions-entry__item actions-entry__item--write">
        <a class="actions-entry__link" href="#">Написать в спортлото</a>
      </li>
      <li class="actions-entry__item actions-entry__item--share">
        <a class="actions-entry__link" href="#">Поделиться</a>
      </li>
    </ul>
  </div>
</article>

















      

        
        
          CSS
        
      

    

    

      

        
Список всех Селекторов в CSS

        
          
        
      

      








Селектор




Пример




Описание примера








*




*




Все элементы.








#id




#firstname




Элемент с id="firstname".








.class




.intro




Все элементы с class="intro".








.class1.class2




.name1.name2




Все элементы с class="name1 name2".








.class1 .class2




.name1 .name2




Все элементы с class="name2"у которых родитель с class="name1".








tag




p




Все <p>элементы.








tag.class




p.intro




Все <p>элементы с class="intro".








tag, tag




div, p




Все <div>и все <p>элементы.








tag tag




div p




Все <p>внутри всех <div>.








tag > tag




div > p




Все <p>прямой родитель которых <div>.








tag + tag




div + p




<p>который находятся сразу после <div>.








tag ~ tag




div ~ p




Все <p>которые находятся после <div>.








[attribute]




[target]




Все элементы с target="что-либо".








[attribute = value]




[target=_blank]




Все элементы с target="_blank".








[attribute ^= value]




a[href^="https"]




Каждый <a>атрибут hrefкоторого начинается с "https".








[attribute $= value]




a[href$=".pdf"]




Каждый <a>атрибут hrefкоторого заканчивается ".pdf".








[attribute *= value]




a[href*="w3schools"]




Каждый <a>атрибут hrefкоторого содержит подстроку "w3schools".








[attribute ~= value]




[title~=flower]




Все элементы в атрибуте titleкоторых есть слово "flower".








[attribute |= value]




[lang|=en]




Все элементы атрибут langкоторых начинается с "en".








:active




a:active




Активная ссылка.








::after




p::after




Вставляет псевод-элемент в начале каждого <p>элемента.








::before




p::before




Вставляет псевод-элемент в конце каждого <p>элемента.








:checked




input:checked




Все выбранные <input type="checkbox">элементы.








:default




input:default




Все <input>элементы.








:disabled




input:disabled




Все <input disabled>элементы.








:empty




p:empty




Все пустые <p>, в которых нет пробелом, текста или других элементов.








:enabled




input:enabled




Все активные (не disabled) элементы <input>.








:first-child




p:first-child




Первый элемент в списке родительского элемента.








:first-of-type




p:first-of-type




Первый <p>элемент в списке родительского элемента.








::first-letter




p::first-letter




Первая буква каждого <p>элемента.








::first-line




p::first-line




Первая линия каждого <p>элемента.








:focus




input:focus




<input>в котором находится курсор.








:focus-visible




a:focus-visible




Фокус сработает, только если на кнопку перешли с клавиатуры через TAB.








:focus-within




div:focus-within




Сработает на блоке, когда его внутренний элемент находится в фокусе.








:hover




a:hover




Сслыка на которую наведена мышка.








:in-range




input:in-range




Все <input>со значением в пределах указанного диапазона.








:indeterminate




input:indeterminate




Все <input>в статусе indeterminate.








:invalid




input:invalid




Все <input>с недопустимым значением.








:lang(language)




p:lang(it)




Все <p>с lang="it".








:last-child




p:last-child




Последний элемент в списке родительского элемента.








:last-of-type




p:last-of-type




Последний <p>в списке родительского элемента.








:link




a:link




Все непосещенные ссылки.








:not(selector)




:not(p)




Все не <p>элементы.








:not(:only-child)




div:not(:only-child)




Все <div>внутри которых больше одного элемента.








:nth-child(n)




p:nth-child(2)




Второй элемент в списке родительского элемента.








:nth-of-type(n)




p:nth-of-type(2)




Второй <p>в списке родительского элемента.








:nth-last-child(n)




p:nth-last-child(2)




Второй элемент в списке родительского элемента (счет идет с конца).








:nth-last-of-type(n)




p:nth-last-of-type(2)




Второй <p>в списке родительского элемента (счет идет с конца).








:only-child




p:only-child




Единственный <p>у родителя (других элементов быть не может).








:only-of-type




p:only-of-type




Один <p>у родителя (других элементы могут быть).








:optional




input:optional




Все <input>у которых нет артибута "required".








:required




input:required




Все <input>у которых указан атрибут "required".








:out-of-range




input:out-of-range




Все <input>со значением выходящим за указанный рэндж.








::placeholder




input::placeholder




Все <input>у которых указан атрибут "placeholder".








:read-only




input:read-only




Все <input>у которых указан атрибут "readonly".








:read-write




input:read-write




Все <input>у которых не указан атрибут "readonly".








:root




:root




Корен документа.








::selection




::selection




Выберет текущее выделение текста мышкой.








:target




#news:target




Выберет элемент с id="news"когда к нему пришил по клику.








:valid




input:valid




Все <input>с валидным значением.








:visited




a:visited




Все посещенные ссылки.








Описание CSS селекторов


*


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






* { margin:0; padding:0; }






*можно использовать в связке с другими селекторами. Например, выделим все дочерние элементы #containerсплошной черной рамкой шириной 1px.






#container * { border: 1px solid black; }






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


.class


Выбирает элемент у которого есть атрибут classс указанным значением: class="myclass".


Название класса, может состоять из латинских букв (a-zA-Z), цифр (0-9), символа дефиса и подчеркивания (- _).


Следующий код устанавливает красный цвет текста для всех элементов с классом error -








<div class="error">
.error { color: red; }








У одного элемента может быть несколько классов (через пробел): <div class="error myclass">.


#id


Выбирает элемент у которого есть атрибут idс указанным значением: id="myid".


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


Идентификатор должен состоять из латинских букв (a-zA-Z), цифр (0-9), символа дефиса или подчеркивания: - _. Начинается он только с буквы!


Следующий код устанавливает ширину и отступ элемента с идентификатором:








<div id="container">
#container { width: 960px; margin: auto; }








Селектор по ID имеет больший приоритет над селектором по классу (см. начало статьи). Поэтому по возможности используйте селекторы класса, это считается правилом хорошего тона и позволит при необходимости без лишних усилий "перебить" стили.


tag


Селектор HTML тега. Применяться ко всем указанным элементам в документе. Часто используется для задания цвета, фона, шрифта и др.


Следующий код задает цвет текста для всех ссылок и отступы для UL списков:






a { color: red; }
ul { margin-left: 0; }






X, Y


Объединяет несколько селекторов, так чтобы указать всем выбранным селекторам одинаковые стили.


Следующий код задает цвет текста для заголовков h2 и ссылок в теге LI:






h2,
li a { color: red; }






X Y


Выбирает элементы Y, которые являются дочерними к X. Может состоять из нескольких селекторов: X Y Z. Сначала обязательно указывается родитель, а после него дочерние элементы. Их количество может быть любым. Свойства стилей будут применены только к последнему элементу.


Например, следующий код выбирает любой элемент <а>, являющийся потомком элемента <li>: (<li><a href="ссылка">текст</a></li>):




li a { text-decoration: none; }




Это правило можно сочетать с идентификаторами и классами: body.opera a{ color:blue; }.


Х > Y


Выбирает элементы Y, которые являются дочерними к X. Выбирается только первый уровень дочерних элементов.


Пример:






.parent > li{ border: 1px solid red; }






Добавит отступ для liпервого уровня, т.е. тех который является прямым потомком элемента ul:






<ul class="parent">
<li> список1
<ul class="child">
<li>список11</li>
<li>список12</li>
</ul>
</li><!-- затронет -->
<li>список2</li><!-- затронет -->
<li>список3</li><!-- затронет -->
</ul>






Это правило не коснется <ul class="child">.




Х ~ Y


Выбирает все элементы Y, которые расположены после X (на том же уровне). По поведению похож на X + Y. Разница в том, что будут выбраны все следующие элементы, а не только первый.


Например, в указанном коде будут выбраны все элементы p, которые расположены после div:






div ~ p { color: red; }
Окрасит "текст 2" и "текст 3":
<div>текст</div>
<p>текст 2</p><!-- color: red; -->
<p>текст 3</p><!-- color: red; -->





Х + Y


Выбирает первый элемент Y, который находится после X(не вложен, а рядом). Стили будут применяться только к последнему элементу X.


Например, следующий код устанавливает красный цвет текста в абзаце p, который расположен сразу после div:






div + p { color: red; }
Получим:
<div>текст</div>
<p>текст 2</p><!-- color: red; -->
<p>текст 3</p>





a:link, a:visited, a:hover, a:active, a:focus


Выбирает элементы (обычно это поля формы или ссылки) в зависимости от их состояния.


    

  • 

    a:link— выбирает обычную (не посещенную) ссылку. Обычно этот селектор записывается просто как a.
    

    • 

  • 

    a:visited— выбирает уже посещенную ссылку.
    

    • 

  • 

    a:hover— выбирает ссылку на которую наведена мышка (под курсором).
    

    • 

  • 

    a:active— выбирает активную ссылку (на которую был сделан клик, пока еще никуда не кликали или когда на ссылку переключились при передвижении табом с клавиатуры).
    

    • 

  • 

    a:focus— выбирает активную ссылку (на которую кликнули, но еще не отпустили кнопку мышки).
    

    • 





a:link { color: red; } /* можно просто а{ } */ /* все не посещенные ссылки */


a:visted { color: purple; } /* все посещенные ссылки */


a:hover { color: green; } /* ссылка под курсором */


a:active { color: blue; } /* нажатая ссылка */


a:focus { color: dark; } /* ссылка в момент нажатия */




[attr]


Выбирает элементы, которые содержат указанный атрибут. Селектор атрибутов.






a[title] { color: green; }






Окрасит только "текст":






<a href="" title="описание">текст</a>
<a href="">текст 2</a>






[attr = value]


Выбирает элементы, у которых есть атрибут с указанным значением. Селектор атрибутов с точным значением.








a[href="http://example.com"] { color: red; }
Окрасит только "текст":
<a href="http://example.com">текст</a><!-- color: red; -->
<a href="http://example.com/article">текст 2</a>






[attr *= value]


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






a[href*="example"] { color: red; }






Окрасит "текст" и "текст 2":






<a href="http://example.com">текст</a><!-- color: red; -->
<a href="http://example.com/article">текст 2</a><!-- color: red; -->
<a href="http://xxx.ru/article">текст 2</a>






[attr ^= value]


Выбирает элементы, у которых значение атрибута начинается с указанной строки. Селектор атрибутов со значением в начале.






a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}






Установит фоновую картинку только для "текст":






<a href="http://example.com">текст</a>
<a href="/article">текст 2</a>






[attr $= value]


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


Например, выберем элементы, которые ссылаются на файлы определенного расширения.






a[href$=".jpg"] { color: red; }






Выберет ссылки a, ссылающиеся на изображения формата .jpg. Окрасит только "текст":






<a href="http://example.com/foto.jpg">текст</a>
<a href="http://example.com/foto2.png">текст 2</a>






[attr ~= value]


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


Он чем-то похож на *=, разница вот в чем:


    

  • 

    *=— ищет homeв любом месте значения. Найдет homeland.
    

    • 

  • 

    ~=— ищет homeразделеный пробелом. Найдет home land.
    

    • 







a[data-info ~= "external"] { color: red; }

a[data-info ~= "image"] { border: 1px solid black; }






Отработает так:






<a href="http://example.com" data-info="external">текст</a><!-- окрасит в красный -->

<a href="http://nettuts.com">текст 2</a><!-- не тронет -->

<a href="http://example.com" data-info="external image">текст 3</a><!-- окрасит и установит рамку -->

<a href="http://example.com" data-info="image">текст 4</a><!-- установит рамку -->




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


[attr |= value]


Выбирает элементы, у которых значение атрибута равно указанной строке или начинается с неё.


Пример: [lang |= ru]- элементы с атрибутом lang, значение которого равно ruили начинается с ru-, например "ru-RU". Но он практически не используется и его заменяет комбинация: [lang = ru], [lang ^= ru-].


:target


Выделяет активный якорь в HTML. Допустим у нас ссылка ссылается на внутренний якорь <a href="#anchor">на странице, тогда при клике по этой ссылке этот селектор выделить элемент имеющий атрибут id="anchor".






:target { color: red; }






Получим:






<a href="#anchor1">Перейти на якорь 1</a>
<a href="#anchor2">Перейти на якорь 2</a>








<!-- При клике по этим ссылкам выберется соответствующий элемент ниже -->
<p id="anchor1">Элемент 1</p>
<p id="anchor2">Элемент 2</p>








:checked


Стилизует выбранные radio / checkbox. Может использоваться с тегом inputили optionили без них: input:checked, option:checkedили :checked.


Например, следующий код выделяет сплошной черной рамкой в 1px область возле включенного флажка:






input[type=radio]:checked { border:1px solid black; }






:default


Выбирает элемент формы, который считается элементом по умолчанию. Работает с тегами <button>, <input>, <option>.






<form>
<input type="submit"><!-- будет выбран -->
<input type="submit">
<input type="reset">
</form>






    

  • 

    <option>считается дефолтным (:default), если это элемент с атрибутом selectedили первый enabled(NOT disabled) элемент по порядку DOM элементов. Для <select multiple>каждый selectedэлемент будет считаться дефолтным.
    

    • 

  • 

    <input type="checkbox"> и <input type="radio"> считаются дефолтными, если они выбраны (имеют атрибут checked).
    

    • 

  • 

    <button> считается дефолтной, если это базовая кнопка сабмита формы (<form>) — это первая в форме кнопка по порядку DOM элементов. Это также справедливо и для типов <input type="submit">.
    

    • 



:disabled


Выбирает любой disabled (отключенный) элемент.


Элемент считается отключенным, когда с ним нельзя взаимодействовать (выбрать, кликнуть, сфокусироваться, вписать что-либо и т.д.). Если элемент не disabled, то на нём по-умолчанию установлен статус enabled.


Примеры


Установим цвет фона для всех отключенных полей формы с типом text: <input type="text">:






<form action="#">
<legend>Shipping address</legend>
<input type="text" placeholder="Name">
<input type="text" placeholder="Address">
<input type="text" placeholder="Zip Code">
</form>

input[type="text"]:disabled {
background: #dddddd;
}










Установим цвет фона элементов <select class="country" disabled>— все отключенные элементы SELECT с классом COUNTRY:






select.country:disabled {
background: #dddddd;
}






:enabled


Выбирает включенный (активный) элемент.


Элемент считается включён, когда с ним можно взаимодействовать (выбрать, кликнуть, сфокусироваться, вписать что-либо и т.д.). enabledвключенными элементами считаются все не disabledэлементы.


Примеры


Установим белый цвет фона для всех активных (enabled) элементов <input>и серый для всех неактивных (disabled):








<form action="#">
<legend>Shipping address</legend>
<input type="text" placeholder="Name" disabled="disabled">
<input type="text" placeholder="Address">
<input type="text" placeholder="Zip Code">
</form>

input[type="text"]:enabled {
background: #fff;
}

input[type="text"]:disabled {
background: #dddddd;
}






:empty


Выбирает любой пустой элемент. Пустой значит в нём не должно быть ничего (ни одной node): ни пробелов, ни текста, ни других элементов. HTML комментарии, CSS код не повлияют на то что элемент будет считать не пустой.








.box {
background: red;
height: 200px;
width: 200px;
}

.box:empty {
background: lime;
}

<div class="box"><!-- пустой --></div>
<div class="box">Я буду красным</div>
<div class="box">
<!-- Я буду красным, так как перед комментарием стоят пробелы -->
</div>






::before


X::beforeдобавляет псевдо-элемент в начало X (внутрь тега). Работает вместе со свойством X::before{ content:'' }, которое указывает содержание добавленного элемента. content нужно указывать даже если содержание пустое (content:''), т.к. элемент должен хоть что-то содержать.


Например с помощью таких стилей, можно указать значок для LI списка:






li:before {
content: '-';
display: inline-block;
margin-right: .5em;
}






Получим:


    

      

    • 

      элемент 1
      

      • 

    • 

      элемент 2
      

      • 

    





Когда-то все браузеры реализовали эти псевдо-элементы с одним двоеточием: :after :before. Но стандарт с тех пор изменился и сейчас все, кроме IE8, понимают также современную запись с двумя двоеточиями. Для IE8 нужно по-прежнему одно.


::after


X:afterдобавляет псевдо-элемент в конец X (внутрь тега). Работать только совместно со свойством X::after{ content:'' }, которое указывает содержание добавленного элемента. content нужно указывать даже если содержание пустое (content:''), т.к. элемент должен хоть что-то содержать.


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






.clear:after {
content: '';
display: table;
clear: both;
}






:focus


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


В этом примере при перемещении курсора в поле <input type="text">его фон будет изменен на желтый:






input:focus {
background-color: yellow;
}






В этом примере стили применяться к любой ссылке <a>на которую был сдела клик:






a:focus {
outline: 2px solid yellow;
}






В этом примере при перемещении курсора в поле <input type="text">его ширина будет постепенно увеличиваться со 100 до 250 пикселей:






input[type=text] {
width: 100px;
transition: ease-in-out, width .35s ease-in-out;
}

input[type=text]:focus {
width: 250px;
}






:focus-visible


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


Например, фокус при нажатии мышкой не должен быть очевидным, а вот при переходе табом с клавиатуры должен быть очевидным - в этом случае сработает этот псевдо-селектор.


:focus-within


Выбирает элемент, если этот элемент или любой из его потомков сфокусирован. Другими словами, он представляет элемент, который сам соответствует псевдоклассу :focusили имеет потомка, который соответствует :focus. (включает потомков в теневых деревьях).


Этот селектор полезен, например, для выделения всего контейнера <form>, когда пользователь фокусируется на одном из его полей <input>.


Этот пример Выбирает <div>, когда фокусируется один из его потомков:






div:focus-within {
background: cyan;
}






Еще пример с формой:








<form>
<label for="given_name">Given Name:</label>
<input id="given_name" type="text">
<br>
<label for="family_name">Family Name:</label>
<input id="family_name" type="text">
</form>

form {
border: 1px solid;
color: gray;
padding: 4px;
}

form:focus-within {
background: #ff8;
color: black;
}

input {
margin: 4px;
}






Поддержка браузерами {percent}


:hover


Срабатывает при наведении мышки на элемент, когда курсор над элементом. Может применяться для любых элементов (div, span) не только ссылок <a>.


В следующем примере при наведении мышкой под ссылкой будет появляться черная линия толщиной 1px (замена свойству underline):






a:hover { border-bottom: 1px solid black; }






В следующем коде показано изменение цвета фона при наведении на элемент <div>:






div:hover { background: #e3e3e3; }






:not(selector)


Выбирает элементы, которые не содержат указанного селектора. Вместо "selector" может быть любой селектор, кроме псевдо-элементов (:first-letter). Двойное отрицание запрещено: 

:not(:not(...)).




Следующий код выбирает для стилизации все элементы, кроме элемента p:






*:not(p) { color: green; }






В этом примере выбираются все элементы li, у которых нет класса .last:






ul li:not(.last) { color: blue; }






Выберет "элемент 1" и "элемент 2":






<ul>
<li>элемент 1</li>
<li>элемент 2</li>
<li class="last">элемент 3</li>
</ul>






::first-line, ::first-letter


    

  • 

    ::first-line стилизует начальную (первую) строку.
    

    • 

  • 

    ::first-lette rстилизует начальную (первую) букву. Изменяются только шрифт, цвет текста, фон и т.д. привязан к множеству параметров: ширина окна браузера, язык, шрифт и т.п.
    

    • 





Эти селекторы принято записывать с двойным двоеточием ::first-line, но можно и с одним :first-line.


#1 Выбираем первую букву в параграфе


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






p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right:2px;
}






#2 Выбираем первую строку в абзаце


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






p::first-line {
font-weight: bold;
font-size: 1.2em;
}






:nth-child(n)


X:nth-child(n)выбирает каждый "n-ый" элемент Х, который находится на одном уровне с X. Считает все элементы на уровне X (неважно какой у элемента тег, т.е. любой тип, а не только тип X).Под типом подразумевается именно тег элемента (div, span, li), а не его класс или что-то еще.




Заметка: Есть такой же селектор :nth-of-type(n)разница между ними в том, что X:nth-child(n)считает все элементы на одном уровне, не важно какой тип указан в Х, а Х:nth-of-type(n)считает только элементы типа Х находящиеся на одном уровне. Например:






<h1>Заголовок</h1>
<p>Первый параграф.</p><!-- p:nth-child(2) -->
<p>Второй параграф.</p><!-- p:nth-of-type(2) -->






n может быть:


    

  • 

    odd— нечетные.
    

    • 

  • 

    even— четные.
    

    • 

  • 

    число— порядковый номер с 1.
    

    • 

  • 

    выражение с nan+b — a и b целые числа, n— счетчик от 0 до 999...
    

    • 



n = odd / even


Раскрасим четные и нечетные параграфы в разные цвета:






p:nth-child( odd ) {
background: red;
}
p:nth-child( even ) {
background: blue;
}






Получим:






<h1>Заголовок</h1>
<p>Первый параграф.</p><!-- blue -->
<p>Второй параграф.</p><!-- red -->
<p>Третий параграф.</p><!-- blue -->






n = число


Установит красным цветом второй элемент:






p:nth-child(2) { color: red; }






Окрасит "Второй параграф.":






<h1>Заголовок</h1>
<p>Первый параграф.</p><!-- red -->
<p>Второй параграф.</p>
<p>Третий параграф.</p>






n = выражение


Формула выражения: an + b. Где a- это число, которое будет умножаться на n, n- это счетчик от 0-999, b- это число, отступ. { an + b; n = 0, 1, 2, ... }


    

  • 

    в селекторе :nth-child(2)указана только "а".
    

    • 

  • 

    :nth-child(odd) можно заменить на :nth-child(2n+1) - 1, 3, 5, 7 ...
    

    • 

  • 

    :nth-child(even) можно заменить на :nth-child(2n) - 2, 4, 6, 8 ...
    

    • 

  • 

    :nth-child(3n+4) - 4, 7, 10, 13 ...
    

    • 

  • 

    :first-childможно заменить на :nth-child(0n+1) или :nth-child(1)
    

    • 





Обратимся к каждому третьему элементу на текущем уровне, где расположены p:






p:nth-child(3n) { background: red; }






Получим:






<h1>Заголовок</h1>
<p>Параграф 1</p>
<p>Параграф 2</p><!-- background: red -->
<p>Параграф 3</p>
<p>Параграф 4</p>
<p>Параграф 5</p><!-- background: red -->
<p>Параграф 6</p>
<p>Параграф 7</p>
<p>Параграф 8</p><!-- background: red -->
<p>Параграф 9</p>






:nth-last-child(n)


Выбирает начиная с конца. Работает точно также как и :nth-child(n) только отсчет идет не сверху, а снизу.


nможет быть:


    

  • 

    odd— нечетные.
    

    • 

  • 

    even— четные.
    

    • 

  • 

    число— порядковый номер с 1.
    

    • 

  • 

    выражение с nan+b— a и b целые числа, n— счетчик от 0 до 999...
    

    • 



Следующий код установит красным цветом второй с конца параграф:






li:nth-last-child(2) { color: red; }






Окрасит "Второй параграф.":






<h1>Заголовок</h1>
<p>Первый параграф.</p>
<p>Второй параграф.</p><!-- red -->
<p>Третий параграф.</p>






Еще примеры смотрите в предыдущем селекторе :nth-child(n).


:nth-of-type(n)


Выбирает элемент по номеру указанному в "n". X:nth-of-typeначинает отсчет от первого элемента типа X находящегося на одном уровне. Под типом подразумевается именно тег элемента (div, span, li), а не его класс.




Заметка: есть такой же селектор :nth-child(n)разница между ними в том, что X:nth-of-type(n)выберет только элементы типа Х находящиеся на одном уровне, а X:nth-child(n)считает все элементы всех типов на одном уровне, не важно какой тип указан в Х. Например:






<h1>Заголовок</h1>
<p>Первый параграф.</p><!-- p:nth-child(2) -->
<p>Второй параграф.</p><!-- p:nth-of-type(2) -->






n может быть:


    

  • 

    odd— нечетные.
    

    • 

  • 

    even— четные.
    

    • 

  • 

    число— порядковый номер с 1.
    

    • 

  • 

    выражение с nan+b— a и b целые числа, n— счетчик от 0 до 999...
    

    • 



#1 n = add / even


Раскрасим четные и нечетные параграфы в разные цвета. Считает именно параграфы без h1, как это делает :nth-child:






p:nth-of-type(odd) { background: red; }
p:nth-of-type(even) { background: blue; }






Получим:






<h1>Заголовок</h1>
<p>Первый параграф.</p><!-- red -->
<p>Второй параграф.</p><!-- blue -->
<p>Третий параграф.</p><!-- red -->






#2 n = число


Установит красным цветом второй элемент:






li:nth-of-type(2) { color: red; }






Окрасит "Второй параграф.":






<h1>Заголовок</h1>
<p>Первый параграф.</p>
<p>Второй параграф.</p><!-- red -->
<p>Третий параграф.</p>






#3 n = выражение


Формула выражения: an + b, где "a" - число, которое будет умножаться на n, "n" - счетчик от 0-999, "b" - число, отступ. { an + b; n = 0, 1, 2, ... }


    

  • 

    в селекторе :nth-of-type(2) указана только "а".
    

    • 

  • 

    :nth-of-type(odd) можно заменить на :nth-of-type(2n+1)- 2, 4, 6, 8 ...
    

    • 

  • 

    :nth-of-type(even) можно заменить на :nth-of-type(2n)- 1, 3, 5, 7 ...
    

    • 

  • 

    :nth-of-type(3n+4) - 4, 7, 10, 13 ...
    

    • 

  • 

    :first-of-type можно заменить на :nth-of-type(0n+1) или просто :nth-of-type(1)
    

    • 



Например: обратимся к каждому третьему элементу p на текущем уровне, где расположены p:






p:nth-of-type(3n) { background: red; }






Получим:






<h1>Заголовок</h1>
<p>Параграф 1</p>
<p>Параграф 2</p>
<p>Параграф 3</p><!-- background: red -->
<p>Параграф 4</p>
<p>Параграф 5</p>
<p>Параграф 6</p><!-- background: red -->
<p>Параграф 7</p>
<p>Параграф 8</p>
<p>Параграф 9</p><!-- background: red -->






:nth-last-of-type(n)


Выбирает элемент по номеру указанному в n. X:nth-last-of-type(n)Начинает отсчет от последнего элемента X находящегося на одном уровне.


Это такой же селектор как и :nth-of-type(n)только считает наоборот - с конца.


Например: обратимся к каждому третьему элементу pс конца, на текущем уровне, где расположены p:




p:nth-last-of-type(3n) { background: red; }




Получим:






<h1>Заголовок</h1>
<p>Параграф 1</p><!-- background: red -->
<p>Параграф 2</p>
<p>Параграф 3</p>
<p>Параграф 4</p><!-- background: red -->
<p>Параграф 5</p>
<p>Параграф 6</p>
<p>Параграф 7</p><!-- background: red -->
<p>Параграф 8</p>
<p>Параграф 9</p>










:first-child


X:first-child Выбирает первый элемент который находится на одном уровне с Х. Отсчет начинается с любого элемента не обязательно Х.


X:first-child это тоже самое что X:nth-child(1)




#1 Пример: обратимся к первому элементу в блоке #container






#container div:first-child{ color:red; }






Получим:






<div id="container">
<div>элемент 1</div><!-- color:red; -->
<div>элемент 2</div>
</div>






А вот так не выделит ничего:






<div id="container">
<h1>Заголовок</h1>
<div>элемент 1</div><!-- не выделит -->
<div>элемент 2</div>
</div>






#2 Обнуление границы


:first-childиногда используется для обнуления свойства border на граничных элементах списка. Следущий код обнулит значение верхней границы элемента li, являющимся дочерним по отношению к элементу ul.






ul li:first-child { border-top: none; }






:last-child


X:last-child Выбирает первый с концаэлемент который находится на одном уровне с Х. Отсчет начинается с любого элемента не обязательно X.


X:last-child это тоже самое что X:nth-last-child(1)




#1 Пример: обратимся к первому с конца элементу в блоке #container






#container div:last-child{ color:red; }






Получим:






<div id="container">
<div>элемент 1</div>
<div>элемент 2</div><!-- color:red; -->
</div>






А вот так ничего не выделит:






<div id="container">
<div>элемент 1</div>
<div>элемент 2</div><!-- не выделит -->
<p>параграф</p>
</div>






#2 Покрасим последний элемент li в списке ul в зеленый:






ul > li:last-child { color: green; }






Получим:






<ul>
<li>список 1</li>
<li>список 2</li>
<li>список 3</li><!-- color: green; -->
</ul>






:first-of-type, :last-of-type


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


X:first-of-type это тоже самое что X:nth-of-type(1)


#1 Пример: обратимся к первому элементу div в блоке #container






#container div:first-of-type{ color:red; }






Получим:






<div id="container">
<h1>Заголовок</h1>
<div>элемент 1</div><!-- color:red; -->
<div>элемент 2</div>
</div>






#2 Обнуление границы


:first-of-typeчасто используется для обнуления свойства border на граничных элементах списка:






ul li:first-of-type { border-top: none; }






Получим:






<ul>
<span>текст</span>
<li>элемент 1</li><!-- border-top: none; -->
<li>элемент 2</li>
<li>элемент 3</li>
</ul>






:only-child


X:only-child Выбирает элемент X, который единственный на уровне X. При подсчете элементов название тега X НЕ учитывается.


Другими словами: выбирает дочерние элементы X только, когда у родителя количество всех дочерних элементов (неважно какой тип) равно 1.


Выберем элемент, если он единственный в блоке:






p:only-child { background: red; }






Получим:






<div>
<p>параграф</p><!-- background: red; -->
</div>

<div>
<span>параграф</span><!-- не выберет, потому что X=p а не span -->
</div>

<div>
<p>текст</p><!-- не выберет, потому что на этом уровне 2 элемента -->
<span>параграф</span>
</div>






:not(:only-child)


:only-child с отрицанием :not()- это комбинация двух псевдо-селекторов.


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






li:not(:only-of-type) {
font-size: 1.25em;
}






В результате если у нас один элемент он НЕ будет выбран:






<ul>
<li></li><!-- не будет выбран -->
</ul>






А если больше одного, то будут выбраны все:






<ul>
<li></li><!-- будет выбран -->
<li></li><!-- будет выбран -->
</ul>






:only-of-type


X:only-of-typeВыбирает элемент X, который единственный на уровне X (не имеет соседей). При подсчете элементов учитывается название тега X.


Другими словами: выбирает дочерние элементы X только, когда у родителя количество всех дочерних элементов типа X равно 1.


Например:






p:only-of-type { background: red; }






Получим:






<div>
<p>параграф</p><!-- background: red; -->
</div>

<div>
<span>параграф</span><!-- не выделится, потому что X=p а не span -->
</div>

<div>
<span>параграф</span>
<p>текст</p><!-- background: red; -->
</div>






#1 Выберем ulтолько с одним элементом в списке.






ul > li:only-of-type { font-weight: bold; }






Другой вариант: можно ul > li:only-child, потому что обычно в списках ul находятся только li теги.


Немного практики


#1 Сложное выделение


У нас есть такой код:






<div>
<p>параграф</p>
<ul>
<li>Список 1 </li>
<li>Список 2 </li>
</ul>

<ul>
<li>Список 3 </li>
<li>Список 4 </li>
</ul>
</div>






Как обратиться к "Список 2"?


Решение 1






ul:first-of-type > li:nth-child(2) { font-weight: bold; }






Код находит первый список, затем находит его прямого наследника и у которого порядковый номер в списке равен 2.


Решение 2


Использование соседних селекторов.






p + ul li:last-child { font-weight: bold; }






Браузер находит ul, следующий сразу за p, затем находит его последний дочерний элемент.


Решение 3


Это решение пожалуй самое правильное, потому что если между ul или li попадут другие теги, этот пример все равно будет выбирать нужный нам li:






ul:first-of-type li:nth-last-of-type(1) { font-weight: bold; }






Браузер выбирает первый ul (именно ul), затем находит первый с конца элемент li (именно li).


Наглядное пособие по селекторам типа :nth-child


Чтобы быстро и точно понять как работают псевдо-селекторы типа :first-child. Я создал спец. страницу. Там же можно подобрать нужный для себя селектор этого типа, под конкретную задачу.




Считаем элементы в блоке с помощью nth-child


Полезная статья на Хабре - количественные CSS селекторы, учит считать элементы с помощью nth-child. Например, нужно выделить первый элемент, только, если в блоке 6 элементов указанного типа. Или, нужно выделить все элементы блока, если в блоке всего 6 элементов.


Выбор диапазона элементов


Допустим, у вас есть список из 20 элементов и нужно выбрать элементы с 7 по 14 включительно. Это можно сделать вот так:






ol li:nth-child(n+7):nth-child(-n+14) {
background: lightpink;
}









      

        
        
          CSS
        
      

    

    

      

        
Справочник атрибутов CSS

        
          
        
      

      


Команды CSS можно вставлять в теги DIV, STYLE, либо работать с внешним (внутренним) листом стилей. Команды CSS можно сочетать в произвольном порядке. Ниже перечислены все атрибуты CSS.










Атрибут CSS




Функция








background




Атрибут фона








background-attachment




Как ведет себя фон при прокручивании страницы








background-color




Цвет фона








background-image




Фоновый рисунок








background-position




Положение фонового рисунка








background-repeat




Повторение фона








border




Форматирование границ (бордюра) элемента








border-collapse




Слияние границ таблицы








border-color




Цвет границ элемента








border-spacing




Расстояние между границами ячеек таблицы








border-style




Вид рамки элемента








border-width




Ширина линии рамки








bottom




Положение нижней границы элемента








caption-side




Положение заголовка таблицы








clear




Отмена обтекания элемента текстом








color




Цвет








cursor




Курсор








direction




Направление вывода текста








display




Вид отображаемого элемента








empty-cells




Границы и фон пустых ячеек таблицы








float




Стороны смещения и обтекания элемента








font




Шрифт








font-family




Семейство шрифта








font-size




Кегль (размер) шрифта








font-style




Начертание шрифта








font-variant




Малые прописные буквы








font-weight




Насыщенность шрифта








height




Высота








left




Расстояние от левого края








letter-spacing




Межсимвольный интервал








line-height




Межстрочный интервал








list-style




Вид списочного маркера








list-style-image




Адрес файла картинки, используемой в качестве списочного маркера








list-style-position




Положение маркера








list-style-type




Вид маркера








margin




Внешний отступ








max-height




Максимальная высота








max-width




Максимальная ширина








min-height




Минимальная высота








min-width




Минимальная ширина








overflow




Управление выводом содержания блочного элемента








padding




Внутренний отступ








position




Положение элемента








right




Расстояние от правого края








table-layout




Подгонка ячеек таблицы по высоте и ширине








text-align




Выравнивание по горизонтали








text-decoration




Оформление текста








text-indent




Красная строка








text-transform




Преобразование текста








top




Расстояние от верхнего края








vertical-align




Выравнивание по вертикали








visibility




Видимость








white-space




Отделение слов друг от друга








width




Ширина








word-spacing




Интервал между словами








z-index




Порядок вывода слоев











      

        
        
          CSS
        
      

    

    

      
      

        
Строка поиска <input type="number"> name имя ключа параметра value значение ключа

        
          
        
      

      
Строка поиска <input type="number">










 name




имя ключа параметра








 value








значение ключа параметра, которое может содержать: цифры «0-9», один плюс «+» или минус «-», один символ «e» или «E», одну точку «.». Можно ввести буквы, но форма не будет отправлена при нажатии на кнопку submit, а покажет сообщение об ошибке. Чаще всего не задаётся. Пользователь может его изменить, если не указаны атрибуты readonly и disabled.












 readonly




заблокировано изменение пользователем








 disabled




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








 required




поле не может быть пустым








 step


 step=20


 step=any








шаг изменения, который может быть положительным целым или дробным числом. Значение value кратно значению step, то есть делится на него без остатка. Пример разрешённых значений value при step="20": …, -40, -20, 0, 20, 40, …. По умолчанию равен 1. То есть <input type="number"/> покажет ошибку, если ввести десятичную дробь. Для того, чтобы убрать ограничения, нужно присвоить any.












 min








минимально возможное значение value, необходимое для отправки формы












 max








максимально возможное значение value, необходимое для отправки формы












 placeholder




подсказка-заглушка








 title








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












 autocomplete




автозаполнение. Можно его отключить или сделать более конкретизированным.








 list




список рекомендованных значений








 autofocus








фокус поля (то есть период между щелчком по элементу и щелчком вне элемента) получен при загрузке документа










 


<form>
<input type="number">
<input type="submit">
</form>






Поле <input type="number"> не подходит для текстовых строк, состоящих из 16 и более цифр, например, номера пластиковой карты, так как длинные числа от 9007199254740991 могут округляться.




Количество товара


    

  1. 

    увеличение и уменьшение значения числового поля с помощью кнопок пошагового изменения;
    

    2. 

  2. 

    сообщение об ошибке при вводе букв и дробных чисел;
    

    3. 

  3. 

    минимальное значение 1 шт.
    

    4. 



 шт


<form><input type="number" min="1" value="1"> шт</form>


Чётные положительные целые числа




<form><input type="number" step="2" min="2"></form>


Нечётные положительные целые числа




<form><input type="number" step="2" min="1"></form>


Круглые числа




<form><input type="number" step="10"></form>


Десятичная дробь с плавающей запятой




<form><input type="number" step="any"></form>


Денежный формат цены: «рубли,копейки» с двумя знаками после запятой ₽


 ₽


<form><input type="number" step="0.01" min="0" placeholder="0,00"> ₽</form>


Ограничить количество символов в поле до 5




<form><input type="number" min="-9999" max="99999"></form>


Уменьшить длину <input type=number>


Атрибуты minlength, maxlength  и size не работают.


Необходимое количество символов в поле определяется атрибутами min, max и step: 




<!-- Достаточно выделить место на 6 символов -->
<input type="number" min="0" max="100" step="0.01"/>


Указать ширину в CSS (свойство width):




<style>
#dva {
width: 6em;
}
</style>
<input type="number" min="0" max="100" step="any" id="dva"/>


Стрелки у <input type=number>


Чтобы стрелочки были изначально, а не только при :hover и :focus в Chrome




<style>
#pyat::-webkit-inner-spin-button,
#pyat::-webkit-outer-spin-button  {
opacity: 1;
}
</style>
<input type="number" id="pyat"/>


Убрать стрелки




<style>
.raz {
-moz-appearance: textfield;
}
.raz::-webkit-inner-spin-button {
display: none;
}
</style>

<input type="number" class="raz"/>


Стилизация стрелок «вверх»/«вниз» CSS


    


<style>
#raz {
position: relative;
display: inline-block;
}
#raz input {
font-size: 1em;
-moz-appearance: textfield;
}
#raz input::-webkit-inner-spin-button {
display: none;
}
#raz span {
position: absolute;
}
@supports (clip-path: polygon(50% 30%, 10% 90%, 90% 90%)) {
#raz input {
padding-right: 1em;
}
#raz span {
right: 0;
width: 1em;
height: 50%;
background: rgb(70,70,70);
cursor: pointer;
}
#raz span:hover {
background: red;
}
#raz span:nth-of-type(1) {
top: 0;
clip-path: polygon(50% 30%, 10% 90%, 90% 90%);
}
#raz span:nth-of-type(2) {
bottom: 0;
clip-path: polygon(50% 70%, 10% 10%, 90% 10%);
}
}
</style>
<span id="raz">
<input type="number" value="0">
<span onclick="this.previousElementSibling.stepUp()"></span>
<span onclick="this.previousElementSibling.previousElementSibling.stepDown()"></span>
</span>


Запретить ввод в поле, чтобы можно было пользоваться только кнопками редактирования


  


 <style>
.raz {
all: unset;
-moz-appearance: textfield;
width: 3em;
text-align: center;
}
.raz::-webkit-inner-spin-button {
display: none;
}
</style>

<button type="button" onclick="this.nextElementSibling.stepDown()">-</button>
<input type="number" min="0" max="100" value="1" readonly class="raz">
<button type="button" onclick="this.previousElementSibling.stepUp()">+</button>


Вместо <input type="number"> использовать <input type="text">


Виртуальная клавиатура с дробно-числовым вводом


Атрибут inputmode  плохо поддерживается браузерами.


 

 


<input inputmode="decimal">


На IOS (iPhone) если атрибут patternимеет значение [0-9]* или \d*, то на мобильном телефоне будет дана цифровая клавиатура.


Для отправки формы, поле должно содержать только цифры




<form><input inputmode="decimal" pattern="-?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?"></form>


Функционал с JavaScript


При наборе не числа value возвратит пустое значение. Браузер может позволить/вынудить пользователя набрать число с запятой «20,5», но value примет значение с точкой «20.5», искл., IE.


 value (строка) =""; valueAsNumber (число) ="";




 value (строка) =""; valueAsNumber (число) ="";


Запретить ввод букв




<input type="number" id="check" step="any"/>
<script>
document.getElementById('check').onkeydown = function (e) {
return !(/^[А-Яа-яA-Za-z ]$/.test(e.key)); // IE > 9
}
</script>


Только одна точка или одна запятая




<input type="number" step="any" id="shest2"/>

<script>
document.getElementById('shest2').onkeydown = function (e) {
if (e.currentTarget.value.indexOf(".") != '-1' || e.currentTarget.value.indexOf(",") != '-1') {
return !(/[.,]/.test(e.key));
}
}
</script>


Ограничить ввод двумя знаками после запятой


Цифры, вносимые после 2-го символа после запятой, сразу обрезаются, дабы не совершать лишних телодвижений.




<input type="number" oninput="up(this)" step="0.01"/>

<script>
function up(e) {
if (e.value.indexOf(".") != '-1') {
e.value=e.value.substring(0, e.value.indexOf(".") + 3);
}
}
</script>


Обрезать последний лишний символ




<input type="number" step="any" id="shest1"/>

<script>
document.getElementById('shest1').oninput = function () {
if (this.value.length > 7) this.value = this.value.substr(0, 7); // в поле можно ввести только 7 символов
}
</script>


Разделение цифр пробелом


Наберите любое многозначное число


  


<input oninput="this.nextElementSibling.innerHTML = new Intl.NumberFormat('ru').format(this.valueAsNumber)" type="number">
<output> </output>

      

        
        CSS, Ошибки, Формы, Javascript, input