So erstellen Sie einen Thread-Kommentarblock mit HTML5 und CSS3

Blogs und Foren verfügen häufig über integrierte Thread-Kommentarantworten in ihrem Netzwerk. Beliebte soziale Netzwerke Reddit Und Hacker-News Beide unterstützen Thread-Kommentare, die es Benutzern ermöglichen, direkt inline mit Kommentaren zu antworten und ihre Meinung zu äußern, ohne sich im Durcheinander zu verlieren.

Wir werden uns mit der Erstellung eines einfachen HTML5- und CSS3-Thread-Kommentarlayouts befassen. Wir werden keine jQuery-Effekte auf die Kommentarblöcke verwenden (obwohl es möglich ist, diese Funktionalität zu erweitern). Wir werden uns mit der Strukturierung des HTML5-Dokuments und der Positionierung von Elementen mithilfe von CSS befassen. Anhand dieser Basisvorlage sollte es für Entwickler einfach sein, ihre eigenen Anpassungen zu übernehmen und einen Thread-Kommentarblock in jedes Website-Layout zu implementieren.

Bevor wir beginnen, machen Sie einen Schauen Sie sich die Demo an um zu sehen, was wir bauen werden. Wenn du willst, kannst du Laden Sie die Quelle hier herunter.

Erstellen des Webseiten-Headers

Ich möchte zunächst einen Blick auf die grundlegende HTML-Vorlage werfen, die in diesem Layout verwendet wird. Ich bleibe beim in UTF-8 codierten HTML5-Dokumenttyp zusammen mit einigen anderen HTML5-Elementen. Für Webbrowser, die älter als Internet Explorer 9 sind, legen wir eine Kopie davon bei HTML5shiv Skript, das auf den Entwicklungsservern von Google gehostet wird.

HTML5/CSS3 Threaded Kommentarblock

Dadurch können neuere Elemente wie

,

und

in allen Browsern ordnungsgemäß gerendert werden. Das einzige Problem wäre, auf Webbrowser mit deaktiviertem JavaScript zu stoßen, aber meiner Meinung nach kann man sich nicht verrückt machen, wenn man auf jeden einzelnen Benutzer eingeht. Ich habe eine weitere externe Ressource für die eingefügt Wellfleet Google-Webfont Dadurch wird der Seitenkopftext formatiert.

(Ist es nicht toll, dass wir in einer Zeit leben, in der alle diese Ressourcen für Entwickler kostenlos zur Verfügung stehen? Dadurch können wir schnell und ohne großen Aufwand einen Prototyp einer Kommentarvorlage erstellen.)

Innerer Körperinhalt

Innerhalb der -Tags finden wir eine ganze Reihe innerer Kommentar-Divs. Das gesamte Seitenlayout ist in ein Div mit der ID eingeschlossen #w für Wrapper. Alles wird auf der Seite mit einer festen Breite von 700 Pixel zentriert.

Der #Container div ist das, was das Kommentarsystem abseits des Kopfzeilentexts oder anderer Seitenelemente an Ort und Stelle hält. Jeder Kommentarthread wird in einer ungeordneten Liste gespeichert, wobei der Stamm

    die ID hat #Kommentare. Jedes interne Element erhält die Klasse .cmmnt und reproduziert einen Großteil des gleichen inneren Inhalts. Hier ist ein Beispielkommentar aus dem Seitenlayout:

  • Pikabobvor 6 Tagen gepostet

    Hören Sie, das wird Ihnen Spaß machen. Ich muss einen der lustigsten Witze aller Zeiten erzählen.

  • Der innere Kommentar enthält ein schwebendes Avatarbild zusammen mit einem weiteren Div, das die Klasse verwendet .cmmnt-Inhalt. Dieser innere Div-Container hilft bei der Unterscheidung von der Avatar-Spalte, sodass unser Inhalt ausschließlich auf der rechten Seite platziert wird. Dadurch bleibt auch Platz für die Platzierung von

    – und

    -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.

  • DarkCubesgepostet vor 1 Woche

    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.

    • Sir_Pigvor 1 Tag gepostet

      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.

    CSS-Stylesheet wird zurückgesetzt

    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); }

    Gestaltung der Seitenkommentare

    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.

      Abschließende Gedanken

      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.

Aktuelle Artikel:

Empfohlen