Una molto semplice CSS chat bubble
Ogni volta che si implementa un nuovo elemento di design nel tuo sito, ci sono una vasta gamma di approcci che è possibile adottare per conseguire lo stesso risultato. Spesso, sento che la più semplice delle soluzioni è la migliore. In sede di attuazione i commenti "utente", ho deciso di avvolgere ogni commento utente in una sorta di "chat box bolla", proprio come si vedrebbe in una storia a fumetti. Ho sperimentato varie soluzioni che mi ha dato diverse quantità di flessibilità e prestazioni, ma alla fine ho risolto in una soluzione molto semplice che ha portato in quello che penso è un elegante CSS chat bolla.
L'Idea
Prima di tutto, voglio dire che questo approccio funziona davvero solo se si conosce la dimensione massima dei dati commento.Gli utenti non possono inserire commenti che sono più di 300 caratteri in lunghezza, quindi ho una buona idea di quanto grande ciascuna casella commento potrebbe eventualmente ottenere. Invece di splicing mia casella di commento in più immagini (che è più flessibile, ma diminuisce le prestazioni e aumenta la pagina: i tempi di download), ho deciso di creare un'unica immagine che viene utilizzata per avvolgere ogni commento chat bolla:
L'immagine:
Fondamentalmente, la mia chat box bolla può ridursi a qualsiasi dimensione, ma non possono crescere oltre l'altezza di questa immagine. Se si conosce esattamente come i tuoi dati di grandi dimensioni può ottenere, questa è una soluzione molto semplice da implementare. Tutto ciò che ho bisogno di mostrare la mia chat bolle è un po 'di HTML e CSS.
The Nitty-Gritty:
HTML:
<div class="bubble">
<div class="bubbleHeader"></div>
<div class="bubbleInner">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
CSS:
.bubble {
width: 477px;
background: url('/path/to/commentBg.png') no-repeat;
background-position: 100% 100%;
}
.bubbleHeader {
height: 20px;
background: url('/path/to/commentBg.png') no-repeat;
background-position: 100% 0;
}
.bubbleInner {
padding: 0 20px 10px 37px;
}
Assicuratevi di modificare "/ path / to / comment.Bg.png" per riflettere il percorso effettivo per l'immagine di sfondo si sta utilizzando. Una volta che hai lasciato cadere questo nel vostro disegno, si dovrebbe vedere qualcosa che assomiglia un po 'questo.
Buona fortuna, e felice stile!
Our sponsors:
