Тень картинки css: Как сделать тень картинки в CSS?

Содержание

Свойство box-shadow | Учебник HTML5

Свойство box-shadow.

Итак, у нас есть симпатичные углы, и мы готовы попробовать нечто большее. Еще один великолепный эффект, которого было чрезвычайно трудно добиться, — это тени. Годами дизайнерам приходилось комбинировать изображения, элементы и некоторые свойства CSS для создания эффекта тени. Благодаря CSS3 и новому свойств box-shadow мы добавим тень к нашему полю, написав всего одну строку кода.

Листинг 3.6. Добавление к полю тени

Body {

Text-align: center;

}

#mainbox {

Display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD;

-moz-border-radius: 20px;

-webkit-border-radius: 20px; border-radius: 20px;

-moz-box-shadow: rgb(150,150,150) 5px 5px;

-webkit-box-shadow: rgb(150,150,150) 5px 5px; box-shadow: rgb(150,150,150) 5px 5px;

}

#title {

Font: bold 36px verdana, sans-serif;

}

Свойству box-shadow необходимо передать минимум три значения. Первое, которое вы видите в листинге 3.6, — это цвет. Для формирования данного значения мы использовали функцию rgb(), передав ей необходимые аргументы в десятичной системе счисления, однако вы можете просто записать нужный цвет в шестнадцатеричном представлении (как мы делали раньше в этой книге для других параметров).

Следующие два значения, указываемые в пикселах, задают смещение для тени. Оно может быть положительным или отрицательным. Эти значения определяют расстояние от тени до элемента по горизонтали и вертикали соответственно. Отрицательные значения сдвигают тень влево и вверх, и наоборот, положительные значения создают тень справа и ниже элемента. Нулевое значение позволяет поместить тень прямо за элемент, например, для создания эффекта размытости вокруг него.

Для тестирования различных параметров и возможностей создания тени рядом с полем скопируйте код из листинга 3.5 в CSS-файл и откройте HTML-файл с шаблоном из листинга 3.1 в своем браузере. Теперь поэкспериментируйте со значениями свойства box-shadow. Тот же самый код вы сможете использовать для проверки новых параметров, которые мы изучим в дальнейшем.

Пока что тень получается сплошной, без градиентов или эффекта прозрачности, и, следовательно, не очень похожей на настоящую. Мы можем добавить еще несколько параметров и улучшить ее внешний вид. Четвертое значение, которое принимает данное свойство, задает радиус размытия. Благодаря этому эффекту тень выглядит как настоящая. Попробуйте применить данный параметр со значением 10 пикселов, добавив его в правило из листинга 3.6, как в листинге 3.7.

Листинг 3.7. Добавление радиуса размытия к свойству box-shadow box-shadow: rgb(150,150,150) 5px 5px 10px;

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

Добавьте значение 20px в конце стиля из листинга 3. 7, объедините этот код с кодом из листинга 3.6 и протестируйте в браузере.

Не забывайте, что эти свойства пока что находятся на этапе разработки. Если вы планируете использовать их, всегда добавляйте к ним префикс — moz — или — webkit — в зависимости от того, какой браузер используете (то есть Firefox или Google Chrome).

Последнее возможное значение свойства box-shadow — это не число, а ключевое слово inset. Оно превращает внешнюю тень во внутреннюю, создавая эффект вдавленного поля.

Листинг 3.8. Внутренняя тень box-shadow: rgb(150,150,150) 5px 5px 10px inset;

Стиль из листинга 3.8 определяет внутреннюю тень на расстоянии 5 пикселов от рамки поля, которая дополнительно размывается на 10 пикселов.

Стили из листингов 3.7 и 3.8 — это всего лишь примеры.

Для проверки эффекта в браузере вам понадобится внести соответствующие изменения в полный набор правил из листинга 3.6.

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

Работа с тенями, свечением и растушевкой в Illustrator

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

Поиск

Последнее обновление Dec 19, 2022 12:33:45 PM GMT

Руководство пользователя Illustrator
Основы работы с Illustrator
1. Введение в Illustrator
  1. Новые возможности в приложении Illustrator
  2. Часто задаваемые вопросы
  3. Системные требования Illustrator
  4. Illustrator для Apple Silicon
2. Рабочая среда
  1. Основные сведения о рабочей среде
  2. Ускоренное обучение благодаря панели «Обзор» в Illustrator
  3. Создание документов
  4. Панель инструментов
  5. Комбинации клавиш по умолчанию
  6. Настройка комбинаций клавиш
  7. Общие сведения о монтажных областях
  8. Управление монтажными областями
  9. Настройка рабочей среды
  10. Панель свойств
  11. Установка параметров
  12. Рабочая среда «Сенсорное управление»
  13. Поддержка Microsoft Surface Dial в Illustrator
  14. Отмена изменений и управление историей дизайна
  15. Повернуть вид
  16. Линейки, сетки и направляющие
  17. Специальные возможности в Illustrator
  18. Безопасный режим
  19. Просмотр графических объектов
  20. Работа в Illustrator с использованием Touch Bar
  21. Файлы и шаблоны
3. Инструменты в Illustrator
  1. Краткий обзор инструментов
  2. Выбор инструментов
    1. Выделение
    2. Частичное выделение
    3. Групповое выделение
    4. Волшебная палочка
    5. Лассо
    6. Монтажная область
  3. Инструменты для навигации
    1. Рука
    2. Повернуть вид
    3. Масштаб
  4. Инструменты рисования
    1. Градиент
    2. Сетка
    3. Создание фигур
  5. Текстовые инструменты
    1. Текст
    2. Текст по контуру
    3. Текст по вертикали
  6. Инструменты рисования
    1. Перо
    2. Добавить опорную точку
    3. Удалить опорные точки
    4. Опорная точка
    5. Кривизна
    6. Отрезок линии
    7. Прямоугольник
    8. Прямоугольник со скругленными углами
    9. Эллипс
    10. Многоугольник
    11. Звезда
    12. Кисть
    13. Кисть-клякса
    14. Карандаш
    15. Формирователь
    16. Фрагмент
  7. Инструменты модификации
    1. Поворот
    2. Отражение
    3. Масштаб
    4. Искривление
    5. Ширина
    6. Свободное трансформирование
    7. Пипетка
    8. Смешать
    9. Ластик
    10. Ножницы
4. Быстрые действия
  1. Ретротекст
  2. Светящийся неоновый текст
  3. Старомодный текст
  4. Перекрашивание
  5. Преобразование эскиза в векторный формат
Illustrator на iPad
1. Представляем Illustrator на iPad
  1. Обзор по Illustrator на iPad.
  2. Ответы на часто задаваемые вопросы по Illustrator на iPad
  3. Системные требования | Illustrator на iPad
  4. Что можно и нельзя делать в Illustrator на iPad
2. Рабочая среда
  1. Рабочая среда Illustrator на iPad
  2. Сенсорные ярлыки и жесты
  3. Комбинации клавиш для Illustrator на iPad
  4. Управление настройками приложения
3. Документы
  1. Работа с документами в Illustrator на iPad
  2. Импорт документов Photoshop и Fresco
4. Выбор и упорядочение объектов
  1. Создание повторяющихся объектов
  2. Объекты с переходами
5. Рисование
  1. Создание и изменение контуров
  2. Рисование и редактирование фигур
6. Текст
  1. Работа с текстом и шрифтами
  2. Создание текстовых надписей по контуру
  3. Добавление собственных шрифтов
7. Работа с изображениями
  1. Векторизация растровых изображений
8. Цвет
  1. Применение цветов и градиентов
Облачные документы
1. Основы работы
  1. Работа с облачными документами Illustrator
  2. Общий доступ к облачным документам Illustrator и совместная работа над ними
  3. Публикация документов для проверки
  4. Обновление облачного хранилища для Adobe Illustrator
  5. Облачные документы в Illustrator | Часто задаваемые вопросы
2. Устранение неполадок
  1. Устранение неполадок с созданием или сохранением облачных документов в Illustrator
  2. Устранение неполадок с облачными документами в Illustrator

Добавление и редактирование содержимого
1. Рисование
  1. Основы рисования
  2. Редактирование контуров
  3. Рисование графического объекта с точностью на уровне пикселов
  4. Рисование с помощью инструментов «Перо», «Кривизна» и «Карандаш»
  5. Рисование простых линий и фигур
  6. Трассировка изображения
  7. Упрощение контура
  8. Определение сеток перспективы
  9. Инструменты для работы с символами и наборы символов
  10. Корректировка сегментов контура
  11. Создание цветка в пять простых шагов
  12. Рисование перспективы
  13. Символы
  14. Рисование контуров, выровненных по пикселам, при создании проектов для Интернета
2. 3D-объекты и материалы
  1. Подробнее о 3D-эффектах в Illustrator
  2. Создание трехмерной графики
  3. Проецирование рисунка на трехмерные объекты
  4. Создание трехмерного текста
  5. Создание трехмерных объектов
3. Цвет
  1. О цвете
  2. Выбор цветов
  3. Использование и создание цветовых образцов
  4. Коррекция цвета
  5. Панель «Темы Adobe Color»
  6. Цветовые группы (гармонии)
  7. Панель «Темы Color»
  8. Перекрашивание графического объекта
4. Раскрашивание
  1. О раскрашивании
  2. Раскрашивание с помощью заливок и обводок
  3. Группы с быстрой заливкой
  4. Градиенты
  5. Кисти
  6. Прозрачность и режимы наложения
  7. Применение обводок к объектам
  8. Создание и редактирование узоров
  9. Сетки
  10. Узоры
5. Выбор и упорядочение объектов
  1. Выделение объектов
  2. Слои
  3. Группировка и разбор объектов
  4. Перемещение, выравнивание и распределение объектов
  5. Размещение объектов
  6. Блокировка, скрытие и удаление объектов
  7. Копирование и дублирование объектов
  8. Поворот и отражение объектов
  9. Переплетение объектов
6. Перерисовка объектов
  1. Кадрирование изображений
  2. Трансформирование объектов
  3. Объединение объектов
  4. Вырезание, разделение и обрезка объектов
  5. Марионеточная деформация
  6. Масштабирование, наклон и искажение объектов
  7. Объекты с переходами
  8. Перерисовка с помощью оболочек
  9. Перерисовка объектов с эффектами
  10. Создание фигур с помощью инструментов «Мастер фигур» и «Создание фигур»
  11. Работа с динамическими углами
  12. Улучшенные процессы перерисовки с поддержкой сенсорного ввода
  13. Редактирование обтравочных масок
  14. Динамические фигуры
  15. Создание фигур с помощью инструмента «Создание фигур»
  16. Глобальное изменение
7. Текст
  1. Дополнение текстовых и рабочих объектов типами объектов
  2. Создание маркированного и нумерованного списков
  3. Управление текстовой областью
  4. Шрифты и оформление
  5. Форматирование текста
  6. Импорт и экспорт текста
  7. Форматирование абзацев
  8. Специальные символы
  9. Создание текста по контуру
  10. Стили символов и абзацев
  11. Табуляция
  12. Поиск отсутствующих шрифтов (технологический процесс Typekit)
  13. Шрифт для арабского языка и иврита
  14. Шрифты | Часто задаваемые вопросы и советы по устранению проблем
  15. Создание эффекта 3D-текста
  16. Творческий подход к оформлению
  17. Масштабирование и поворот текста
  18. Интерлиньяж и межбуквенные интервалы
  19. Расстановка переносов и переходы на новую строку
  20. Проверка орфографии и языковые словари
  21. Форматирование азиатских символов
  22. Компоновщики для азиатской письменности
  23. Создание текстовых проектов с переходами между объектами
  24. Создание текстового плаката с помощью трассировки изображения
8. Создание специальных эффектов
  1. Работа с эффектами
  2. Стили графики
  3. Атрибуты оформления
  4. Создание эскизов и мозаики
  5. Тени, свечения и растушевка
  6. Обзор эффектов
9. Веб-графика
  1. Лучшие методы создания веб-графики
  2. Диаграммы
  3. SVG
  4. Фрагменты и карты изображений
Импорт, экспорт и сохранение
1. Импорт
  1. Помещение нескольких файлов в документ
  2. Управление связанными и встроенными файлами
  3. Сведения о связях
  4. Извлечение изображений
  5. Импорт графического объекта из Photoshop
  6. Импорт растровых изображений
  7. Импорт файлов Adobe PDF
  8. Импорт файлов EPS, DCS и AutoCAD
2. Библиотеки Creative Cloud Libraries в Illustrator
  1. Библиотеки Creative Cloud Libraries в Illustrator
3. Диалоговое окно «Сохранить»
  1. Сохранение иллюстраций
4. Экспорт
  1. Использование графического объекта Illustrator в Photoshop
  2. Экспорт иллюстрации
  3. Сбор ресурсов и их массовый экспорт
  4. Упаковка файлов
  5. Создание файлов Adobe PDF
  6. Извлечение CSS | Illustrator CC
  7. Параметры Adobe PDF
  8. Палитра «Информация о документе»
Печать
1. Подготовка к печати
  1. Настройка документов для печати
  2. Изменение размера и ориентации страницы
  3. Задание меток обреза для обрезки и выравнивания
  4. Начало работы с большим холстом
2. Печать
  1. Наложение
  2. Печать с управлением цветами
  3. Печать PostScript
  4. Стили печати
  5. Метки и выпуск за обрез
  6. Печать и сохранение прозрачных графических объектов
  7. Треппинг
  8. Печать цветоделенных форм
  9. Печать градиентов, сеток и наложения цветов
  10. Наложение белого
Автоматизация задач
1. Объединение данных с помощью панели «Переменные»
2. Автоматизация с использованием сценариев
3. Автоматизация с использованием операций
Устранение неполадок
1. Проблемы с аварийным завершением работы
2. Восстановление файлов после сбоя
3. Проблемы с файлами
4. Поддерживаемые форматы файлов
5. Проблемы с драйвером ГП
6. Проблемы устройств Wacom
7. Проблемы с файлами DLL
8. Проблемы с памятью
9. Проблемы с файлом настроек
10. Проблемы со шрифтами
11. Проблемы с принтером
12. Как поделиться отчетом о сбое с Adobe
13. Повышение производительности Illustrator

Создание тени

Выберите объект или группу (или назначьте слой на палитре Слои).
Выберите Эффект > Стилизация > Тень.

Выберите параметры для эффекта Тень и нажмите кнопку OK:

	Задает режим наложения для тени.
Непрозрачность	Задает процентное отношение непрозрачности для тени.
Сдвиг по оси X и сдвиг по оси Y	Задает расстояние, на которое тень будет смещена от объекта.
Размытие	Задает расстояние от края тени, на котором должно начинаться размытие. Программа Illustrator сымитирует размытие с помощью прозрачного растрового объекта.
	Задает цвет тени.
Интенсивность	Задает процентное отношение черного цвета, добавляемого к тени. Если в документе CMYK значение 100 % задано для выбранного объекта с заливкой или обводкой, цвет которых отличается от черного, то создается тень с несколькими оттенками черного. Если значение 100 % используется для выбранного объекта, который содержит только черную заливку и обводку, то создается полностью черная тень. При значении 0 % создается тень цвета выбранного объекта.

Применение внутреннего или внешнего свечения

Выберите объект или группу (или назначьте слой на палитре «Слои»).
Выберите Эффект > Стилизация > Внутреннее свечение или Эффект > Стилизация > Внешнее свечение.
Щелкните квадрат предпросмотра цветов рядом с меню режима наложения, чтобы задать цвет свечения.

Укажите дополнительные параметры и нажмите кнопку «ОК».

	Задает режим наложения для свечения.
Непрозрачность	Задает процентное отношение непрозрачности для свечения.
Размытие	Задает расстояние от центра или края выделенной области, на котором должно начинаться размытие.
По центру (только «Внутреннее свечение»)	Применяет свечение, исходящее из центра выделенной области.
По краю (только «Внутреннее свечение»)	Применяет свечение, исходящее из внутренних краев выделенной области.

Примечание.

Когда пользователь разбирает объект, в котором используется эффект внутреннего свечения, это свечение просматривается в качестве непрозрачной маски. Когда пользователь разбирает объект с внешним свечением, это свечение становится прозрачным растровым объектом.

Растушевка краев объекта

Выберите объект или группу (или назначьте слой на палитре Слои).
Выберите Эффект > Стилизация > Растушевка.
Задайте расстояние, на котором объект из состояния Непрозрачный полностью переходит в состояние Прозрачный и нажмите кнопку OK.

Выбранный первоначальный объект (слева) и применение эффекта растушевки (справа)

связанные ресурсы

Об эффектах
Выбор элементов, к которым применяются атрибуты оформления
О растровых эффектах
Выделение объектов

Обращайтесь к нам

Мы будем рады узнать ваше мнение. Поделитесь своими мыслями с сообществом Adobe Illustrator.

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

Войти

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

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

Войти

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

Добавление глубины к CSS-иллюстрации с помощью Box Shadow

Джей Томпкинс: [0:00] Мы могли бы удалить background-color из нашего яйца и вызвать его там, но мы еще не совсем закончили. Если мы уменьшим непрозрачность нашего яйца и повысим непрозрачность нашего изображения, мы увидим, что наши очки отбрасывают тень на яичную скорлупу.

[0:17] Это то, чего мы можем добиться, применяя box-shadow к каждой очковой линзе. Давайте начнем с добавления базовой тени блока. Box-shadow состоит из смещения по горизонтали, смещения по вертикали, размытия, распространения и цвета.

[0:34] Использование яркого цвета позволяет нам легко увидеть тень, которую мы создаем. Разброс нам не нужен, но мы воспользуемся размытием. Мы можем определить размер нашего размытия, используя нашу реагирующую единицу.

[0:48] Если мы присмотримся, то сможем увидеть слабую красную тень вокруг линзы, и мы увидим, что нам нужно применить вертикальное смещение, чтобы оно совпадало с тенью на нашем изображении.

[1:00] Давайте попробуем смещение по вертикали, которое в 20 раз превышает нашу единицу измерения отклика. Это выглядит довольно близко. Мы могли бы также попробовать 30 и, возможно, мы остановились бы на золотой середине 25.

[1:17] Глядя на нашу тень, она должна двигаться горизонтально, но у нас есть еще одна проблема. Любую тень, выходящую за контур нашей яичной скорлупы, мы не хотим показывать.

[1:27] Мы не можем использовать clip-path на линзе, потому что это удалит и линзу, и тень. Что мы можем сделать, так это продублировать элементы линзы и использовать дубликаты исключительно для тени.

[1:39] Продублируйте наши элементы линзы и добавьте новый класс specs-lens-shadow, который позволит нам стилизовать те дубликаты линз, которые были созданы с единственной целью создания тени.

[1:51] С помощью этих повторяющихся элементов мы сможем обрезать лишнее, что нам не нужно, не затрагивая наши очковые линзы. Давайте создадим стиль specs-lens-shadow, и мы сможем переместить наше объявление box-shadow в этот стиль.

[2:05] Теперь мы можем применить небольшое отрицательное смещение по горизонтали, чтобы немного растянуть нашу тень, поэтому давайте попробуем calc(-10) * var(—unit), и это выглядит хорошо для нашей нижней тени .

[2:20] Теперь нам нужно создать внутреннюю тень на линзе. Для этого box-shadow также принимает необязательное значение вставки, которое указывает нашей тени отображать вставку внутри нашего элемента.

[2:30] Мы можем наслоить столько теней, разделенных запятыми, сколько пожелаем. Давайте создадим вторую box-shadow, но для этой давайте не будем иметь смещения по горизонтали. Сохраним то же вертикальное смещение. Сохраним то же размытие. Давайте используем синий цвет. Определим его как вставку. Там мы можем видеть нашу тень.

[2:49] В этот момент мы хотим отрезать части тени, которые мы не хотим видеть. Для этого мы можем использовать полигональный clip-path. Глядя на наше изображение, мы можем начать примерно с 50 процентов и перейти к 100 процентам. Затем нам нужно было бы перейти примерно к 100, 120 процентам. Это потому, что если мы обрежем до 100 процентов, мы фактически обрежем тень.

[3:11] Нам нужно выйти за пределы 100 процентов, чтобы мы все еще могли видеть тень. Если мы скажем, что это 100, 120, то мы перейдем, скажем, к 20 процентам, 120 процентам. Тогда это сократило бы обратно. Давайте попробуем это. 50 процентов, 100 процентов, 100 процентов, 120 процентов и 20 процентов, 120 процентов. Это недалеко.

[3:36] Давайте перейдем к инструментам разработки и настроим стили. Сдвиг этих последних 20 процентов примерно до 15 или 14 процентов работает. Это не совсем так. Здесь мы видим небольшой разрыв. Еще одна точка, которая ведет нас по этой области, а затем здесь, вероятно, то, что нам нужно. Попробуем добавить еще один пункт. Давайте попробуем 18 процентов, 100 процентов.

[3:56] Довольно близко, но теперь у нас есть небольшой выступ. Давайте скорректируем эти 14 процентов. Давайте попробуем 16 процентов. Это выглядит довольно хорошо. Давайте скопируем это значение и применим его в нашем CSS. На этом этапе мы можем определить цвет тени. Что-то с уменьшенной альфой было бы идеально. Мы можем заменить красный и синий, которые мы определили ранее.

[4:22] Мы можем смягчить цвет этих очков. Удалите изображение из нашего HTML. Вот он, чистый CSS-яйцо. В обзоре мы можем добавить больше глубины нашей иллюстрации, используя box-shadow с дублированными элементами, которые затем мы используем clip-path, чтобы обрезать лишнее. Мы используем повторяющийся элемент, потому что не хотим обрезать исходные линзы.

[4:47] Единственная цель дубликата — воссоздать тень, отбрасываемую на яичную скорлупу.

100 дней иллюстраций CSS (11-20)

24 августа 2020 г. css искусство HTML шоудев

Вторая партия 100 дней иллюстраций CSS. Дни 14-16 были особенно тяжелыми, потому что я был завален работой и едва успевал что-либо делать (и это видно :S)… но я рад, что смог сохранить норму одна иллюстрация в день.

Вот 10 иллюстраций/рисунков, которые я сделал за последние 10 дней. Нажмите на изображение, чтобы увидеть полную иллюстрацию с кодом , и нажмите здесь, чтобы увидеть коллекцию CodePen со всеми рисунками плюс некоторые варианты.

День 11: Мастер кодирования

Этот мультфильм был сделан с нуля. Немного иронии, код на заднем фоне такой же, как и на рисунке, так что персонаж сам себя кодирует. Он использует переменные CSS, поэтому его можно легко настроить.

День 12: Любовь/Любовь

Мне нравится кубистская/минималистская анимация Денниса Хугстада. И я сделал версию Love, которая трансформируется в слово Amor при наведении (без анимации).

День 13: персонаж манги

Еще один мультик с нуля. Мне это нравится, хотя я не большой поклонник того, как волосы в итоге выглядят. Этот персонаж манги также можно настроить с помощью переменных CSS (см. строку кода 42).

День 14: Плавающая башня

Мне нужно многое узнать о перспективе и тенях. Что интересно в этом трехмерном замке, так это то, что он был разработан с использованием одного HTML-элемента и с использованием clip-paths и box-shadow.

День 15: Пушистый монстр с табличкой.

Это вдохновлено моим собственным дизайном на Dribbble и является частью той же серии, что и другой мультфильм в этом задании (на самом деле я повторно использовал некоторые части и обманул, используя SVG для фильтров).

День 16: Винерская собака

Этот мультфильм был вдохновлен этим мультфильмом, найденным в Интернете (я не знаю автора, которому нужно указать :S) … хотя моя версия приняла симпсоновский оборот.

День 17: Хаэн, Испания

Это иллюстрация замка Святой Екатерины в Хаэне, Испания, городе, где я вырос. Для рисования (особенно области дерева) я использовал clip-path и фильтр drop-shadow , поэтому он может отображаться не во всех браузерах.

День 18: Удивленный мем Пикачу

Версия популярного мема «Удивленный Пикачу», созданная с помощью HTML и CSS. Цитаты меняются каждые 7 секунд, и некоторые из них, вероятно, должны быть вместо Неустроенного Тома… -5 баллов за неправильное использование мема!

День 19: Жираф

Этот мультфильм жирафа основан на другом, который я сделал для своей дочери около 5 лет назад.

День 20: 3D-пейзаж

На основе пейзажа Пархама Маранди на Dribbble.