Тексты, ссылки и кнопки

Простые решения по работе с текстами и ссылками

Креативный эффект для секции с текстом

Двигающаяся по секции окружность, в которой меняется цвет текста

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

Опубликовано: 21.10.2022
Рубрики: Секции, Тексты, ссылки и кнопки
Метки: CSS, SVG
Нет комментариев
1032 просмотра

Глассморфные кнопки

Глассморфные (стекломорфные) кнопки с ховер-эффектом

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

Опубликовано: 09.09.2022 / Обновлено: 25.10.2022
Рубрики: Тексты, ссылки и кнопки
Метки: CSS, Glassmorphism
Нет комментариев
1488 просмотров

Нестандартная защита от копирования

Подмена в копируемом тексте кириллических букв на латинские.

Чтобы защитить контент от копирования, обычно блокируется правая кнопка мышки, некоторые клавиши и запрещается выделение текста. Способ хороший, но при желании все равно можно открыть HTML-код и скопировать нужную информацию.

Данный способ ничего не запрещает, а подменяет копируемый текст.

Опубликовано: 27.03.2022 / Обновлено: 01.09.2022
Рубрики: Тексты, ссылки и кнопки
Метки: JavaScript, Авторское
8 комментариев к записи Нестандартная защита от копирования
2303 просмотра

Оформление текста в SVG

Несколько вариантов оформления текста на основе векторной графики SVG

SVG тег <text> определяет графический элемент, содержащий текст. Как и к любому другому, к нему можно применить градиент, шаблон, окантовку, маску или фильтр.

Опубликовано: 22.10.2021
Рубрики: Тексты, ссылки и кнопки
Метки: CSS, SVG, Сборники
Нет комментариев
4073 просмотра

Размер шрифта в зависимости от ширины блока

Установка размера текста и его позиции в зависимости от ширины блока

Два примера установки размера шрифта и его позиции в блоке относительно его ширины. Один на JS, если блок не во всю ширину экрана, другой на CSS, если во всю.