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

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

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

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

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

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

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

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

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

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

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

Сегодня речь пойдет об онлайн сервисе для генерации CSS кода с префиксами. Пара слов о том, что такое префиксы в CSS свойствах, откуда они взялись и зачем их нужно ставить. Дело в том что современные возможности спецификации CSS2-3  внедрялись браузерами постепенно. Этот путь имеет поступательный характер и дабы дать своим пользователям новые возможности, браузеры внедряли эти свойства добавляя к ним свои особенные префиксы -webkit, -ms, -o, -moz. Continue reading

visual-studio-code горячие клавиши

Добрый вечер, дорогие друзья. Не так давно я перешел с горяче любимого мне текстового редактора – Sublime Text 3 на новый софт. Думаю, что в скором времени, сделаю целый цикл постов по поводу нового редактора кода.

Мой выбор пал, на уже широко известный редактор кода – Visual Studio Code.

В этом посте хочу зафиксировать для себя (и вас) горячие клавиши. Таким образом эта инфа будет под рукой и не потеряется на компе или в закладках. Continue reading

Создать интернет магазин на платформе Gollos

Как создать интернет магазин без знаний в программировании?

Салют! Вот решил написать серию постов о том как создать интернет магазин самостоятельно без всяких знаний в программировании и без найма штата разработчиков.

Сразу хочу оговориться, чтобы не тратить время любителей халявы 🙂 Речь пойдет о SaaS платформе Gollos, которая дает возможность развернуть интернет магазин, но все это НЕ на бесплатной основе! Continue reading

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

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

Skype – популярный клиент для общения в интернете, я бы сказал программа мирового масштаба 🙂 Буквально пару дней назад встал вопрос о форматировании текста в Skype. Оказалось, что такая возможность есть и она весьма проста. Continue reading

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