Домой / Рецепты CSS

Рецепты CSS

Оригинальные hover-эффекты для кнопок на CSS3

Оригинальные hover-эффекты для кнопок на CSS3

Здравствуйте друзья! Сегодня я хочу обратить ваше внимание на набор оригинальных hover-эффектов для кнопок, созданных с помощью CSS3. Данные эффекты можно применить не только для обычных кнопок, ограничения существуют практически только в фантазии :). При проверке кроссбраузерности эффектов я нашел проблемы только с двумя эффектами в FireFox (в демо примере они на букве G и H). В остальных браузерах (IE11, Opera, Chrome, ... Читать далее »

Кнопки-переключатели на CSS

Кнопки-переключатели на CSS

Здравствуйте друзья! Предлагаю вашему вниманию интересный способ создания кнопок-переключателей без использования скриптов. Все кнопки-переключатели в данном примере созданы только с помощью CSS. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. HTML CSS Читать далее »

Hover-эффект для изображений с помощью CSS параметра :not(:hover)

Hover-эффект для изображений с помощью CSS параметра :not(:hover)

Приветствую друзья! В этой статье хочу обратить ваше внимание на создание оригинального hover-эффекта для изображений. Данный ховер-эффект затемняет все изображения кроме того, на которого наведен курсор мышки. Достичь такого эффекта удается с помощью CSS условия :not (:hover). С помощью условия :not (:hover) можно выделить не выбранные объекты. Например, если навести курсор на одно изображение вступает в силу свойство hover, и теперь можно задать ему необходимые параметры (к примеру ... Читать далее »

Загрузочные анимации CSS3

Загрузочные анимации CSS3

Здравствуйте друзья! Сегодня я предлагаю вашему вниманию набор кроссбраузерных загрузочных анимаций созданных с помощью CSS3. В демо примере вы увидите 10 оригинальных и достаточно интересных анимаций загрузчиков. Одной из особенностей есть то, что все анимации загрузчиков реализованы на чистом CSS3, без использования скриптов. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. HTML CSS Читать далее »

Стрелки с помощью CSS

Стрелки с помощью CSS

Предлагаю вашему вниманию пример создания CSS стрелок. Используя код ниже, вы можете создать с помощью CSS стрелки с направлением вверх, вниз, влево и вправо. Изменяя CSS свойство border-top-color в классе .arrow можно легко изменить цвет стрелок. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. HTML CSS Читать далее »

Эффект трансформации текста в дым (туман) с помощью CSS

Эффект трансформации текста в дым с помощью CSS

Предлагаю вашему вниманию пример создания эффекта превращения текстовой записи в дым (туман).  Эффект реализован с помощью CSS. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. HTML CSS Читать далее »

Псевдокласс nth-child. Использование псевдокласса в CSS3

Псевдокласс nth-child. Использование псевдокласса в CSS3

:nth-child это селектор CSS3, направленный на выбор младших элементов, в зависимости от заданных критериев. Что это значит? В двух словах, это означает, что мы можем стилизовать элементы в зависимости от того, где они находятся в DOM. Таблица результатов для различных значений псевдокласса Значение Номера элементов Описание 1 1 Первый элемент, является синонимом псевдокласса :first-child. 5 5 Пятый элемент. 2n 2, 4, ... Читать далее »

Бесконечная прокрутка фона сайта

Бесконечная прокрутка фона сайта

Бесконечная прокрутка изображения на фоне сайта, которое бесконечно повторяется прокручиваясь вверх. Эффект бесконечной прокрутки фона для сайта создан с помощью CSS. Изменить изображение фона можно указав ссылку в свойстве background класса overlay на другое изображение. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. HTML CSS Читать далее »

Цветовая анимация текста CSS

Цветовая анимация текста CSS

Эффект анимации плавной смены цвета текста реализован с использованием только каскадной таблицы стилей CSS. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. HTML CSS Читать далее »

Красивый hover-эффект для изображения (фото)

Красочный hover-эффект для изображения (фото)

Предлагаю вашему вниманию пример реализации красочного hover-эффекта при наведении мышкой на изображение. Эффект реализован с использованием только каскадной таблицы стилей CSS. HTML CSS Читать далее »