Внутренняя тень на аватарах, подобие рамки через 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="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
Сообщений: 7562
Уважение: +6103
Позитив: +6668
Пол: Мужской
Последний визит:
Сегодня 20:59: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
Сообщений: 7562
Уважение: +6103
Позитив: +6668
Пол: Мужской
Последний визит:
Сегодня 20:59:12

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
Сообщений: 7562
Уважение: +6103
Позитив: +6668
Пол: Мужской
Последний визит:
Сегодня 20:59: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
Сообщений: 7562
Уважение: +6103
Позитив: +6668
Пол: Мужской
Последний визит:
Сегодня 20:59: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
Сообщений: 12072
Уважение: +8298
Позитив: +5871
Пол: Мужской
Последний визит:
Сегодня 20:00:06

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