Внутренняя тень на аватарах, подобие рамки через CSS

Поделиться1Чт, 23 Фев 2017 13:48:37

Автор: Grey_Fox
Заслуженный
Зарегистрирован: Сб, 3 Окт 2015
Сообщений: 97
Уважение: +9
Позитив: +25
Последний визит:
Ср, 22 Ноя 2023 00:52:25

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

На данный момент получается сделать такую настройку для отдельной картинки следующего вида:

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

Код:

<li class="pa-avatar item2">
<a href="#" class="th">
<img src="http://forumavatars.ru/img/avatars/0017/2e/bd/2-1484772171.jpg" width="120" height="120" alt="Grey_Fox" title="Grey_Fox">
</a>
</li>

А это CSS-код для класса th:

Код:

.th{
    display: inline-block;
    vertical-align: top;
    position: relative;
}
.th:after{
    content:'';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index:2;
    box-shadow:0 0 10px 2px #000 inset;
}
.th img{
    vertical-align: top;
    width: auto;
    height: auto;
}

Прошу меня извинить, если данный вопрос уже затрагивался тут и тыкнуть мне пальцем, поскольку сама не нашла.
И заранее спасибо тем, кто поможет это претворить в жизнь.

P.S. И, да, с праздником, защитники!

0

Поделиться2Чт, 23 Фев 2017 14:20:10

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5808
Позитив: +6437
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 13:30:41

Grey_Fox, Спасибо)) Внутренней тени не получится, бо картинка закроет, а вот внешнюю на аватар поставить можно, к примеру:

Код:

<style>
.post-author .pa-avatar img {
box-shadow: 0px 0px 27px 6px #000000;
border: 2px!important;
}
</style>

Бордером регулируем отступ тени.. Необходимую тень можно сгенерировать через онлайн генератор тени: http://www.cssmatic.com/box-shadow

0

Поделиться3Чт, 23 Фев 2017 15:16:31

Автор: Grey_Fox
Заслуженный
Зарегистрирован: Сб, 3 Окт 2015
Сообщений: 97
Уважение: +9
Позитив: +25
Последний визит:
Ср, 22 Ноя 2023 00:52:25

kolobdur74 написал(а):

Grey_Fox, Спасибо)) Внутренней тени не получится, бо картинка закроет, а вот внешнюю на аватар поставить можно.
Бордером регулируем отступ тени.. Необходимую тень можно сгенерировать через онлайн генератор тени: http://www.cssmatic.com/box-shadow

Благодарю, kolobdur74. Ну, со внешней тенью непоняток нет, верно.
Но мало ли... каким-нибудь скриптом всё-таки получится именно внутреннюю припилить?)
По принципу добавления перед любой аватарой такой мнимой ссылки со своим классом...

0

Поделиться4Чт, 23 Фев 2017 15:21:59

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5808
Позитив: +6437
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 13:30:41

Grey_Fox написал(а):

Ну, со внешней тенью непоняток нет, верно.
Но мало ли... каким-нибудь скриптом всё-таки получится именно внутреннюю припилить?)
По принципу добавления перед любой аватарой такой мнимой ссылки со своим классом...

Нет не получится, НТМЛ аватарки:

<li class="pa-avatar item2">
<img src="http://forumavatars.ru/img/avatars/0000/14/1c/23723-1429784059.gif" width="105" height="120" alt="kolobdur74" title="kolobdur74">
</li>

На НТМЛ картинки навести тень не получится, тень будет под картинкой... Это не фон..

Отредактировано kolobdur74 (Чт, 23 Фев 2017 15:22:17)

0

Поделиться5Чт, 23 Фев 2017 15:54:56

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5808
Позитив: +6437
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 13:30:41

Grey_Fox
Ну, вот нашел вариант, может подойдет вам:

Код:

<style>
.pa-avatar {
    position: relative;
    max-width: 100%;
    float: left;  
    }
 
.pa-avatar::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: inset 0 0 18px #F8F8FF;
    -moz-box-shadow: inset 0 0 18px #F8F8FF;
    -webkit-box-shadow: inset 0 0 18px #F8F8FF;
   } 

.pa-avatar img {
    float: left;
    }

.post-author .pa-avatar img {
    border: 0px !important;
    border-radius: 0px !important;
    }
</style>

0

Поделиться6Чт, 23 Фев 2017 16:09:52

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5808
Позитив: +6437
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 13:30:41

Поправил, чтобы обтекания не было у полей:

Код:

<style>
.pa-avatar {
    position: relative;
    max-width: 100%;
    float: left;  
    }
 
.pa-avatar::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: inset 0 0 18px #F8F8FF;
    -moz-box-shadow: inset 0 0 18px #F8F8FF;
    -webkit-box-shadow: inset 0 0 18px #F8F8FF;
   } 
 
.pa-avatar img {
    float: left;
    }
 
.post-author .pa-avatar img {
    border: 0px !important;
    border-radius: 0px !important;
    }

.post-author ul li {clear: left;}
</style>

+1

Поделиться7Чт, 23 Фев 2017 16:14:18

Автор: Alex_63
Администратор
Зарегистрирован: Чт, 11 Дек 2014
Сообщений: 10720
Уважение: +7204
Позитив: +5267
Пол: Мужской
Последний визит:
Сегодня 19:50:34

Grey_Fox
kolobdur74
Сделал чуть универсальней, + поправил, чоб аватарка не улетала влево

.pa-avatar {
position:relative;
max-width:100%;
display:inline-block;
}
.pa-avatar:before {
content:"";position:absolute;
top:0;bottom:0;left:0;right:0;
box-shadow:inset 0 0 20px #F8F8FF;
-moz-box-shadow:inset 0 0 20px #F8F8FF;
-webkit-box-shadow:inset 0 0 20px #F8F8FF;
}
.pa-avatar img {float:left}
.post-author .pa-avatar img {border:0px!important}

+2