Эффект появление рамки на картинки в CSS
Это простой и запоминающей, но в то же время видный эффект появление рамки по сторонам на изображение, где все создано в исполнение на чистом CSS. Делается он больше из-за его появление, кто-то делает увеличение или наклон картинки, здесь все задействовано на простоту. Если в первом варианте мы наблюдаем рамку, что идет на несколько пикселей от краев. То следующий будет чисто по краям, без прерывистых линий, что сделано для понимания и под выбор вебмастера. Этот эффект можно применять на любой картинке, а также под любым форматом дизайн сайта. Если мы видим, что здесь больше подходит под светлый формат. То если у вас темный ресурс, вам остается в прикрепленных стилях CSS выставить тот оттенок цвета, который соответствует основному стилю блога или сайта. Многие выставляют на вид материала или новостей, но также все больше замечаю, что такой формат эффекта отлично смотрится на фотоальбомах с галереями. 1. Вариант на пунктирную линию: ![]() HTML Код <img src="Ссылка на первое изображение" alt="ZorNet.Ru — сайт для вебмастера"/> CSS Код img:hover { outline: 1px dashed #401d11; /* Ширина, вид и цвет рамки */ outline-offset: -8px; cursor:pointer; /* Выводим рамку внутри элемента */ } Вероятно кто то будет прописывать класс, это делается для того, чтоб в одном отведенном месте работал данный эффект. Ведь при установки по умолчанию он будет задействован на весь портал. Демонстрация 2. Вариант на сплошную линию: ![]() HTML Код <img src="Ссылка на второе изображение" alt="" title="Форум ZorNet.Ru"/> CSS Код img:hover { border: 2px solid #1a1919; cursor:pointer; /* Ширина, вид и цвет рамки */ } Здесь также в CSS добавлен элемент курсора, что появиться при наведение на снимок. Но и не кто не исключал от вас оформление, так как здесь идет все по минимальному, что с оной стороны хорошо. Но некоторые предпочитаю тени и все что связано с оформлением, то все прописываем в стилистике. Демонстрация |
Поделиться в социальных сетях
Материал разместил
Комментарии: 2 | |
| |