css

CSS это может?

Наши соц. сети: instagram, fb, tg Список удивительных ништячков, которые может CSS!

1. box-decoration-break

Это свойство CSS определяет, как должны отображаться фрагменты элемента при разбивании на несколько строк, столбцов или страниц.

2. attr()

Мы можем получить значения выбранного элемента в CSS с помощью attr(). Этот метод может быть очень полезен когда твоя цель получить доступ к атрибуту.

3. backface-visibility

Это свойство CSS устанавливает, будет ли задняя сторона элемента видимой при обращении к пользователю. Думаешь о флип-интерфейсе карты?

4. conic-gradient

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

5. filter

Кому нужны эффекты фильтра фотошопа, когда у тебя есть фильтры CSS. 🙃 Функции фильтра применяют графические изменения к внешнему виду входного изображения. Мы можем добиться следующих эффектов: blur, brightness, contrast, grayscale, hue-rotate, opacity, invert, sepia, saturate, drop-shadow.

drop-shadow довольно удивительное свойство. Оно позволяет тебе применять тени для входного изображения.

6. mix-blend-mode

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

7. first-letter

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

8. shape-outside

Это свойство CSS обеспечивает способ настройки обтекания смежного встроенного содержимого вокруг сложных объектов, а не простых прямоугольных блоков. Открой пример в другой вкладке и попробуй изменить ширину окна и обрати внимание, как текст обтекает изображение.

9. writing-mode

Это свойство CSS устанавливает, расположены ли строки текста горизонтально или вертикально. Мы можем получить такие значения: horizontal-tb - содержимое обтекает горизонтально слева направо, вертикально сверху вниз. vertical-lr - содержимое обтекает горизонтально слева направо, вертикально сверху вниз. vertical-rl - содержимое обтекает горизонтально справа налево, вертикально сверху вниз. Смотри пример, чтобы увидеть его в действии.

10. Добавление градиента к тексту

Это достигается с помощью комбинации свойств -webkit-background-clip: text и -webkit-text-fill-color: transparent свойств CSS.

11. Плавная прокрутка

scroll-snap-type свойств CSS устанавливает способ применения точек привязки к контейнеру прокрутки. В этом примере показана вертикальная прокрутка (y) со значением mandatory. Документы MDN отлично объясняют, как использовать другие значения, такие как proximity и горизонтальная прокрутка (x). Это всего лишь несколько интересных плюшек, которые может CSS. Возможности безграничны!

Ну что дружище, если тебе понравилась статья, обязательно дай нам знать, чтобы мы продолжали создавать для тебя контент🖐