Доси:

Css-ի ֆունկցիաները (Մաս-1)

Приблизительное чтение: 7 минут 0 просмотров

Տրանսֆորմացիայի՝ փոխակերպան ֆունկցիաներ

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, vwvh՛  с одной из единиц измерения.

Например:

				
					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>

				
			

Оставить комментарий

Կիսվել փաստաթուղթով
ԲՈՎԱՆԴԱԿՈՒԹՅՈՒՆ
ru_RURussian