Подборка визуальных эффектов с минимум 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

Сайт с хорошими паками / сетами иконок, есть как довольно стандартные, так и весьма интересные:

pic1

Получить иконку можно в разных форматах:

pic1

Также присутствует поиск по ключевым словам.

Ссылка на проект: IconDuck.


Категории: Web, HTML, CSS, -Памятка-
Пометки: fontawesome

Демонстрация простого трюка, который позволяет сделать диалоговое / модельное окно на чистом CSS.

pic1


Категории: Web, HTML, CSS, -Памятка-
Пометки: CSS Модальное окно, CSS диалоговое окно

Многие кто только начинает верстать с использованием css flexbox зачастую сталкиваются со "странным поведением блоков", в частности с тем, что justify-content: space-between; не работает


Категории: CSS

Данный пример основан на css свойстве position: sticky; и так листать можно любые элементы.

Повороты (наклоны) изображений сделаны для визуального оформления и получающаяся куча результат нехитрых манипуляций, код ниже.

pic1


Категории: Web, HTML, CSS
Яндекс.Метрика