Домой / Рецепты CSS (страница 3)

Рецепты CSS

Hover-эффекты для кнопок на CSS

Hover эффекты для кнопок на CSS

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

Переключатель в стиле iOS на CSS

Переключатель в стиле iOS на CSS

В данном примере вы найдете исходный код и демо работы кнопок-переключателей в стиле iOS реализованных на чистом CSS. Думаю все знают, что iOS (до 24 июня 2010 года — iPhone OS) — мобильная операционная система, разрабатываемая и выпускаемая американской компанией Apple. HTML CSS Читать далее »

Набор бумажных 3D кнопок CSS

Набор бумажных 3D кнопок CSS

Набор из 8 супер эффектов тени для кнопок. Бумажные кнопки с 3D эффектом реализованы на чистом CSS, а эффекты появляются при наведении на кнопку (hover effect). Используя этот набор у вас есть отличная возможность эстетически усовершенствовать любой ваш проект. HTML CSS Читать далее »

Всплывающая подсказка (tooltip) на CSS

Всплывающая подсказка (tooltip) на CSS

В данном примере реализована отличная всплывающая подсказка (tooltip) на CSS. Благодаря простым CSS свойствам создание всплывающего эффекта подсказки при наведении достаточно простое, но если у вас будут вопросы, задавайте их в комментариях. HTML CSS Читать далее »

Эффект размытия для фото CSS (image hover effect)

Эффект размытия для фото CSS (image hover effect)

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

Эффект размытия (blur effect) для оповещения о спойлере

Эффект размытия (blur) для оповещения о спойлере

Крутая идея оповещения о спойлере в тексте, которая реализована благодаря эффекту размытия. Текст будет оставаться размыт до тех пор, пока пользователь не наведет мышкой на тект оповещения о спойлере. Эффект размытия текста реализован с помощью CSS. HTML CSS Читать далее »

Эффект размытия текста с помощью CSS

Эффект размытия текста с помощью CSS

Эффект размытия текста с помощью CSS. В этом примере для текста эффект работает таким образом: на класс .txt задаем свойство text-shadow: #fff 0 0 60px;, что дает видимость размытия текста. На #box:hover .txt (то что мы получим при наведении) задаем значение  text-shadow: #fff 0 0 5px;, которое уменьшает эффект тени на тексте, что в свою очередь делает его менее размытым и более видимым. HTML CSS Читать далее »