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

Ниже будет вариант оформления рамок блоков / изображений с использованием шума через svg filter.

pic1


Категории: CSS

Уже есть небольшая памятка о том как стилизовать checkbox спрайтами, но я решил продемонстрировать вариант, когда поле ввода находиться внутри "этикетки" (тега label).


Категории: Web, HTML, CSS

Небольшая памятка о том как стилизовать checkbox, если никаких особых анимаций и элементов оформления не требуется.


Категории: Web, HTML, CSS
Пометки: Кастомный чекбокс, оформление checkbox, checkbox css, стилизировать checkbox

Красивая анимация зачеркивая пунктов чеклиста на css и javascript

pic1

и темная тема:

pic1


Категории: JavaScript, HTML, CSS

Подборка визуальных эффектов с минимум CSS кода. Реакции на наведение / клик, ввод текста.


Категории: Web, CSS

Красивое оформление - обрезание картинки на CSS

При наведении круг немного увеличивается, а картинка всплывает (приближается к нам), сделано на чистом CSS.

pic1

Сразу смотрим демо.


Категории: Web, CSS

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

Javascript вариаций я встречал много, но ниже приведу вараинт, сделанный на чистом CSS


Категории: CSS

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

Столкнулся с очень навороченным логотипом в формате svg, который никак не хотел адаптироваться. Изменение же width и hight, через сss, обрезало у него края.


Категории: Web, HTML, CSS
Пометки: Как сделать SVG адаптивным

Пример создания сетки (набора плиток) на CSS grid. Мозаика выглядит интересно, с учетом использования grid-row: span 2; и grid-column: span 2; для объединения ячеек.

pic1


Категории: CSS

pic1

Один из тех случаев, в которых лучше один раз увидеть, чем много раз услышать.

По сути это неоновая ободка текста (text-shadow) и эффект мерцания через @keyframes


Категории: Web, CSS
Пометки: css Neon Glowing Text
Яндекс.Метрика