9 полезных CSS-трюков, которые вы должны знать

Узнай что-то новое о CSS, он тебе понравится, и все станет интереснее.

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

1 — Цвет выделения текста

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

Цвет выделения текста

Используйте selection псевдоэлемент, чтобы придать тексту на ваших веб-сайтах индивидуальный подход

Цвет выделения текста — синтаксис CSS

2 — Буквицы

Чтобы статья / газета выглядела как профессиональная, лучше всего использовать буквицу для первой буквы вашего текста. Буквица — это та большая заглавная буква, вокруг которой обернут текст.

Пример буквицы

Используйте first-letter псевдо-элемент , чтобы украсить вашу первую букву, нет необходимости использования диапазона с именем .dropcap класса.

Буквицы — синтаксис CSS

3 — Плавная прокрутка

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

Пример плавной прокрутки

Вы можете использовать свойство CSS в качестве селектора, чтобы обеспечить плавную прокрутку по всей HTML-странице .scroll-behavior html

Плавная прокрутка — синтаксис CSS

4 — Ввод цвета каретки

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

Пример пользовательского ввода цвета курсора

Вам нужно только использовать caret-color свойство для этого элемента!

Цвет курсора ввода — синтаксис CSS

5 — Падающая тень

сделайте намного лучший эффект тени для прозрачных изображений с помощью Drop shadow. Так ваша работа будет выглядеть великолепно.

Пример падающей тени

Вот как вы должны это делать.

Drop Shadow — синтаксис CSS

6 — Места-Предметы

Центрирование вашего элемента div иногда может быть сложной задачей. Вы можете центрировать любой div с помощью пары строк CSS.

Центрировать Div с элементами размещения

Не забудьте установить display:grid для родительского элемента, затем используйте place-itemsсвойство.

Центрирование Div с элементами размещения — синтаксис CSS

7 — Пользовательская полоса прокрутки

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

Пример настраиваемой полосы прокрутки

Мы делаем только это с помощью CSS, если вы хотите , чтобы получить полную поддержку на кросс — браузеров , то лучше использовать библиотеки JavaScript для скроллинга.

CSS Way для настраиваемой полосы прокрутки

8 — Отключить выбор пользователя

Иногда у пользователя не должно быть возможности выбрать что-то на веб-странице, при правильном использовании это может придать значение этому элементу.

Пример отключения выбора пользователя

Это так просто!

Отключить синтаксис CSS для выбора пользователя

9 — Вертикальный текст

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

Пример вертикального текста

С этими двумя свойствами CSS вы получите то, что хотите!

Вертикальный текстовый синтаксис CSS — Amisiy

Заключение

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

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *