Как защитить изображение на сайте?

Можно легко перерисовать.

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

И как запрет на создание скриншотов помешает перерисовать простой логотип. Сделают фотку монитора на телефон и обрисуют в иллюстраторе ¯\_(ツ)_/¯

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

При таких условиях, при определенной ширине контейнера margin станет равен 0 и при дальнейшем увеличении уйдет в минус. Если ограничить ширину контейнера, то получается простая формула margin-top: calc($maxw - 100%)
https://jsfiddle.net/eshoap57/

Почему 0.35 -> toFixed(1) = 0.3?

(0.15).toFixed(20) // -> '0.14999999999999999445'
(0.25).toFixed(20) // -> '0.25000000000000000000'
(0.35).toFixed(20) // -> '0.34999999999999997780'
(0.45).toFixed(20) // -> '0.45000000000000001110'

Warning: Floating point numbers cannot represent all decimals precisely in binary. This can lead to unexpected results, such as 0.1 + 0.2 === 0.3 returning false.
https://developer.mozilla.org/en-US/docs/Web/JavaS...

Как сделать такой перенос слов?

еще длиннее

Почему не грузит некоторые файлы в GitHub?

KonnorsArmy,

https://konnorsarmy.github.io/HimoXiaomi/img/intro/b1.jpg
- ---------------------------^^^^^^^^^^^

Почему консоль говорит, что это не функция?

'Сard' === 'Card' // <- false

Как сделать canvas фоном?

И правильно советуют про z-index, можно еще pointer-events: none добавить. А события мыши ловить на родительском элементе или на window.

Возможно ли решить такую задачу без вложенного цикла?

grisha228, это и так выполняется за O(n), где n = rows * columns. В данном случае для оптимизации можно не обрабатывать всю таблицу целиком, а только ту часть, которая необходима сейчас.

Почему не работает grid-row-start?

helpmeplease196,

body {
-  grid-template-rows: minmax(4em, 5em);
+  grid-auto-rows: minmax(4em, 5em);
}

Почему не работает grid-row-start?

https://developer.mozilla.org/en-US/docs/Web/CSS/g...

Как сделать наложение трех элементов (чтобы каждый каждый последующий был выше но самый последний был выше первого)?

Можно так:

<div class="white"></div>
<div class="blue"></div>
<div class="yellow"></div>

.white {
  z-index: 1;
}
.blue {
  z-index: 2;
}
.yellow {
  z-index-left: 0;
  z-index-right: 3;
}

Как посмотреть значение JS переменной если точка останова скидывается при обновлении страницы, а скрипт на удалённом хосте?

https://dev.to/piyukore06/chrome-local-overrides-1f49

Как сделать blur по форме svg?

vahromeevilya-widestudio, там на карточке всего 9 точек для clip-path, не так уж это долго, если не отвлекаться

Как сделать blur по форме svg?

vahromeevilya-widestudio, используй CSS clip-path: polygon, для него можно использовать calc примерно так:

.el {
  clip-path: polygon(
    50px 0,
    calc(100% - 50px) 0,
    100% 50px,
    100% calc(100% - 50px),
    calc(100% - 50px) 100%,
    50px 100%,
    0 calc(100% - 50px),
    0 50px
  );
}

Как сделать blur по форме svg?

В той дэмке к предыдущему вопросу используется clip-path на элементе к которому применен backdrop-filter: blur. И в варианте с border-image тоже придется использовать clip-path

Не работает игра в js?

Добавь вызов функции отрисовки rysuj() на событие нажатие кнопок

function ruchPostaci(e)
{
    if(e.keyCode == 37)
    {
        dx = -2;
        rysuj();
    }
    else if(e.keyCode == 39)
    {
        dx = 2;
        rysuj();
    }
    else if(e.keyCode == 38 && dy == 0)
    {
        dy = -3;
        rysuj();
    }
}

А также в самой последней строкой в скрипте добавь rysuj()

Javasctipt на польском написанный школьником это просто вынос мозга =)

Почему border-image + анимированный SVG лагает!?

vahromeevilya-widestudio, у меня призывалка в качестве эксперта отключена =) Задавайте новые вопросы как обычно, а я если буду проходить мимо обязательно помогу чем смогу.

Почему border-image + анимированный SVG лагает!?

vahromeevilya-widestudio, я месяц назад видел ваш вопрос с этим дизайном карточек https://qna.habr.com/q/1154278
Тогда же сделал набросок на js, но показывать не стал, думал может дизайнер одумается и сделает чего попроще.

Кстати, сочетание анимации и backdrop-filter приводят к повышенному жору GPU, так что советую не увлекаться свестоперделками.

Почему border-image + анимированный SVG лагает!?

vahromeevilya-widestudio,
https://jsfiddle.net/sf1qkbgx/1/

// This is how we allow editing the SVG source in Codepen and jsfiddle.net:
const svg1 = `
<svg width="630" height="535" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M624 453.026L535.735 530L238.694 530L159.677 461.09L4.00049 461.09L4.00004 -1.95293e-06L624 6.10351e-05L624 453.026Z" fill="#00C3FF" fill-opacity="0.1" />
  <path d="M624 453.026L624.657 453.779L625 453.48L625 453.026L624 453.026ZM535.735 530L535.735 531L536.11 531L536.393 530.754L535.735 530ZM238.694 530L238.037 530.754L238.319 531L238.694 531L238.694 530ZM159.677 461.09L160.334 460.337L160.051 460.09L159.677 460.09L159.677 461.09ZM4.00049 461.09L3.00049 461.09L3.00049 462.09L4.00049 462.09L4.00049 461.09ZM4.00004 -1.95293e-06L4.00004 -1L3.00004 -1L3.00004 -9.95551e-07L4.00004 -1.95293e-06ZM624 6.10351e-05L625 6.06919e-05L625 -0.999939L624 -0.999939L624 6.10351e-05ZM623.343 452.272L535.078 529.246L536.393 530.754L624.657 453.779L623.343 452.272ZM535.735 529L238.694 529L238.694 531L535.735 531L535.735 529ZM239.351 529.246L160.334 460.337L159.019 461.844L238.037 530.754L239.351 529.246ZM159.677 460.09L4.00049 460.09L4.00049 462.09L159.677 462.09L159.677 460.09ZM5.00049 461.09L5.00004 -2.91031e-06L3.00004 -9.95551e-07L3.00049 461.09L5.00049 461.09ZM4.00004 0.999998L624 1.00006L624 -0.999939L4.00004 -1L4.00004 0.999998ZM623 6.13784e-05L623 453.026L625 453.026L625 6.06919e-05L623 6.13784e-05Z" fill="white" />
  <path d="M223.331 530.023L182.562 530.023L112.461 471.068L153.231 471.068L223.331 530.023Z" fill="#00C3FF" />
  <path d="M169.133 530.023L128.364 530.023L58.2633 471.068L99.0324 471.068L169.133 530.023Z" fill="#00C3FF" />
  <path d="M115.727 530.023L74.9579 530.023L4.85752 471.068L45.6267 471.068L115.727 530.023Z" fill="#00C3FF" />
</svg>`;

const svg2 = `
<svg width="630" height="535" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M34.3616 30L34.3616 441L37.5983 441V440.996L166.941 440.996L235.009 499.486L235.009 499.691L543.652 499.691L543.652 499.62L624.984 428L625.236 428L625.236 427.778L625.262 427.755L625.236 427.726L625.236 86.9949L622 86.9949L622 426.419L542.466 496.454L236.334 496.454L167.983 437.721L167.951 437.76L37.5983 437.76L37.5983 33.2368L592.117 33.2368L592.117 141.763L129.299 141.763L129.299 145L592.117 145L595.354 145L595.354 30L592.117 30L37.5983 30L34.3616 30Z" fill="#00C3FF" />
</svg>`;

// A dirty trick to load the above SVG into the document
const blob1 = new Blob([svg1], {type: 'image/svg+xml'});
const blob2 = new Blob([svg2], {type: 'image/svg+xml'});

const svg1Url = URL.createObjectURL(blob1);
const svg2Url = URL.createObjectURL(blob2);

document.querySelectorAll('.test').forEach(item => {
  item.style.setProperty('--border-image-1-url', `url(${svg1Url})`);
  item.style.setProperty('--border-image-2-url', `url(${svg2Url})`);
});

body {
  background: #001031;
}

.tests {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.test {
  position: relative;
	width: 620px;
	height: 530px;
}

.test::before,
.test::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-image: var(--border-image-1-url) 152 10 110 595 fill / 152px 10px 110px 595px;
  z-index: -1;
  
}

.test::before {
  filter: drop-shadow(0 0 4px #00C3FF);
  border-image: var(--border-image-2-url) 152 10 110 595 fill / 152px 10px 110px 595px;
  animation: opacity 3s infinite;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Почему border-image + анимированный SVG лагает!?

vahromeevilya-widestudio,

// This is how we allow editing the SVG source in Codepen and jsfiddle.net:
const svg = `
<svg width="630" height="535" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M624 453.026L535.735 530L238.694 530L159.677 461.09L4.00049 461.09L4.00004 -1.95293e-06L624 6.10351e-05L624 453.026Z" fill="#00C3FF" fill-opacity="0.1" />
  <path d="M624 453.026L624.657 453.779L625 453.48L625 453.026L624 453.026ZM535.735 530L535.735 531L536.11 531L536.393 530.754L535.735 530ZM238.694 530L238.037 530.754L238.319 531L238.694 531L238.694 530ZM159.677 461.09L160.334 460.337L160.051 460.09L159.677 460.09L159.677 461.09ZM4.00049 461.09L3.00049 461.09L3.00049 462.09L4.00049 462.09L4.00049 461.09ZM4.00004 -1.95293e-06L4.00004 -1L3.00004 -1L3.00004 -9.95551e-07L4.00004 -1.95293e-06ZM624 6.10351e-05L625 6.06919e-05L625 -0.999939L624 -0.999939L624 6.10351e-05ZM623.343 452.272L535.078 529.246L536.393 530.754L624.657 453.779L623.343 452.272ZM535.735 529L238.694 529L238.694 531L535.735 531L535.735 529ZM239.351 529.246L160.334 460.337L159.019 461.844L238.037 530.754L239.351 529.246ZM159.677 460.09L4.00049 460.09L4.00049 462.09L159.677 462.09L159.677 460.09ZM5.00049 461.09L5.00004 -2.91031e-06L3.00004 -9.95551e-07L3.00049 461.09L5.00049 461.09ZM4.00004 0.999998L624 1.00006L624 -0.999939L4.00004 -1L4.00004 0.999998ZM623 6.13784e-05L623 453.026L625 453.026L625 6.06919e-05L623 6.13784e-05Z" fill="white" />
  <path d="M223.331 530.023L182.562 530.023L112.461 471.068L153.231 471.068L223.331 530.023Z" fill="#00C3FF" />
  <path d="M169.133 530.023L128.364 530.023L58.2633 471.068L99.0324 471.068L169.133 530.023Z" fill="#00C3FF" />
  <path d="M115.727 530.023L74.9579 530.023L4.85752 471.068L45.6267 471.068L115.727 530.023Z" fill="#00C3FF" />
  <path fill-rule="evenodd" clip-rule="evenodd" d="M34.3616 30L34.3616 441L37.5983 441V440.996L166.941 440.996L235.009 499.486L235.009 499.691L543.652 499.691L543.652 499.62L624.984 428L625.236 428L625.236 427.778L625.262 427.755L625.236 427.726L625.236 86.9949L622 86.9949L622 426.419L542.466 496.454L236.334 496.454L167.983 437.721L167.951 437.76L37.5983 437.76L37.5983 33.2368L592.117 33.2368L592.117 141.763L129.299 141.763L129.299 145L592.117 145L595.354 145L595.354 30L592.117 30L37.5983 30L34.3616 30Z" fill="#00C3FF" />
</svg>
`;

// A dirty trick to load the above SVG into the document
const blob = new Blob([svg], {type: 'image/svg+xml'})
const svgUrl = URL.createObjectURL(blob);
document.querySelectorAll('.test').forEach(item => {
  item.style.setProperty('--border-image-url', `url(${svgUrl})`);
});

body {
  background: #001031;
}

.tests {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.test {
  position: relative;
	width: 620px;
	height: 530px;
}

.test::before,
.test::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-image: var(--border-image-url) 152 10 110 595 fill / 152px 10px 110px 595px;
  z-index: -1;
  animation: opacity 3s infinite
}

.test::before {
  filter: blur(5px);
}

@keyframes opacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}