Hover эффекты для фона страницы. Hover-эффекты для изображений на чистом CSS3. jQuery эффект плавного изменения цвета при наведении

В нашей CMS Article будет единственным классом PHP. Он будет обслуживать задачи сохранения статьи в базе данных и получения материалов для вывода на страницах проекта. Как только мы построим данный класс будет действительно легко создать другие скрипты для создания, обновления, вывода и удаления статей.

В нашей папке cms создаем каталог classes . В папке classes создаем новый файл с именем Article.php и копируем в него следующий код:

id = (int) $data["id"]; if (isset($data["publicationDate"])) $this->publicationDate = (int) $data["publicationDate"]; if (isset($data["title"])) $this->title = preg_replace ("/[^\.\,\-\_\"\"\@\?\!\:\$ a-zA-Z0-9()]/", "", $data["title"]); if (isset($data["summary"])) $this->summary = preg_replace ("/[^\.\,\-\_\"\"\@\?\!\:\$ a-zA-Z0-9()]/", "", $data["summary"]); if (isset($data["content"])) $this->content = $data["content"]; } /** * Устанавливаем свойств с помощью значений формы редактирования записи в заданном массиве * * @param assoc Значения записи формы */ public function storeFormValues ($params) { // Сохраняем все параметры $this->__construct($params); // Разбираем и сохраняем дату публикации if (isset($params["publicationDate"])) { $publicationDate = explode ("-", $params["publicationDate"]); if (count($publicationDate) == 3) { list ($y, $m, $d) = $publicationDate; $this->publicationDate = mktime (0, 0, 0, $m, $d, $y); } } } /** * Возвращаем объект статьи соответствующий заданному ID статьи * * @param int ID статьи * @return Article|false Объект статьи или false, если запись не найдена или возникли проблемы */ public static function getById($id) { $conn = new PDO(DB_DSN, DB_USERNAME, DB_PASSWORD); $sql = "SELECT *, UNIX_TIMESTAMP(publicationDate) AS publicationDate FROM articles WHERE id = :id"; $st = $conn->prepare($sql); $st->bindValue(":id", $id, PDO::PARAM_INT); $st->execute(); $row = $st->fetch(); $conn = null; if ($row) return new Article($row); } /** * Возвращает все (или диапазон) объектов статей в базе данных * * @param int Optional Количество строк (по умолчанию все) * @param string Optional Столбец по которому производится сортировка статей (по умолчанию "publicationDate DESC") * @return Array|false Двух элементный массив: results => массив, список объектов статей; totalRows => общее количество статей */ public static function getList($numRows=1000000, $order="publicationDate DESC") { $conn = new PDO(DB_DSN, DB_USERNAME, DB_PASSWORD); $sql = "SELECT SQL_CALC_FOUND_ROWS *, UNIX_TIMESTAMP(publicationDate) AS publicationDate FROM articles ORDER BY " . mysql_escape_string($order) . " LIMIT:numRows"; $st = $conn->prepare($sql); $st->bindValue(":numRows", $numRows, PDO::PARAM_INT); $st->execute(); $list = array(); while ($row = $st->fetch()) { $article = new Article($row); $list = $article; } // Получаем общее количество статей, которые соответствуют критерию $sql = "SELECT FOUND_ROWS() AS totalRows"; $totalRows = $conn->query($sql)->fetch(); $conn = null; return (array ("results" => $list, "totalRows" => $totalRows)); } /** * Вставляем текущий объект статьи в базу данных, устанавливаем его свойства. */ public function insert() { // Есть у объекта статьи ID? if (!is_null($this->id)) trigger_error ("Article::insert(): Attempt to insert an Article object that already has its ID property set (to $this->id).", E_USER_ERROR); // Вставляем статью $conn = new PDO(DB_DSN, DB_USERNAME, DB_PASSWORD); $sql = "INSERT INTO articles (publicationDate, title, summary, content) VALUES (FROM_UNIXTIME(:publicationDate), :title, :summary, :content)"; $st = $conn->prepare ($sql); $st->bindValue(":publicationDate", $this->publicationDate, PDO::PARAM_INT); $st->bindValue(":title", $this->title, PDO::PARAM_STR); $st->bindValue(":summary", $this->summary, PDO::PARAM_STR); $st->bindValue(":content", $this->content, PDO::PARAM_STR); $st->execute(); $this->id = $conn->lastInsertId(); $conn = null; } /** * Обновляем текущий объект статьи в базе данных */ public function update() { // Есть ли у объекта статьи ID? if (is_null($this->id)) trigger_error ("Article::update(): Attempt to update an Article object that does not have its ID property set.", E_USER_ERROR); // Обновляем статью $conn = new PDO(DB_DSN, DB_USERNAME, DB_PASSWORD); $sql = "UPDATE articles SET publicationDate=FROM_UNIXTIME(:publicationDate), title=:title, summary=:summary, content=:content WHERE id = :id"; $st = $conn->prepare ($sql); $st->bindValue(":publicationDate", $this->publicationDate, PDO::PARAM_INT); $st->bindValue(":title", $this->title, PDO::PARAM_STR); $st->bindValue(":summary", $this->summary, PDO::PARAM_STR); $st->bindValue(":content", $this->content, PDO::PARAM_STR); $st->bindValue(":id", $this->id, PDO::PARAM_INT); $st->execute(); $conn = null; } /** * Удаляем текущий объект статьи из базы данных */ public function delete() { // Есть ли у объекта статьи ID? if (is_null($this->id)) trigger_error ("Article::delete(): Attempt to delete an Article object that does not have its ID property set.", E_USER_ERROR); // Удаляем статью $conn = new PDO(DB_DSN, DB_USERNAME, DB_PASSWORD); $st = $conn->prepare ("DELETE FROM articles WHERE id = :id LIMIT 1"); $st->bindValue(":id", $this->id, PDO::PARAM_INT); $st->execute(); $conn = null; } } ?>

Файл получается достаточно длинным, но код очень простой. Разберем его подробно:

1. Определение класса и его свойства

Сначала определим класс Article:

Class Article {

Все, что следует за данным строками до закрывающей фигурной скобки в конце файла содержит код нашего класса Article .

После определения класса мы объявляем свойства класса: $id , $publicationDate и так далее. Каждый объект Article , который мы создаем, будет хранить данные в объявленных свойствах. Обратите внимание, что имена свойств соответствуют именам полей в таблице articles .

Технически, такой тип класса, который содержит свойства соответствующие непосредственно полям базы данных и методы для хранения и получения записей, соответствует шаблону объектно-ориентированного проектирования, известному как active record .

2. Конструктор

Затем мы создаем методы класса. Это функции, которые привязаны к классу и к объекту, создаваемому из класса. Наш основной код вызывает методы для манипулирования данными в объекте Article .

Первый метод, __construct() , является конструктором. Это специальный метод, который автоматически вызывается системой PHP каждый раз, когда создается новый объект Article . Наш конструктор получает необязательный массив $data , в котором содержатся данные для свойств нового объекта. Затем мы присваиваем данные свойствам в теле конструктора. Таким образом, получается удобный способ для создания и инициализации объекта в одно действие.

$this->propertyName означает: "Свойство объекта this с именем " $propertyName ".

Обратите внимание, что метод фильтрует данные, прежде чем присвоить их свойствам. Свойства id и publicationDate приводятся к типу int с помощью (int) , так данные значения должны быть типа int . Свойства title и summary фильтруются с помощью регулярных выражений, так как в них допускает наличие символов из определенного набора. С точки зрения безопасности фильтрация данных ввода - отличная практика. Пропускаем только допустимые значения и символы.

Однако, мы не фильтруем свойство content . Почему? Вероятно, администратор захочет использовать более широкий диапазон символов в содержании статьи - например, разметку HTML. Если мы ограничим диапазон доступных символов в содержании, то снизим полезность нашей системы для администратора.

Обычно, такие места могут оказаться дырой в системе безопасности, так как пользователь может вставить вредный код JavaScript или материалы с ошибками в содержание статьи. Однако, так как мы полагаем. что единственной персоной, которой доступно редактирование содержание, будет администратор системы, располагающий безграничным доверием, то вопрос с уязвимостью содержания остается за рамками нашего внимания. Если вы имеете дело с генерируем пользователями содержанием, например, комментариями или записями форума, то следует быть более осторожным и допускать только "безопасный" код HTML к использованию. Отличным инструментом для решения таких задач является HTML Purifier , который анализирует ввод кода HTML и удаляет все потенциальные угрозы.

Безопасность кода PHP выходит за рамки наших уроков. Вам следует посвятить определенное время для изучения данного вопроса .

3. storeFormValues()

Следующий метод storeFormValues() похож на конструктор в том, что он сохраняет полученный массив данных в свойствах объекта. Основное отличие заключается в том, что storeFormValues() может обрабатывать данные в формате, который используется в формах New Article (Новая статья) и Edit Article (Редактировать статью) (мы создадим их позже). В частности, он может обрабатывать дату публикации в формате YYYY-MM-DD , конвертировать ее в формат времени UNIX, который отлично подходит для хранения в объекте.

Формат времени UNIX представляет собой целое значение, которое содержит количество секунд от полуночи 1 января 1970 до искомой даты. Датой в таком формате легко оперировать, и ее удобно хранить.

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

Все члены (то есть свойства и методы) нашего класса Article имеют ключевое слово public перед определением, что означает доступность кода вне класса. Также можно создавать частные члены (директива private) (их можно использовать только в классе) и защищенные члены (директива protected) (которые можно использовать в классе и его подклассах).

4. getById()

Теперь перейдем к методам, реализующим доступ к базе данных MySQL. Первый из них - getById() . Он принимает в качестве аргумента ID статьи ($id) и возвращает запись с указанным ID из таблицы articles , сохраняя данные в новом объекте Article .

Обычно, когда вы вызываете метод, сначала нужно создать объект, а затем вызвать метод, принадлежащий объекту. Но, так как getById() возвращает новый объект Article , будет полезно вызывать его напрямую, а не через существующий объект. Иначе придется создавать новый объект-заглушку каждый раз, когда нужно вызвать метод и получить статью.

Для разрешения вызова метода без объекта мы добавляем декларацию static к определению метода. Таким образом разрешается вызов метода непосредственно без определения объекта.

Public static function getById($id) {

Метод использует PDO для соединения с базой данных, получает запись статьи с помощью запроса SQL SELECT и сохраняет данные в новом объекте Article , который возвращается в вызывающий код. PDO — PHP Data Objects —объектно-ориентированная библиотека, встроенная в PHP, которая облегчает связь скриптов PHP с базами данных.

Разберем метод подробнее:

Соединение с базой данных

$conn = new PDO(DB_DSN, DB_USERNAME, DB_PASSWORD);

Здесь выполняется соединение с базой данных MySQL с помощью данных из файла config.php . Дескриптор соединения сохраняется в переменной $conn . Данный дескриптор используется в остальном коде для обмена данных с базой.

Получаем запись статьи

Выражение SELECT возвращает все поля (*) из записи в таблице articles , которые соответствуют заданному полю id . Значение поля publicationDate возвращается в формате времени UNIX, вместо формата для дат MySQL, что упрощает процесс сохранения в нашем объекте.

Вместо того, чтобы помещать наш параметр $id непосредственно в строку SELECT , что увеличивает риск нарушения системы безопасности, мы используем:id . Такой параметр известен как placeholder (указатель места размещения) . Далее мы вызываем метод PDO для привязывания значение $id к указателю места размещения.

Сразу после сохранения выражения SELECT в строке, мы подготавливаем его с помощью функции $conn->prepare() , сохраняя полученный дескриптор в переменной $st .

Подготовка выражения используется для работы со многими базами данных. Она позволяет выполнять запросы быстрее и безопаснее.

Затем мы привязываем значение переменной $id (ID нужной статьи) к указателю места размещения:id с помощью вызова метода bindValue() .

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

Закрываем соединение

Так как нам больше не нужно соединение, мы закрываем его, присваивая значение null переменной $conn . Закрывать соединение с базой данных как можно быстрее является хорошей практикой для освобождения памяти на сервере.

Возвращаем объект Article

If ($row) return new Article($row); }

Последним действием в нашем методе является создание объекта Article , который будет содержать запись из базы данных, и возвращение его вызывающему коду. Сначала проверяем наличие данных в переменной $row после вызова метода fetch() . Если данные есть, создаем новый объект Article передавая переменную ему $row . Будет вызван конструктор класса, который наполнит объект данными из массива $row . Затем возвращаем готовый объект и работа метода завершена.

5. getList()

Следующий метод getList() во многом похож на метод getById() . Основное отличие заключается в том, что метод getList() возвращает несколько статей сразу. Его используют, когда нужно вывести список статей для пользователя или администратора.

getList() принимает 2 аргумента:

$numRows Максимальное количество получаемых статей. По умолчанию установлено значение 1,000,000 (то есть, практически все статьи). Данный параметр позволяет нам получать только первые 5 статей для главной страницы. $order Порядок сортировки получаемых статей. По умолчанию используется параметр "publicationDate DESC" , который означает "сортировка по дате публикации, новые статьи первые".

Большая часть кода метода похожа на код метода getById() . Посмотрим на несколько строк:

$sql = "SELECT SQL_CALC_FOUND_ROWS *, UNIX_TIMESTAMP(publicationDate) AS publicationDate FROM articles ORDER BY " . mysql_escape_string($order) . " LIMIT:numRows";

Здесь запрос немного сложнее. Обратите внимание, что здесь не используется выражение WHERE , так как мы хотим получить все статьи, а не одну с заданным ID.

Также добавлено выражение ORDER BY для сортировки возвращаемых записей в определенном порядке. Используется выражение LIMIT с параметром $numRows (как указатель места размещения) для ограничения количества получаемых записей.

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

Вместо передачи значения переменной $order в запрос через указатель места размещения, мы передаем его прямо в строку запроса, вызывая функцию mysql_escape_string() , чтобы отбросить любые специальные символы (для безопасности). Если использовать указатель места размещения, то PDO поместит кавычки (") вокруг строки (например, ORDER BY "publicationDate DESC"), что является ошибкой синтаксиса.

$list = array(); while ($row = $st->fetch()) { $article = new Article($row); $list = $article; }

Так как мы возвращаем несколько строк, нужно создать массив $list для размещения соответствующих объектов Article . Затем используем цикл while для получения следующей строки через fetch() , создаем новый объект Article , сохраняем строку в объекте и добавляем объект к массиву $list . Когда строк не останется, метод fetch() вернет false , и цикл остановится.

// Теперь получаем общее число статей, которые соответствуют критерию $sql = "SELECT FOUND_ROWS() AS totalRows"; $totalRows = $conn->query($sql)->fetch(); $conn = null; return (array ("results" => $list, "totalRows" => $totalRows));

В завершении мы выполняем запрос, который использует функцию MySQL FOUND_ROWS() для получения количества возвращаемых строк, вычисленного в предыдущей команде SQL_CALC_FOUND_ROWS . В этот раз используем метод PDO query() , который позволяет быстро выполнить запрос, если нет указателей места замещения. Мы вызываем метод fetch() для получения результата. Затем возвращаем оба значения - список объектов Article ($list) и общее количество строк - как ассоциированный массив.

6. insert()

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

insert() добавляет новую статью в таблицу articles , используя значения из текущего объекта Article:

• Сначала метод проверяет, что объект не имеет установленного свойства $id . Если у объекта есть ID, то, вероятно, статья уже имеется в базе данных и ее добавлять не нужно.
• Затем метод выполняет запрос SQL INSERT для вставки записи в таблицу articles , используя указатели места замещения для передачи значений свойств в базу данных. Обратите внимание, что мы используем функцию MySQL FROM_UNIXTIME() для конвертации даты публикации в формат MySQL.
• После выполнения запроса, метод возвращает ID новой статьи с помощью функции PDO lastInsertId() и сохраняет значение в свойстве $id . Мы установили в таблице articles для поля id свойство auto_increment , поэтому MySQL генерирует уникальное значение ID для каждой новой записи.

Обратите внимание, что мы используем PDO::PARAM_INT при привязке целых значений к указателям места замещения, и PDO::PARAM_STR при привязке строк. Таким образом, PDO может правильно обрабатывать значения.

7. update ()

Данный метод похож на метод insert() , за исключением того, что здесь происходит обновление записи в базе данных вместо создания новой записи.

Сначала проверяем наличие ID у объекта, так как обновить можно только запись с известным ID. Затем используем выражение SQL UPDATE для обновления полей записи. Обратите внимание на передачу ID объекта в выражение UPDATE , так как мы знаем, какую запись надо обновить.

8. delete ()

Метод delete() использует выражение SQL DELETE для удаления из таблицы articles статьи, которая хранится в объекте. Для идентификации записи задействуем свойство $id объекта. Для безопасности мы добавили LIMIT 1 к запросу, чтобы ограничиться удалением только одной записи.

В следующем уроке мы создадим скрипты для клиентской и серверной части нашего приложения.

Очень часто на сайтах вы могли встречать изменение или кнопок при наведении. Реализовать задачу позволяет специальный псевдокласс:hover в CSS. Сегодня рассмотрим некоторые приемы позволяющие сделать эту фишку, а ниже опубликуем список наиболее интересных из них (с краткими описаниями/пояснениеми). Все варианты разделим на:

Данные группы весьма условны, т.к. многие примеры пересекаются и являются универсальными, то есть могут встречаться при оформлении разных объектов.

Hover эффект в CSS стилях добавляется справа от элемента следующим образом:

a: hover { color : red ; }

a:hover { color: red; }

Чаще всего механизм применяется именно для ссылок дабы изменить их цвет или добавить/убрать подчеркивание. Однако он может быть задан и другим блокам, кнопкам, текстам или использоваться при создании .

button : hover { background : rgba (0 , 0 , 0 , 0 ) ; color : red ; } .my-picture : hover { opacity : 0.5 ; filter : alpha(opacity= 50 ) ; }

button:hover { background: rgba(0,0,0,0); color: red; } .my-picture:hover { opacity: 0.5; filter: alpha(opacity=50); }

Современные браузеры одинаково корректно воспринимают CSS hover эффект при наведении, хотя в старых версиях IE 6 и ниже он срабатывает исключительно для линков. Плюс в некоторых источниках говорилось, что этому обязательно нужно указывать в коде .

Кстати, при задании стилей ссылок также дополнительно могут использоваться селекторы:link — для не посещенных еще страниц, :visited — тех, где вы уже были + :active определяет активный сейчас адрес. Важно размещать hover эффект в CSS после:link и:visited, если они существуют.

Перейдем от теории к практике. Ниже представлен список полезных материалов и сниппетов — переходите по ссылкам дабы просмотреть исходники.

Hover эффекты кнопок и ссылок

Как мы уже говорили выше, это самая популярная категория объектов на сайте, где встречается подобный прием. Вот вам несколько вариантов по теме.

Простые примеры для кнопок

Sullivan Buttons

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

CSS Icons on Hover

Подборка из 5ти простых вариантов реализации задачи. Во всех случаях задействованы дополнительные иконки, которые появляются справа/слева от текста либо заменяют его.

Button Hover Effects

По сравнению с прошлым примером эти 12 функций срабатывания выглядят куда интереснее: как визуально, так и в плане кода. Не обошлось без JS.

Nav Hovers

Несколько фишек, которые позволяют сделать более необычные нежели с базовым свойством text-decoration. Фон кнопки дополнительно заполняется разными визуальными эффектами.

Info on Hover

Функциональность всплывающих подсказок сейчас поддерживается во всех браузерах, но вы можете доработать ее под свои нужды. В текущем примере срабатывание псевдокласса происходит для тега dfn, смотрится стильно. Код достаточно компактный HTML + CSS.

Mana Button

Один из самых оригинальных вариантов hover эффекта в блоках — при наведении выполняется словно заполнение его жидкостью. В реализации используется CSS, HTML и SVG. В определенной тематике сайтов данный сниппет однозначно будет находкой.

Hover эффекты для изображений

15 базовых приемов

Не смотря на то, что статья была опубликована достаточно давно методы корректно работают и сейчас. Здесь, наверное, собраны все возможные типовые преобразования для графики: несколько видов зума, повороты, размытие, ч/б, прозрачность, фильтры, сияние и др. Очень полезный материал.

Красивые hover эффекты изображений

Подборка из 30 приятных и плавных действий при наведении на картинку. За счет простых визуальных манипуляций в виде зума, добавления линий создается хороший комплексное впечатление. Местами увеличивается заголовок и «подтягивается» краткое описание. Отличный вариант для портфолио.

Barberpole Hover Animation

Не сложная на первый взгляд анимация, которая в итоге смотрится очень классно и нестандартно.

CSS hover эффекты с определением направления

Отличная подборка сниппетов и кодов по теме находится в статье с css-tricks.com . Все эти примеры объединяет тот факт, что в процессе работы определяется местоположение и направление движения курсора. Это, в свою очередь, позволяет создавать достаточно оригинальные реакции при наведении на элементы страницы:

Во многих сложных решениях Javascript и jQuery для hover эффектов позволяют значительно разнообразить и улучшить результат.

Direction Aware Hover Goodness

Direction Aware Tiles using clip-path Pure CSS

Остальные фишки ищите в оригинальной статье.

Animatism

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

По ссылке находится 7 CSS3 hover эффектов заголовков — когда при наведении на изображение, пользователь увидит информационный блок с тайтлом, кратким описанием и ссылкой для перехода. Нельзя сказать, что примеры очень оригинальные, но они однозначно помогут разнообразить статичный контентный проект.

CSS Hover библиотеки

Hover.css

Проект под незамысловатым названием Hover.css содержит коллекцию CSS3 эффектов для ссылок, кнопок, блоков и т.п. Можете использовать готовый код и/или добавлять в него свои модификации. Здесь много интересного: 2D/3D преобразования, работа с фоном и рамками, тени, иконки. Решение доступно в CSS, LESS и Sass форматах.

Imagehover.css

Еще одна библиотека задающая hover эффекты картинкам — в бесплатной версии найдете 44 варианта преобразований (премиальный набор содержит их в 5 раз больше). Тут также поддерживаются LESS и SCSS, весит это дело лишь 19кб. На сайте имеется страница с демонстрацией всех работающих примеров. Предлагается много уникальных фишек, которые не встречались выше.

В проекте более 30 разных приемов для круглых и квадратных по формату объектов. Все они достаточно оригинальные, простых «одноэлементных» действий в виде обычного зума/вылетания практически нет. Реализована задача на чистом CSS3 + HTML (плюс Scss файлы включены). Отличная совместимость с Bootstrap 3, есть документация.

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

Если знаете еще какие-то интересные фишки и сниппеты, присылайте URL’ы на них в комментариях. И мы в будущем дополним статью.

Применение различных hover эффектов CSS при наведении курсора на изображение, ссылку или текст является одним из наиболее распространенных методов CSS .

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

1. 10 Stylish Hover Effects

Как следует из названия, это коллекция из 10 невероятно стильных эффектов наведения.

Исходный код

2. Direction-aware Hover Effect

Когда вы наводите указатель мыши на различные элементы, CSS hover эффект при наведении следует за курсором и создает удивительные 3D презентации.

Исходный код

3. Wacom Hover Effect

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

Исходный код

4. CSS3 Hover Effects

Если вы ищете круговые эффекты наведения, здесь вы найдете несколько интересных. В общей сложности доступно 12 различных CSS hover эффектов рамки.

Исходный код

5. Hover Animation from UNIQLO

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

Исходный код

6. Button Hover Effects

А вот несколько впечатляющих эффектов наведения для кнопок. Все они прекрасно подойдут для сайтов любого типа.

Исходный код

7. 10 Stunning Hover Effects

Еще один набор из 10 hover эффектов CSS для кнопок. Большинство из них довольно впечатляющие.

Исходный код

8. CSS3 Hover Effects 2

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

Исходный код

9. Bounce on Hover

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

Исходный код

10. 8-bit Hovers

Этот стильный винтажный hover эффект CSS вызовет в вас чувство ностальгии. Вы можете использовать его, чтобы создать ретро стиль для сайта.

Исходный код

11. Simple Title Hover Effect

При наведении курсора мыши на изображение этот эффект выводит заголовки на фоне с низкой непрозрачностью.

Исходный код

12. Flip Down Effect

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

Исходный код

13. Curiosity Award

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

Исходный код

14. Image Hover Effect

Это невероятный CSS hover эффект рамки для изображений. Способ, с помощью которого одно изображение проявляется на фоне другого, невероятен!

Исходный код

15. Hover Animation

При наведении курсора на изображение применяется уменьшение непрозрачности с фокусировкой на ссылке.

Исходный код

16. Hover Me Brother

Возможно, это и не очень полезный hover эффект CSS , но забавный. Просто наведите курсор мыши на солнцезащитные очки, и начнется магия.

Исходный код

17. Nautilus SCSS HAML Hover Effects

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

Исходный код

18. SVG Border Hover Effect 1

Подойдет для текста, кнопок или изображений. Постепенное воссоздание рамки — это действительно интересный эффект.

Исходный код

19. Hover Search Map Icon

Вам нужен CSS hover эффект при наведении для панели поиска или иконки карты? Это именно он. Его бесшовные преобразования — сплошное удовольствие для глаз.

Исходный код

20. Social Icon Pane

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

Исходный код

21. Product Item Additions Info

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

Исходный код

22. Animated Envelope

Идеальный CSS hover эффект при наведении для раздела «Связаться с нами «. Он отображает контактную информацию в раскрывающемся конверте, но только после того, как пользователь наведет курсор мыши на изображение.

Исходный код

23. Back to Top

Этот уникальный эффект наведения для кнопки «Вверх » позволяет предоставить посетителям красивый, анимированный указатель.

Исходный код

24. Fancy Hover

При наведении курсора мыши на изображение, оно не только увеличивается, но и изменяется способ его отображения.

Исходный код

25. Reminders Icon Hover Effect

Этот hover эффект CSS добавляет к изображению красивые стили.

Исходный код

26. Circle Image Hover

Эффект наведения для круговых изображений. В коллекции присутствует четыре различных стиля эффектов наведения.

Исходный код

27. Safari Icon Hover Effect

Этот CSS hover эффект при наведении воссоздает анимацию иконок Safari . Вы можете заменить значок собственным изображением или логотипом.

Прежде всего, для тех кто не совсем ещё в теме или совсем не в теме, поясню вкратце, что такое . Это различные виды эффектов (всплывающие подписи, подсказки, плавные переходы, трансформация, ротация, увеличение, смещение и т.д и т.п.) применяемые к элементам веб-сайта на них курсора мыши. Реализованы эти могут как с помощью различных плагинов jQuery, так и на чистом .
Сегодня я подготовил большую подборку оригинальных hover-эффектов для изображений созданных с помощью CSS3, без подключения javascript-библиотек. О достоинствах и недостатках реализации hover-эффектов на чистом CSS3 не буду, это другая тема, просто смотрите примеры, и при необходимости используйте понравившийся у себя на сайте. Все эффекты представленные в обзоре снабжены демонстрационным примером и подробной документацией с исходниками. Мануалы по-большей части на буржуинском, но всё более-менее интуитивно понятно.

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

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

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

iHover это впечатляющая коллекция эффектов при наведении на чистом CSS3, с поддержкой Bootstrap 3. Построен на Scss CSS (файл), легко модифицируется переменными. Код модульный, нет необходимости включать в работу весь файл. 30+ различных эффектов в одном пакете. Всё довольно хорошо документировано, эффекты очень просты в использовании. Все, что вам нужно сделать, это правильно выстроить HTML-разметку и подключить файл CSS в работу.

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

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

Hover-эффекты для миниатюр на CSS3

Разработчик позиционирует свою работу, как пример галереи изображений с эффектами переходов при появлении аннотаций(подписей) к миниатюрам. Заявлена уверенная поддержка современными браузерами, включая IE 9+. Полноценной галереей, конечно назвать это сложно, а вот эффект появления подписей, довольно интересный.

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

Вращение миниатюр при наведении

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

Если перевести дословно:"Сексуальный эффект при наведении на ". Что-то такого сексуального, в этом эффекте вы конечно же вряд ли заметите, если только у вас не буйная фантазия, но эффект по своему интересен и обратить внимание на него стоит.

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

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

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

Данный эффект особого ничего из себя не представляет, банальная смена яркости изображений при наведении, разве что добавлены элементы анимации. Разбираться с подробностями реализации придётся самостоятельно, разложив исходники демо.

Ещё один набор из 10 hover-эффектов для изображений, различные видоизменения миниатюр при наведении, увеличение, ротация, поворот, затемнение и т.д.

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

Оригинальные hover-эффекты на CSS3 применяемые для эффектного появления подписей миниатюр изображений при наведении. В набор правил CSS входят 10 различных эффектов, которые вы можете использовать отдельно для разных картинок. Эффекты по-настоящему впечатляют, особенно понимая то, что всё это сделано лишь с помощью CSS3. Подробное руководство, поможет вам разобраться что к чему.

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

Раздвижные изображения

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

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

Интересное решение, миниатюры представлены в затемнённом виде, при наведении на них изображения проявляются и всплывает подпись на светлом фоне.

Подпись к изображению появляется из угла и расширяется на всю площадь картинки по диагонали.

Ещё несколько интересных решений для реализации всплывающих подписей к миниатюрам изображений. В онлайн-редакторе вы можете поэкспериментировать с параметрами и добиться более впечатляющих результатов.

Набор красивых эффектов при наведении на миниатюры, различные виды появления и оформления подписей к картинкам. Тонкие линии в контрасте с слегка затемнённым фоном создают лёгкие для восприятия информационные блоки.

Причудливые формы и эффект увеличения в связке с анимационным эффектом появления подписей к миниатюрам изображений.

Замечательные эффекты наложения иконки на миниатюры изображений в различных вариациях появления. В примере использован символ (+) очерченный кругом с помощью border-radius: в CSS, так же можно использовать шрифт-иконки, для большей информативности всплывающей панели.

Пример создания визуального слайд-эффекта для вывода объёмных подписей к изображениям с использованием только CSS3 и HTML5.

6 Подписей к картинкам

6 Вариантов появления всплывающих подписей к картинкам при наведении с помощью CSS3. Подробнейший урок по реализации и настройке, доступные для скачивания исходники.

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

Об этом способе я рассказывал в одном из предыдущих своих уроков: .

С Уважением, Андрей

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

Три грани сайтостроения

С формальной точки зрения есть три основных компонента (в разных синтаксических обликах), которые составляют сайт: PHP-код, JavaScript-код и описания стилей CSS. Абсолютно не важно, как именуется и какой версии используется тот или иной компонент, какая версия HTML разметки используется и какая версия браузера стоит. Совместимость нынче не в почете, потому в каждый момент времени актуально: что закодировано и что из того, что закодировано, может быть отображено и исполнено .

Если раньше за идеи бились языки, то сегодня воевать по-пустому больше нравится производителям стандартов в сфере интернет-технологий и браузеров.

Личное и общественное

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

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

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

Первое правило: на стандарт надейся, но и сам не плошай

CSS:hover - это когда мышка «зашла» на элемент страницы. Когда мышка кликнула на элементе, он становится активным, но когда курсор уходит в сторону, он опять может измениться и показать себя в активном состоянии. “:hover”, “active” и “visited” - самые востребованные псевдоклассы при описании стилей.

Очень удобно в коде сайта не заботиться о таких мелочах, как движение мышки над элементами. Предусмотрев в таблице описания стилей два описания:

background-color: green;

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

Второе правило: доверяя стандартам, ориентируйся на свой код

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

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

Есть существенная разница и:hover здесь срабатывает вовсе не так, как хотелось бы. Без кода здесь не обойтись, а использование медиазапросов решает не все вопросы.

Совместимость - слишком дорогое удовольствие в современном информационном мире, поэтому, чтобы обеспечить надлежащий функционал сайту в пределах установленных требований к веб-дизайну и реализации функционала, предпочтительно ориентироваться на минимально необходимые варианты использования: CSS hover, CSS hover focus, CSS hover active (visited). Чем больше код (как внутри браузера, так и на сервере,) контролирует веб-дизайн, тем лучше. Программа - это контроль, лучше когда этот контроль не сдается на откуп действующим стандартам, от которых часто не знаешь чего ждать.

Кнопки и другие элементы страницы

Button hover CSS - чудесное решение, но по большому счету каждый элемент страницы есть «кнопка». Сайт должен быть прежде всего живым и если в коде это не заложено, если задача создать сайт, который развивается адекватно области применения и действует с учетом поведения посетителя, то как минимум средствами CSS-стилей можно придать живость элементам страницы.

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

Подводные камни в таблицах стилей

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

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

Использование AJAX, когда нет необходимости вновь генерировать страницу чтобы отобразить реакцию на действие посетителя, а достаточно изменить ее элемент или несколько элементов добавляет немного «перца». «Дружба» кодов - того что уже в браузере (JavaScript) и того что на сервере (PHP) - удел автора (программиста) сайта.

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

Стандарт и его эмуляция

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

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

Оценивая накопленный опыт, восторгаясь возможностями "Хрома" и "Оперы", критикуя медлительность и инертность браузера от производителя (незабвенного, дорогого сердцу всякого программиста IE от "Майкрософт": «Старый добрый Internet Explorer не ругал только ленивый. Или тот, кто на компьютере умеет только играть в "Косынку"», - цитата неизвестного интернет-автора), следует придерживаться золотой середины: использовать то что работает везде и всегда.

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

Эмуляция и контроль

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

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