Добавляет статью про Псевдоприватные кастомные свойства (#5577)

* feat: Create article about virtual variables * fix: Some fixes * Update recipes/virtual-variables/index.md Co-authored-by: Matvey Romanov <[email protected]> * fix: Change concept of technology presentation * Добавляет мету, исправляет форматирование * Добавляет папку автора * Update recipes/pseudo-private-custom-property/index.md Co-authored-by: Alena Batitskaia <[email protected]> * Update recipes/pseudo-private-custom-property/index.md Co-authored-by: Alena Batitskaia <[email protected]> * feat: Change type of article * fix: Content fix * feat: Rework article for category of CSS * feat: Add neccessary information * fix: Some fix * fix: Some fixes * feat: Style fixes * fix: Formating misstakes * fix: Some fixes * Вносит небольшие редакторские правки * Удаляет висящие пробелы * feat: Add default styles * Привносит фирстиль в демки * Правит пробелы и опечатки * feat: Change introduction chapter * Update css/pseudo-private-custom-property/index.md Co-authored-by: Svetlana Korobtseva <[email protected]> * Update css/pseudo-private-custom-property/index.md Co-authored-by: Svetlana Korobtseva <[email protected]> * Update css/pseudo-private-custom-property/index.md Co-authored-by: Svetlana Korobtseva <[email protected]> * fix: Some content fix * финально редачит * Update css/pseudo-private-custom-property/index.md Co-authored-by: Matvey Romanov <[email protected]> * Update css/pseudo-private-custom-property/index.md Co-authored-by: Matvey Romanov <[email protected]> --------- Co-authored-by: Matvey Romanov <[email protected]> Co-authored-by: Tatiana Fokina <[email protected]> Co-authored-by: Alena Batitskaia <[email protected]> Co-authored-by: Svetlana Korobtseva <[email protected]>
doka-guide · Mar 3, 2025 · 3c79a46 · 3c79a46
1 parent e06f14b
commit 3c79a46
Show file tree

Hide file tree

Showing 4 changed files with 516 additions and 0 deletions.
diff --git a/css/pseudo-private-custom-property/demos/classes/index.html b/css/pseudo-private-custom-property/demos/classes/index.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Базовое решение — Псевдоприватные кастомные свойства — Дока</title>
+
+    <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"
+    />
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html {
+        color-scheme: dark;
+      }
+
+      body {
+        min-height: 100vh;
+        padding: 50px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #18191c;
+        color: #ffffff;
+        font-family: "Roboto", sans-serif;
+      }
+
+      .product-list {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 25px;
+
+        .product-list__item {
+          width: 100%;
+          padding: 25px;
+          aspect-ratio: 1/1;
+
+          text-align: center;
+        }
+      }
+
+      .product-card {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        background-color: #123E66;
+        box-shadow: 10px 10px 0 0 #0D2B47;
+
+        font-size: 18px;
+        color: #FFFFFF;
+
+        &.new {
+          background-color: #2E9AFF;
+          box-shadow: 10px 10px 0 0 #006DD3;
+
+          color: #000000;
+        }
+
+        &.top {
+          background-color: #F498AD;
+          box-shadow: 10px 10px 0 0 #E92D58;
+
+          color: #000000;
+        }
+      }
+
+      @media (max-width: 768px) {
+        body {
+          padding: 30px;
+        }
+
+        .product-list {
+          grid-template-columns: none;
+          grid-template-rows: repeat(3, 1fr);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <section class="product-list">
+      <div class="product-list__item product-card">Глубина шторма</div>
+      <div class="product-list__item product-card new">Электро-лазурь</div>
+      <div class="product-list__item product-card top">Сахарная вата</div>
+    </section>
+  </body>
+</html>
diff --git a/css/pseudo-private-custom-property/demos/pseudo-privates/index.html b/css/pseudo-private-custom-property/demos/pseudo-privates/index.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Решение с псевдоприватными свойствами — Псевдоприватные кастомные свойства — Дока</title>
+
+    <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"
+    />
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html {
+        color-scheme: dark;
+      }
+
+      body {
+        min-height: 100vh;
+        padding: 50px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #18191c;
+        color: #ffffff;
+        font-family: "Roboto", sans-serif;
+      }
+
+      .product-list {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 25px;
+
+        .product-list__item {
+          width: 100%;
+          padding: 25px;
+          aspect-ratio: 1/1;
+
+          text-align: center;
+        }
+      }
+
+      .product-card {
+        --_background-color: var(--background-color, #123E66);
+
+        --_lighter-color: hsl(from var(--_background-color) h s calc(l * 1.3));
+        --_darker-color: hsl(from var(--_background-color) h s calc(l * 0.7));
+        --_text-color: hsl(
+          from var(--_background-color) 0 0 calc((50 - l) * 100)
+        );
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        background-color: var(--_background-color);
+        box-shadow: 10px 10px 0 0 var(--_darker-color);
+
+        font-size: 18px;
+        color: var(--_text-color);
+
+        &.new {
+          --background-color: #2E9AFF;
+        }
+        &.top {
+          --background-color: #F498AD;
+        }
+      }
+
+      @media (max-width: 768px) {
+        body {
+          padding: 30px;
+        }
+
+        .product-list {
+          grid-template-columns: none;
+          grid-template-rows: repeat(3, 1fr);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <section class="product-list">
+      <div class="product-list__item product-card">Глубина шторма</div>
+      <div class="product-list__item product-card new">Электро-лазурь</div>
+      <div class="product-list__item product-card top">Сахарная вата</div>
+    </section>
+  </body>
+</html>