Как сделать?

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

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

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

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

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

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

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

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

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

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

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

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

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

Как сделать DIV по центру страницы?

Как сделать DIV по центру страницы?

Как выровнять блок DIV по центру страницы, отцентрировать по горизонтали, сделать это с помощью разных css свойств, все это мы рассмотрим с вами сегодня.

jQuery Как узнать ширину блока с дробной частью?

jQuery Как узнать ширину блока с дробной частью?

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

jQuery как сделать, чтобы пункты меню заполнили все пространство по-ширине?

jQuery как сделать, чтобы пункты меню заполнили все пространство по-ширине?

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

jQuery

jQuery Collage — плагин группировки изображений внутри контейнера

jQuery Collage — плагин группировки изображений внутри контейнера

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

Как узнать проведенное  время пользователем на сайте?

Как узнать проведенное время пользователем на сайте?

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

Слайдер для сайта на всю ширину с фиксированной высотой

Слайдер для сайта на всю ширину с фиксированной высотой

Сегодня мы сделаем адаптивный слайдер на всю ширину сайта, который будет сохранять свою высоту при смене ширины браузера. Для реализации адаптивного слайдера с фиксированной высотой будем использовать два jquery плагина.

CSS3 Иконка меню с анимацией

CSS3 Иконка меню с анимацией

Сегодня мы разберем, как создать иконки на чистом HTML и CSS3. Добавим к ним, с помощью jQuery, красивую анимацию при смене класса.

CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS3 стилизация нумерованного списка

CSS3 стилизация нумерованного списка

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

CSS3 Иконка меню с анимацией

CSS3 Иконка меню с анимацией

Сегодня мы разберем, как создать иконки на чистом HTML и CSS3. Добавим к ним, с помощью jQuery, красивую анимацию при смене класса.

Появление элементов сайта с CSS3 эффектами

Появление элементов сайта с CSS3 эффектами

Как привлечь внимание пользователя к важной информации на вашем сайте? Как быть уверенным в том, что при прокрутке страницы сайта пользователь не упустит главного из виду? Ответ прост: сделайте появление блока заметным - добавьте CSS3 эффект.

HTML

Форма подписки с помощью СSS3

Форма подписки с помощью СSS3

Если вы собираетесь запустить собственный веб-ресурс или просто хотите набраться опыта в веб-разработке, то эта статья для вас. В ней вы узнаете как создавать не замысловатую и привлекательную форму для регистрации.

Делаем всплывающее окно

Делаем всплывающее окно

Ох уж эти окна …

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

Делаем кнопку «Наверх» для сайта

Делаем кнопку «Наверх» для сайта

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

Многоуровневое горизонтальное меню на HTML и CSS

Многоуровневое горизонтальное меню на HTML и CSS

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

Другие записи

Онлайн сервис генерации префиксов для CSS свойств

Онлайн сервис генерации префиксов для CSS свойств

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

Горячие клавиши — Visual Studio Code

Горячие клавиши — Visual Studio Code

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

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

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

Создание интернет магазина самостоятельно, без знаний в программировании

Создание интернет магазина самостоятельно, без знаний в программировании

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

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

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

Как отформатировать текст в скайпе?

Как отформатировать текст в скайпе?

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

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

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

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