Рецепты CSS

Данная проблема отображения input type=number была замечена мной в браузере Firefox. Сама проблема состоит в том, что в браузере Firefox некорректно отображается элемент input с типом number. Решение оказалось очень простое, необходимо добавить в стили CSS код который вы видите ниже ниже: Проблема отображения: После решения проблемы: Надеюсь вам не пригодится! Но если и возникнет проблема, то решение вы уже ... Читать далее »

В этой статье мы на примере рассмотрим использование 11 CSS фильтров, а именно: -webkit-filter: blur — Добавляет эффект размытия изображения. Значение задается в пикселях (px). -webkit-filter: grayscale — Конвертирует изображения в черно-белый цвет. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1). -webkit-filter: drop-shadow — Создает тень также как и CSS свойство box-shadow, но только фильтр имеет поддержку аппаратного ... Читать далее »

Пример использования CSS фильтра размытия -webkit-filter: blur.  Фильтр blur устанавливает на фото эффект размытия элемента, словно фотография или изображение находится не в фокусе. Посмотреть какие браузеры поддерживают данный фильтр размытия можно на сайте caniuse.com: HTML CSS Читать далее »

Отличный и в тоже время оригинальный пример создания сайта из вкладок (табов) с помощью CSS. Такой одностраничный сайт подойдет для сайта-визитки или для простого информационного сайта. Имеет адаптивный дизайн.   HTML CSS Читать далее »

Оригинальный пример hover-эффекта, который отлично подойдет для использования в меню. Цветовое решение и скорость эффекта можно легко изменить. Hover-эффект реализован с помощью CSS. Если есть вопросы, задавайте в комментариях. HTML CSS Читать далее »

Примеры создания hover-эффектов для текста. Все превращения созданы с помощью CSS свойств text-shadow или box-shadow.   HTML CSS Читать далее »

Очень оригинальный и интересный пример создание кнопок с эффектом вращения границ при наведении (hover-effect). Изменяя CSS свойство animation можно любому из примеров уменьшать или увеличивать скорость вращения.   HTML CSS Читать далее »

Подписи к изображениям с различными визуальными эффектами реализованы с помощью CSS. 6 различных вариантов которые подходят для реализации под мобильные устройства. Для просмотра подписи необходимо навести мышкой на изображение. HTML CSS Читать далее »

Отличный пример реализации двухсторонней визитной карточки. Первая сторона видна изначально, а вторая с контактной информацией видна после наведения на визитку (hover-эффект). Данный пример визитки для веб-разработчика реализован с помощью CSS.   HTML CSS Читать далее »

В данном примере показан пример создания фона с эффектом анимации с помощью CSS. Изменяя свойство animation можно уменьшать и увеличивать скорость анимации облаков.   CSS Читать далее »