Градиенты css: Использование CSS-градиентов — CSS | MDN

выходим за рамки и взрываем звезды с border-image и градиентами — CSS-LIVE

Как вы думаете, сколько CSS-градиентов нужно, чтобы нарисовать каждую из этих фигур?

Один! 🤯 Причем его даже не надо дублировать: достаточно указать один раз в одном-единственном свойстве. Таким примером в CodePen на днях поделился Темани Афиф, автор занятного и познавательного проекта css-challenges.com.

Эта «магия» — заслуга свойства border-image. У нас уже есть статья о нем и его возможностях. Увы, громоздкий синтаксис и неинтуитивное поведение — особенно с градиентами — до сих пор мешают ему стать популярным. Сам Афиф в Твиттере признал, что «border-image принадлежит к тёмной стороне CSS»: очень уж трудно представить себе наглядно, как масштабируются, нарезаются и потом опять масштабируются части картинки. И многие даже не пытаются разобраться в нем. А зря!

Во-первых, уникальная способность border-image выходить за края элемента может быть очень полезна в массе практических задач.

Например, секции с косыми и неровными границами, выступающими из контейнера:

See the Pen
Untitled by Ilya Streltsyn (@SelenIT)
on CodePen.

или «отзывчивая» имитация старого ЭЛТ-экрана:

See the Pen
responsive old CRT screen with border-image and gradient by Ilya Streltsyn (@SelenIT)
on CodePen.

А во-вторых, border-image — уже не единственное свойство с таким синтаксисом. Недавно к нему добавилось еще одно — mask-border, из модуля СSS-масок 1 уровня. Оно уже работает в Safari и Chrome с аналогами (в виде

-webkit-mask-box-image). И задает маску  для обрезки всего элемента — включая его фон и рамку, нарисованную через border-image (можете еще раз посмотреть пример с косыми секциями, в самом низу:).

Чтобы овладеть мощью этой темной стороны CSS, надо поупражняться. Упражнение будет типичное для темной стороны: взорвать звезду! Правда, делать это мы будем на безопасном (относительно: может затянуть, как черная дыра!:) полигоне — в игре CSSBattle, одно из заданий которой (№83) так и называется — «Сверхновая»:

Напомним, задача этой игры — воспроизвести картинку 400×300 в окне такого же размера минимально возможным CSS-кодом. Рисовать «облака плазмы» по отдельности — не наш, не «тёмносторонний» путь 👾. Поступим проще: нарисуем 4 голубых круга на синем фоне, а поверх наложим синий квадрат с желтым кругом и повернем на 45°.

Круги получаются частично «наехавшими» друг на друга. Рисовать их отдельными элементами, множествеными фонами, тенями и т.п. — долго и скучно. Можно проще и короче!

See the Pen
Recreating CSSBattle Target#83 with border-image, part 1 by Ilya Streltsyn (@SelenIT)

on CodePen.

Вот как это работает:

1. Определяем контуры будущей рамки. Пользуясь тем, что можно выходить за края элемента, добавляем по 50px сверху и снизу, получается квадрат 400×400.
2. Заливаем этот квадрат синим градиентом с голубым кругом радиусом 64px в центре. Это и будет наша исходная картинка для нарезки.
3. Из этой картинки выделяем и копируем 4 угловых «плитки» размером 254×254 пикселя (см. прошлую статью для наглядности). Центр круга попадает в каждую «плитку», но два крайних сегмента по 9px оказываются отрезанными.
4. Масштабируем плитки до нужной толщины рамки. У нас рамка заполняет весь квадрат, без центральной «дырки», так что толщина — 200px (половина стороны). Радиусы кругов уменьшатся в 254/200 = 1.27 раза, т.е. до 50px (столько и было нужно!)
5. Кладем плитки на углы квадрата, обрезанные края кругов стыкуются друг с другом. Всё!

Толщину в п. 4 можно задать не ровно 200px, но и больше (например, 288px = 3in): итоговый размер плиток всё равно будет 200×200, они всегда ужимаются, чтобы поместиться. Этим можно сэкономить один-два символа.

Теперь маленький квадрат: у него размер 120×120, а круг внутри желтый, радиусом 30px и строго по центру. Здесь нам фактически не нужна сама рамка, только центральная плитка — аналог фона. За нее отвечает ключевое слово fill, у которого есть еще и приятный побочный эффект — картинка рисуется независимо от наличия обычного border-а:

See the Pen
Recreating CSSBattle Target#83 with border-image, part 2 by Ilya Streltsyn (@SelenIT)
on CodePen.

В CSSBattle мы по умолчанию на «тёмной стороне» HTML — в Quirks mode, «режиме совместимости со старыми глюками». А значит, можем отбросить height (в Quirks mode

body само растягивается на доступную высоту html) и px у margin-а (предупреждение: так можно только в CSSBattle, не повторяйте это в реальных проектах!), еще чуть уменьшив код. Копируем его в окошко игры, жмем Submit… БУМ! 💥 В космосе звук не распространяется, но радость от успешного испытания слышна аж на сервере 😂

Но писать «border-image: radial-gradient» два раза — всё равно долго и скучно. Подправим-ка стили

body, чтобы унифицировать его border-image с html:

body {
  border-image: radial-gradient(#EEB850 30px,#243D83 0) 0 fill / 0 / 50px 0;
  margin: 140; /* размер автоматом станет 120x20 */
}

Самому body не обязательно быть квадратным, квадратной должна быть лишь рамка – так что делаем его прямоугольным (заодно margin сократился) и используем уже знакомый трюк. Теперь можно написать border-image: radial-gradient() один раз, для универсального селектора, а для body только переопределить цвет и радиус внутреннего круга и начальный/конечный размер угловых плиток. Это можно сделать с помощью кастомных свойств (CSS-переменных).

Но в CSS есть пара «исконных» переменных: currentColor для цветов и единица измерения em для размеров. Так что решение сокращается до…

See the Pen
Recreating CSSBattle Target#83 with border-image, part 2 by Ilya Streltsyn (@SelenIT)
on CodePen.

У html переход от первой цветовой зоны ко второй находится в

4em = 64px от центра, т.е. дальше края второй (желтой) зоны, а значит, вторая зона не видна. У body же, наоборот, первая (голубая) зона сжимается в ноль (1em = 0), и видна только желтая. Заодно обнуляется и толщина рисованной рамки. Лишь для «вырезки» плиток пришлось использовать отдельную переменную, а не размер в em — это безразмерное число, а не длина, и в CSS это несоизмеримые друг с другом величины (как метры и килограммы).

Путем зверской минификации это решение можно ужать как минимум до 150 знаков. Заявка на место в первой десятке! Еще раз посмотрим на процесс нарезки и масштабирования «плиток» в анимации:

See the Pen
Recreating CSSBattle Target#83 with border-image, part 1 by Ilya Streltsyn (@SelenIT)
on CodePen.

Можете поменять значения вверху и посмотреть, что изменится (примечание: тут отображается только рамка, без центральной «плитки» — так нагляднее). Надеюсь, это упражнение поможет вам легче понять, что и как вырезается, копируется и растягивается в примерах в начале статьи, и создавать свои по аналогии.

Пускай же CSS раскрывает перед вами все свои тайны, даже темные, пополняя ваш арсенал суперсилами для побед над самыми сложными задачами. Дерзайте, не бойтесь экспериментировать!

Но не позволяйте тёмной стороне взять верх над вами, и в реальных проектах не забывайте про доктайп 😉

P.S. Это тоже может быть интересно:

Использование панели CSS Designer для применения градиентов к веб-странице в Adobe Dreamweaver

Руководство пользователя Отмена

Поиск

Последнее обновление May 21, 2021 09:33:11 AM GMT

1. Руководство пользователя Dreamweaver
   
2. Введение
   1. Основы гибкого веб-дизайна
   2. Новые возможности Dreamweaver
   3. Веб-разработка с помощью Dreamweaver: обзор
   4. Dreamweaver / распространенные вопросы
   5. Сочетания клавиш
   6. Системные требования Dreamweaver
   7. Обзор новых возможностей
3. Dreamweaver и Creative Cloud
   1. Синхронизация настроек Dreamweaver с Creative Cloud
   2. Библиотеки Creative Cloud Libraries в Dreamweaver
   3. Использование файлов Photoshop в Dreamweaver
   4. Работа с Adobe Animate и Dreamweaver
   5. Извлечение файлов SVG, оптимизированных для Интернета, из библиотек
4. Рабочие среды и представления Dreamweaver
   1. Рабочая среда Dreamweaver
   2. Оптимизация рабочей среды Dreamweaver для визуальной разработки
   3. Поиск файлов по имени или содержимому | Mac OS
5. Настройка сайтов
   1. О сайтах Dreamweaver
   2. Настройка локальной версии сайта
   3. Подключение к серверу публикации
   4. Настройка тестового сервера
   5. Импорт и экспорт параметров сайта Dreamweaver
   6. Перенос существующих веб-сайтов с удаленного сервера в корневой каталог локального сайта
   7. Специальные возможности в Dreamweaver
   8. Дополнительные настройки
   9. Настройка установок сайта для передачи файлов
   10. Задание параметров прокси-сервера в Dreamweaver
   11. Синхронизация настроек Dreamweaver с Creative Cloud
   12. Использование Git в Dreamweaver
6. Управление файлами
   1. Создание и открытие файлов
   2. Управление файлами и папками
   3. Получение файлов с сервера и размещение их на нем
   4. Возврат и извлечение файлов
   5. Синхронизация файлов
   6. Сравнение файлов
   7. Скрытие файлов и папок на сайте Dreamweaver
   8. Включение заметок разработчика для сайтов Dreamweaver
   9. Предотвращение использования уязвимости Gatekeeper
7. Макет и оформление
   1. Использование средств визуализации для создания макета
   2. Об использовании CSS для создания макета страницы
   3. Создание динамичных веб-сайтов с помощью Bootstrap
   4. Создание и использование медиазапросов в Dreamweaver
   5. Представление содержимого в таблицах
   6. Цвета
   7. Гибкий дизайн с использованием «резиновых» макетов
   8. Extract в Dreamweaver
8. CSS
   1. Общие сведения о каскадных таблицах стилей
   2. Создание макетов страниц с помощью конструктора CSS
   3. Использование препроцессоров CSS в Dreamweaver
   4. Установка настроек стиля CSS в Dreamweaver
   5. Перемещение правил CSS в Dreamweaver
   6. Преобразование встроенного CSS в правило CSS в Dreamweaver
   7. Работа с тегами div
   8. Применение градиентов к фону
   9. Создание и редактирование эффектов перехода CSS3 в Dreamweaver
   10. Форматирование кода
9. Содержимое страницы и ресурсы
   1. Задание свойств страницы
   2. Задание свойств заголовка CSS и свойств ссылки CSS
   3. Работа с текстом
   4. Поиск и замена текста, тегов и атрибутов
   5. Панель DOM
   6. Редактирование в режиме интерактивного просмотра
   7. Кодировка документов в Dreamweaver
   8. Выбор и просмотр элементов в окне документа
   9. Задание свойств текста в инспекторе свойств
   10. Проверка орфографии на веб-странице
   11. Использование горизонтальных линеек в Dreamweaver
   12. Добавление и изменение сочетаний шрифтов в Adobe Dreamweaver
   13. Работа с ресурсами
   14. Вставка и обновление даты в Dreamweaver
   15. Создание и управление избранными ресурсами в Dreamweaver
   16. Вставка и редактирование изображений в Dreamweaver
   17. Добавление мультимедийных объектов
   18. Добавление видео Dreamweaver
   19. Добавление видео HTML5
   20. Вставка файлов SWF
   21. Добавление звуковых эффектов
   22. Добавление аудио HTML5 в Dreamweaver
   23. Работа с элементами библиотеки
   24. Использование текста на арабском языке и иврите в Dreamweaver
10. Создание ссылок и навигация
    1. О создании ссылок и навигации
    2. Создание ссылок
    3. Карты ссылок
    4. Устранение неполадок со ссылками
11. Графические элементы и эффекты jQuery
    1. Использование пользовательского интерфейса и графических элементов jQuery для мобильных устройств в Dreamweaver
    2. Использование эффектов jQuery в Dreamweaver
12. Написание кода веб-сайтов
    1. О программировании в Dreamweaver
    2. Среда написания кода в Dreamweaver
    3. Настройка параметров написания кода
    4. Настройка цветового оформления кода
    5. Написание и редактирование кода
    6. Подсказки по коду и автозавершение кода
    7. Свертывание и развертывание кода
    8. Повторное использование фрагментов кода
    9. Анализ Linting для проверки кода
    10. Оптимизация кода
    11. Редактирование кода в представлении «Дизайн»
    12. Работа с содержимым заголовков для страниц
    13. Вставка серверных включений в Dreamweaver
    14. Использование библиотек тегов в Dreamweaver
    15. Импорт пользовательских тегов в Dreamweaver
    16. Использование вариантов поведения JavaScript (общие инструкции)
    17. Применение встроенных вариантов поведения JavaScript
    18. Сведения об XML и XSLT
    19. Выполнение XSL-преобразования на стороне сервера в Dreamweaver
    20. Выполнение XSL-преобразования на стороне клиента в Dreamweaver
    21. Добавление символьных сущностей для XSLT в Dreamweaver
    22. Форматирование кода
13. Процессы взаимодействия продуктов
    1. Установка и использование расширений в Dreamweaver
    2. Обновления в Dreamweaver, устанавливаемые через приложение
    3. Вставить документы Microsoft Office в Dreamweaver (только для Windows)
    4. Работа с Fireworks и Dreamweaver
    5. Редактирование содержимого на сайтах Dreamweaver с помощью Contribute
    6. Интеграция Dreamweaver с Business Catalyst
    7. Создание персонализированных кампаний почтовой рассылки
14. Шаблоны
    1. О шаблонах Dreamweaver
    2. Распознавание шаблонов и документов на их основе
    3. Создание шаблона Dreamweaver
    4. Создание редактируемых областей в шаблонах
    5. Создание повторяющихся областей и таблиц в Dreamweaver
    6. Использование дополнительных областей в шаблонах
    7. Определение редактируемых атрибутов тега в Dreamweaver
    8. Создание вложенных шаблонов в Dreamweaver
    9. Редактирование, обновление и удаление шаблонов
    10. Экспорт и импорт XML-содержимого в Dreamweaver
    11. Применение или удаление шаблона из существующего документа
    12. Редактирование содержимого в шаблонах Dreamweaver
    13. Правила синтаксиса для тегов шаблона в Dreamweaver
    14. Настройка предпочтений выделения для областей шаблона
    15. Преимущества использования шаблонов в Dreamweaver
15. Мобильные и многоэкранные устройства
    1. Создание медиазапросов
    2. Изменение ориентации страницы для мобильных устройств
    3. Создание веб-приложений для мобильных устройств с помощью Dreamweaver
16. Динамические сайты, страницы и веб-формы
    1. Общие сведения о веб-приложениях
    2. Настройка компьютера для разработки приложений
    3. Устранение неполадок подключений к базам данных
    4. Удаление сценариев подключения в Dreamweaver
    5. Дизайн динамических страниц
    6. Обзор динамических источников содержимого
    7. Определение источников динамического содержимого
    8. Добавление динамического содержимого на страницы
    9. Изменение динамического содержимого в Dreamweaver
    10. Отображение записей баз данных
    11. Введение интерактивных данных и устранение неполадок с ними в Dreamweaver
    12. Добавление заказных вариантов поведения сервера в Dreamweaver
    13. Создание форм с помощью Dreamweaver
    14. Использование форм для сбора информации от пользователей
    15. Создание и включение форм ColdFusion в Dreamweaver
    16. Создание веб-форм
    17. Расширенная поддержка HTML5 для компонентов формы
    18. Разработка формы с помощью Dreamweaver
17. Визуальное построение приложений
    1. Создание главной страницы и страницы сведений в Dreamweaver
    2. Создание страниц поиска и результатов поиска
    3. Создание страницы для вставки записи
    4. Создание страницы обновления записи в Dreamweaver
    5. Создание страниц удаления записей в Dreamweaver
    6. Применение ASP-команд для изменения базы данных в Dreamweaver
    7. Создание страницы регистрации
    8. Создание страницы входа
    9. Создание страницы с доступом только для авторизованных пользователей
    10. Защита папок в ColdFusion с помощью Dreamweaver
    11. Использование компонентов ColdFusion в Dreamweaver
18. Тестирование, просмотр и публикация веб-сайтов
    1. Предварительный просмотр страниц
    2. Предварительный просмотр веб-страниц Dreamweaver на нескольких устройствах
    3. Тестирование сайта Dreamweaver

 

Изучите этот раздел, чтобы узнать, как использовать панель CSS Designer для применения градиентов к фону веб-страницы и их редактирования.

С помощью панели конструктора CSS можно применять градиенты к фону страниц веб-сайтов. Свойство градиента находится в категории фона.

Свойство градиента

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

• Выберите цвета из разных цветовых моделей (RGBa, HSLa) или с помощью шестнадцатеричного кода цвета. Затем сохраните различные сочетания цветов в виде цветовых образцов.
  
  • Чтобы сбросить вновь заданный цвет на исходный, щелкните исходный цвет (K).
  • Для изменения порядка расположения цветовых образцов перетащите цветовые образцы в нужное положение.
  • Чтобы удалить цветовой образец, перетащите его за пределы панели.
    
• Для создания сложных градиентов используйте контрольные точки цвета. Для создания контрольной точки цвета щелкните в любом месте между контрольными точками цвета по умолчанию. Чтобы удалить контрольную точку цвета, перетащите ее за пределы панели.
  
• Укажите угол линейного градиента.
• Для повторения узора измените свойство background-repeat.
• Сохраните пользовательские градиенты в виде цветовых образцов.

Давайте разберем следующий код.

background-image: linear-gradient(57deg,rgba(255,255,255,1.00) 0%,rgba(21,8,8,1.00) 46.63%,rgba(255,0,0,1.00) 100%)

• 57deg: указывает угол линейного градиента
• rgba (255, 255, 255, 1.00): цвет первой контрольной точки цвета
• 0%: указывает положение контрольной точки цвета

В Dreamweaver значения положения контрольных точек цвета указываются в процентах. Если указать другие единицы, например «px» или «em», Dreamweaver воспримет значение как «nil». Кроме того, Dreamweaver не поддерживает цвета CSS. Поэтому, если в коде задать эти цвета, программа воспримет их как значения «nil».

Рендеринг градиентов в веб-браузерах

При использовании градиентов в качестве фона Dreamweaver позволяет настроить отображение этих градиентов в разных веб-браузерах. Dreamweaver добавляет в код соответствующие префиксы браузеров, что позволяет веб-браузерам правильно отображать градиенты.

Вместе с форматом w3c Dreamweaver может записать следующие префиксы браузеров:

• Webkit
• Firefox
• Opera

По умолчанию Dreamweaver записывает префиксы браузера для Webkit и интерактивного просмотра Dreamweaver. В диалоговом окне Настройки (Настройки > Стили CSS) можно выбрать другие браузеры.

Для теней Box всегда формируются префиксы Webkit и w3c, независимо от того, выбраны они в настройках или нет.

Все изменения градиентов также отражаются в синтаксисе, который подходит для указанных веб-браузеров. При открытии в Dreamweaver CC существующего файла, который содержит синтаксис для определенного веб-браузера, следует обязательно указать соответствующие префиксы браузеров в диалоговом окне «Настройки». Поскольку по умолчанию при использовании или изменении градиентов Dreamweaver обновляет код только для Webkit и интерактивного просмотра Dreamweaver. Таким образом, содержащийся в коде синтаксис, который подходит для других браузеров, не обновляется.

Замена фоновых изображений на градиенты

Порядок фоновых изображений и градиентов (в котором они расположены в коде) можно изменить одним щелчком мыши.

Щелкните по стрелке рядом с ближайшим свойством url или gradient в конструкторе CSS.

CC Dreamweaver содержит лишь базовый вариант функции замены фона. При наличии нескольких значений или изображений замена может привести к неожиданным результатам. Предположим, что для фона было применено одно изображение, потом второе изображение, а затем градиент. Использование функции замены приведет к выстраиванию этих элементов в следующем порядке: градиент, второе изображение, первое изображение.

Вход в учетную запись

Войти

Управление учетной записью

градиентов CSS | Могу ли я использовать.

.. Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

CSS-градиенты

— CR

• Глобальное использование

  94,96% + 3,09% «=» 98,05%

Метод определения линейного или радиального цветового градиента как изображения CSS.

Хром

1. 4 — 9: Partial support
2. 10 — 25: Supported
3. 26 — 109: Supported
4. 110: Supported
5. 111 — 113: Supported

Edge

1. 12 — 109: Supported
2. 24% — Supported»> 110: Поддерживается

Safari

1. 3,1 — 3.2: не поддерживается
2. 4 — 5: частичная поддержка
3. 5,1 — 6: частичная поддержка
4. 6.1 — 15,3: частичная поддержка
5. 15.4 — 16.2: Подподдертала
9005 40054444444444444444444444444444444444444444444444444444444444444444415 4005444444444444444444444444 4005: 3
6. 4005: 3
7. 4444 4005: 3 40054444444444: 3
8. 4005:
9. 16,4 — TP: Поддерживается

Firefox

1. 02% — Not supported»> 2 — 3,5: не поддерживается
2. 3,6 — 15: частичная поддержка
3. 16 — 35: частичная поддержка
4. 36: 109: Поддержка
5. 70707070707070707070707070707070707070707070707070707070: 35: 35: 111 — 112: Поддерживается

Opera

1. 9 — 11: не поддерживается
2. 11,1 — 11,5: частичная поддержка
3. 11,6 — 12: Поддержанный
4. 12,1 — 94: Поддержка
6. 12.1 — 94: поддерживает
7. 37% — Supported»>: 70015
8. 12,1 — 94:
9. : 70015
10. 12,1 — 94:
11. : 70015
12. 12.1 —
    1. 5,5 — 9: не поддерживается
    2. 10: Поддерживается
    3. 11: Поддерживается

    Chrome для Android

    1. 110: поддержан

    Safari на IOS

    4
    115 — —

SAFARI на IOS

115 —

. 6.1: Частичная поддержка

• 7 — 15,3: Частичная поддержка
• 15,4 — 16,2: Поддержано
• 05% — Supported»> 16,3: Поддержано
• 16,4: Поддержано

Samsung Internet

1. 4- 1
.0056 20: поддержан

Opera Mini

1. Все: не поддерживается

Opera Mobile

1. 10 — 11: не поддерживается
2. 11.1 — 11.5: Partial. 73: Supported

UC Browser for Android

1. 13.4: Supported

Android Browser

1. 2.1 — 3: Partial support
2. 4 — 4.3: Supported
3. 31% — Supported»> 4.4 — 4.4.4: Supported
4. 109: Supported

Firefox for Android

1. 110: Supported

QQ Browser

1. 13.1: Supported

Baidu Browser

1. 13.18: Supported

KaiOS Browser

1. 2.5: Supported
2. 3: Поддерживается

Синтаксис, используемый браузерами с поддержкой префикса, может быть несовместим с таковым для надлежащей поддержки.

Поддержка может быть частично эмулирована в более старых версиях IE с использованием нестандартного «градиентного» фильтра.

Firefox 10+, Opera 11.6+, Chrome 26+ и IE10+ также поддерживают новый синтаксис «to (side)».

Ресурсы:

Инструмент для эмуляции поддержки в IE

Webplatform Docs

Редактор поперечного браузера

Sub-Features:

CSS. Повторяющий 903

020202020202020202020202020202. · GitHub

Вот 40 публичных репозиториев соответствует этой теме…

аргайлинк / открытый реквизит

Звезда 3.1k

викмяу / стройный

Звезда 113

Кристикрету / мешград

Спонсор Звезда 37

Гилморорлесс / postcss-градиент-прозрачность-исправление

Звезда 24

КодингДжек / Advanced-Color-Picker

Звезда 10

Николай Капустин / CSSGradientToUIKit

Звезда 10

Бараашер / градиенты

Звезда 8

Гонконг / css3-глянцевый эффект

Звезда 6

кевкап / Apple-проект

Звезда 5

сайф71 / ГрадиентСпектор

Звезда 3

Рошан-Джонсон / заметные стили

Звезда 2

унталукас / cssoccer-трикотажные изделия

Звезда 2

мрпбеннетт / vue-calc

Звезда 1

Питеркр / Случайная цитата-машина

Звезда 1

Гонконг / css3-круговой-эллиптический-градиент

Звезда 1

АнтонV0 / система веб-дизайна

Звезда 1

Сакиф-Хридой / реактивный маршрутизатор

Звезда 1

шашанккатте / Not2do-список

Звезда 1

АлиссаКеннеди / Алиссакеннеди.



No related posts.