doka-guide · TatianaFokina · Nov 23, 2023 · Nov 7, 2023 · Nov 7, 2023 · Nov 7, 2023
diff --git a/.yaspeller.json b/.yaspeller.json
@@ -106,6 +106,7 @@
     "геометричность",
     "геопозици(и|ей|)",
     "гитхаб(е|а|у)",
+    "глассморфизм",
     "глиф(ы|ов|ами|ам|ах|)",
     "Гонсало",
     "ГПСЧ",

@@ -16,6 +16,7 @@ groups:
     items:
       - css-impact-on-a11y
       - prefers-reduced-motion
+      - prefers-reduced-transparency
       - prefers-contrast
       - forced-colors
       - inverted-colors

@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Пример с полупрозрачным фоном для текста — prefers-reduced-transparency — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
+</head>
+<style>
+  *, *::before, *::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  html {
+    color-scheme: dark;
+    font-size: 18px;
+  }
+
+  body {
+    min-height: 100vh;
+    padding: 50px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: #18191C;
+    color: #FFFFFF;
+    font-family: "Roboto", sans-serif;
+  }
+
+  h2 {
+    font-weight: 500;
+    font-size: 1.375rem;
+  }
+
+  article {
+    display: grid;
+    width: 350px;
+    height: 450px;
+    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='200' height='200' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(139)'%3E%3Crect width='100%25' height='100%25' fill='rgba(24, 25, 28,1)'/%3E%3Cpath d='M-10 30h60v8h-60zM-10-10h60v8h-60' fill='rgba(16, 243, 175,1)'/%3E%3Cpath d='M-10 10h60v8h-60zM-10-30h60v8h-60z' fill='rgba(244, 152, 173,1)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E ")
+  }
+
+  article span {
+    display: inline-flex;
+    align-items: center;
+    grid-area: 3 / 1 / 3 / 4;
+    height: 150px;
+    padding: 30px 20px;
+    color: #FFFFFF;
+    background: #18191C;
+    opacity: 0.9;
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    article span {
+      opacity: 1;
+    }
+  }
+
+  @media (max-width: 768px) {
+    body {
+      padding: 30px;
+    }
+
+    article {
+      width: 100%;
+      height: 300px;
+    }
+  }
+</style>
+<body>
+  <article>
+    <span>
+      <h2>Люблю полосы и вышивать крестиком</h2>
+    </span>
+  </article>
+</body>
+</html>
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Пример с градиентом и фоновой картинкой — prefers-reduced-transparency — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;500&display=swap">
+</head>
+<style>
+  *, *::before, *::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  html {
+    color-scheme: dark;
+    font-size: 16px;
+  }
+
+  body {
+    min-height: 100vh;
+    padding: 50px;
+    gap: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: #18191C;
+    color: #FFFFFF;
+    font-family: "Roboto", sans-serif;
+  }
+
+  h3 {
+    margin-top: 15px;
+    margin-bottom: 10px;
+    font-weight: 500;
+    font-size: 1.25rem;
+  }
+
+  p {
+    font-size: 1rem;
+    line-height: 1.4;
+  }
+
+  code {
+    font-size: 1.125rem;
+    font-family: "Roboto Mono", monospace;
+    color: inherit;
+  }
+
+  code + article {
+    margin: 20px 0 30px;
+  }
+
+  article {
+    display: grid;
+    align-items: end;
+    grid-template-rows: 1fr auto;
+    overflow: clip;
+  }
+
+  article span {
+    display: grid;
+    width: 100%;
+    padding: 25px 20px;
+    color: #FFFFFF;
+    background: linear-gradient(to top, #000000, #0000);
+  }
+
+  img {
+    display: block;
+    width: 480px;
+    max-width: 100%;
+    height: 250px;
+    object-fit: cover;
+  }
+
+  article > * {
+    grid-area: 1 / 1;
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    .with-mediaquery span {
+      padding: 0;
+      background: unset;
+    }
+
+    .with-mediaquery article > * {
+      grid-area: unset;
+    }
+  }
+
+  @media (max-width: 768px) {
+    body {
+      padding: 30px;
+    }
+  }
+</style>
+<body>
+  <div>
+    <code>no-preference</code>
+    <article>
+      <img src="./images/daycare.png" alt="">
+      <span>
+        <h3>Ясли для питомцев</h3>
+        <p>Присмотрим за животными, пока вы на работе.</p>
+      </span>
+    </article>
+  </div>
+  <div class="with-mediaquery">
+    <code>reduce</code>
+    <article>
+      <img src="./images/walking.png" alt="">
+      <span>
+        <h3>Прогулки</h3>
+        <p>Выгуляем животных вместо вас.</p>
+      </span>
+    </article>
+  </div>
+</body>
+</html>
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Пример с эффектом матового стекла — prefers-reduced-transparency — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
+</head>
+<style>
+  *, *::before, *::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  html {
+    color-scheme: dark;
+    font-size: 20px;
+  }
+
+  body {
+    min-height: 100vh;
+    padding: 50px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: #18191C;
+    font-family: "Roboto", sans-serif;
+  }
+
+  div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 65%;
+    padding: 55px 40px;
+    background-image: url(./images/grass.png);
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  h2 {
+    margin-bottom: 17px;
+    font-weight: 500;
+    font-size: 1.375rem;
+  }
+
+  p {
+    margin: 7px 0;
+    font-size: 1rem;
+    line-height: 1.4;
+  }
+
+  article {
+    width: 300px;
+    overflow: visible;
+    color: #FFFFFF;
+    background-color: #18191C;
+  }
+
+  article span {
+    display: inline-flex;
+    flex-direction: column;
+    padding: 30px 20px;
+  }
+
+  @media (prefers-reduced-transparency: no-preference) {
+    article {
+      color: #000000;
+      backdrop-filter: blur(15px);
+      background: hsl(none none 100% / 20%);
+    }
+  }
+
+  @media (max-width: 768px) {
+    body {
+      padding: 30px;
+    }
+
+    div, article {
+      width: 100%;
+    }
+
+    div {
+      padding: 55px 30px;
+    }
+  }
+</style>
+<body>
+  <div>
+    <article>
+      <span>
+        <h2>Добавь ярких красок</h2>
+        <p>Чтобы жизнь пользователей была красочной, интересной и насыщенной, используй везде эффект стекла. Или не везде?</p>
+      </span>
+    </article>
+  </div>
+</body>
+</html>