НАЧАЛО
Թարմացվել է 11.03.2024

Доси:

CSS – ԱՅԼ ՀԱՏԿՈՒԹՅՈՒՆՆԵՐ(ՄԱՍ-1)

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

--*

–*   – определяет переменную(возраст=25. Он – возраст). 

* можно заменить любым латинским словом, например –guyn.

Переменная определяется двумя дефисами: «—». Его необходимо указать для использования в таблице стилей CSS. var() в функции.

Например:

				
					p {
  --colorBlue: rgb(30, 0, 255);
  color: var(--colorBlue);
}

accent-color

accent-color - изменения цвет по умолчанию. 

элементы: <input type=”checkbox”>, <input type=”radio”>, <input type=”range”> և <progress>։

Краткая информация:

Նախասահմանված արժեքը  auto
Ժառանգվում ենДа
Կիրառվում ենСо всеми видами элементов.
Ենթարկվում է անիմացիայիС точки зрения качества

Значения следующие:

auto - браузер сам определяет их цвет.

որևէԳույն - любой цвет в любом формате.

				
					input {
  accent-color: red;
}
progress {
  accent-color: red;
}
				
			
				
					<body>
  <form method="get" action="">
    <input type="checkbox">
    <input type="radio"> <br>
    <input type="range"><br>
    <progress  max="100" value="50"></progress>
  <input type="hidden" name="trp-form-language" value="ru"/></form>
</body>

appearance

appearance – В разных операционных системах Некоторые элементы отображаются по-разному.

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

В настоящее время используется appearance: none опция, которая переопределяет это поведение, означая, что элемент будет отображаться одинаково независимо от операционной системы или браузера.

appearanceОстальные версии не работают в браузерах.

 

appearancewith должно быть указано в CSS պրեֆիքսները՝

Chrome և Safari բրաուզերների համար՝  -webkit-․․․,

Firefox-ի համար՝ -moz-․․․,

Edge-ի համար՝ -ms-․․․,

Для Оперы: -օ-...,


Краткая информация:

Նախասահմանված արժեքը  none
Ժառանգվում ենНет
Կիրառվում ենСо всеми видами элементов.
Ենթարկվում է անիմացիայիНет

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

				
					.input02 {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
}
				
			
				
					<body>
  <input type="search" class="input01"></input><br><br>
  <input type="search" class="input02"> </input>
</body>

В следующем примере стиль поля поиска будет установлен как текстовое поле. 

Чтобы получить видимый результат, рассмотрим пример с браузером Safari телефона Apple:

				
					.input02 {
  -webkit-appearance: searchfield;
  -moz-appearance: searchfield;
  appearance: searchfield;
}
				
			
				
					<body>
  <input type="text" class="input01"></input><br><br>
  <input type="text" class="input02"> </input>
</body>

На картинке первое текстовое поле в обычной форме, второе в виде поля поиска.

box-shadow

box-shadow - добавляет тень к элементу. 

Для одного элемента можно определить несколько теней, разделяя их запятыми.

Краткая информация:

Նախասահմանված արժեքը  none
Ժառանգվում ենНет
Կիրառվում ենСо всеми видами элементов.
Ենթարկվում է անիմացիայիколичество теней

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

Третье значение определяет степень рассеяния, четвертое — распространение тени. 

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


Значения следующие:

inset – устанавливает тень внутри элемента. Внутри тень начинается на границе, в позиции кадра, и распространяется по фону элемента, а не по его содержимому.

X Y ուղղությունները – x определяет положение тени слева направо, для отрицательного значения – справа налево. y определяет положение тени сверху вниз, для негатива — снизу вверх. Его можно указать в разных единицах измерения.

շաղմանԱստիճանը - чем больше значение, тем шире будет тень и тем светлее она будет. Отрицательное значение аннулируется.

տարածվածությունը - положительное значение расширяет тень, отрицательное значение сжимает ее.

գույնը – устанавливает цвет тени в любом формате.

				
					div {
  width: 400px;
  height: 200px;
  background-color: black;
  box-shadow: 1px 1px 60px 10px inset orange,
              10px 10px 50px 15px blue,
              20px 20px 60px 30px red;
}

color-scheme

color-scheme -устанавливает цветовую схему для элемента или всей веб-страницы. 

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

Краткая информация:

Նախասահմանված արժեքը  normal
Ժառանգվում ենДа
Կիրառվում ենСо всеми видами элементов.
Ենթարկվում է անիմացիայիНет

Значения следующие:

normal - для веб-страницы не определена цветовая схема.

light - в случае яркой цветовой схемы операционной системы веб-страница будет подсвечена.

dark - в случае темной цветовой схемы операционной системы веб-страница зависнет.

				
					:root {
  color-scheme: light dark;
}
.date-input {
  color-scheme: light;
}
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div style="border: 2px solid grey; width: 500px; height: 220px">

      <form action="" style="margin-left: 20px" data-trp-original-action="">
        <h4 data-no-auto-translation="">Գրանցման դաշտ</h4>
        <input type="text" value="Ձեր անունը" style="margin-bottom: 20px" />
        <input type="text" value="Ձեր ազգանունը" style="margin-left: 40px" /> <br />
        <input type="text" value="Էլ․ հասցեն" style="margin-bottom: 20px" />

        <input class="date-input" type="date" placeholder="Дата рождения:" style="margin-left: 40px" /><br />

        <input type="password" placeholder="Пароль:" />
        <input type="password" placeholder="Повторите пароль" style="margin-left: 40px" /> <br />
        <input type="submit" value="Подтверждать" style="margin-top: 20px" />
      <input type="hidden" name="trp-form-language" value="ru"/></form>
      
    </div>
  </body>
</html>

prefers-color-scheme

prefers-color-scheme - используется @media правило и определяет изменение стиля в соответствии с цветовой схемой операционной системы пользователя.

				
					  /*օպերացիոն համակարգի մուգ գունային սխեմայի դեպքում դաշտերին կսահմանվի նշված գույները։*/
  @media (prefers-color-scheme: dark) {
    .input-text {
      background: #333;
      color: white;
    }
    .input-password {
      background: black;
      color: #ddd;
    }
  }
  /*օպերացիոն համակարգի լուսավոր գունային սխեմայի դեպքում դաշտերին կսահմանվի նշված գույները։*/
  @media (prefers-color-scheme: light) {
    .input-text {
      background: white;
      color: #555;
    }
    .input-password {
      background: #eee;
      color: black;
    }
  }

contain

contain –каждая веб-страница перед отображением html-файла страницы загружается с сервера и HTML: браузер кода определяет DOMпредставляет собой ветвление html-элементов данного файла и соответственно собирает веб-страницу и отображает ее. 

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

Если веб-страница не является динамической, т. е. ее содержимое не может быть изменено после ее отображения (она не использует Javascript код), тогда contain пользоваться имуществом бессмысленно. 

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

На веб-страницу можно установить отдельную программу, например для отображения погоды. С общей веб-страницы contain: content , мы получим результат, при котором общая страница будет работать с обычной скоростью, а отделенная часть не будет влиять на скорость общей.

 

Например, есть сайты, где, нажав на «menu", в левой или правой части браузера появляется дополнительная часть с некоторым содержимым. Браузер также форматирует эту часть вместе со всей страницей, несмотря на то, что изначально она даже не видна. 

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


Краткая информация:

Նախասահմանված արժեքը  none
Ժառանգվում ենДа
Կիրառվում ենСо всеми видами элементов.
Ենթարկվում է անիմացիայիНет

Значения следующие:

none –DOM обновляется как обычно и не имеет независимых частей.

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

Например, если для одного из дочерних элементов блока установлено значение float без contains, оно выйдет за пределы блока и повлияет на другие элементы. Без containбраузер по умолчанию обновит всю страницу, если блок будет изменен.

через содержание bлок получит свое BFC (вы можете ознакомиться с этим Ֆորմատավորման отделение display: flow-root часть), поэтому его содержимое не может выйти за его пределы, даже если оно используется  float свойство (ознакомиться с float можно в разделе CSS-Форматирование). 

Блок будет равен position:relativeиз Следовательно, если определен какой-либо дочерний элемент блока position: absolute или fixed, он не выйдет за пределы блока.

				
					  body {
    padding: 2em;
    font: 1.2em Roboto, "sans-serif";
  }

  .news {
    list-style: none;
    padding: 0;
    width: 40em;
    border: 4px solid red;
  }

  .news li {
    padding: 10px;
    height: 130px;
    contain: layout;
  }

  .news li div {
    float: left;
    height: 300px;
    width: 300px;
    margin: 0 20px;
    background-color: #e05263;
  }

  .news-02 {
    list-style: none;
    padding: 0;
    width: 40em;
    border: 4px solid red;
  }

  .news-02 li {
    padding: 10px;
    height: 130px;
  }
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
    <style data-no-auto-translation=""></style>
  </head>
  <body>
      
    <div style="width: 40em; text-align: center">
      <h2 style="margin:0; padding:0;" data-no-auto-translation="">Առանց contain:layout -ի</h2>
      <button id="toggleFeature" style="background: orange">
        Нажмите
      </button>
    </div>

    <ul id="events" class="news">
      <li>
        <h2 data-no-auto-translation="">CSS-CONTAIN WITHOUT LAYOUT</h2>
        <p>Lorem ipsum dolor сидеть amet!</p>
      </li>
    </ul>

    <ul class="news-02">
      <li>
        <h2 data-no-auto-translation="">CSS-CONTAIN WITHOUT LAYOUT-02</h2>
        <p>
          Lorem ipsum dolor сидеть amet consectetur adipisicing, elit. Deserunt Praesentium Differentio Invente Ratio Tempore aliquid ошибка.
        </p>
      </li>
    </ul>
    
    <script src="myscripts.js"></script>
    
  </body>
</html>

				
			
				
					      let myButton = document.querySelector("#toggleFeature");
      myButton.onclick = function () {
        let feature = document.querySelector("#events li:first-child");
        if (feature.classList.contains("featured")) {
          feature.classList.remove("featured");
          feature.removeChild(feature.querySelector(".box"));
        } else {
          feature.className = "featured";
          let box = document.createElement("div");
          box.className = "box";
          feature.prepend(box);
        }
      };

пример без contains:layout.

пример с contains:layout.

или:

				
					  .news li {
    padding: 10px;
    /*height: 130px;*/
    contain: layout;
  }

paint – снова содержимое элемента становится независимым.

Контент не выходит за границы своего блока, даже когда он используется. float или position: absolute свойства, поскольку блок снова получает свой собственный BFC (см. Ֆորմատավորման отделение display: flow-root часть).

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

				
					.news li {
  padding: 10px;
  height: 130px;
  contain: paint;
}

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

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

Таким образом, браузер не тратит время на расчет при смене блока.

size В случае , блок не получает свой собственный BFC(вы можете ознакомиться с этим Ֆորմատավորման отделение display: flow-root часть), поэтому его содержание может выходить за его пределы.

size также может быть определено вместо contain: strict который layout, paint, size это обобщение ценностей. 

				
					  body {
    font: 1.2em Roboto, "sans-serif";
  }

  .news {
    list-style: none;
    padding: 0;
    width: 40em;
    border: 4px solid green;
  }

  .news li {
    padding: 10px;
    /*  height: 130px;*/
    /*  contain: size;*/ /*size -ը կավելանա javascript -ի միջոցով։*/
  }

  .news li div {
    float: left;
    height: 120px;
    width: 120px;
    margin: 0 20px;
    background-color: green;
  }

  .news-02 {
    list-style: none;
    padding: 0;
    width: 40em;
    border: 4px solid green;
  }

  .news-02 li {
    padding: 10px;
    height: 130px;
  }
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
    <style data-no-auto-translation=""></style>
  </head>
  <body>
    <div style="width: 40em; text-align: center">
      <h2 style="margin: 0; padding: 0" data-no-auto-translation="">contain:size -ի հետ</h2>
      <button id="toggleFeature" style="background: orange">Нажмите</button>
    </div>

    <ul id="events" class="news">
      <li class="li-01">
        <h2 data-no-auto-translation="">CSS-CONTAIN WITHOUT LAYOUT</h2>
        <p>Lorem ipsum dolor сидеть amet!</p>
      </li>
    </ul>
    
   <script src="myscripts.js"></script>
  </body>
</html>

				
			
				
					      let myButton = document.querySelector("#toggleFeature");
      myButton.onclick = function () {
        let feature = document.querySelector("#events li:first-child");
        if (feature.classList.contains("featured")) {
          feature.classList.remove("featured");
          feature.removeChild(feature.querySelector(".box"));
        } else {
          var element = document.querySelector(".li-01");
          element.style.contain = "size";
          
          feature.className = "featured";
          let box = document.createElement("div");
          box.className = "box";
          feature.prepend(box);
        }
      };

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

style - в основном относится к счетчику (см. свойство counter-reset CSS-CONTENT) и кавычкам (содержимому, свойствам кавычек одного и того же раздела).

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

То есть элемент, для которого он определен Значение стиля — отдельный блок hдля цитаты (или цитат)..

				
					  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  :root {
    font-size: 110%;
  }

  body {
    font: 1em/160% sans-serif;
    margin: 0;
    background-color: black;
  }

  h1,
  h2,
  h3 {
    line-height: 120%;
  }

  p {
    margin: 0;
  }

  input,
  button,
  select {
    font: inherit;
  }

  label {
    cursor: pointer;
    user-select: none;
  }

  p + p,
  .wrapper-row + .wrapper-row {
    margin-top: 1.5em;
  }

  .site-wrapper {
    margin: 0 auto;
    padding: 2em;
    max-width: 36em;
    background-color: #fff;
  }

  .site-wrapper {
    max-width: 40em;
    min-height: 100vh;
    background-color: black;
  }

  .intro {
    max-width: 40em;
    text-align: center;
  }

  .target-element-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2em;
  }
  
  
  
  
  
  .target-element {
    padding: 2em;
    color: white;
    background-color: #d94d07;
    counter-reset: list-items;
  }

  .target-child::before {
    counter-increment: list-items;
    content: counter(list-items) ". ";
  }

  .with-contain {
    contain: style;
    color: #69ba60;
    background-color: #e8fcf2;
  }

  .without-contain {
    /*contain: style;*/
    color: #69ba60;
    background-color: #e8fcf2;
  }
  
  
  
  
  
  .contain-child {
    background: #339966;
    color: white;
  }

  .target-element,
  .target-child {
    padding: 1em;
    border: 2px solid;
    border-radius: 0.5em;
  }

  .target-child {
    margin-top: 1em;
    line-height: 1;
  }

  .intro + .target-element-group {
    margin-top: 1em;
  }

  .p-head {
    color: #f8c555;
    text-align: center;
    background-color: black;
    border-radius: 20px;
  }
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
    <style data-no-auto-translation="">
    </style>
  </head>
  <body>
    <div class="site-wrapper">


      <div class="target-element-group">


        <div class="target-element">
          <p class="p-head">Без стиля </p>

          <div class="target-child without-contain">Нет сдерживания
            <div class="target-child contain-child">Нет сдерживания</div>
            <div class="target-child contain-child">Нет сдерживания</div>
            <div class="target-child contain-child">Нет сдерживания</div>
            <div class="target-child contain-child">Нет сдерживания</div>
          </div>

          <div class="target-child">Нет сдерживания</div>
          <div class="target-child">Нет сдерживания</div>
          <div class="target-child">Нет сдерживания</div>
          <div class="target-child">Нет сдерживания</div>
        </div>


        <div class="target-element">
          <p class="p-head">со стилем</p>

          <div class="target-child with-contain">Содержание стиля:
            <div class="target-child contain-child">Содержание стиля:</div>
            <div class="target-child contain-child">Содержание стиля:</div>
            <div class="target-child contain-child">Содержание стиля:</div>
            <div class="target-child contain-child">Содержание стиля:</div>
          </div>

          <div class="target-child">Нет сдерживания</div>
          <div class="target-child">Нет сдерживания</div>
          <div class="target-child">Нет сдерживания</div>
          <div class="target-child">Нет сдерживания</div>
        </div>


      </div>
    </div>
  </body>
</html>

content - такой же как contain:  layout  paint  style:

strict - такой же как contain:  layout  paint style size :

cursor

cursor - когда указатель мыши находится внутри границ элемента, cursorизменит изображение указателя мыши.

Краткая информация:

Նախասահմանված արժեքը  auto
Ժառանգվում ենДа
Կիրառվում ենСо всеми видами элементов.
Ենթարկվում է անիմացիայիНет

Значения следующие:

url() – определяет изображение, которое будет отображаться вместо стандартного изображения указателя мыши.

Есть возможность установить несколько картинок, которые станут резервными версиями, если первая вдруг не будет отображаться. Наконец, необходимо упомянуть cursor любое из специальных слов объекта недвижимости.

x և y կորդինատներ - координаты можно указать по желанию. Должно быть два неотрицательных значения, 32-ից небольшие значения.

Предыдущий Արժեքը Տեսքը Предыдущий
Базовый:

auto
Браузер автоматически определит внешний вид мыши.

default
Основной вид мыши — стрелка.

none
Стрелка не отображается.
Ссылки и статус выполнения инструкций

context-menu
Доступно контекстное меню.

help
Имеется подтверждающая информация.

pointer
Указатель на ссылку.

progress
Программа занята, но пользователь может работать с интерфейсом.

wait
Программа занята и пользователь не может работать с интерфейсом.
Выбирать:

cell
Показывает возможность захвата списка.

crosshair
указатель для выбора части растрового изображения.

text
Индикатор выделения текста.

vertical-text
Индикатор выбора вертикального текста.
Хватай и двигай

alias
На странице будет создана ссылка.

copy
Указывает на возможность копирования.

move
Показывает возможность перемещения объекта.

no-drop
Указывает на то, что выбросить предмет невозможно.

not-allowed

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

all-scroll

Показывает возможность перемещения в любую сторону страницы.

col-resize
Объект можно увеличивать или уменьшать по горизонтали.

row-resize
Объект можно увеличивать или уменьшать по вертикали.

n-resize
Объект может изменять свои размеры по любой из сторон или углов.

e-resize

s-resize

w-resize

ne-resize

nw-resize

se-resize

sw-resize

ew-resize
Двустороннее изменение размера.

ns-resize

nesw-resize

nwse-resize
Изменение масштаба

zoom-in
Увеличение или уменьшение масштаба

zoom-out
ловить

grab
Указывает, что объект можно схватить и переместить.

grabbing

 
				
					div {
  cursor:  url(icon20.png) 4 12,  auto;
 }

forced-colors forced-color-adjust

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

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

forced-colors — свойство правила @media, с помощью которого можно определить стиль, отличный от обычного, например, для кнопок, ссылок, текста, который будет активироваться только в случае режима высокой яркости.

forced-color-adjustсовершает противоположное действие. В случае режима высокой яркости мы можем запретить любому элементу изменять данный режим.

Краткая информация:

Նախասահմանված արժեքը  принудительная настройка цвета. auto
принудительные цвета: none
Ժառանգվում ենДа
Կիրառվում ենСо всеми видами элементов.
Ենթարկվում է անիմացիայիНет

Чтобы установить режим высокой контрастности в Windows, давайте рассмотрим следующий пример:

forced-colors–являются значениями

none - стиль для режима высокой контрастности отменен.

active - активирован стиль для режима высокой контрастности.


forced-color-adjust-являются значениями

auto – данный элемент подвергается изменению режима высокой контрастности.

none – данный элемент не подвергается изменению режима повышенной яркости.

				
					.button-01,
.button-02 {
  border: 1px solid red;
  box-shadow: -2px -2px 5px gray, 2px 2px 5px gray;
}
@media(forced-colors: active) {
  .button-01 {
    border: 4px solid blue;
  }
}
.button-02 {
  forced-color-adjust: none;
}

image-orientation

image-orientation – Это свойство используется для правильной ориентации изображения. 

Например, когда мы делаем снимок на телефон, вместе с изображением сохраняется элемент. EXIF данные: какого формата картинка, размеры картинки, нарисована она горизонтально или вертикально и т.д. 

Определение  image-orientation мы можем контролировать, чтобы изображение отображалось в правильном положении на странице.

Краткая информация:

Նախասահմանված արժեքը  from-image
Ժառանգվում ենДа
Կիրառվում ենСо всеми видами элементов.
Ենթարկվում է անիմացիայիНет

Значения следующие:

none - отменяет повороты изображения.

from-image – картинка отобразится сама EXIF данные.

Исходное положение изображения:

а теперь пример:

				
					img {
  image-orientation: none;
 }

image-rendering

image-rendering — определяет, какой алгоритм должен использовать браузер при изменении размера изображения. 

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

Краткая информация:

Նախասահմանված արժեքը  auto
Ժառանգվում ենДа
Կիրառվում ենСо всеми видами элементов.
Ենթարկվում է անիմացիայիНет

Значения следующие:

auto - алгоритм увеличения изображения определяется браузером.

smooth - изображение увеличено максимально чисто. Это значение в основном используется для фотографий.

high-quality – для изображений, наиболее важных на странице, можно установить это значение, чтобы браузер отображал максимально чистое изображение, чем было бы auto в случае ценности.

 

crisp-edges - картинка увеличивается, сохраняя контрастность, края держит чистый и не использует эффект сглаживания. Этот тип определен для изображений в стиле пиксельной графики:

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

				
					.pixelated {
  image-rendering: pixelated;
}
.autoo {
  image-rendering: auto;
}
.resize-01 {
  clear: none;
  float: left;
  margin-right: 100px;
}
.resize-02 {
  float: right;
}
img {
  margin-bottom: 20px;
  max-width: 100%;
}
.imgs {
  width: 400px;
  height: 400px;
}
body {
  background-color: #333;
  color: rgb(250, 250, 250);
  padding: 20px;
}
				
			
				
					  <body>
    <div class="original">
      <h1 data-no-auto-translation="">Նկարի օրիգինալ չափը</h1>
      <img decoding="async" src="qrcode.png" alt="" />
    </div>
    
    <div class="resize-01">
      <h2 data-no-auto-translation=""><code data-no-auto-translation="">image-rendering: auto</code></h2>
      <img decoding="async" class="imgs autoo" src="qrcode.png" alt="" />
    </div>
    
    <h2 data-no-auto-translation=""><code data-no-auto-translation="">image-rendering: pixelated</code></h2>
    <img decoding="async" class="imgs pixelated" src="qrcode.png" alt="" />
    
  </body>

object-fit

object-fit -масштабирует объекты в элементе (<img>, <video> и т. д.)сохраняя при этом их точный внешний вид, или наоборот.


Краткая информация:

Նախասահմանված արժեքը  fill
Ժառանգվում ենНет
Կիրառվում են<img>, <video>, <object>, <input type="”image”"> с элементами типа.
Ենթարկվում է անիմացիայիНет

Значения следующие:

none – объект вписывается в свой родительский элемент по стандартным размерам соответствующийбез учета масштаба.

				
					img {
  object-fit: none;
  width: 600px;
  height: 300px;
  border: 2px solid black;
}

fill – объект масштабируется в соответствии с размерами родительского объекта без сохранения его точного внешнего вида.

Как мы видим, картинка стала растянутой и некрасивой.

contain – объект масштабируется так, чтобы полностью вписаться в родительский объект, сохраняя при этом его точный внешний вид.

cover –object масштабируется так, чтобы охватить весь родительский элемент, сохраняя при этом его точный внешний вид.

object-position

object-position – определяет объект (<img>, <video> и т. д.) позиция в элементе.

Краткая информация:

Նախասահմանված արժեքը  50% 50%
Ժառանգվում ենДа
Կիրառվում են<img>, <video>, <object>, <input type="”image”"> с элементами типа.
Ենթարկվում է անիմացիայիВ некоторой степени

Значения следующие:  top, right, bottom, left, или определить их с помощью любой единицы измерения. 

Можно указать два значения.

				
					img {
  object-fit: none;
  object-position: top right;
  width: 700px;
  height: 400px;
  border: 2px solid black;
}

overscroll-behavior overscroll-behavior-x overscroll-behavior-y overscroll-behavior-inline overscroll-behavior-block

overscroll-behavior универсален overscroll-behavior-x  и:  overscroll-behavior-y    для свойств. Устанавливает, использовать ли " scroll(когда мы перемещаем страницу) цепочка» или нет.

 

overscroll-behavior-inline –равно overscroll-behavior-x –когда writing-mode-определяется в горизонтальном направлении.

overscroll-behavior-inline –равно overscroll-behavior-y – когда writing-modeопределяется в вертикальном направлении.

 

overscroll-behavior-block –равно overscroll-behavior-y – когда writing-modeопределяется в горизонтальном направлении.

overscroll-behavior-block –равно overscroll-behavior-x – когда writing-modeопределяется в вертикальном направлении.



" scrollЧтобы визуализировать цепочку «, давайте посмотрим на следующий пример:

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

Это возможно при активном scrollцепной эффект (overscroll-behavior: auto;), который также можно отменить (overscroll-behavior: contain):

overscroll-behavior-x ответственнен scrollдля горизонтального направления цепочки , и overscroll-behavior-y –- вертикально.

Краткая информация:

Նախասահմանված արժեքը  auto
Ժառանգվում ենНет
Կիրառվում ենС элементами типа block и элементами, равными display: inline-blockиз
Ենթարկվում է անիմացիայիНет

Значения следующие:

auto -позволяет" scroll«цепной» эффект.

contain - предотвращает" scroll«цепной» эффект.

none «Мало того, что мешает» scroll«цепной» эффект, но и смартфоны Android overscroll glow  и смартфоны iPhone ruber-banding эффекты (о них мы узнаем чуть позже).


overscroll-behavior-y –в случае:

				
					body {
  background-color: grey;
  overscroll-behavior-y: auto;
}
.div-02 {
  width: 600px;
  height: 600px;
  border: 2px solid black;
  background-color: orange;
  overflow: scroll;
  overscroll-behavior-y: auto;
}
.div-03 {
  width: 400px;
  height: 250px;
  border: 2px solid black;
  background-color: skyblue;
  overflow: scroll;
  overscroll-behavior-y: auto;
}
				
			
				
					  <body>
    <div class="div-02">

      <div class="div-03">
        <h1 data-no-auto-translation="">Paragraph-three</h1>
        Lorem ipsum dolor sit amet, consectetur ……… adipiscing elit.
      </div>
      
      <h1 data-no-auto-translation="">Paragraph two</h1>
      Lorem ipsum dolor sit amet, consectetur adipiscing ……… vehicula turpis.
    </div>

    <h1 data-no-auto-translation="">Paragraph-one</h1>
    Lorem ipsum dolor sit amet, consectetur ․․․․․․․․․․․․․․․․․ импердиет аликвам.
  </body>

overscroll-behavior-x –в случае:

				
					body {
  background-color: grey;
  overscroll-behavior-x: auto;
}
.div-02 {
  width: 900px;
  height: 600px;
  border: 2px solid black;
  background-color: orange;
  overflow: scroll;
  overscroll-behavior-x: auto;
}
.div-03 {
  width: 500px;
  height: 200px;
  border: 2px solid black;
  background-color: skyblue;
  overflow: scroll;
  overscroll-behavior-x: auto;
}
.p-03 {
  width: 1200px;
}
.p-02 {
  width: 1200px;
}
.p-01 {
  width: 2500px;
}
				
			
				
					  <body>
    <div class="div-02">

      <div class="div-03">
        <h1 data-no-auto-translation="">Paragraph-three</h1>
        <p>Lorem ipsum dolor sit amet, consectetur ……… adipiscing elit.</p>
      </div>

      <h1 data-no-auto-translation="">Paragraph two</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing ……… vehicula turpis.
      </p>
    </div>
    
    <h1 data-no-auto-translation="">Paragraph-one</h1>
    <p>Lorem ipsum dolor sit amet, consectetur ․․․․․․․․․․․․․․․․․ импердиет аликвам.</p>
  </body>

overscroll-behavior: contain –в случае:

				
					. 
. 
. 
overscroll-behavior:  contain ;  /* կամ՝  overscroll-behavior:  
                                              contain contain ;  */
.
.

overscroll-behavior: none –будет отменено в случае смартфонов Android overscroll glow  и смартфоны iPhone ruber-banding последствия:

				
					. 
. 
. 
overscroll-behavior:  none ;
.
.

Android սմարթֆոնների overscroll glow   էֆֆեկտը՝

Iphone սմարթֆոնների ruber-banding էֆֆեկտը.

scroll-behavior

scroll-behavior – Мы можем перемещаться в любое место веб-страницы с помощью привязки (см. «Элементы» <a data-no-auto-translation=""></a> » в части раздела «href».).  

scroll-behavior Свойство определяет, будет ли переход резким или плавным.

Краткая информация:

Նախասահմանված արժեքը  auto
Ժառանգվում ենНет
Կիրառվում ենс прокручиваемыми элементами.
Ենթարկվում է անիմացիայիНет

Значения следующие:

auto - передача осуществляется резко.

smooth - передача плавная.

				
					body {
  background-color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
nav {
  background-color: orange;
  display: block;
  padding: 1em 0;
  text-align: center;
  width: 500px;
}
nav a {
  color: #fff;
  margin: 0 40px;
  text-decoration: none;
}
.scrolling-box {
  background-color: #eaeaea;
  display: block;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
  text-align: center;
  width: 500px;
}
section {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 40px;
}
				
			
				
					<body>
  <nav>
    <a href="#1" data-no-auto-translation="">1</a>
    <a href="#2" data-no-auto-translation="">2</a>
    <a href="#3" data-no-auto-translation="">3</a>
  </nav>
  
  <div class="scrolling-box">
    <section id="1">Это первый раздел</section>
    <section id="2">Это второй раздел</section>
    <section id="3">Это третий раздел</section>
  </div>
  
</body>
CSS – СВОЙСТВА -Предыдущий CSS-COLOR AND BACKGROUND Вперед - CSS – СВОЙСТВА CSS — ԱՅԼ ՀԱՏԿՈՒԹՅՈՒՆՆԵՐ(ՄԱՍ-2)

Նմանատիպ հոդվածներ

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

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

При поддержке Hayti:

ru_RURussian
hyArmenian ru_RURussian