Онлайн CSS3-генератор для создания крутых графических эффектов и получения их CSS кода. Можно отдельно изменять стили для различных состояний таких как:hover, :active и т.д. В ваши руки попадает интерфейс для создания сложных теней, градиентов, 3D эффектов, эффектов с текстом и многого другого. У проекта имеется своя галерея эффектов с которых можно начинать свою разработку. Отличительной чертой проекта является то, что можно получить стили для отдельного элемента, например для тени или градиента.

При первом заходе на сайт нам предлагаю создать заготовку для поля ввода, кнопки, блока или выбрать готовый шаблон из галереи проекта. Начнем с чего-то простого, например, с галереи геометрических фигур. Выбираем из галереи знак Инь-Янь и жмем "Get The Code" в правом верхнем углу:

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

Пошарив по разделам галереи мы видим кнопки, текстовые поля, эффекты непосредственно для текста, вышеупомянутые фигуры и наборы градиентов. Поиграемся с эффектами текста:

сайт - wow it"s 3D!

Должен заметить, что генерируемый CSS на удивление очень чист и читабелен, что очень радует. Давайте посмотрим на какую-нибудь симпатичную кнопочку:

сайт cool button

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

При использовании нестандартных шрифтов с Google Fonts EnjoyCSS автоматически добавляет их в пример HTML. В моем случае для текст и кнопки это выглядит так:

Итоговый CSS довольно объемный, поэтому привожу его только в конце статьи:

Yin-yang {
float:left;
width: 96px;
height: 48px;
position: relative;
border: 2px solid #f81;
border-bottom-width: 50px;
-webkit-border-radius: 100%;
border-radius: 100%;
color: rgba(0,0,0,1);
-o-text-overflow: clip;
text-overflow: clip;
-webkit-transform: rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1) ;
transform: rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1) ;
transform-origin: 50% 50% 0;

Yin-yang::before {
width: 12px;
height: 12px;
position: absolute;
content: "";
top: 50%;
left: 0;
border: 18px solid #f81;
-webkit-border-radius: 100%;
border-radius: 100%;
font: normal normal normal 100%/normal Arial, Helvetica, sans-serif;
color: rgba(0,0,0,1);
-o-text-overflow: clip;
text-overflow: clip;
background: rgba(255,255,255,1);
text-shadow: none;

-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
}

Yin-yang::after {
width: 12px;
height: 12px;
position: absolute;
content: "";
top: 50%;
left: 50%;
border: 18px solid rgba(255,255,255,1);
-webkit-border-radius: 100%;
border-radius: 100%;
font: normal normal normal 100%/normal Arial, Helvetica, sans-serif;
color: rgba(0,0,0,1);
-o-text-overflow: clip;
text-overflow: clip;
background: #f81;
text-shadow: none;
-webkit-transform: scaleX(1) scaleY(1) scaleZ(1) ;
transform: scaleX(1) scaleY(1) scaleZ(1) ;
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
}

Enjoy-css-3dtext {
cursor: pointer;
border: none;
font: normal normal normal 72px/normal "Passero One", Helvetica, sans-serif;
color: rgba(255,255,255,1);
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
text-shadow: 0 1px 0 rgb(204,204,204) , 0 2px 0 rgb(201,201,201) , 0 3px 0 rgb(187,187,187) , 0 4px 0 rgb(185,185,185) , 0 5px 0 rgb(170,170,170) , 0 6px 1px rgba(0,0,0,0.0980392) , 0 0 5px rgba(0,0,0,0.0980392) , 0 1px 3px rgba(0,0,0,0.298039) , 0 3px 5px rgba(0,0,0,0.2) , 0 5px 10px rgba(0,0,0,0.247059) , 0 10px 10px rgba(0,0,0,0.2) , 0 20px 20px rgba(0,0,0,0.14902) ;
-webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-webkit-transform: scaleX(1) scaleY(1) scaleZ(1) ;
transform: scaleX(1) scaleY(1) scaleZ(1) ;
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
}

Enjoy-css-3dtext:hover {
color: rgba(169,214,169,1);
text-shadow: 0 1px 0 rgba(255,255,255,1) , 0 2px 0 rgba(255,255,255,1) , 0 3px 0 rgba(255,255,255,1) , 0 4px 0 rgba(255,255,255,1) , 0 5px 0 rgba(255,255,255,1) , 0 6px 1px rgba(0,0,0,0.0980392) , 0 0 5px rgba(0,0,0,0.0980392) , 0 1px 3px rgba(0,0,0,0.298039) , 0 3px 5px rgba(0,0,0,0.2) , 0 -5px 10px rgba(0,0,0,0.247059) , 0 -7px 10px rgba(0,0,0,0.2) , 0 -15px 20px rgba(0,0,0,0.14902) ;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}

Feedback-button {
display: inline-block;
float: left;
position: relative;
cursor: pointer;
margin: 0 2% 0 0;
padding: 12px 22px;
overflow: hidden;
border: none;
font: normal normal bold 1.6em/normal "Syncopate", Helvetica, sans-serif;
color: #ecf0f1;
-o-text-overflow: clip;
text-overflow: clip;


-webkit-
background-origin: padding-box;
background-clip: border-box;
background-size: auto auto;
-webkit-box-shadow: 0 10px 0 0 rgba(178,49,49,1) ;
box-shadow: 0 10px 0 0 rgba(178,49,49,1) ;
text-shadow: 0 0 0 rgb(196,80,78) , 1px 1px 0 rgb(196,80,78) , 2px 2px 0 rgb(196,80,78) , 3px 3px 0 rgb(196,80,78) , 4px 4px 0 rgb(196,80,78) , 5px 5px 0 rgb(196,80,78) , 6px 6px 0 rgb(196,80,78) , 7px 7px 0 rgb(196,80,78) , 8px 8px 0 rgb(196,80,78) , 9px 9px 0 rgb(196,80,78) , 10px 10px 0 rgb(196,80,78) , 11px 11px 0 rgb(196,80,78) , 12px 12px 0 rgb(196,80,78) , 13px 13px 0 rgb(196,80,78) , 14px 14px 0 rgb(196,80,78) , 15px 15px 0 rgb(196,80,78) , 16px 16px 0 rgb(196,80,78) , 17px 17px 0 rgb(196,80,78) , 18px 18px 0 rgb(196,80,78) , 19px 19px 0 rgb(196,80,78) , 20px 20px 0 rgb(196,80,78) , 21px 21px 0 rgb(196,80,78) , 22px 22px 0 rgb(196,80,78) , 23px 23px 0 rgb(196,80,78) , 24px 24px 0 rgb(196,80,78) , 25px 25px 0 rgb(196,80,78) , 26px 26px 0 rgb(196,80,78) , 27px 27px 0 rgb(196,80,78) , 28px 28px 0 rgb(196,80,78) , 29px 29px 0 rgb(196,80,78) , 30px 30px 0 rgb(196,80,78) , 31px 31px 0 rgb(196,80,78) , 32px 32px 0 rgb(196,80,78) , 33px 33px 0 rgb(196,80,78) , 34px 34px 0 rgb(196,80,78) , 35px 35px 0 rgb(196,80,78) , 36px 36px 0 rgb(196,80,78) , 37px 37px 0 rgb(196,80,78) , 38px 38px 0 rgb(196,80,78) , 39px 39px 0 rgb(196,80,78) , 40px 40px 0 rgb(196,80,78) , 41px 41px 0 rgb(196,80,78) , 42px 42px 0 rgb(196,80,78) , 43px 43px 0 rgb(196,80,78) , 44px 44px 0 rgb(196,80,78) , 45px 45px 0 rgb(196,80,78) , 46px 46px 0 rgb(196,80,78) , 47px 47px 0 rgb(196,80,78) , 48px 48px 0 rgb(196,80,78) , 1px 1px 0 rgba(196,80,78,0.980392) , 2px 2px 0 rgba(196,80,78,0.960784) , 3px 3px 0 rgba(196,80,78,0.941176) , 4px 4px 0 rgba(196,80,78,0.921569) , 5px 5px 0 rgba(196,80,78,0.901961) , 6px 6px 0 rgba(196,80,78,0.882353) , 7px 7px 0 rgba(196,80,78,0.862745) , 8px 8px 0 rgba(196,80,78,0.843137) , 9px 9px 0 rgba(196,80,78,0.819608) , 10px 10px 0 rgba(196,80,78,0.8) , 11px 11px 0 rgba(196,80,78,0.780392) , 12px 12px 0 rgba(196,80,78,0.760784) , 13px 13px 0 rgba(196,80,78,0.741176) , 14px 14px 0 rgba(196,80,78,0.721569) , 15px 15px 0 rgba(196,80,78,0.701961) , 16px 16px 0 rgba(196,80,78,0.682353) , 17px 17px 0 rgba(196,80,78,0.658824) , 18px 18px 0 rgba(196,80,78,0.639216) , 19px 19px 0 rgba(196,80,78,0.619608) , 20px 20px 0 rgba(196,80,78,0.6) , 21px 21px 0 rgba(196,80,78,0.580392) , 22px 22px 0 rgba(196,80,78,0.560784) , 23px 23px 0 rgba(196,80,78,0.541176) , 24px 24px 0 rgba(196,80,78,0.521569) , 25px 25px 0 rgba(196,80,78,0.498039) , 26px 26px 0 rgba(196,80,78,0.478431) , 27px 27px 0 rgba(196,80,78,0.458824) , 28px 28px 0 rgba(196,80,78,0.439216) , 29px 29px 0 rgba(196,80,78,0.419608) , 30px 30px 0 rgba(196,80,78,0.4) , 31px 31px 0 rgba(196,80,78,0.380392) , 32px 32px 0 rgba(196,80,78,0.360784) , 33px 33px 0 rgba(196,80,78,0.341176) , 34px 34px 0 rgba(196,80,78,0.317647) , 35px 35px 0 rgba(196,80,78,0.298039) , 36px 36px 0 rgba(196,80,78,0.278431) , 37px 37px 0 rgba(196,80,78,0.258824) , 38px 38px 0 rgba(196,80,78,0.239216) , 39px 39px 0 rgba(196,80,78,0.219608) , 40px 40px 0 rgba(196,80,78,0.2) , 41px 41px 0 rgba(196,80,78,0.180392) , 42px 42px 0 rgba(196,80,78,0.156863) , 43px 43px 0 rgba(196,80,78,0.137255) , 44px 44px 0 rgba(196,80,78,0.117647) , 45px 45px 0 rgba(196,80,78,0.0980392) , 46px 46px 0 rgba(196,80,78,0.0784314) , 47px 47px 0 rgba(196,80,78,0.0588235) , 48px 48px 0 rgba(196,80,78,0.0392157) , 50px 50px 0 rgba(196,80,78,0) ;
-webkit-transform: scaleX(1) scaleY(1) scaleZ(1) ;
transform: scaleX(1) scaleY(1) scaleZ(1) ;
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
}

Feedback-button:hover {
text-align: center;
background: -webkit-linear-gradient(-90deg, #ce6161 0, #ef6664 100%);
background: -moz-linear-gradient(180deg, #ce6161 0, #ef6664 100%);
background: linear-gradient(180deg, #ce6161 0, #ef6664 100%);
background-position: 50% 50%;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: auto auto;
background-size: auto auto;
}

Feedback-button:active {
top: 5px;
background: -webkit-linear-gradient(-90deg, #ff8583 0, #ff5350 100%);
background: -moz-linear-gradient(180deg, #ff8583 0, #ff5350 100%);
background: linear-gradient(180deg, #ff8583 0, #ff5350 100%);
background-position: 50% 50%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: auto auto;
background-size: auto auto;
-webkit-box-shadow: 0 5px 0 0 rgba(178,49,49,1) ;
box-shadow: 0 5px 0 0 rgba(178,49,49,1) ;

Так как верстка страниц становится все более сложной, разработчикам требуется доступ к большему количеству единиц измерений, чтобы воплотить дизайн в жизнь. Кроме привычных процентов, em и rem, и пикселей существуют более новые единицы измерения vw и vh, и родственные им vmin и vmax, предоставляющие более мощные способы создания адаптивного дизайна, которые нередко могут помочь отказаться от использования точек перехода @media.

Выходим за пределы использования процентов

Традиционные единицы измерения CSS создают следующие проблемы в веб-дизайне:

• Единица измерения процент не всегда работает, как ожидается. Разработчикам приходится помнить о внешних отступах, задавая размеры элементам. Не следует использовать единицу измерения процент для задания высоты элементу body. Запись font-size: 50% задает тексту размер, равный половине его стандартного размера, а не устанавливает зависимость между размером текста и размером содержащего его элемента.
• Почти невозможно создавать фигуры идеальной формы для разных размеров окна браузера. Очень сложно добиться того, чтобы элемент был идеально квадратным и в то же время адаптивным.

Единицы измерения vw и vh в значительной мере решают все эти проблемы.

Поддерживание идеальных пропорций

С помощью единиц измерения vw и vh очень легко создать идеальные фигуры на веб-страницах. Эти единицы измерения можно использовать для задания значений размеров почти всех свойств CSS. Поэтому если нужно создать элемент, который при любых размерах окна браузера занимает 20% его ширины и при этом остается квадратным, нужно задать одинаковые значения свойствам ширины и высоты, используя единицу измерения vw:

Div.twentysquare { background : #999 ; width : 20vw; height : 20vw; }

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

Используя тот же способ, можно легко создать прямоугольник, высота которого вдвое больше его ширины при любых размерах окна браузера:

Div.onetworect { width : 20vw; height : 40vw; }

Задать баннеру идеальное соотношение размеров очень просто с помощью следующего кода CSS:

Div.goldenrect { width : 100vw; height : 61 .8vw ; background : red ; }

Для оптимального масштабирования текста в адаптивном блоке, занимания всего предоставленного ему объема с разбивкой на строки, нужно всего лишь задать размер шрифта в единицах измерения vw.

Перевод — Дежурка

В качестве примера взял иконку из текущего проекта.
Сервис Rizzoma - это система коллаборации, альтернатива Google-wave.
В ходе работы над сайтом родилась идея сделать красивые иконки для каждого блока с преимуществами сервиса. Улитка символизирует контекстные сообщения и по сути своей является продвинутым символом @

Эскиз

Моделирование

Раковина

Слизень и турбина

Готовая модель

Визуализация

Сцена

Отрендеренная модель

Текстурирование

Рендер

Маски

Постобработка

Финал

Иконки - лицо любой операционной системы наравне с интерфейсом и общим дизайном. Лично меня всегда привлекали иконки, которые красуются на главном экране смартфонов и планшетов в магазинах и на официальных рендерах. Никто не хочет тапать на приложение с плохой и некрасивой иконкой.
Как говорил , иконки в iOS буквально хочется «лизнуть». Наверное, именно с мобильной ОС от Apple разработчики начали уделять больше внимания такому простому элементу дизайна, как логотипы приложений или игр. Пользователи , в отличие от апологетов iOS, вольны устанавливать любые наборы иконок. Я решил отобрать самые лучшие и интересные из них. Читайте о лучших наборах иконок для Android под катом .

Наборов иконок для Android действительно великое множество. Все они зачастую выполнены в похожих стилях - квадратные и округлые с фоном и без фона. На такие категории я решил разбить все представленные ниже наборы иконок. Все иконки будут представлены в блоке по 3, потому что я отобрал слишком много хороших наборов. Надеюсь, что такой формат будет не слишком неудобным.

Слева направо: TAY, Dark Synergy, Lyra

TAY - набор иконок в квадратном минималистичном стиле. Сами иконки заключены в объемную рамку с тенью. Иконки «плоские», яркие, аккуратные. В наборе 1 880 иконок с разрешением 192х192, а также 24 фона для рабочего стола с разрешением 3200х2560.

Набор иконок Dark Synergy выполнен в темном стиле - каждая иконка наложена на черный или темно-синий фон. Сами иконки выполнены в простом и аккуратном стиле. В наборе 600 кастомных иконок.

Lyra - слегка выпуклые иконки, которые больше похожи на объемные мини-плитки. Они выглядят на кнопки, поэтому их так и хочется нажать. В наборе 768 иконок, 37 фонов для рабочего стола.

Слева направо: MIUI 5, Miu, Square

MIUI 5 - это, как можно понять по названию, набор иконок в стиле популярной оболочки MIUI 5 от Xiaomi. Основной стиль - аккуратные, яркие иконки с закругленными углами. Этот набор является одним из самых крупных - в него входит 3 400 иконок.

Набор Miu тоже посвящен оболочке MIUI, но уже шестой версии. Местные иконки больше похожи на таковые из последних версий iOS - они более яркие и упрощенные. В наборе 2 700 иконок и 35 фонов для рабочего стола.

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

Слева направо: Lumos, Dekk, Belle UI

Иконки Lumos обладают простым и аккуратным дизайном с тенями и приглушенными цветами фонов. Из-за симпатичных теней многие иконки выглядят объемно и живо. В наборе 2 100 иконок.

Dekk - объемные иконки на темном фоне с цветными границами. Некоторые значки в наборе выглядят особенно красиво. В наборе 2 100 иконок.

Belle UI - всем известный набор иконок, которые выполнены в стиле таковых из почившей с миром операционной системы Symbian Belle. Квадратными эти иконки назвать сложно - их углы сильно закруглены. Значки выполнены в оригинальном стиле без намеков на материальный дизайн, что сейчас редкость. В наборе 1 385 иконок.

Слева направо: PINN, Soul, Numix Circle

Теперь пришло время иконок с округлым фоном. PINN - буйство «материального» дизайна в круглой обертке. Местные иконки упрощены, поставлены на объемную платформу с приглушенными цветами. Также присутствуют тени. В наборе 1 880 иконок, 24 фона для рабочего стола в высоком разрешении.

Набор иконок Soul выполнен в темном стиле с контрастом ярких оттенков и черного цвета. Очертания иконок ярко выделены черными линиями и бросаются в глаза в хорошем понимании. Набор насчитывает 2 300 иконок и 13 HD-обоев.

Numix Circle - еще одни минималистичные иконки, но уже не в материальном стиле. Значки ничем особо не выделяются - просто аккуратные, минималистичные иконки на ярком круглом фоне. В наборе довольно мало иконок - всего чуть больше 250.

Слева направо: Veno, Equinox, Aurora UI

Набор иконок Veno обладает необычным стилем: фон с четкой границей и темная цветовая гамма. Разработчики отмечают, что в их иконках большое внимание уделено деталям. В наборе более 3 262 иконок и 30 уникальных фоновых изображений.

Иконки из набора Equinox напоминают таковые из операционной системы Sailfish OS: черно-белая цветовая гамма и форма «капельки» на полупрозрачном фоне. В наборе более 3 700 иконок и 10 обоев для рабочего стола.

Aurora UI - яркие иконки в немного кислотных цветах. Сами иконки занимают практически весь фон, поэтому выглядят немного выпуклыми и привлекают внимание. Набор насчитывает 2 400 иконок и 74 фона для рабочего стола с поддержкой Muzei.

Слева направо: Una, Erased, Matterhorn

Набор Una похож на вышеупомянутый Soul: на фоне приглушенных отенков находятся значки черного цвета. Набор не самый оригинальный и яркий, но подойдет любителям простоты и темных цветов. Внутри более 2 700 иконок и 28 фонов для рабочего стола.

Иконки в наборе Erased представляют собой эдакие «штампы», где сам значок вырезан на черном матовом фоне. Иконки крупные - сами значки чуть больше, чем оригинальные. В наборе 1 750 уникальных иконок и 77 обоев в высоком разрешении.

Matterhorn - иконки с «агрессивным» материальным дизайном. Значки значительно упрощены, у многих нет фонов. Особенно симпатична местная иконка Angry Birds. В наборе более 420 иконок и 12 фонов для рабочего стола.

Слева направо: Stamped Black, Линии, Zarys

Stamped Black - это полностью черные иконки без фона, поэтому использовать их лучше с яркими обоями. Стоит отметить, что этот набор будет полезен для смартфонов и планшетов с экранами AMOLED. В наборе более 1 000 иконок.

Линии - локализированный на русский язык набор иконок, который еще минималистичнее предыдущего. Местные значки имеют только белые очертания. В отличие от Stamped Black, для Линейных иконок нужны темные обои, которые идут в комплекте с 3 200 значками.

Иконки Zarys являются гибридом двух предыдущих - черные очертания. Для этих значков также в наборе идут соответствующие яркие обои. Всего в Zarys более 2 040 иконок.

Слева направо: Cutboard, Moonshine

Откровенно красивые иконки CUTBOARD выполнены в объемном стиле без фона. Их действительно хочется потрогать, потому что нарисованы они аккуратно и таким образом, чтобы они казались максимально объемными. В наборе 2 000 иконок в высоком разрешении.

Популярные иконки Moonshine не оригинальны в плане внешнего вида - простой «материальный» дизайн, но более минималистичный и без фона поверх значков. В наборе более 925 иконок в вектором дизайне с 28 обоями, сделанными вручную.

Слева направо: Leaf, Tiny White, Simply 8-Bit

Иконки Leaf сложно назвать уж слишком необычными - просто они не квадратные и не круглые, да и фон у них есть. Leaf очень похожи на значки из Sailfish OS, поэтому они и представляют какую-то ценность. В наборе довольно мало иконок - всего чуть больше 200, а также есть 9 фоновых изображений.

Набор Tiny White подойдет тем, у кого слишком много иконок на рабочем столе и в меню. Иконки значительно уменьшены и выполнены в простом стиле - белые значки без фона. В наборе более 1 300 иконок.

Как можно догадаться по названию, иконки Simply 8-Bit сделаны в восьмибитном стиле. Любителям пиксельной графики и ретро-игр определенно понравится этот набор. Некоторые иконки здесь выглядят даже слегка забавно, например стандартный значок SMS. В наборе более 700 иконок, а также присутствуют тематические обои со старыми играми.
Многослойные иконки Rive имеют необычный стиль: некоторые слегка обрезаны, на другие нагромождены какие-то пиктограммы из самих приложений, а третьи выглядят совсем необычно (прямоугольник с пересекающей надписью). Дизайн определенно самобытный и интересный. В наборе более 1 000 иконок и 12 обоев без необходимости скачивания.

Иконки Glif по стилю напоминают предыдущие, но они больше подошли бы к какой-нибудь открытой операционной системе на базе Linux. Лично у меня такая ассоциация с иконками Glif. Значки получили мультяшный стиль и обрамлены черными линиями. Набор включает более 800 иконок и обои.

Забавные иконки Balloon тоже выполнены в мультяшной яркой рисовке, но здесь внутри каждого значка есть название приложения или игры, оформленное в комиксовом стиле. С иконками Balloon рекомендуется отключить названия приложений. В наборе более 450 иконок.

Слева направо: Glim Dark UI, Octagons UI

Glim Dark UI - минималистичный и контрастный набор иконок в разных стилях - с фоном и без. Здесь доминируют темные оттенки, сочетающиеся с приглушенными яркими цветов. Присутствует утилита для запроса иконки у разработчиков, если ее нет в наборе. В Glim Dark UI есть 3 700 иконок и более 150 обоев.

Закрывать этот обширный ТОП будет набор OctagonsUI с восьмигранными иконками в едином стиле и цветовой схеме (черный и красный). Также каждая иконка в этом наборе получила объемные тени и грани. В наборе 2 811 иконок и 10 HD-обоев для рабочего стола.

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

В качестве примера взял иконку из текущего проекта.
Сервис Rizzoma - это система коллаборации, альтернатива Google-wave.
В ходе работы над сайтом родилась идея сделать красивые иконки для каждого блока с преимуществами сервиса. Улитка символизирует и по сути своей является продвинутым символом @

Эскиз

Моделирование

Раковина

Слизень и турбина

Готовая модель

Визуализация

Сцена

Отрендеренная модель

Текстурирование

Рендер

Маски

Постобработка

Финал