Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <p>Иногда хочется добавить изюминку к своему проекту, и в этом вам поможет один из этих четырех методов CSS.</p>

2 <h2>Содержание</h2>

3 <ul><li><a>Свойство background-clip сделает текст цветастее в стиле 90 ых</a></li>

4 <li><a>Свойство clip-path, отсечение картинок</a></li>

5 <li><a>Все дело в деталях - измените цвет выделения текста.</a></li>

6 <li><a>Добавьте фильтры к изображениям.</a></li>

7 </ul><h2>Свойство background-clip сделает текст цветастее в стиле 90 ых</h2>

8 <p>Вы когда-нибудь хотели применить градиент к тексту в CSS? Этого легко добиться с помощью свойства background-clip.</p>

9 <p>Применим цвет фона для нашего текста, а затем используем значение text для свойства background-clip, установим цвет текста на прозрачный. Вот как это сделать, пример ниже.</p>

10 <p>И вуаля, WordArt в стиле 90-х готов!</p>

11 <h2>Свойство clip-path, отсечение картинок</h2>

12 <p>Если вам нравится экспериментировать с дизайном, вы можете попробовать свойство clip-path - это свойство создает область отсечения, которая устанавливает, какая часть элемента должна отображаться.</p>

13 <p>Как работает это свойство? Первые два числа перед запятой - координаты X и Y (горизонтальная и вертикальная ось). Рассмотрим наше исходное прямоугольное изображение. Путь (начиная с правого верхнего угла, где X = 0 и Y = 0) будет выглядеть так:(0 0, 100% 0, 100% 100%, 0 100%).</p>

14 <p>Теперь вернемся к нашему простому многоугольнику - первые координаты начинаются точно в середине оси X, поэтому первая пара - X50% и Y0. Оттуда мы хотим провести линию к следующей точке, которая находится в середине оси Y, поэтому мы получаем X100% и Y50%. Следующая линия идет от этой точки к X50% и Y100%, и так далее. Поначалу сложно осознать это, поэтому лучше всего попробовать это самому и немного поэкспериментировать!</p>

15 <h2>Все дело в деталях - измените цвет выделения текста.</h2>

16 <p>Это простой способ, но он может добавить дополнительный штрих в ваш дизайн. Чтобы изменить цвет выделенного текста, используйте: selection псевдоэлемент, который переопределит настройки браузера и применит выбранный вами цвет.</p>

17 <h2>Добавьте фильтры к изображениям.</h2>

18 <p>Благодаря filter в свойстве CSS вы можете добавлять графические эффекты, такие как размытие или изменение цвета, к элементу.</p>

19 <p>Ниже вы можете увидеть четыре изображения. Первое изображение является оригиналом без применения фильтров. Второй - это тот же самый рисунок с эффектом размытия на нем, затем идет эффект сепии и эффект насыщения на последнем. Довольно круто, да?</p>

20 <p>Всем спасибо за внимание :)</p>