Css-ի ֆունկցիաները (Մաս-1)
Տրանսֆորմացիայի՝ փոխակերպան ֆունկցիաներ
matrix()
matrix() – Матрица преобразования преобразует элемент, определяя новые координаты.
Первые три версии можно получить с помощью матрицы, кроме последней.
Для преобразования используется свойство Transform, которому определена матрица.
Например:
transform: matrix(a, b, c, d, tx, ty) - где
| Գ своему | Предыдущий | Предыдущий |
|---|---|---|
|
а: |
 |
Изменение масштаба в горизонтальном направлении. Значение больше 1 расширяет элемент, меньше 1 сжимает. |
|
б |
 |
Наклон в горизонтальном направлении. Положительное значение смещается влево, а отрицательное значение смещается вправо. |
|
с: |
 |
Вертикальный уклон. Положительные изгибы направлены вверх, отрицательные – вниз. |
|
д: |
 |
Изменение вертикального масштаба. Больше 1 — расширение, меньше 1 — сжатие. |
|
Техас: |
 |
Перемещение по пикселям по горизонтали. Положительное значение перемещает элемент вправо, а отрицательное — влево. |
|
ты |
 |
Вертикальный сдвиг по пикселям. Положительное значение понижает элемент, а отрицательное – повышает. |
Определение матрицы в соответствии с браузерами:
transform: matrix(a, c, b, d, tx, ty) - стандартный
или matrix([scaleX], [skewY], [skewX], [scaleY], [translateX], [translateY] )
-moz-transform: matrix(a, c, b, d, tx, ty) - Fire Fox
-webkit-transform: matrix(a, c, b, d, tx, ty) — Хром, Сафари
-o-transform: matrix(a, c, b, d, tx, ty) - Опера
-ms-transform: matrix(a, c, b, d, tx, ty) – Интернет Эксплорер
div {
width: 200px;
height: 200px;
margin: 100px 100px;
background: orange;
transform: matrix(1, 0, 0.4, 1, 0, 0);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>brightness()</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div></div>
</body>
</html>
matrix3d()
matrix3d() - предназначен для трехмерного изменения элемента. Состоит из 16 значений:
matrix3d (a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
Для 3D-модификации мы можем использовать следующий веб-сайт: https://www.useragentman.com/matrix/
или ищу… matrix3d generator ":
Например:
div {
width: 200px;
height: 200px;
margin: 100px 100px;
background: orange;
transform: matrix3d(
-0.13976,
-2.321501,
0,
-0.00603,
0.006118,
1.053948,
0,
0.000036,
0,
0,
1,
0,
168,
278.987503,
0,
1
);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>brightness()</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<p style="margin: 100px 100px; font-size: 20px">ПРИВЕТ, МИР!!!</p>
</div>
</body>
</html>
perspective()
perspective() – определяет иллюзию трехмерного пространства.
с перспективой() Определив Rotate() (элемент изгибается), мы получим эффект перспективы.
При установке любого значения элемент отодвигается или приближается к плоскости экрана, что приводит к эффекту короткой или длинной перспективы.
div {
width: 500px;
height: 100px;
margin: 100px 100px;
background: orange;
transform-origin: 0 50%;
transform: perspective(500px) rotateY(15deg);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>brightness()</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div></div>
</body>
</html>
RotateY() отвечает за наклон элемента, но чтобы получить эффект наклона, перспективу, вам нужно определить перспективу().
rotate()
rotate() – изгибает элемент в двумерном пространстве вокруг точки изменения. По умолчанию точка изменения располагается в середине изменяемого элемента. transform-origin через недвижимость.
Положительное значение изгибает элемент по часовой стрелке вокруг точки, а отрицательное — наоборот.
.round {
margin: 100px 100px;
transition: 0.5s; /* թեքելու ընթացքի տևողությունը */
}
.round:hover {
transform: rotate(360deg); /* թեքում է էլեմենտը 360 աստիճանի */
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>rotate()</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<img decoding="async" src="html.png" alt="" class="round" />
</body>
</html>
rotate3d()
rotate3d() – вращает элемент одновременно в трехмерном пространстве X, Y, Z.
Определенный transform с недвижимостью.
Принимает 4 значения. Первые три относятся к трёхмерному пространству, а четвёртый определяет степень их инверсии.
x принимает значения 1, 0, -1.
1 положительное значение, расстояние x (по вертикали) активно для поворота.
0 предотвращает активность.
-1 отрицательно, x-пространство активно в направлении, противоположном повороту.
То же самое относится и к пространствам Y (горизонтально) и Z (повороту).
В следующем примере нижний левый угол переместится в верхний правый угол, потому что x и: y Пространства активны и могут меняться на 180 градусов.
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
margin: 100px 100px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotate3d(1, 1, 0, 180deg);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>rotate()</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="elem">Привет, мир!!!</div>
</body>
</html>
rotateX() rotateY() rotateZ() rotate(z) կամ rotate3d(x, y, z deg)
Функция RotateX() поворачивает элемент в направлении 3D X (по вертикали) на указанный угол.
RotateX() соответствует Rotate3d(1, 0, 0, град). Положительное значение поворачивает элемент на указанный угол (градусы), а отрицательное значение делает противоположное.
RotateY() поворачивает элемент в трехмерном направлении Y (горизонтально) на указанный угол. Это соответствует Rotate3d(0, 1, 0, Deg). Положительное значение поворачивает элемент на указанный угол, а отрицательное — наоборот.
RotateZ() поворачивает элемент в трехмерном направлении Z (поворачивает) на указанный угол. Это соответствует Rotate3d(0, 0, 1, Deg) или Rotate(z). Положительное значение поворачивает элемент на указанный угол, а отрицательное — наоборот.
.round1 {
transition: 2s; /* շրջվելու ժամանակահատվածը */
}
.round1:hover {
transform: rotateX(360deg);
}
.round2 {
transition: 2s; /* շրջվելու ժամանակահատվածը */
}
.round2:hover {
transform: rotateY(360deg);
}
.round3 {
transition: 2s; /* շրջվելու ժամանակահատվածը */
}
.round3:hover {
transform: rotateZ(360deg);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<img decoding="async" src="html.png" alt="" class="round1" /> вращатьX:
<img decoding="async" src="html.png" alt="" class="round2" /> вращатьY:
<img decoding="async" src="html.png" alt="" class="round3" /> вращатьZ:
</body>
</html>
scale()
scale() – Расширяет элемент по горизонтали и вертикали или в обе стороны в двумерном пространстве. Она может как увеличиваться, так и уменьшаться.
Принимает два значения: scale(sx, xy) - где
sx - расширяется по горизонтали.
1 является значением по умолчанию и не может быть изменено.
Выше 1 выполняется расширение в горизонтальном направлении.
Все, что меньше 1 (например, 0,5), уменьшает масштаб.
Отрицательное число (например, -1) расширяется по горизонтали, но элемент сворачивается.
sy – расширяет элемент по вертикали.
Если в функции задано одно значение, элемент будет расширяться по горизонтали и вертикали.
.round1 {
transition: 2s; /* շրջվելու ժամանակահատվածը */
transform: scale(-1, 1);
}
.round2 {
transition: 2s; /* շրջվելու ժամանակահատվածը */
}
.round2:hover {
transform: scale(3);
}
.round3 {
transition: 2s; /* շրջվելու ժամանակահատվածը */
}
.round3:hover {
transform: scale(3, 1);
}
.round4 {
transition: 2s; /* շրջվելու ժամանակահատվածը */
}
.round4:hover {
transform: scale(1, 3);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<img decoding="async" src="html.png" alt="" class="round1" />масштаб - -1, 1
<img decoding="async" src="html.png" alt="" class="round2" />масштаб - 3:
<div style="margin-right: 500px"></div>
<img decoding="async" src="html.png" alt="" class="round3" />масштаб - 3, 1:
<img decoding="async" src="html.png" alt="" class="round4" />масштаб - 1, 3
</body>
</html>
scaleX() scaleY() ScaleZ() կամ scale3d(x, y, z)
Элемент масштабируется, расширяется, уменьшается или устанавливается на ширину в 3D.
scale3d(x, y, z) такой же как scaleX(), scaleY(), ScaleZ() вместе.
scaleX() – Масштабирует элемент по горизонтали. Это соответствует scale(X, y)к
1 является значением по умолчанию и не может быть изменено.
Выше 1 выполняется расширение в горизонтальном направлении.
Все, что меньше 1 (например, 0,5), уменьшает масштаб.
Отрицательное число (например, -1) расширяется по горизонтали, но элемент сворачивается.
scaleY() – Масштабирует элемент по вертикали. Это соответствует scale(x, Y)-в
1 является значением по умолчанию и не может быть изменено.
Выше 1 выполняется вертикально расширение.
Все, что меньше 1 (например, 0,5), уменьшает масштаб.
Отрицательное число (например, -1) расширяется по вертикали, но элемент сворачивается.
scaleZ() -устанавливает ширину в пространстве z. так как в css работать с 3D невозможно, то его иллюзию получим по следующему принципу:
.z {
width: 200px; /*որոշում է էլեմենտի լայնությունը*/
height: 200px; /*որոշում է էլեմենտի բարձրությունը*/
margin: 100px 100px; /*որոշում է պատուհանի մեջ էլեմենտի վայրը*/
background: red;
transform: perspective(600px) scalez(4) rotatey(60deg);
/*
perspective(600px) - Տվյալ էլեմենտին սահմանում է 3d` եռաչափ տարածություն․
որքան մեծ է թիվը այնքան խորն է այդ տարածությունը։
scalez(4) – որոշում է էլեմենտի լայնությունը z տարածության մեջ։
rotatey(60deg) – էլեմենտը թեքում է 60 աստիճանով։
*/
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="z"></div>
</body>
</html>
Առանց scalez(4)-ի՝
Scalez(4)-ով՝
Используя перспективу, элемент был перемещен в трехмерное пространство, получив трехмерную иллюзию. чем выше значение, тем глубже будет пространство z.
Элемент был повернут с помощью Rotate.
Scalez() уже определяет ширину в пространстве Z.
Если куб был собран, то элемент мог бы быть частью куба, представляя левую сторону последнего и ширину этой стороны в z-пространстве.
skew() skewX() skew Y()
skew(x) искажает элемент по горизонтали или skew(x, y) по горизонтали и вертикали.
skew(X, y), կամ skewX(), կամ skew(x) –X смещает элемент по горизонтали. Положительное число сдвигается влево, а отрицательное число сдвигается вправо.
skew(x, Y), կամ skewY()– Y смещает элемент по вертикали. Положительное число смещается вниз, а отрицательное – вверх.
В случае 0 заданное направление не будет изменено.
Если указано одно значение, оно будет применяться только к горизонтальному направлению, а если указаны два значения, элемент будет смещен в горизонтальном и вертикальном направлениях.
.round1 {
transition: 1s; /* շրջվելու ժամանակահատվածը */
}
.round1:hover {
transform: skew(20deg, 0); /* նույնն է ինչ՝ skewX() կամ skew(x) */
}
.round2 {
transition: 1s; /* շրջվելու ժամանակահատվածը */
}
.round2:hover {
transform: skew(0, 20deg); /* նույնն է ինչ՝ skewY() */
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<img decoding="async" src="html.png" alt="" class="round1" /> перекосX:
<img decoding="async" src="html.png" alt="" class="round2" /> перекос:
</body>
</html>
translate() translateX() translateY() translateZ() կամ translate3d(x, y, z)
translate() – принимает одно или два значения. Если указано одно значение, то элемент будет перемещаться в направлении X влево и вправо, если указаны два значения: translate (x, y) — будет перемещать элемент по горизонтали — влево и вправо и по вертикали — вверх, вниз.
translate(X) կամ translateX() կամ translate3d(X, y, z) – Перемещает элемент по горизонтали, влево и вправо. Положительное значение смещается вправо, а отрицательное значение сдвигается влево. Если значение равно 0, элемент не изменит свое положение.
translateY() կամ translate3d(x, Y, z) - элемент перемещается вертикально, вверх и вниз. Положительное значение перемещает элемент вверх, а отрицательное значение перемещает его вниз. Если значение равно 0, элемент не изменит свое положение.
.round1 {
transition: 1s; /* շրջվելու ժամանակահատվածը */
}
.round1:hover {
transform: translateX(20px);
}
.round2 {
transition: 1s; /* շրջվելու ժամանակահատվածը */
}
.round2:hover {
transform: translateY(20px);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<img decoding="async" src="html.png" alt="" class="round1" /> перевестиX:
<img decoding="async" src="html.png" alt="" class="round2" /> перевестиY:
</body>
</html>
translateZ()
translateZ() – Поскольку z определяет глубину в 3d, ее также необходимо определить perspectiveтот
TranslateZ() переместит элемент дальше или ближе в пространстве Z.
.z {
width: 200px; /*որոշում է էլեմենտի լայնությունը*/
height: 200px; /*որոշում է էլեմենտի բարձրությունը*/
margin: 100px 100px; /*որոշում է պատուհանի մեջ էլեմենտի վայրը*/
background: red;
transition: 1s; /* որոշում է փոփոխման ժամանակահատվածը*/
}
.z:hover {
transform: perspective(600px) translateZ(100px);
/*
perspective(600px) - Տվյալ էլեմենտին սահմանում է 3d` եռաչափ տարածություն․
որքան մեծ է թիվը այնքան խորն է այդ տարածությունը։
translateZ(100px) – էլեմենտը հեռացնում կամ մոտեցնում է խորության՝ Z
տարածության մեջ։
*/
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="z"></div>
</body>
</html>
translate
translate собственность такая же, как translate() и: translate3d() функции.
Если он содержит одно или два значения, он равен translate()и равен трем значениям translate3d()-в
Например: translate: 50% 120px 5rem ; :
Краткая информация:
| Նախասահմանված արժեքը | none |
| Ժառանգվում են | Нет |
| Կիրառվում են | С элементами, претерпевающими трансформацию. |
| Ենթարկվում է անիմացիայի | Да |
Значения следующие:
none - не следует перемещать.
backface-visibility
backface-visibility – определяет, должна ли быть видна задняя сторона элемента или нет.
Это свойство используется для маскировки обратной стороны элемента при преобразовании.
Краткая информация:
| Նախասահմանված արժեքը | visible |
| Ժառանգվում են | Нет |
| Կիրառվում են | С элементами, претерпевающими трансформацию. |
| Ենթարկվում է անիմացիայի | Нет |
Значения следующие:
visible – видна обратная сторона элемента.
hidden – обратная сторона элемента закрыта.
.flip {
perspective: 800px;
}
.card {
position: relative;
width: 400px;
height: 200px;
transition: transform 1s;
transform-style: preserve-3d;
}
.card:hover {
transform: rotateY(180deg);
}
.card-face-02 {
position: absolute;
top: 0;
bottom: 0;
backface-visibility: visible;
}
.card-face-03 {
position: absolute;
top: 0;
bottom: 0;
backface-visibility: hidden;
}
.card-face.back {
font: 18px/1.6 Arial;
padding: 20px;
transform: rotateY(180deg);
background: #4b846a;
color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<figure class="flip">
<div class="card">
<figcaption class="card-face card-face-02 back">
HTML (язык гипертекстовой разметки).<br />
Используется для создания закладок веб-страниц.<br />
Язык HTML обрабатывается браузером.<br />
Он отображается в виде легко читаемого документа.<br />
<q>Википедия:</q>
</figcaption>
</div>
</figure>
<figure class="flip">
<div class="card">
<figcaption class="card-face card-face-03 back">
HTML (язык гипертекстовой разметки).<br />
Используется для создания закладок веб-страниц. <br />
Язык HTML обрабатывается браузером.<br />
Он отображается в виде легко читаемого документа.<br />
<q>Википедия:</q>
</figcaption>
</div>
</figure>
</body>
</html>
Մաթեմատիկական ֆունկցիաներ
calc()
calc() - присваивает значение свойству посредством простого математического расчета: сложения, вычитания, умножения, деления.
Для расчета используется любая единица измерения.
px, %, em, rem, in, mm, cm, pt, pc, ex, ch, vh, vw, vmin, vmax կամ՝
deg, grad, rad, turn կամ՝
s, ms:
Например:
p {
font-size: calc(3vw + 2px);
width: calc(100% - 20px);
height: calc(100vh – 20px);
}
div {
transform: rotate(calc(1turn + 45deg));
animation-delay: calc(1s + 15ms);
}
функцию можно использовать в сочетании с другими значениями:
div {
margin: 10px calc(2vw +5px)
border-radius: 15px calc(15px / 3) 4px 2px;
}
Его также можно использовать в любом значении:
div {
background: orange
linear-gradient(
to bottom,
#1e88e5,
#1e88e5 calc(50% - 10px),
#3949ab calc(50% _ 10px),
#3949ab
);
}
В расчете можно использовать только цифры, но не текст:
div {
width: calc("some" + "count");
}
Он также может использовать числа без единиц измерения - calc(2.3 * 1.6)
можно указать только количество - width: calc(40px);
Функция: Media не используется в запросах:
@media( min-width: calc(40rem + 1px) ) {…}
Предположим, ширину элемента нужно разделить на 8 частей и взять одну: более приемлемо определить: width: calc(100% / 8), чем width: 15.3726; .
" +, -, *, / " - используются по-разному.
При сложении и вычитании оба числа должны принадлежать единице измерения:
div {
margin: calc(10px + 10cm);
/* հետևյալ տարբերակը սխալ է։ */
margin: calc(10px + 4);
}
При делении второе число необходимо указывать без единицы измерения:
div {
margin: calc(30px / 3);
/* հետևյալ տարբերակը սխալ է։ */
margin: calc(30px / 20px);
}
При умножении нужно одно из двух быть отмеченным без единицы измерения.
div {
margin: calc(30px * 3);
width: calc(3 * 30px);
/* հետևյալ տարբերակը սխալ է։ */
margin: calc(30px * 20px);
}
Пробы важны, но применимы только к сложению и вычитанию;
p {
font-size: calc(3vw + 2px);
font-size: calc(3vw+2px);
font-size: calc(3vw - 2px);
/* հետևյալ տարբերակը սխալ է։ */
font-size: calc(3vw-2px);
}
В функции width также допустимы отрицательные числа. calc(5vw – -5px):
calcи открывающая скобка не должна быть промежуточной: width: calc (100% / 3); :
- Мы также встретим подобный пример: width:calc( calc(100% / 3) – calc(1rem * 2) ) или:
width:calc( (100% / 3) – (1rem * 2) ) или:
width: calc( 100% / 3 – 1rem * 2 ) или:
width: calc((100% + 3) / 1rem ) :
В расчетах также можно использовать переменные:
html {
--voreveTiv: 10px;
--voreveGumar: var(--voreveTiv) * 2;
}
div {
width: calc(var(--voreveTiv) * 2);
height: calc(var(--voreveGumar) * 3)
}
Единица измерения px берется из предопределенной переменной.
Можем сделать и наоборот, не указывать это в переменной, но обязательно в конечном значении:
html {
--voreveTiv: 10;
}
div {
width: calc(var(--voreveTiv) * 2px);
}
Функцию также можно использовать в цветах:
div {
background: hsl (calc(20% - 5%), calc(100% - 23%), calc(80% - 30%));
}
Номер атрибута, определенный в элементе, не может использоваться в функции:
div {
width: calc(10px * attr(id));
}
<body><div id="12"></div></body>
Но возможны те, которые определены в атрибуте стиля:
.clas01 {
width: calc(var(--ajlTiv * 3))
}
<div class="clas01" style=" --vorevTiv: 10; --ajlTiv: 5em; "> </div>
clamp() min() max()
Они сравнивают значения и выбирают одно из них с учетом размеров экрана.
min() принимает одно или несколько значений и возвращает наименьшее из них.
Например, ширина элемента не должна превышать 500 пикселей:
.element {
width: min(50%, 500px);
}
ширина экрана равна 1200 пикселей. Первое значение в функции указывается в процентах, 50% от ширины родительского элемента, т.е. 600 пикселей (1200×50/100).
Итак, мы получим min(600px, 500px), а так как функция возвращает наименьшее из значений, то ширина = 500px.
О функции можно сказать, что она ограничивает максимальный размер элемента при его постоянном значении.
Другой пример:
max() принимает одно или несколько значений и возвращает наибольшее из них.
Например, вам нужно установить ширину элемента 500 пикселей или более в зависимости от ширины экрана:
.element {
width: max(50%, 500px);
}
ширина экрана равна 1200 пикселей. Первое значение в функции указывается в процентах, 50% от ширины родительского элемента, т.е. 600 пикселей (1200×50/100).
Таким образом мы получим max(600px, 500px), а поскольку функция возвращает наибольшее из значений, то ширина = 600px.
о функции можно сказать, что она ограничивает минимальный размер элемента при его постоянном значении.
clamp() позволяет ограничить диапазон используемых значений.
Он принимает три значения: минимальное значение, рекомендуемое значение и максимальное значение. Если предложенное значение не выходит за пределы диапазона минимального и максимального значений, будет возвращено предложенное значение.
.element {
width: clamp(200px, 50%, 1000px);
}
В следующем примере элемент имеет минимальное значение 200 пикселей и максимальное значение 1000 пикселей.
Если предложенное значение не выходит за пределы диапазона этих двух значений, то предложенное значение будет возвращено; если больше 1000 пикселей, будет использоваться 1000 пикселей, а если меньше 200 пикселей, будет использоваться 200 пикселей.
Также возможно получить результат зажима() другим способом:
.element {
width: clamp(200px, 50%, 1000px);
/* նույնն է ինչ՝*/
width: max(200px, min(50%, 1000px));
}
Чтобы эти функции работали логически корректно, необходимо, чтобы хотя бы одно из значений было связано с общей шириной элемента или экрана, то есть было установлено значение !%, em, rem, vw, vh՛ с одной из единиц измерения.
Например:
width: clamp(16px, (1rem + 5vw), 50px)
width: max(200px, 13vw, 4em )
/* և այլն։ */
Ֆիլտրային ֆունկցիաներ
blur()
blur() – функция устанавливает размытие изображения или текста.
Чем выше значение, тем плотнее размытие.
Отрицательное значение запрещено.
Пустое значение соответствует 0px.
.bg {
background: url(C:/Users/User/Desktop/html.png);
background-size: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
filter: blur(30px);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>blur()</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="bg"></div>
</body>
</html>
brightness()
brightness() - функция уменьшает или увеличивает яркость картинки.
Если мы установим 100% или 1, это будет первоначальный вид изображения.
Значение меньше 100% или 1 уменьшает яркость изображения.
0 сделает изображение полностью черным.
Если мы установим его выше 100% или 1, это увеличит яркость изображения.
Запрещено использовать отрицательное значение, а если значение пустое, то оно равно 1.
.pic {
filter: brightness(150%);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>brightness()</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<img decoding="async" src="C:/Users/User/Desktop/cascadd.jpg" alt="original" />
<img decoding="async"
src="C:/Users/User/Desktop/cascadd.jpg"
class="pic"
alt="pajtsaracvats"
/>
</body>
</html>
contrast()
contrast() - функция понижает или увеличивает яркость изображения (контраст).
Значение 100% или 1 соответствует исходному виду изображения.
Значение меньше 100% (или 1) снижает контрастность изображения.
Значение 0 присваивает изображению сплошной серый цвет.
Значение выше 100% (или 1) увеличивает контрастность изображения.
Отрицательное значение не допускается..
.kaskad {
filter: contrast(2);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<img decoding="async" src="kaskadsm.jpg" />
<img decoding="async" src="kaskadsm.jpg" class="kaskad" />
</body>
</html>
drop-shadow()
drop-shadow() – функция добавляет тень к изображению.
В отличие box-shadow свойство, drop-sadow()-также обращает внимание на открытые участки картины, где также добавляет тени.
Может принимать 4 значения:
<տեղաշարժ X>в горизонтальном направлении. Положительное значение перемещает тень вправо, а отрицательное значение перемещает ее влево. Это обязательное значение.
<տեղաշարժ Y>вертикально. Положительное значение перемещает тень вниз, а отрицательное значение перемещает ее вверх. Это обязательное значение.
<մշուշոտություն> – Устанавливает радиус размытия тени. Чем выше значение, тем более размытой и широкой будет тень.
<գույնը> — цвет тени, который можно установить в css в любом цветовом формате. Это не обязательное значение.
img {
filter: drop-shadow(0 0 5px orange);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<img decoding="async" src="canc.png" />
</body>
</html>
grayscale()
grayscale() - функция конвертирует картинку в черно-белую.
100% или 1 преобразует изображение в черно-белое.
0 – первоначальный вид изображения.
Значение меньше 100% (или 1) постепенно меняет цвет изображения.
Отрицательное значение запрещено. а пустое значение равно 0.
.kaskad {
filter: grayscale(0.6);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<img decoding="async" src="kaskadsm.jpg" />
<img decoding="async" src="kaskadsm.jpg" class="kaskad" />
</body>
</html>
hue-rotate()
hue-rotate() - функция меняет цвета картинки в цветовой области за счет вращения тонов.
В качестве значения указывается единица измерения угла (например, 45 градусов), определяющая поворот оттенков в цветовом диапазоне.
0 или 360 градусов оставляют изображение неизменным.
Любое значение меньше или больше 0 изменяет цвета изображения путем смещения цвета (функция Hue-Saturation в Photoshop аналогична hue-rotate()).
img {
filter: hue-rotate(40deg);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<img decoding="async" src="kaskadsm.jpg" />
</body>
</html>
invert()
invert() – функция преобразует цвета изображения, делая его негативным.
0 – первоначальный вид изображения.
100% или 1 — полное преобразование.
0% в 100% или 0 в 1 частично преобразует цвета.
Отрицательное значение запрещено. а пустое значение равно 0.
img {
filter: invert(80%);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<img decoding="async" src="kaskadsm.jpg" />
</body>
</html>
opacity()
opacity() - функция определяет степень прозрачности изображения. то же, что и свойство непрозрачности.
100% или 1 — исходный вид изображения.
0% или 0 делает изображение прозрачным.
От 0% до 100% или от 0 до 1 определяют степень прозрачности изображения.
Отрицательное значение запрещено, а пустое значение равно 1.
img {
filter: opacity(15%);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<img decoding="async" src="kaskadsm.jpg" />
</body>
</html>
saturate()
saturate() - функция изменения насыщенности цвета изображения.
0% или 0 удаляет насыщенность цвета, делая его черно-белым.
100% или 1 — исходный вид изображения.
Значение больше 100% или 1 делает цвета изображения более насыщенными.
Отрицательное значение запрещено, а пустое значение равно 1.
.kaskad {
filter: saturate(200%);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<img decoding="async" src="kaskadsm.jpg" />
<img decoding="async" src="kaskadsm.jpg" class="kaskad" />
</body>
</html>
sepia()
sepia() - функция делает изображение сепией - черно-белое изображение с коричневым оттенком.
Сепия делает фотографии старыми.
0% или 0 завершают картину.
100% или 1 делает изображение сепией.
От 0% до 100% или от 0 до 1 постепенно определяют этот внешний вид.
Отрицательное значение запрещено, а пустое значение равно 0.
.kaskad {
filter: sepia(80%);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<img decoding="async" src="kaskadsm.jpg" />
<img decoding="async" src="kaskadsm.jpg" class="kaskad" />
</body>
</html>
Գույների ֆունկցիաներ
hsl() hsla()
hsl() hsla() - функция определяет цвет в формате HSL (оттенок, насыщенность, яркость).
hsl() –n принимает три значения. Например: background: hsl(65, 14%, 50%):
hue - цвет или оттенок. определяется в градусах, но указывается только число от 0 до 360.
saturation - насыщенность цвета определяется в процентах. 1001ТП3Т – полная насыщенность, а 01ТП3Т дает серый тон.
lightness - освещенность определяется в процентах. 1001ТП3Т отбеливает, 01ТП3Т чернит.
div {
width: 200px;
height: 200px;
margin: 50px 50px;
background: hsl(30, 100%, 50%)
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div></div>
</body>
</html>
hsla(hue, saturation, lightness, alpha) имеет еще одно значение: оно определяет прозрачность цвета. оно указывается между 0 и 1.
div {
width: 200px;
height: 200px;
margin: 50px 50px;
background: hsla(30, 100%, 50%, 0.30);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div></div>
</body>
</html>
rgb() rgba()
rgb() rgba() – функция определяет цвет из смеси красного, зеленого и синего цветов (rgb – красный, зеленый, синий).
rgba()то же самое, что и rgb(). имеет другое значение, определяющее прозрачность цвета.
Каждое значение указывается в диапазоне от 0 до 255.
0 означает отсутствие света, 255 — максимальная яркость цвета.
div {
width: 200px;
height: 200px;
margin: 50px 50px;
background: rgba(255, 110, 20, 0.30);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div></div>
</body>
</html>
Russian 
Armenian