В этом уроке посмотрим, как сделать простой эффект размытости для тексто содержащих элементов. Идея заключается в том, что у нас есть ряд текстовых контейнеров, которые будут размыты и уменьшены, как только курсор мыши окажется над областью в которой они размещены, а элемент на который наведен курсор увеличится, т.е. внимание сфокусируется именно на нём.
Очень много интересных вещей можно сделать благодаря свойствам, которые привнес CSS3. В сегодняшнем уроке по экспериментируем с текстовыми тенями и переходами, для достижения эффекта размытости при наведении на меню курсора мыши. Основная идея заключается в том, чтобы размыть другие элементы навигации, акцентируя внимание на том пункте, на который наводим мышкой.
В статье посмотрим как можно сделать динамический (изменяющийся) 3D текст в зависимости от положения курсора мыши.
А вот ещё очень интересный ресурс, настроек конечно немного, но и тех, что есть предостаточно. Легко и просто создаем CSS3 тень для любого текста. Шрифт можно выбрать из выпадающего списка, который впрочем можно изменить на свой в полученном коде.
В этом уроке сделаем объёмную CSS3 кнопочку с визуальным эффектом нажатия на неё.
Эффект падающей тени можно реализовать используя только CSS3 без картинок с помощью псевдо-элементов. Проверку прошли следующие браузеры: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+.
В этом уроке мы красиво оформим форму для поиска. Сделаем её с закругленными краями, с градиентом и внутренней тенью для поля ввода. Такой эффект достигается только в CSS3 поддерживаемых браузерах.
Создание тени у текста, совместимой с iexplorer.