Продолжаю серию статей о создании различных эффектов при наведении на изображении, выполненных исключительно средствами CSS, без подключения javacript. Сейчас трудно кого-нибудь удивить hover-эффектами для картинок, поражает лишь многообразие видов и форм таких эффектов. Чаще всего используются эффектные появления подписей к миниатюрам изображений, реже к полноразмерным картинкам. Сегодня продемонстрирую парочку простых hover-эффектов для изображений. В одном…
Уверен, все уже давно привыкли видеть эффектные появления подписей к изображениям при наведении. Чаще всего такие эффекты используют для миниатюр в составе галерей или миниатюрах анонсирующих запись, реже различные hover-эффекты применяют на поноразмерных изображениях. Сегодня хочу продемонстрировать несколько интересных слайд-эффектов появления подписей изображений при наведении, исключительно средствами CSS без использования javascript. Подписи будут появляться на…
Для абсолютного горизонтального и вертикального центрирования элементов на странице предлагаются различные методы, например, на Хабре, ещё в 2013г был представлен перевод отличной статьи с решением от Стефана Шоу, написанной в своё время для Smashing Magazine. Так что, в этом плане, ничего нового не открою, с центрированием элементов всё предельно ясно. Однажды, при разработке очередного лайтбокса,…
Много раз писал о различных hover-эффектах для изображений, да и в интернетах этого добра наработали предостаточно. В этот раз решил использовать сразу три эффекта на одном изображении, срабатывающих при наведении на картинку. Кроме того продемонстрирую применение свойства box-shadow в оформлении изображения, конечно свойство довольно таки заезженное, но посмотреть на ещё одну вариацию думаю не повредит.…
Вывод подписей к изображениям организовать можно по-разному, например используя различные hover-эффекты (всплывающие подписи, подсказки, плавные переходы, трансформация, ротация, увеличение, смещение и т.д и т.п.), или же просто, сделать их фиксированными, расположенными вне тела картинки, или непосредственно на изображении, в той или иной его части. В данном уроке продемонстрирую несколько простейших вариантов вывода фиксированных…
В этом небольшом уроке, мы рассмотрим простейшие способы создания адаптивных изображений с помощью CSS. Существует не мало различных решений сделать изображения адаптивными, все они различаются и по сложности, и степени поддержки браузерами. Примером сложного пути реализации адаптивных картинок, является использование атрибута srcset, для которого требуется несколько изображений, больше разметки, а также зависимость от поддержки браузерами.…
Прежде всего, для тех кто не совсем ещё в теме или совсем не в теме, поясню вкратце, что такое hover-эффекты. Это различные виды эффектов (всплывающие подписи, подсказки, плавные переходы, трансформация, ротация, увеличение, смещение и т.д и т.п.) применяемые к элементам веб-сайта при наведении на них курсора мыши. Реализованы эти эффекты могут как с помощью различных…
Готовых решений создания динамичных подписей к картинкам, появляющихся при наведении курсора на тело изображения, существует на сегодняшний день предостаточно. Однажды мы уже рассматривали один замечательный вариант, подробнейшим образом. Все они хороши по своему, какие-то отличаются простотой исполнения, другие наличием различных эффектов появления подписей. В общем, кому оно надо, тот всегда сможет найти для себя подходящий…
Очень часто, на сайтах и блогах можно встретить изображения украшенные разнообразными ленточками, с надписями и без. Что это? Простое украшательство, или же функциональный элемент пользовательского интерфейса? В большинстве случаев всё же, эти красивые ленточки выполняют те или иные полезные функции, выступают в роли подписей к картинкам, заостряют внимание посетителей на размещенных в теле ленты ссылки,…
В последнее время в веб-дизайне становится очень популярным использование круглых изображений. Пример можно увидеть у меня на блоге, миниатюры к записям выводятся максимально скругленные, то есть абсолютно круглыми. Существуют разные способы реализации вывода круглых картинок. Проверенный годами, работающий во всех браузерах без исключения, это предварительная подготовка изображений в графическом редакторе, когда из стандартной картинки выделяется…
Приобретая данный курс, вы получаете целостный продукт, в котором есть всё необходимое для изучения и работы с WordPress
