¿Poner logo justo en el borde del box?
Publicado por Vance (1 intervención) el 31/03/2023 17:07:06
Buenas, estaba editando mi chatbox para twitch y queria poner un logo que se quedase justo en el borde del box, le puse un margin-right pero el box se modifica el tamaño al tener un nombre de usuario mas largo o mas pequeño, entonces el logo queda fuera del box, quiero que quede justo en el borde es decir dentro y fuera.
dejo una imagen de como se ve:
dejo una imagen de como se ve:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
@import url(https://fonts.googleapis.com/css?family=Roboto:700);
@import url(https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Merriweather:wght@700;900&display=swap);
* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {line-height: 1.5em; color: #fff; -webkit-mask-image: -webkit-gradient(linear, left 16%, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));}
#log>div { position: relative; padding-top: 21px; margin-bottom: 10px; }#log>div { animation: message .3s ease forwards, fadeOut 0.5s ease 15s forwards;}.colon { display: none; }
#log {position: absolute; width: 100%; bottom: 0; left: 0; padding: 0 10px 10px;}/* ===== USERNAME ===== */#log .meta {box-shadow: 10px 10px 10px rgba(9, 19, 20, 0.35); position: absolute; top: 0; left: 10px; padding: 9px 14px; line-height: 15px; z-index: 1;font-family: 'Ubuntu'; font-size: 14px; font-weight: 900;}
#log .meta .badges {float: left; margin-right: 10px;} #log .meta .badges > img { width: 18px; height: 18px; margin-right: 5px;} #log .meta .badges > img:last-child {margin-right: 0;} #log .meta .name {float: left; line-height: 21px;}#log .meta .logo {position:absolute; margin-left:100px;}/* ===== USERMESSAGE ===== */ #log .triangulo{width: 0;height: 0;border-top: 18px solid #C8FFFB;
border-right: 9px solid transparent;
border-left: 9px solid transparent;
float:right;margin-left: 10px;
margin-top:5px;
}#log .message {position: relative; min-height: 20px;} #log .message .container-message {box-shadow: 10px 10px 10px rgba(9, 19, 20, 0.35); background: rgba(9, 19, 20, 0.75); padding: 20px 18px 15px 18px; border: 2px solid #C8FFFB; display: inline-block;font-family: 'Roboto'; font-size: 18px; word-break: break-word;}
#log .container-message::before {content: '';
position: absolute;bottom: -6px;
border-top: 6px solid #C8FFFB;
left: 0;border-right: 7px solid transparent;
}.meta{
display:inline-block;/*Esto es para que el contenedor no ocupe todo el ancho de la pantalla.*/
position:relative;}/*End-Daniel briceño change*/ #log .message .container-message .emote {background-image: none !important;} #log .message .container-message .emote img {max-width: 25px;}@keyframes message {0% {
max-height: 100vmax;
}80% {
transform: scale(1.1);
}100% {
transform: scale(1);
max-height: 100vmax;
overflow: visible;padding-top: 1rem;
}}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- item will be appened to this layout --><div class="top-degrade"></div>
<!-- item will be appened to this layout --><div id="log" class="sl__chat__layout"></div>
<!-- chat item --><script type="text/template" id="chatlist_item">
<div data-from="{from}" data-id="{messageId}">
<div class="meta" style="background-color: {color};">
<img src="https://png.pngtree.com/png-vector/20210617/ourlarge/pngtree-logo-gratis-png-image_3466978.jpg" width="20px" class="logo"/>
<span class="badges"></span>
<div class="name">
<span class="caption" style="background-color:{color-caption}">{from}</span>
</div>
Valora esta pregunta
0
