-Tags im Kommentartext, die zusätzliche Links zum Bearbeiten oder Teilen enthalten können.
Die inneren Kommentare verwenden interne ungeordnete Listen mit der Klasse .Antworten an jedem befestigt. Dadurch können wir Kommentarebenen mit einer Tiefe von 3 oder sogar 4 Threads duplizieren. Für diese Demo habe ich nur Stile erstellt, um Kommentare auf dreistufiger Ebene zu unterstützen. Aber es ist sehr einfach, Threads anzupassen, um noch tiefer zu gehen.
Ut nec interdum libero. Sed felis lorem, venenatis sed malesuada vitae, tempor vel turpis. Mauris in dui velit, vitae mollis risus. Cras lacinia lorem sit amet augue mattis vel cursus enim laoreet. Vestibulum faucibus scelerisque nisi vel sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque massa ac justo tempor eu pretium massa accumsan. In pharetra mattis mi et ultricies. Nunc vel eleifend augue. Donec venenatis egestas iaculis.
Sed felis lorem, venenatis sed malesuada vitae, tempor vel turpis. Mauris in dui velit, vitae mollis risus.
Morbi id neque nisl, nec fringilla lorem. Duis molestie sodales leo a blandit. Mauris sitzt mit Ultricies Libero. Etiam quis diam in lacus molestie fermentum non vel quam.
Beachten Sie, dass selbst die Thread-Antworten der unteren Ebene immer noch genau derselben Formatierung folgen wie Kommentare der obersten Ebene. Dies ist natürlich hilfreich, wenn Sie diese Stile in ein CMS wie WordPress integrieren. Anschließend können Sie dynamisch Kommentare generieren, um dieselbe Vorlage auszufüllen.
Ich habe ein weiteres Dokument erstellt, „styles.css“, das unseren gesamten grundlegenden CSS-Code für die Positionierung und Gestaltung von Seiteninhalten enthält.
Ich beginne mit meinen eigenen angepassten CSS-Resets, die auf basieren Codeausschnitte von Eric Meyer . Dadurch werden alle Schriftarten, Ränder, Abstände und vor allem die Boxgröße für alle Elemente auf der Seite in allen gängigen Browsern zurückgesetzt. Möglicherweise fällt Ihnen auch auf, dass ich einige Eigenschaften zum dynamischen Aktualisieren der CSS-Hervorhebungsfarbe verwende.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, akronym, adresse, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, klein, Strike, stark, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, Formular, Beschriftung, Legende, Tabelle, Bildunterschrift, Tbody, Tfoot, Thead, Tr, Th, TD, Artikel, Seite, Leinwand, Details, Einbettung, Abbildung, Bildunterschrift, Fußzeile, Kopfzeile, Hgroup, Menü, Navigation, Ausgabe, Ruby, Abschnitt, Zusammenfassung, Zeit, Markierung, Audio, Video { margin: 0; Polsterung: 0; Rand: 0; Schriftgröße: 100 %; Schriftart: erben; vertikal ausrichten: Grundlinie; Gliederung: keine; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; Boxgröße: border-box; } html { Höhe: 101 %; } body { Hintergrund: #e3e0ef url(‘images/bg.png’); Schriftgröße: 62,5 %; Zeilenhöhe: 1; Schriftfamilie: Arial, serifenlos; Polsterung unten: 65px; } ::selection { Hintergrund: #d7d0f3; } ::-moz-selection { Hintergrund: #d7d0f3; } ::-webkit-selection { Hintergrund: #d7d0f3; } Article, Aside, Details, Figcaption, Figure, Footer, Header, Hgroup, Menu, Nav, Section { Display: Block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ”; Inhalt: keiner; } strong { Schriftart: fett; } Tabelle { Border-Collapse: Collapse; Randabstand: 0; } img { border: 0; maximale Breite: 100 %; }
Im weiteren Verlauf habe ich Code zum Zurücksetzen der grundlegenden Stile für h1-Elemente und Absätze auf der Seite eingefügt. Wir müssen eine Kernstruktur für die Wrapper- und Container-Divs einrichten. In den Container habe ich tatsächlich ein paar CSS3-Box-Schatteneigenschaften eingefügt, um sich vom Hintergrund abzuheben.
h1 {Schriftfamilie: „Wellfleet“, „Trebuchet MS“, Tahoma, Arial, serifenlos; Schriftgröße: 2,85em; Zeilenhöhe: 1,6em; Schriftstärke: normal; Farbe: #756f8b; Textschatten: 0px 1px 1px #fff; Rand unten: 21px; } p { Schriftfamilie: Arial, Geneva, Verdana, serifenlos; Schriftgröße: 1,3em; Zeilenhöhe: 1,42em; Rand unten: 12px; Schriftstärke: normal; Farbe: #656565; } a { color: #896dc6; Textdekoration: keine; } a:hover { text-decoration: underline; } /* Seitenlayoutstruktur */ #w { display: block; Breite: 700px; Rand: 0 automatisch; Polsterung oben: 35px; } #container { display: block; Breite: 100 %; Hintergrund: #fff; Polsterung: 14px 20px; -webkit-Grenzradius: 4px; -moz-border-radius: 4px; Randradius: 4px; -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.3); -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.3); Box-Shadow: 1px 1px 1px rgba(0,0,0,0.3); }
Mit diesem letzten Teil des Codes, den Sie sich ansehen müssen, werden nun alle unsere Kommentare auf der Seite eingerichtet.
#comments { display: block; } #comments .cmmnt, ul .cmmnt, ul ul .cmmnt { display: block; Position: relativ; Polsterung links: 65px; border-top: 1px solid #ddd; } #comments .cmmnt .avatar { position: absolute; oben: 8px; links: 0; } #comments .cmmnt .avatar img { -webkit-border-radius: 3px; -moz-border-radius: 3px; Randradius: 3px; -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.44); -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.44); Box-Shadow: 1px 1px 2px rgba(0,0,0,0.44); -webkit-transition: alle 0,4 s linear; -moz-transition: alle 0,4 s linear; -ms-Übergang: alle 0,4 s linear; -o-Übergang: alle 0,4 s linear; Übergang: alle 0,4 s linear; } #comments .cmmnt .avatar a:hover img { opacity: 0.77; }
Um jeweils zu beginnen .cmmnt Das Listenelement ist so konzipiert, dass es mit jedem internen
-Container nach links verschoben wird. Ich habe thepadding-left: 65px; Werteinstellung so, dass jeder Block unabhängig von Länge oder Höhe zur Seite geschoben wird. Jedes Avatar-Bild ist absolut auf der linken Seite positioniert, so dass durch die zusätzliche Polsterung der Inhalt vom Rand ferngehalten wird.
Ich habe auch einige einzigartige CSS3-Randradiuseffekte und Übergänge auf die Avatarbilder angewendet. Wenn Sie mit der Maus über die einzelnen Elemente fahren, wird die Deckkraft innerhalb von 400 Millisekunden schrittweise auf 77 % reduziert. Dies ist ein sehr interessanter Effekt, der mit nur wenigen kurzen Codezeilen erzielt werden kann. Früher war langes JavaScript erforderlich, um auch nur annähernd diesen Übergang zu reproduzieren.
#comments .cmmnt .cmmnt-content { padding: 0px 3px; Polsterung unten: 12px; Polsterung oben: 8px; } #comments .cmmnt .cmmnt-content header { Schriftgröße: 1.3em; Bildschirmsperre; Rand unten: 8px; } #comments .cmmnt .cmmnt-content header .pubdate { color: #777; } #comments .cmmnt .cmmnt-content header .userlink { Font-Weight: Bold; } #comments .cmmnt .replies { margin-bottom: 7px; }
In diesem letzten Teil des CSS-Codes positionieren wir den Inhalt lediglich so, dass er zusätzlichen Abstand erhält, und aktualisieren die Farbschemata.
Der Bereich der Frontend-Webentwicklung ist riesig und umfasst eine große Vielfalt an Benutzeroberflächen. In diesem Tutorial haben wir uns einige Optionen angeschaut, die den Benutzern einen direkteren Kontakt miteinander ermöglichen. Dies ist wahrscheinlich die einfachste Lösung für die Präsentation von Kommentaren, da Konversationen auf einem Monitor in mehreren Ebenen angezeigt werden.
Haben Sie ein Kommentarsystem für eine Website erstellt? Welche Herausforderungen sind mit der Gestaltung von Gesprächen verbunden? Lass es uns in den Kommentaren wissen.
Ausgewähltes Bild/Miniaturansicht, Kommentarbild über Shutterstock.
