Домой / Архивы с метками: css (страница 2)

Архивы с метками: css

Бесконечная прокрутка фона сайта

Бесконечная прокрутка фона сайта

Бесконечная прокрутка изображения на фоне сайта, которое бесконечно повторяется прокручиваясь вверх. Эффект бесконечной прокрутки фона для сайта создан с помощью CSS. Изменить изображение фона можно указав ссылку в свойстве background класса overlay на другое изображение. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. HTML CSS Читать далее »

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

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

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

Красивый 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 код который вы видите ниже ниже: Проблема отображения: После решения проблемы: Надеюсь вам не пригодится! Но если и возникнет проблема, то решение вы уже ... Читать далее »

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

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

Простой в реализации но в тоже время эффективный переключатель фона (цвета, изображений) для сайта. Переключатель фона для сайта реализован с помощью 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, но только фильтр имеет поддержку аппаратного ... Читать далее »

Webkit-filter: blur

Webkit-filter: blur

Пример использования CSS фильтра размытия -webkit-filter: blur.  Фильтр blur устанавливает на фото эффект размытия элемента, словно фотография или изображение находится не в фокусе. Посмотреть какие браузеры поддерживают данный фильтр размытия можно на сайте caniuse.com: HTML CSS Читать далее »

Создание одностраничного (адаптивного) сайта из вкладок (табов) на чистом CSS

Создание одностраничного (адаптивного) сайта из вкладок (табов) на чистом CSS

Отличный и в тоже время оригинальный пример создания сайта из вкладок (табов) с помощью CSS. Такой одностраничный сайт подойдет для сайта-визитки или для простого информационного сайта. Имеет адаптивный дизайн.   HTML CSS Читать далее »