Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Иконки галерея: Галерея – Бесплатные иконки: интерфейс

Содержание

Справочный центр — База знаний — Редактор — Обложки и иконки

Главное в статье

Обложки  Галерея Градиенты Загрузка Ссылка Unsplash Иконки Цвета & Иконки  Эмодзи  Загрузка Ссылка

Чтобы быстро ориентироваться в большом количестве документов в Базе знаний ты можешь присваивать документам обложки и иконки. Это поможет тебе выбрать необходимый документ из списка не читая название. 

Обложки 

Обложки созданы для отражения сущности документа или просто его идентификации. Настроить обложки ты можешь нажав на кнопку “Добавить обложку”. Тебе высветится окно с разными вариантами загрузки обложки.

Галерея

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

Градиенты

Во вкладке градиенты представлены фирменные градиенты WEEEK

Загрузка

Чтобы загрузить картинку — перетащи ее в поле для загрузки или нажми “Загрузить картинку”. 

Ссылка

Здесь ты можешь вставить ссылку на картинку и она отобразится на обложке

Unsplash

В WEEEK также подключен поиск по Unsplash. Введи в поисковую строку слово искомой темы и выбери подходящую картинку. 

Иконки

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

Чтобы добавить иконки нажми на кнопку “Добавить иконку”. Тебе высветится окно с разными вариантами загрузки иконки.

Цвета & Иконки 

Здесь ты можешь выбрать:

  • цвета для фона
  • фирменные иконки
  • аватарки от партнеров художников (ты можешь перейти на страницу художника, кликнув на имя в заголовке)

Эмодзи 

Выбери подходящий для документа эмодзи!

Загрузка

Чтобы загрузить картинку — перетащи ее в поле для загрузки или нажми “Загрузить картинку”.  

Внимание:Максимальный размер файла — 5МБ.

Ссылка

Здесь ты можешь вставить ссылку на картинку и она отобразится на обложке

Внимание:После выбора иконки нажми “Сохранить”

Спроси нас

У тебя остались вопросы?

Возможно, какую-то информацию мы ещё не добавили. Если тебе что-то не понятно, можешь задать вопрос через форму.

Галерея CSS иконок для frontend-разработчика

Мой блог содержит заметки о различных веб-технологиях, как клиентских, так и серверных. Здесь будут раскрыты вопросы html-верстки, программирования на javaScript и jQuery,разработки на PHP. Не останутся без внимания популярные системы управления сайтом «1С-Битрикс», Joomla и другие. О работе с ними, я также буду писать.

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

В своем блоге я собираюсь публиковать статьи о современных веб-технологиях (HTML5, CSS3 и других). Если в процессе работы над проектами я открываю для себя «свежее» решение какой-либо задачи, я записываю сюда информацию об этом, что позволяет мне при необходимости применять полученные знания в будущем.

Надеюсь информация будет полезна для посетителей.

 

Оцените материал

  • 1
  • 2
  • 3
  • 4
  • 5

(2 голосов)

Дизайнер Вентинг Чжан из Adode создал интересное веб-приложение для генерации простых CSS-иконок. У него простое название “CSS Icon” и, возможно, это одно из самых крутых генераторов иконок для фронтенд-разработчиков.

Этот полностью бесплатный проект с открытым исходным кодом на GitHub, так что вы можете свободно загружать и использовать его в любом коде.

Эти иконки не имеют CSS-зависимостей и не требуют каких-то специальных функций браузера. На первый взгляд может показаться, что иконки созданы на SVG, но на самом деле это просто div’ы.

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

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

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

Кстати этот значок для копирования также построен с использованием чистого CSS-кода Вентинга.

Чтобы изменить цвет любой иконки, найдите в ее основном классе свойство color.

Обновление значения этого свойства также изменит цвет у всех остальных иконок.

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

Посетите домашнюю страницу CSS Icon, чтобы увидеть больше примеров и скопировать или отредактировать код источника.

Вы также можете проверить каждый значок отдельно в CodePen, если вы хотите поиграть с кодом источника в вашем браузере.

Оригинал статьи: This Gallery of Pure CSS Icons is What All Frontend Developers Want

Перевод: Земсков Матвей

Другие материалы в этой категории: « Создание адаптивной сетки, используя всего 3 свойства CSS Как создать круглое изображение средствами CSS »

Наверх

Категории блога

  • Битрикс (40)
  • HTML-верстка (54)
  • Joomla (18)
  • JavaScript, jQuery (26)
  • PHP (10)
  • Базы данных (5)
  • Разное (23)

Полезное