esCode.Ru

Категория: Интересные решения
Сортировать материалы по:
Растянуть background на весь экран с помощью css, jquery

Растянуть background на весь экран с помощью css, jquery

Нашей целью будет реализовать фон (background) сайта, который будет покрывать все рабочее пространство окна браузера. Мы будем делать это с помощью разных техник используя CSS3, чистый CSS, jQuery.

Прикольный ховер-эффект для изображения на CSS

Прикольный ховер-эффект для изображения на CSS

Здравствуйте друзья! Сегодня я предлагаю вашему внимаю пример создания hover-эффекта для изображений.
В данном примере при наведении курсором мышки изображение затемняется серым цветом, и при этом выплывает сверху на середину изображения иконка лупы.

Скрипт перехода от нуля до заданного числа

Скрипт перехода от нуля до заданного числа

Предлагаю вашему вниманию пример реализации скрипта, который заполняет значение от нуля до заданного числа. Изменяя в скрипте последнюю строчку можно легко задать конечное значение (число которое получим в результате) и длительность заполнения (время перехода от нуля до заданного значения).

Эффект пульсации для кнопок (Android L Ripple Effect)

Эффект пульсации для кнопок (Android L Ripple Effect)

Пример создания эффекта пульсации для кнопок (Android L Ripple Effect).
Эффект создается с помощью CSS3 и JS.

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

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

Здравствуйте друзья! Сегодня я хочу обратить ваше внимание на набор оригинальных hover-эффектов для кнопок, созданных с помощью CSS3. Данные эффекты можно применить не только для обычных кнопок, ограничения существуют практически только в фантазии :).

Эффект вращающегося куба

Эффект вращающегося куба

Сделаем эффект вращающегося куба, когда первоначально пользователь видит изображение, например какого-нибудь рекламируемого продукта, а при наведении курсора происходит анимированный показ его описания или другой полезной информации.

Каждому полу свой "NoAvatar"

Каждому полу свой "NoAvatar"

На известном всем сайте yraaa.ru, на форуме пользователь задал интересный вопрос, "А как сделать каждому полу свой noavatar". Казалось бы, очень простой код построенный на условных операторах. И мне стало самому интересно реализация данного вопроса.

Анимация display:none

Анимация display:none

Интересный пример создания блоков, каждый из которых исчезает после нажатия по нему. Использование данного примера ограничивается только фантазией, но мне кажется что с помощью таких исчезающих блоков можно сделать простенькую рекламу при входе на сайт.

Всплывающее и распадающееся на кусочки модальное (popup) окно

Всплывающее и распадающееся на кусочки модальное (popup) окно

Отличный пример создания оригинального и необычного модального окна для вашего сайта. Данный пример реализован с помощью CSS, jQuery и библиотеки TweenMax.min.js.

CSS3 медиа запросы

CSS3 медиа запросы

CSS3 медиа запросы позволяют задать набор стилей, которые будут применяться для заданных типов носителей и устройств.

Медиа запросы проверяют такие свойства, как ширина и высота окна браузера, ширина и высота экрана устройства, ориентация планшета или телефона (альбомная или портретная) и много другое, но чаще всего проверяется ширина области просмотра и ширина экрана устройства.

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

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

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

Прямая ссылка на аватар пользователя для uCoz

Прямая ссылка на аватар пользователя для uCoz

Простой способ получить кодом прямую ссылку на аватар пользователя из $_AVATAR$. Данный материал не позиционируется как интересное дополнение, понадобится это только «прошаренным» пользователям uCoz.