Как получить дугообразные тени с эффектом центрального свечения в Photoshop?

Я просто просматривал plugins.joshlobe.com , и что бросилось мне в глаза, так это интересное использование теней. Я говорю о тени на связанном изображении с центральным свечением.

введите описание изображения здесь

Может ли кто-нибудь сказать мне, как добиться эффекта? Это просто эффект изображения или его можно создать с помощью комбинации CSS и некоторого изображения? Любые учебные пособия, где я могу научиться получать такой эффект, также помогут.

Ваша помощь приветствуется.

дк.

Ответы (2)

Тени на его коробках кажутся комбинацией изображений и CSS. Соответствующий код из его файла CSS:

.comment, .trackback, .pingback { position:relative;margin-bottom: 30px;padding:15px;border:4px solid #eee;background: #f8f8f8;
    border-color: #ddd #ddd #ccc;
    border-radius: 3px;-border-radius: 3px;-webkit-border-radius: 3px; -moz-border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    -box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1) !important;
 }

.comment:after, .trackback:after, .pingback:after { 
  bottom: -35px;
    content: url("../images/shadow-after.png") !important;
    position: absolute;
    right: 0;
    z-index: 1;
}   
.comment:before, .trackback:before, .pingback:before { 
  bottom: -35px;
    content: url("../images/shadow-before.png") !important;
    position: absolute;
    left: 0;
    z-index: 1;
}

Эффект «центрального свечения» на самом деле представляет собой пространство между левым и правым («до» и «после») теневым PNG. Насколько мне известно, в прямом CSS нет возможности применять неравномерные тени.

Я не могу помочь вам с css, но что касается самих изображений, я бы рекомендовал использовать такой набор:

https://creativemarket.com/Rhett/18-Shadows-for-images-and-sliders

или это:

http://www.pixeden.com/psd-web-elements/web-slider-psd-shadows-pack

Первый пакет стоит всего 4 доллара, и я им постоянно пользуюсь. Это НАМНОГО проще, чем пытаться сделать их с нуля в Photoshop. В URL указано 18 теней, но на самом деле вы получаете 26.

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