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

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

Автор: Grey_Fox
Заслуженный
Зарегистрирован: Сб, 3 Окт 2015
Сообщений: 97
Уважение: +9
Позитив: +25
Последний визит:
Пт, 27 Сен 2024 14:04:35

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

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

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

Код:

<li class="pa-avatar item2">
<a href="#" class="th">
<img src="https://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
Сообщений: 7393
Уважение: +5894
Позитив: +6521
Пол: Мужской
Последний визит:
Вчера 21:01:12

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
Последний визит:
Пт, 27 Сен 2024 14:04:35

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

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

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

0

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

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7393
Уважение: +5894
Позитив: +6521
Пол: Мужской
Последний визит:
Вчера 21:01:12

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

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

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

<li class="pa-avatar item2">
<img src="https://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
Сообщений: 7393
Уважение: +5894
Позитив: +6521
Пол: Мужской
Последний визит:
Вчера 21:01:12

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
Сообщений: 7393
Уважение: +5894
Позитив: +6521
Пол: Мужской
Последний визит:
Вчера 21:01:12

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

Код:

<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
Сообщений: 11331
Уважение: +7753
Позитив: +5545
Пол: Мужской
Последний визит:
Вчера 23:22:29

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