Домой / Записи Автора: Александр (страница 11)

Записи Автора: Александр

Всплывающие модальные окна (popup) с помощью CSS и JS

Всплывающие модальные окна (popup) с помощью CSS и JS

Давайте рассмотрим создание модальных всплывающих окон, которые в народе еще называются popup-окна. О создании всплывающих (модальных) окон в WordPress, мы говорили в отдельном уроке. В данном примере модальные окна появляются при клике на кнопку (текст) и исчезают при нажатии в любую область мимо модального окна, или при клике на ключевое слово. Изменяя значения в скрипте fadeIn вы можете увеличить или уменьшить скорость открытия всплывающего модального ... Читать далее »

Модальное окно с помощью CSS и jQuery

Модальное окно с помощью CSS и jQuery

Предлагаю вашему вниманию пример создания модального окна с помощью CSS и jQuery. Модальное окно с сообщением появляется сразу после загрузки страницы. Для закрытия окна необходимо нажать на клавиатуре клавишу Esc или кликнуть по кнопке размещенной в сообщении модального (popup) окна. Изменяя в скрипте значение можно назначить любую клавишу (или несколько клавиш) на клавиатуре для закрытия модального окна. Виртуальные коды клавиш можно узнать тут. Для работы необходимо обязательно подключить библиотеку jQuery. ... Читать далее »

Плавная навигация (прокрутка) страницы до якоря

Плавная навигация (прокрутка) страницы до якоря

В этом примере я хочу показать вам как создать плавную навигацию (прокрутку) страницы до якоря для вашего сайта. При нажатии на любой из пунктов меню происходит плавный переход без перезагрузки и обновления страницы к заданному блоку или элементу. Такой скролл называют еще «go to». Данный пример вы легко можете применить при создании своего сайта или для улучшения уже существующего проекта. Для ... Читать далее »

Фильтрация элементов с помощью jQuery

Фильтрация элементов с помощью jQuery

В примере реализован jQuery фильтр, который можно использовать для сортировки/фильтрации практически любых элементов (включая изображения, списки, фото, и т.д.). Возможности для применения данного фильтра достаточно широкие. Сортировка элементов создана с помощью простого скрипта, для работы которого необходимо обязательно подключить библиотеку jQuery. Если у вас есть вопросы, задавайте в комментариях. HTML CSS JS Читать далее »

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

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

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

Одностраничный сайт-портфолио с помощью CSS и JS

Одностраничный сайт-портфолио с помощью CSS и JS

Предлагаю вашему вниманию пример создания портфолио (галереи) с помощью CSS и JS. В части кода ниже вы видите пример добавления книги  A Clockwork Orange. Вначале в машинописный апострофах необходимо указать ссылку на изображение книги, далее через запятую и также в апострофах указываем название книги, имя автора и описание. Для работы необходимо обязательно подключить библиотеку jQuery. Данный пример можно использовать как готовое решение для одностраничного ... Читать далее »

Убираем баг отображения Input type=number

Убираем баг отображения Input type=number

Данная проблема отображения input type=number была замечена мной в браузере Firefox. Сама проблема состоит в том, что в браузере Firefox некорректно отображается элемент input с типом number. Решение оказалось очень простое, необходимо добавить в стили CSS код который вы видите ниже ниже: Проблема отображения: После решения проблемы: Надеюсь вам не пригодится! Но если и возникнет проблема, то решение вы уже ... Читать далее »

Эффект Ken Burns для шапки сайта

Эффект Ken Burns для шапки сайта

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

Переключатель фона на сайте

Переключатель фона на сайте

Простой в реализации но в тоже время эффективный переключатель фона (цвета, изображений) для сайта. Переключатель фона для сайта реализован с помощью HTML и CSS. Также для работы необходимо подключить библиотеку jQuery. Если есть вопросы, задавайте в комментариях. HTML CSS JS Читать далее »

CSS фильтры для изображений (фото)

CSS фильтры для изображений (фото)

В этой статье мы на примере рассмотрим использование 11 CSS фильтров, а именно: -webkit-filter: blur — Добавляет эффект размытия изображения. Значение задается в пикселях (px). -webkit-filter: grayscale — Конвертирует изображения в черно-белый цвет. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1). -webkit-filter: drop-shadow — Создает тень также как и CSS свойство box-shadow, но только фильтр имеет поддержку аппаратного ... Читать далее »