Jump to content

Стиль & обводка аватарок

Maqlao
Maqlao
in Invision Community 4 Support

Featured Replies

Posted
comment_184757

Всех приветсвую.

Подскажите пожалуйста, как реализовать стиль и обводку аватарки. (Показано на изображении)

Спойлер

1928199554_2021-10-1718_42_13.png.8adbc9031caad3ebd57a194123c256a1.png.b8be70c452a582c8658e3b36f89fa11f.png

 

  • Цитата
    comment_184769

    привет. вроде есть код сделать в полигоне.

    ну а об водку можно и самому добавить

    Спойлер

    68678.thumb.PNG.79cb41bd2429d1fc1e6b5742d53222e6.PNG

    Спойлер 
    clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);

     

     

  • Цитата
    comment_184773
    7 минут назад, Anche сказал:

    Почти близко)

    Поигрался с border-radius.

      Показать контент

    1.png.66de5cc625a65e99ea96498b94795bbf.png

    Чтобы не измываться над своим разумом посмотри html5book.ru/css-figury/?ysclid=l6kzettb5i693491497

    И сделаешь на любой выбор

    Anche Не кривись. Там примеры какие захочешь и все с помощью css.

     

    Edited by AHristich

  • Цитата
    • Author
    comment_184775

    AHristich Странно, но с этим не получается, допустим ромбик я попытался сделать, 

    вставляется просто фигура, самой авватарки нет.

  • Цитата
    comment_184776
    5 минут назад, Anche сказал:

    AHristich Странно, но с этим не получается, допустим ромбик я попытался сделать, 

    вставляется просто фигура, самой авватарки нет.

    Ну мы же не знаем как вы делаете 🤷‍♂️

  • Цитата
    • Author
    comment_184777

    AHristich Стандартный код. 

    }
.ipsUserPhoto img {
    border-radius: inherit;
    width: 100%;
    height: 100%;
    vertical-align: top;
    object-fit: cover;
}

    Как из этого сделать, чтобы аватар выглядил ромбиком?)

  • Цитата
    comment_184778
    1 час назад, SlawkA сказал: 
    clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);

    Так не?)

  • Цитата
    comment_184779

    Anche  

    .ipsUserPhoto {
  background:none;
  position: relative;
  z-index: 1800;
  overflow: hidden;
  border-radius:0;
  transform: rotate(45deg);
}
.ipsUserPhoto img {
  max-width: 100% ;
  transform: rotate(-45deg);
}

    Не тестировано!!!

  • Цитата
    • Author
    comment_184780

    AHristich Странно, но я у себя не могу найти .ipsUserPhoto.

    Шаблон default.

    Я тестил через код элемента.

    Edited by Anche

  • Цитата
    comment_184782
    6 минут назад, Anche сказал:

    AHristich Странно, но я у себя не могу найти .ipsUserPhoto.

    Шаблон default.

    Я тестил через код элемента.

    В custom.css добавь этот код.

    В Томске час ночи еслиф што :)

  • Цитата
    • Author
    comment_184783

    Anche Протестил,

    аватар перекрывает звание и бэйдж.

    А в карточке пользователя, вообще бардак.

    Ахаха)

    AHristich 

    Спойлер

    1.png.f47e0e8ec61c5e997035e463d1a92043.png

    Спойлер

    2.png.d28128b6733541692a60dfb2ab37876c.png

     

  • Цитата
    • Author
    comment_184786
    5 минут назад, aLEX49566 сказал:

    сделал за минуту

      Показать контент

    001.PNG.259b6a5d6abd1b600ec47c2636fa7a84.PNG

     

      Показать контент

    002.PNG.2360b111686e1ae60daceab7b82b03e4.PNG

     

    Рад за тебя.

  • Цитата
    comment_184788
    32 минуты назад, AHristich сказал: 
    .ipsUserPhoto {

    Сюда надо вставить это:

    49 минут назад, aLEX49566 сказал:

    Так не?)

     

    И потом уже радоваться ))

    Вернее сюда : 

      

    .ipsUserPhoto {

    это: 

    clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);
  • Цитата
    • Author
    comment_184793
    4 минуты назад, aLEX49566 сказал:

    Ну это уже править тебе под свой форум

    2.png

    Как подогнать под контуры аватара?)

    Edited by Anche

  • Цитата
    comment_184795
    2 часа назад, Anche сказал:

    2.png

    Как подогнать под контуры аватара?)

    image.png.9e2a784d062fbecb54ada80b7d8d33e2.png

    Anche Ставь код внизу ничего не удаляя

    Anche В общем должно выглядет так

    Anche 

    Спойлер

    .ipsUserPhoto {
        background: transparent;
      clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);

     

    Anche image.png.e36490481df4722cb8e60d87d605e3d7.png

    Anche image.png.dd2866a1625682104081ff8085201a07.png

  • Цитата
    comment_184797

    SlawkA  

    .ipsUserPhoto {
    background: transparent;
  clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);
}

     

  • Цитата

    • Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Ответить в этой теме...
    Go to topic listing

    Последние посетители 0

    • No registered users viewing this page.