Chat-Fenster mit CSS

Ich stecke mit einem Chat-Fenster fest, das wir mit Hilfe von CSS nach, vor Elementen erstellen. Mein Code wird unten hinzugefügt. Meine Fragen sind:Chat-Fenster mit CSS

Warum wir content gesetzt tun, wenn es leer ist?
Warum wird die position in absolute in :after und :before geändert?
Hauptfrage ist: Wie zeichnen wir den Pfeil auf der linken Seite?

.bubble { 
 
    position: relative; 
 
    width: 580px; 
 
    min-height: 65px; 
 
    padding: 15px; 
 
    background: #fff; 
 
    border-radius: 10px; 
 
    border: 1px solid #ccc; 
 
    margin-left: 50px; 
 
    margin-top: 59px; 
 
} 
 

 
.bubble:after { 
 
    content: ''; 
 
    position: absolute; 
 
    border-style: solid; 
 
    border-width: 15px 15px 15px 0; 
 
    display: block; 
 
    width: 0; 
 
    z-index: 1; 
 
    margin-top: -15px; 
 
    left: -15px; 
 
    top: 50%; 
 
    border-color: transparent #fff; 
 
} 
 

 
.bubble:before { 
 
    content: ''; 
 
    position: absolute; 
 
    border-style: solid; 
 
    border-width: 15px 15px 15px 0; 
 
    display: block; 
 
    width: 0; 
 
    z-index: 0; 
 
    margin-top: -15px; 
 
    left: -16px; 
 
    top: 50%; 
 
    border-color: transparent red; 
 
}

<html> 
 

 
<body> 
 
    <div class="bubble"> 
 
    <div class="Pointer"> 
 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
 
     </p> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2017-07-28 Neha

Pseudo-Elemente erstellt ** zusätzliche Inhalte ** Stil. Dieser * Inhalt * ist das, was Sie in die 'content' Eigenschaft schreiben. Wenn Sie für die Eigenschaft 'content' keinen Wert angeben, wird dieser auf den Standardwert 'none' zurückgesetzt. Wenn der Inhalt "none" ist, dann gibt es nichts zu stylen und welches Styling Sie auch anwenden, es wird nichts angewendet werden. –

Der Pfeil wird mit zwei Dreiecken erstellt, die mit den Rahmeneigenschaften erstellt wurden. Ein rotes Dreieck mit: vor und ein weißes mit: nach. Der weiße wird oben mit Z-Index und das rote Dreieck wird einen Pixel mehr nach links gelegt. Jetzt sieht es so aus, als wäre eine Linie gezeichnet, aber es zeigt nur einen kleinen Teil des roten Dreiecks. – Gerard

Der leere Inhalt ist einfach eine Möglichkeit, einen Stil „Objekt“ zu erstellen, die nicht wirklich „Inhalt“ enthalten. Die Position bezieht sich auf die Position des "gestylten, aber leeren Dinges" vor und nach Ihrer "Blase", sie bezieht sich nicht auf die Position der Blase selbst.

Quelle

2017-07-28 16:55:18

1) Der Grund, warum Sie Inhalt als leer festlegen, besteht darin, dem HTML mitzuteilen, dass das Element weiterhin angezeigt werden soll. Wenn Sie den Inhalt nicht auf eine leere Zeichenfolge festlegen (z. B. content: '';), wird das Element nicht angezeigt. Wenn Sie die content: ''; Zeile in Ihrem .bubble:after entfernen, erhalten Sie das folgende Snippet. Dann wird der rote Pfeil ausgefüllt.

2) Sie möchten, dass das Element eine absolute Position für das Elternelement darstellt. So wird es immer an genau der Stelle sein, an der es sein soll.

3) Sie zeichnen den Pfeil mit dem Selektor .bubble:before und der Eigenschaft border-color. Wenn Sie transparent aus der border-color -Eigenschaft in Ihrem .bubble entfernen: vor Selektor erhalten Sie ein Quadrat. nicht das schön aussehende Dreieck.

Insgesamt, seit Sie CSS lernen, und ich nehme an, dass Sie Tutorials folgen, würde ich vorschlagen, wenn Sie nicht wissen, wie etwas funktioniert, kommen Sie Zeile für Zeile, und aktualisieren Sie dann Ihre Seite. Sehen Sie nach, ob sichtbare Änderungen auf dem Bildschirm angezeigt werden.

Um diese Frage zu beantworten, habe ich eine Zeile entfernt und dann aktualisiert, um zu sehen, wie Ihr Code geschrieben wurde. Dann lege es zurück, wenn ich die Änderungen nicht mochte. : D

.bubble { 
 
    position: relative; 
 
    width: 580px; 
 
    min-height: 65px; 
 
    padding: 15px; 
 
    background: #fff; 
 
    border-radius: 10px; 
 
    border: 1px solid #ccc; 
 
    margin-left: 50px; 
 
    margin-top: 59px; 
 
} 
 

 
.bubble:after { 
 
    position: absolute; 
 
    border-style: solid; 
 
    border-width: 15px 15px 15px 0; 
 
    display: block; 
 
    width: 0; 
 
    z-index: 1; 
 
    margin-top:-15px; 
 
    left: -15px; 
 
    top:50%; 
 
    border-color: transparent #fff; 
 
} 
 

 
.bubble:before { 
 
    content: ''; 
 
    position: absolute; 
 
    border-style: solid; 
 
    border-width: 15px 15px 15px 0; 
 
    display: block; 
 
    width: 0; 
 
    z-index: 0; 
 
    margin-top:-15px; 
 
    left:-16px; 
 
    top: 50%; 
 
    border-color: transparent red; 
 
}

<html> 
 
<head> 
 
</head> 
 
<body> 
 
    <div class="bubble"> 
 
      <div class="Pointer"> 
 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting 
 
       industry. 
 
      </p> 
 
      </div> 
 
    </div> 
 
</body> 
 
</html>

Quelle

2017-07-28 17:06:57

Für die Frage „Wie zeichnen wir den Pfeil auf der linken Seite“: Die Dreiecksform durch die css Pseudo-Klasse erreicht wird .bubble:after wobei wir Rahmenbreite als 15px 15px 15px 0px gegeben haben für die Rahmenbreite oben, rechts, unten und links. Für mehr solcher css Tricks beziehen Sie sich bitte here.

Quelle

2017-07-28 17:07:35 Abhishek

Weil es die Art und Weise ist die CSS funktioniert: P
Absoluten Um eine bessere Kontrolle Position verwendet wird (jedoch ist es im Verhältnis zu Eltern)
Hier Trick verwendet wird - Pfeil auf der linken Seite erstellt wird rote und weiße Dreiecke (weiß ist auf rot, überschneidet es aber so, dass die 1px Grenze von rot sichtbar ist).Trinagles verwenden dicke Grenzen div Elemente zeichnen - es auf folgende Beispiel besser sichtbar ist:

Schauen Sie hier: https://jsfiddle.net/q30Lnbfr/

.test1 { 
    border-style: solid; 
    border-width: 15px 15px 15px 0; 
    width: 0; 
    border-color: transparent red; 
} 

.test2 { 
    border-style: solid; 
    border-width: 15px 15px 15px 15px; 
    width: 30px; 
    border-color: green red; 
} 

<div class="test1"> 

</div> 
<br> 
<div class="test2"> 

</div>

Quelle

2017-07-28 17:08:16

* Weil es so ist, wie das CSS funktioniert * ist nicht wirklich eine Antwort. –

Chat-Fenster mit CSS

Antwort

Verwandte Themen