Как сделать такой баннер для форума

[Angel_Tumanov]

Как сделать такой баннер для форума а именно эту фигуру для баннера дайте приложение через которое делаются баннеры и покажите скринами как

https://i.postimg.cc/NG2bB9qc/Screenshot-20250809-233039.jpg

Если не жалко конечно, буду благодарен. Заранее спасибо

 

[Kolpak]

Figma

Figma на телефоне: как работать с дизайном на мобильном устройстве

Полное руководство по использованию Figma на смартфоне: установка Figma Mirror, работа через браузер, просмотр прототипов и эффективные техники мобильного дизайна.

blog.tutortop.ru

 

[KeoFox]

.userBanner {
    border-radius: 50px;
    padding: 10px;
    font-weight: bold;
    &.admin {
        color: #fff;
        background: #ed9f3d;
    }
}

 

[Angel_Tumanov]

У меня получилось так мне надо чтобы баннер переливался, и логотип не прятал букву "А" Хочу все ровно и красиво

Спойлер

.rpBanner { /** общие свойства ко всем баннерам **/
position: relative;
font-size: 14px;
font-weight: bold;
line-height: 2.5;
padding: 5px 5px 5px 20px;
border: none;
border-radius: 7px;
&.red { /** свойства конкретного баннера **/
background-image: linear-gradient(270deg, rgb(24, 47, 161), rgb(10, 22, 87));
}
color: #fff;
.userBanner-before { /** свойства иконки **/
position: absolute;
left: 5px;
top: 0;
bottom: 0;
background: url("https://i.postimg.cc/3wRqyJRY/Background-Eraser-20250807-194008546-1.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 30px;
height: 100%;
}
}

OFFTOP

дайте нормальный код баннера с логотипотом таким же https://i.postimg.cc/3wRqyJRY/Background-Eraser-20250807-194008546-1.png и чтобы баннер переливался и не прятал букву "А"

И без этих скобов и без этих надписей слов плиз


Буду благодарен)

 

[JustAlex]

.userBanner {
position: relative;
font-size: 14px;
font-weight: bold;
line-height: 2.5;
padding: 5px 5px 5px 20px;
border: none;
border-radius: 7px;
text-indent: 15px;
&.red {
background-image: linear-gradient(270deg, rgb(24, 47, 161), rgb(10, 22, 87));
color: #fff;
}
.userBanner-before {
position: absolute;
left: 5px;
top: 0;
bottom: 0;
background: url("https://i.postimg.cc/3wRqyJRY/Background-Eraser-20250807-194008546-1.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 30px;
height: 100%;
}
}

 

[Angel_Tumanov]

.userBanner {
position: relative;
font-size: 14px;
font-weight: bold;
line-height: 2.5;
padding: 5px 5px 5px 20px;
border: none;
border-radius: 7px;
text-indent: 15px;
&.red {
background-image: linear-gradient(270deg, rgb(24, 47, 161), rgb(10, 22, 87));
color: #fff;
}
.userBanner-before {
position: absolute;
left: 5px;
top: 0;
bottom: 0;
background: url("https://i.postimg.cc/3wRqyJRY/Background-Eraser-20250807-194008546-1.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 30px;
height: 100%;
}
}

OFFTOP

помоги https://pawno-help.ru/posts/46719/

 

[KeoFox]

И без этих скобов и без этих надписей слов плиз

OFFTOP

У меня уже цензурные слова заканчиваются глядя на то что они не могут стереть надписи сами.
Это же конечная станция деградация.

Ну ладно код, но это..... Я знал что целевая аудитория ГТА развитием не отличается, но что бы на столько....

 

[KeoFox]

и логотип не прятал букву "А" Хочу все ровно и красиво

Так и используй весь код, а не только его часть.
Я для кого мобильную адаптацию добавлял?


Даже подписано, читать что ли не умеете?
А если она вставлена но иконка всё равно лезет на текст увеличь значение в padding-left с 35 до 50 допустим.

На счёт анимации, может сделаю, может не сделаю, помогать лишний раз тем кто даже не может додуматься банально стереть подписи и просит дать код без них как то не хочется.

Если и сделаю то точно не в эту тему, а в тему этих баннеров как обновление.

Может кто то другой в погоне за фармом решений нарисует что то.