Иконки в стиле скевоморфизма были популярны до выхода iOS 7. В течение довольно долгого времени системы, веб-страницы и сторонние приложения пытались использовать скевоморфные стили дизайна. В то время на сайте dribbble также нескончаемым потоком появлялись различные отличные скевоморфные дизайнерские работы.
Вот несколько отличных скевоморфных дизайнерских работ, чтобы вы могли больше узнать об этом стиле и даже влюбиться в него. Вам не нужно стоять на точке зрения продукта, чтобы быть правдой, просто оцените его красоту и почувствуйте шок от деталей.
Складывать две работы, разработанные мной тогда, немного грубо, и по сравнению с работами великих богов, есть много недостатков, я рассмеялся, ха-ха.
Ладно, приступим к делу. Скевоморфные значки, разработанные дизайнерами, обычно бывают двух видов: чистое рисование PS или рендеринг программного 3D-моделирования + корректировка деталей PS. Но сегодня я хочу поговорить о том, как использовать CSS для написания скевоморфной иконки без какого-либо графического материала. Удивлен не так ли! Удивлен не так ли! Не сплетничайте, сначала посмотрите на вещи.
хорошо, урок начинается~
теоретические основы
Прежде чем писать код, давайте поговорим о некоторых простых принципах света и тени (не задействует перспективу и материалы и стремится к минимализму ^_^), то есть основе скетча: три основных стороны и пять основных тонов.
Три стороны:
- Глянцевый
- серое лицо
- темная сторона
Пять тонов:
- выделять
- средний тон
- граница света и тьмы
- Светоотражающий
- проекция
Разные люди могут называть это по-разному, но суть одна. Три основных плана относятся к трем состояниям света и темноты, когда объект освещается источником света: Светлая сторона - светоприемная сторона; Серая поверхность - боковая глянцевая поверхность; Темная сторона — сторона с подсветкой.
Пять основных тонов означают, что в трех основных плоскостях есть более очевидные различия в зависимости от интенсивности света: Блики - самая яркая точка освещаемого объекта; Средние тона — область между светлыми участками и граница между светлым и темным; Пограничная линия между светлым и темным - участок, отличающий светлую сторону от темной, не является реальной линией, ее форма, светотени, виртуальная и реальная будут меняться при переходе структуры объекта; Отражающая — часть подсветки объекта, на которую влияет отраженный свет от других объектов или среды, в которой находится объект; Тени - тени в пространстве, создаваемые самими объектами, блокирующими свет.
Подойдите к картинке, чтобы визуализировать эти теории.
После понимания этих концепций у нас есть основания следовать им при разработке этой иконки. Потому что структура этой иконки совсем не сложная, она не должна быть такой точной, хорошо, что все есть.
форма
Сначала напишите форму. Форма этого значка очень проста. Вы можете написать ее так, как я написал, или вы можете настроить ее по своему желанию. Не беспокойтесь о цвете в первую очередь, подойдет любой цвет. Включая стену, основание, канавку, ручку и маленькую красную полоску (не знаю, как она называется).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wall {
position: relative;
width: 1000px;
height: 750px;
background: #eaeaea;
}
.base {
position: absolute;
top: 50%;
left: 50%;
margin-left: -170px;
margin-top: -170px;
width: 340px;
height: 340px;
border-radius: 60px 60px;
background: #fafafa;
}
.groove {
position: absolute;
top: 50%;
left: 50%;
margin-left: -113px;
margin-top: -113px;
width: 226px;
height: 226px;
border-radius: 50%;
background: #dddddd;
z-index: 50;
}
.knob {
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
width: 200px;
height: 200px;
border-radius: 50%;
background: #fafafa;
z-index: 100;
}
.spot {
position: absolute;
top: 50%;
left: 50%;
margin-left: -4px;
margin-top: -74px;
width: 8px;
height: 30px;
border-radius: 10px;
background: red;
z-index: 150;
}
</style>
</head>
<body>
<div class="wall"><!--墙面-->
<div class="base"></div><!--底座-->
<div class="groove"></div><!--凹槽-->
<div class="knob"></div><!--旋钮-->
<div class="spot"></div><!--红色指示条-->
</div>
</body>
</html>
Эффект показан на рисунке:
цвет
Теперь давайте настроим цвет. Вы должны знать, что в жизни не бывает абсолютно сплошного цвета у объектов, пока есть свет, он неизбежно производит свет и тьму, а это значит, что все цвета имеют более или менее градиенты. В этом дизайне значка, чтобы быть простым и понятным, мы не учитываем окружающий свет, кроме красной полосы, другие используют черно-белый и серый цвета и не смешивают оттенки.
1. Определите источник света
Оговариваем, что источник света — это мягкий свет, который расположен чуть выше и чуть левее, чтобы он выглядел более комфортно.
2. Стена
Сначала мы устанавливаем радиальный градиент для стены, центр круга градиента находится в верхнем среднем положении, центр круга яркий, а окружающая область относительно темная. Но не делайте слишком много контраста, мягкость выглядит красиво.
Справочное значение цвета:
background: radial-gradient(circle at 50% 20%, rgb(241, 241, 241) 10%, rgb(221, 221, 221));
Эффект следующий:
3. Пьедестал
Давайте воспользуемся линейным градиентом, который бывает и ярче, и темнее, а значение цветового различия не должно быть слишком большим.
Справочное значение цвета:
background: linear-gradient(180deg, rgb(244, 244, 244), rgb(234, 234, 234));
Эффект следующий:
4. Канавки и ручки
Сделайте эти два вместе и сравните их, чтобы убедиться, что они точны. Справочное значение цвета:
Канавки (из-за вогнутой структуры объекта здесь блокируется источник света, и естественно темнее, чем в других местах)
background: linear-gradient(180deg, rgb(221, 221, 221), rgb(207, 207, 207));
Ручка (цвет ручки в основном такой же, как и основание)
background: linear-gradient(180deg, rgb(250, 250, 250), rgb(234, 234, 234));
Эффект следующий:
5. Красная полоса индикатора
Не думайте о «красном» значении, когда сталкиваетесь с красным: такого чистого красного цвета с высокой насыщенностью и высокой яркостью не существует в природе, и он выглядит не очень хорошо. Мы выбираем более мягкий красный.
Справочное значение цвета:
background: #ff5d5d;
Эффект следующий:
Пока общий цвет подкорректирован, но эффекта трехмерности нет. Затем мы заставляем его стоять, регулируя тени, внутренние тени, блики и другие элементы.
трехмерный
Безответственно начинать название со «Стереоскопический», потому что его нельзя классифицировать как таковое только ради простоты.
На этом шаге используется только одно свойство CSS3, box-shadow, очень мощное. Будь то тени, блики, внутренние тени или отражения, вы можете использовать его для тонкой настройки.
Впереди высокая энергия!
1. База
box-shadow: 1px 4px 6px -3px rgba(0, 0, 0, 0.05), 3px 8px 20px -8px rgba(133, 133, 133, 0.9), 7px 16px 28px -8px rgb(188, 188, 188), 8px 33px 60px -12px rgb(200, 200, 200),
1px 2px 4px 0 rgb(248, 248, 248) inset, 5px 10px 10px 0 rgba(255, 255, 255, 0.8) inset, 0px 20px 60px 0 rgba(255, 255, 255, 0.4) inset,
-1px -2px 4px 0 #cccccc inset, -5px -10px 8px 0 rgba(144, 144, 144, 0.3) inset, 0 -20px 60px 0 #e0e0e0 inset;
Хотя есть только один атрибут, ему нужно задать много значений. Поскольку их слишком много, я не буду вдаваться в подробности.
Тем не менее, вот несколько принципов, которые вам необходимо знать:
- Проекция объекта также имеет градиент: чем ближе вы к объекту, тем темнее и реалистичнее будет проекция, чем дальше вы от объекта, тем светлее и виртуальнее будет проекция.
- Яркая часть тоже слоистая, и чем ближе к источнику света, тем она ярче и цельнее.
- Нижняя часть является отражающей, потому что стена отражает на нее часть света.
Каков конкретный эффект каждого значения, вы можете попробовать сравнить их по одному, и вы поймете.
Посмотрим на эффект:
2. Паз
box-shadow: 2px 4px 6px 0 #c0c0c0 inset, -1px -1px 0px 0 rgba(255, 255, 255, 0.9) inset, -1px -1px 1px 0 rgba(0, 0, 0, 0.1), -8px -18px 40px 0 rgba(255, 255, 255, 0.8);
Здесь следует отметить, что данная конструкция имеет поворотную точку под большим углом, поэтому в точке поворота следует выделить цвет. Эффект следующий:
3. Ручка и красный индикатор
ручка
box-shadow: 1px 4px 6px -2px rgba(0, 0, 0, 0.05), 3px 10px 12px -8px rgba(0, 0, 0, 0.3), 6px 30px 30px -6px rgba(160, 160, 160, 0.5),
1px 2px 0px 0 #fff inset, 0 -1px 1px 0 rgba(255, 255, 255, 0.4) inset;
красный индикатор
box-shadow: 1px 2px 1px 0 #df3434 inset, 1px 1px 0 0 #fffdfd;
В выступающем стыке ручки я намеренно осветлил тонкую кромку в точке поворота, чтобы сделать контраст более заметным и усилить трехмерный эффект. Красная полоса ни о чем не говорит, попробуй и узнаешь.
На этом наша скевоморфная иконка готова, давайте посмотрим на окончательный эффект:
Исходный код предоставляется, и друзья могут настроить его в соответствии со своими идеями, чтобы увидеть, кто делает самые красивые и естественные.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wall {
position: relative;
width: 1000px;
height: 750px;
background: radial-gradient(circle at 50% 20%, rgb(241, 241, 241) 10%, rgb(221, 221, 221));
}
.base {
position: absolute;
top: 50%;
left: 50%;
margin-left: -170px;
margin-top: -170px;
width: 340px;
height: 340px;
border-radius: 60px 60px;
background: linear-gradient(180deg, rgb(244, 244, 244), rgb(234, 234, 234));
box-shadow: 1px 4px 6px -3px rgba(0, 0, 0, 0.05), 3px 8px 20px -8px rgba(133, 133, 133, 0.9), 7px 16px 28px -8px rgb(188, 188, 188), 8px 33px 60px -12px rgb(200, 200, 200),
1px 2px 4px 0 rgb(248, 248, 248) inset, 5px 10px 10px 0 rgba(255, 255, 255, 0.8) inset, 0px 20px 60px 0 rgba(255, 255, 255, 0.4) inset,
-1px -2px 4px 0 #cccccc inset, -5px -10px 8px 0 rgba(144, 144, 144, 0.3) inset, 0 -20px 60px 0 #e0e0e0 inset;
}
.groove {
position: absolute;
top: 50%;
left: 50%;
margin-left: -113px;
margin-top: -113px;
width: 226px;
height: 226px;
border-radius: 50%;
background: linear-gradient(180deg, rgb(221, 221, 221), rgb(207, 207, 207));
box-shadow: 2px 4px 6px 0 #c0c0c0 inset, -1px -1px 0px 0 rgba(255, 255, 255, 0.9) inset, -1px -1px 1px 0 rgba(0, 0, 0, 0.1), -8px -18px 40px 0 rgba(255, 255, 255, 0.8);
z-index: 50;
}
.knob {
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
width: 200px;
height: 200px;
border-radius: 50%;
background: linear-gradient(180deg, rgb(250, 250, 250), rgb(234, 234, 234));
box-shadow: 1px 4px 6px -2px rgba(0, 0, 0, 0.05), 3px 10px 12px -8px rgba(0, 0, 0, 0.3), 6px 30px 30px -6px rgba(160, 160, 160, 0.5),
1px 2px 0px 0 #fff inset, 0 -1px 1px 0 rgba(255, 255, 255, 0.4) inset;
z-index: 100;
}
.spot {
position: absolute;
top: 50%;
left: 50%;
margin-left: -4px;
margin-top: -74px;
width: 8px;
height: 30px;
border-radius: 10px;
background: #ff5d5d;
box-shadow: 1px 2px 1px 0 #df3434 inset, 1px 1px 0 0 #fffdfd;
z-index: 150;
}
</style>
</head>
<body>
<div class="wall"><!--墙面-->
<div class="base"></div><!--底座-->
<div class="groove"></div><!--凹槽-->
<div class="knob"></div><!--旋钮-->
<div class="spot"></div><!--红色指示条-->
</div>
</body>
</html>
На этом обучающая часть закончена, я расскажу о некоторых своих взглядах на скевоморфный стиль.
Скевоморфный стиль дизайна очень специфичен в отношении света и тени, материала, перспективы, текстуры и других факторов, а вдохновение для создания обычно исходит от объектов в жизни. Хороший скевоморфный дизайн удивит вас идеальными деталями. Это требует проверки глубоких дизайнерских навыков дизайнера, способности понимать и понимать световые и теневые материалы, способности точно конструировать графику и умения умело использовать программные инструменты.
Сегодня стиль дизайна на основе материала редко появился в Volkswagen Vision, от Microsoft Metro, в стиле IOS7 Apple, затем отправляйтесь в дизайн материала Google (не чистое уплощение, эта статья не говорит, заинтересована, пожалуйста, ищите себя), Стиль дизайна Flatization стал основным потоком цифрового мира (конечно, сплющенный стиль уже давно, это просто воспроизведение печатных издательских эстетиков в современном цифровом мире). В пользовательском интерфейсе электронного продукта стиль плоского дизайна более эффективен, простым, и пользователь может быть погруженным, и он не вмешивается в другие визуальные элементы ослепления. Однако визуальный стиль является реологией, и материал никогда не устранен. Это не просто тенденция дизайна, но он также включает в себя концепцию дизайна, то есть объект в реальной жизни используется в качестве визуальной метафоры, что облегчает продукт использовать.
Говорить о плюсах и минусах скевоморфизма и уплощения бессмысленно, у всех свои предпочтения, и у того и у другого есть свои преимущества и недостатки. Два стиля дизайна никогда не противоречат друг другу, и мы можем ясно увидеть духовное ядро скевоморфного дизайна в плоском дизайне.
Наконец, спасибо за чтение, надеюсь, вам понравится, и с нетерпением жду ваших отзывов.