Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » Записи по метке: изображения

Абсолютное центрирование отзывчивого изображения на CSS

Для абсолютного горизонтального и вертикального центрирования элементов на странице предлагаются различные методы, например, на Хабре, ещё в 2013г был представлен перевод отличной статьи с решением от Стефана Шоу, написанной в своё время для Smashing Magazine. Так что, в этом плане, ничего нового не открою, с центрированием элементов всё предельно ясно.Однажды, при разработке очередного лайтбокса, мне понадобилось сделать так чтобы ...

Три эффекта при наведении на изображение

Много раз писал о различных hover-эффектах для изображений, да и в интернетах этого добра наработали предостаточно. В этот раз решил использовать сразу три эффекта на одном изображении, срабатывающих при наведении на картинку. Кроме того продемонстрирую применение свойства box-shadow в оформлении изображения, конечно свойство довольно таки заезженное, но посмотреть на ещё одну вариацию думаю не повредит.Что касается hover-эффектов, мы ...

Фиксированные подписи к изображениям

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

Адаптивные изображения с помощью CSS

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

Оригинальные hover-эффекты для изображений на чистом CSS3

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

Всплывающая подпись к картинке при наведении с помощью CSS3

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

Ленточки с текстом, на изображении с помощью CSS3

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

Абсолютно круглые изображения с помощью CSS

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

Бесплатные адаптивные jQuery слайдеры изображений

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

Lightbox Эффект CSS3

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

Эффект прозрачности для изображений при наведении с помощью CSS3

Эффект прозрачности для изображений при наведении с помощью CSS3 Как оригинально оформить изображения в момент взаимодействия с пользователем? То есть как-то интересно выделить картинку при наведении на неё указателя мыши. Технических решений этой задачи предостаточно и расписаны они в мельчайших подробностях. Так что нового ничего не открою, а просто-напросто поделюсь простеньким фрагментом кода CSS, который в разных вариация часто использую сам.Для создания привлекательного эффекта прозрачности, или ...

Лайтбокс эффект с помощью магии CSS3

Лайтбокс эффект с помощью магии CSS3 Здравствуйте друзья! Надеюсь всем знаком такой замечательный эффект, как Lightbox(Лайтбокс), используемый для отображения изображений большего размера на страницах сайтов. Существует множество специальных Lightbox плагинов, хороших и не очень, построенных на jQuery. Меня в свое время заинтересовала возможность создания лайтбокс эффекта без применения javascript, построить работу исключительно на функциях CSS3, благо что современные браузеры, за ...

jQuery плагин для увеличения изображений

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

Галереи для сайта с помощью Highslide JS

Галереи для сайта с помощью Highslide JS Продолжим планомерно и без лишней суеты описание открывшихся возможностей при использовании скрипта Highslide JSВ предыдущем обзоре я рассказал об эффектном увеличении отдельных изображений с помощью этой технологии, кто пропустил, или просто забыл, можете освежить свою память:  Тынц »». Так, память освежили, голова работает ясно, можно продолжать. Highslide отличается от других скриптов данной направленности своей функциональностью. ...
1 2
Рейтинг@Mail.ru