Разное

Галерея css: Как сделать Адаптивную галерею с слайд-шоу

12.06.2023

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

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

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

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

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

 

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

  • 1
  • 2
  • 3
  • 4
  • 5

(3 голосов)

Дизайнер Вентинг Чжан из 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)

Полезное