Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Форум для новичков » Внутренняя тень на аватарах, подобие рамки через CSS


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

Сообщений 1 страница 13 из 13

1

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

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

Это, может быть, чушь, т.к. я экспериментировала через просмотр кода в хроме, но смысл, думаю, понятен:
Код:
<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

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

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

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

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

0

4

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

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

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

Код:
<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

Grey_Fox
kolobdur74
Сделал чуть универсальней, + поправил, чоб аватарка не улетала влево
http://sa.uploads.ru/dmsAM.png

.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

8

kolobdur74, Alex_63
О, это же то, что надо!
Спасибо!

Отредактировано Grey_Fox (Чт, 23 Фев 2017 17:24:37)

+2

9

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

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

Алекс, эту куда ставить надо? :blush:  Хочу попробовать)

+1

10

прогресссссс написал(а):

Алекс, эту куда ставить надо?   Хочу попробовать)

Увидела на другой ветке. Спасибо! http://i5.imageban.ru/out/2015/12/25/479474245de9974cd8fe569cd643e7dc.gif

+1

11

прогресссссс
CSS трюки

+2

12

Супер! Дополнили вариантом с закруглением углов — многим будет кстати.)

+1

13

прогресссссс
Grey_Fox
Добавил пояснение про бордеры( если нун оформить аватарку) > CSS трюки


Valeria Klamer
(*СПС :flag:

+1


Вы здесь » Единый форум поддержки » Форум для новичков » Внутренняя тень на аватарах, подобие рамки через CSS