Категория: Интересные решения
Сортировать материалы по:
Прикольный ховер-эффект для изображения на CSS
Здравствуйте друзья! Сегодня я предлагаю вашему внимаю пример создания hover-эффекта для изображений.
В данном примере при наведении курсором мышки изображение затемняется серым цветом, и при этом выплывает сверху на середину изображения иконка лупы.
Скрипт перехода от нуля до заданного числа
Предлагаю вашему вниманию пример реализации скрипта, который заполняет значение от нуля до заданного числа. Изменяя в скрипте последнюю строчку можно легко задать конечное значение (число которое получим в результате) и длительность заполнения (время перехода от нуля до заданного значения).
Оригинальные hover-эффекты для кнопок на CSS3
Здравствуйте друзья! Сегодня я хочу обратить ваше внимание на набор оригинальных hover-эффектов для кнопок, созданных с помощью CSS3. Данные эффекты можно применить не только для обычных кнопок, ограничения существуют практически только в фантазии :).
Эффект вращающегося куба
Сделаем эффект вращающегося куба, когда первоначально пользователь видит изображение, например какого-нибудь рекламируемого продукта, а при наведении курсора происходит анимированный показ его описания или другой полезной информации.
Каждому полу свой "NoAvatar"
На известном всем сайте yraaa.ru, на форуме пользователь задал интересный вопрос, "А как сделать каждому полу свой noavatar". Казалось бы, очень простой код построенный на условных операторах. И мне стало самому интересно реализация данного вопроса.
Анимация display:none
Интересный пример создания блоков, каждый из которых исчезает после нажатия по нему. Использование данного примера ограничивается только фантазией, но мне кажется что с помощью таких исчезающих блоков можно сделать простенькую рекламу при входе на сайт.
CSS3 медиа запросы
CSS3 медиа запросы позволяют задать набор стилей, которые будут применяться для заданных типов носителей и устройств.
Медиа запросы проверяют такие свойства, как ширина и высота окна браузера, ширина и высота экрана устройства, ориентация планшета или телефона (альбомная или портретная) и много другое, но чаще всего проверяется ширина области просмотра и ширина экрана устройства.
Стрелки с помощью CSS
Предлагаю вашему вниманию пример создания CSS стрелок. Используя код ниже, вы можете создать с помощью CSS стрелки с направлением вверх, вниз, влево и вправо. Изменяя CSS свойство border-top-color в классе .arrow можно легко изменить цвет стрелок.
Прямая ссылка на аватар пользователя для uCoz
Простой способ получить кодом прямую ссылку на аватар пользователя из $_AVATAR$. Данный материал не позиционируется как интересное дополнение, понадобится это только «прошаренным» пользователям uCoz.