Я просто просматривал plugins.joshlobe.com , и что бросилось мне в глаза, так это интересное использование теней. Я говорю о тени на связанном изображении с центральным свечением.
Может ли кто-нибудь сказать мне, как добиться эффекта? Это просто эффект изображения или его можно создать с помощью комбинации CSS и некоторого изображения? Любые учебные пособия, где я могу научиться получать такой эффект, также помогут.
Ваша помощь приветствуется.
дк.
Тени на его коробках кажутся комбинацией изображений и 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 теней, и они не кажутся такими универсальными, как тени в первом пакете, зато они бесплатны.