Разные куски кода

blend

<div class="wrapper">
  <img
    src="https://github.githubassets.com/images/modules/profile/achievements/pull-shark-default.png"
    alt="shark"
  />
  <h1>Hello world!</h1>
</div>

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper img {
  position: absolute;
  width: 100vw;
  height: 80vh;
}

.wrapper h1 {
  font-size: 1.1rem;
  mix-blend-mode: overlay;
}

blend color

<h1>hello world</h1>

h1 {
  background: linear-gradient(
    120deg,
    hsl(0 100% 60%),
    hsl(15 100% 60%) 35%,
    hsl(23 96% 62%) 45%,
    hsl(0 100% 60%) 65%,
    hsl(358 58% 47%)
  );
  background-clip: text;
  -webkit-text-fill-color: #f000;
  font-size: 45px;
  text-align: center;
}

css varibles get with js

const r = document.querySelector(":root");

function myFunction_get() {
  // получить
  const rs = getComputedStyle(r);

  alert("The value of --blue is: " + rs.getPropertyValue("--blue"));
}

function myFunction_set() {
  //установить
  r.style.setProperty("--blue", "lightblue");
}

Rest text

.points {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

CSS pseudo class marker

ul::marker {
  content: url("") " ";
}

Get user geolation

navigator.geolocation.getCurrentPosition(succes, failed);

function succes(geolacation) {
  const geo = geolacation.coords;

  /* ... */
}

function failed(error) {
  /* ... */
}