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

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

Решив эту задачу, она на самом деле не является мега сложной, но как мне кажется может быть весьма полезной и помочь вам если вы однажды столкнетесь с подобны таском 🙂

Да просто добавим box-shadow и делов то …

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

Ниже я добавил пример:

Если открыть вкладку Result в примере выше, то станет понятно, что тень обрамила нашу картинку по периметру, а нам всеже хочется дать тень непосредственно нарисованному объекту.

Даем тень нарисованной картинке

К счастью есть весьма элегантное решение этой задачи. Мы воспользуемся свойством filter.

Синтаксис очень прост: мы задаем первой парой параметром  смещение по осям X и Y соответственно, третье значение – это размытие тени, а четвертое собственно цвет в возможных форматах (HEX, rgb(a), hsl(a)).

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

jQuery как сделать?

Если вам нужно узнать суммарную ширину нескольких блоков, то отбрасывая дробную часть вы получите не верное итоговое значение. Давайте рассмотрим три блока: с фиксированной, процентной шириной и шириной auto. Continue reading

Как сделать?

Шрифт играет далеко не последнюю роль в дизайне сайта, он может подчеркнуть общий стиль, помочь пользователю сориентироваться в текстовом контенте. Искать бесплатные шрифты, а потом подключать кучу файлов для разных браузеров – дело не благодарное, но есть выход – шрифты от Google Fonts. Continue reading

jQuery как сделать?

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

Как сделать?

Когда внутри родительского блока находятся только float (плавающие) элементы, то родительский блок схлопывается. Как убрать обтекание и раскрыть родительский блок рассмотрим далее. Continue reading