HT_lz_cont_head
{{link_current_page~=orum=46396.start}} {{link_current_page~=orum=46396.end}}

Bubble

Antworten
  • Seite 1 von 2
#1
07.04.2023 09:55
avatar  l2otbart
#1 Bubble
l2
l2otbart

teste gerade ein neues Feature

Bubble ...

eine Idee aus Whatsapp-Design-fuer-Iconbar

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
 

<style>
.bubble {
    position: relative;
		margin-left:30px;
    background: linear-gradient(315deg, #472a06 5%, #ada59b 100%);
    color: #FFFFFF;
    font-family: Arial;
    font-size: 15px;
    line-height: 20px;
    box-shadow: 5px 5px 2px 0px #A3A3A3;
    text-align: center;
    width: 350px;
		max-width:80%;
		min-height:100px;
		display:block;
    border-radius: 55px;
    padding: 30px;
    display: inline-block;
}
.bubble:after {
    content: '';
    position: absolute;
    z-index: 1;
	  border-style: solid;
    display: block;	
}
 
@media (max-width: 750px) { .bubble:after {
  	width: 0;
    border-color: #ada59b transparent;
    border-width: 0 16px 20px;
    top: -20px;
    left: 20%;
    margin-left: -16px;
} }
@media (min-width: 749px) { .bubble:after {
    width: 0;
    border-width: 0 20px 20px 0;
    border-color: transparent #ada59b transparent transparent;
    top: 42%;
    left: -20px;
    margin-top: -10px;
} } 
 

</style>
 
 



erzeugt mit einem Generator auf dieser Seite https://www.html-code-generator.com/css/...ubble-generator

für verschiedene Bildschirmbreiten braucht es noch eine Anpassung, - Feinarbeit eben ....

dazu braucht es noch einen Forencode:

aus [bubble] wird <div class="bubble">
aus [/bubble] wird </div>

hier findet man "bubble" in der Iconbar im Sub "BBC-2"

~ ~ a smile 😃 says more than 1000 words ~ ~


 Antworten

 Beitrag melden
#2
07.04.2023 09:56
avatar  l2otbart
#2 RE: Bubble
l2
l2otbart


ein kleiner test

mit [ style ]

~ ~ a smile 😃 says more than 1000 words ~ ~


 Antworten

 Beitrag melden
#3
07.04.2023 11:55
avatar  l2otbart
#3 RE: Bubble
l2
l2otbart

.



die Blase habe ich mal versucht
mit dem [style]-Code
zu erzeugen, den Pfeil muss
man sich dazu denken



den Pfeil bekommt man also auch mit [style] hin

~ ~ a smile 😃 says more than 1000 words ~ ~


 Antworten

 Beitrag melden
#4
07.04.2023 18:45
avatar  Olaf ( Gast )
#4 RE: Bubble
Ol
Olaf ( Gast )

Ich würde die festen Grössen aus der CSS nehmen (width,line-height,max-width,min-height) und würde dafür "max-width: fit-content;" einsetzen,dann wird die Grösse nach den Inhalt automatisch angepasst.

Gruß
Olaf


 Antworten

 Beitrag melden
#5
08.04.2023 09:03
avatar  l2otbart
#5 RE: Bubble
l2
l2otbart

Danke Olaf,

... lass mal testen mit verschiedenen Inhalten

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
 
.bubble2 {
    position: relative;
		margin-left:30px;
		margin-top:25px;
    background: linear-gradient(315deg, darkblue 5%, dodgerblue 100%);
    color: #FFFFFF;
    font-family: Arial;
    box-shadow: 5px 5px 2px 0px #A3A3A3;
    text-align: center;
		max-width:fit-content;
		display:block;
    border-radius: 55px;
    padding: 30px;
    display: inline-block;
}
.bubble2:after {
    content: '';
    position: absolute;
    z-index: 1;
	  border-style: solid;
    display: block;	
}
 
@media (max-width: 700px) { .bubble2:after {
  	width: 0;
    border-color: dodgerblue transparent;
    border-width: 0 16px 20px;
    top: -20px;
    left: 60px;
    margin-left: -16px;
} }
@media (min-width: 700px) { .bubble2:after {
    width: 0;
    border-width: 0 25px 20px 0;
    border-color: transparent dodgerblue transparent transparent;
    top: 40px;
    left: -20px;
    margin-top: -10px;
} } 
 

 



... habe Olafs Vorschlag mal aufgegriffen und eine 2.Variante mit "width:fit-content" erstellt. Zur Demo hier ohne Umbruch
... habe Olafs Vorschlag mal aufgegriffen und eine 2.Variante mit "width:fit-content" erstellt. Zur Demo hier ohne Umbruch

? ?

H
a
l
l
o
! H
a
l
l
o
!

aber wahrscheinlich wird man
den Zeilenumbruch selbst
passend ausführen
aber wahrscheinlich wird man
den Zeilenumbruch selbst
passend ausführen

~ ~ a smile 😃 says more than 1000 words ~ ~


 Antworten

 Beitrag melden
Antworten
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!