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

1. Граница и фон CSS.
   Один простой метод — использовать CSS для создания формы звезды, используя комбинацию границ и цветов фона. Регулируя ширину границы и прозрачность фона, вы можете добиться эффекта пустоты. Вот пример:

.star {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid #ffcc00;
}

2. Библиотека значков Font Awesome.
   Если вы предпочитаете использовать готовые значки, Font Awesome — популярный выбор. Он предлагает широкий выбор значков, включая значки звездочек с различными стилями и вариантами границ. Вы можете легко включить эти значки в свой проект, добавив библиотеку Font Awesome и используя соответствующий класс. Вот пример:

<i class="fas fa-star"></i>

3. Значки SVG.
   Значки масштабируемой векторной графики (SVG) предоставляют безграничные возможности настройки. Вы можете создавать значки звездочек с полыми эффектами, используя SVG и CSS. Вот базовый пример SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" stroke="#ffcc00">
  <path d="M12 2l3.09 6.31 6.91.99-5 4.85 1.18 6.88L12 17.26l-6.18 3.67 1.18-6.88-5-4.85 6.91-.99z"/>
</svg>

4. Псевдоэлементы CSS.
   Другой творческий прием предполагает использование псевдоэлементов CSS (::before и ::after) для создания значков звездочек. Управляя размером, расположением и границами этих элементов, вы можете добиться стильного эффекта пустоты. Вот пример:

.star::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  border: 10px solid transparent;
  border-bottom-color: #ffcc00;
}
.star::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid #ffcc00;
}

5. Градиенты CSS.
   Использование градиентов CSS может добавить глубину и визуальный интерес к значкам звездочек. Применив градиентный фон и настроив свойства границы, вы можете добиться стильного эффекта пустоты. Вот пример:

.star {
  width: 40px;
  height: 40px;
  border: 5px solid #ffcc00;
  background: linear-gradient(45deg, transparent 50%, #ffcc00 50%);
}

6. Иконочные шрифты.
   Иконочные шрифты, такие как IcoMoon или Material Icons, представляют собой обширную коллекцию масштабируемых значков. В этих библиотеках значков вы можете найти значки звездочек с различными вариантами рамок и полостей. Просто включите файлы шрифтов и используйте соответствующее имя класса для отображения нужного значка. Вот пример:

<i class="material-icons">star_border</i>

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

.star {
  width: 50px;
  height: 50px;
  background: #ffcc00;
  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

8.CSS Тени блоков:
Добавление теней блоков к значкам звездочек может создать трехмерный эффект. Регулируя свойства тени, вы можете добиться полого вида. Вот пример:

.star {
  width: 50px;
  height: 50px;
  background: #ffcc00;
  box-shadow: inset 0 0 0 10px transparent, 0 0 0 5px #ffcc00;
}

9. CSS-переходы.
   Если вы хотите добавить динамический эффект к значкам звездочек, вы можете использовать CSS-переходы. Анимируя ширину границы и прозрачность фона, вы можете создать плавный переход от сплошной звезды к полой. Вот пример:

.star {
  width: 50px;
  height: 50px;
  border: 10px solid #ffcc00;
  background: transparent;
  transition: border-width 0.3s, background 0.3s;
}
.star:hover {
  border-width: 0px;
  background: #ffcc00;
}

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

:root {
  --star-border-color: #ffcc00;
  --star-background-color: transparent;
}
.star {
  width: 50px;
  height: 50px;
  border: 10px solid var(--star-border-color);
  background: var(--star-background-color);
}

В этой статье мы рассмотрели 10 различных методов создания стильных значков звездочек с эффектами рамки и полых закладок. Независимо от того, решите ли вы использовать свойства CSS, библиотеки значков, SVG или другие методы, эти методы дадут вам возможность гибко настраивать значки в соответствии с вашими потребностями в дизайне. Так что смело экспериментируйте с этими приемами, чтобы добавить элегантности и визуальной привлекательности своим веб-проектам!