Die Blockquote wird in standardkonformen Browsern mit dem Effekt "große Anführungszeichen davor" und im IE mit einem dicken linken Rand und einem hellgrauen Hintergrund angezeigt.
Im Gegensatz zu anderen Blockquote-Techniken benötigt dieser Stil kein verschachteltes Block-Level-Element (wie p). Daher wird ein Absatz in ein Inline-stilisiertes Element umgewandelt, um zu verhindern, dass der Inhalt unter das Zitat fällt.
blockquote {
background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: 0.5em 10px;
quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
color: #ccc;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}
blockquote p {
display: inline;
}Beispiel
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Das einzige, was ich mir dafür wünschen würde, wären schließende Anführungszeichen am Ende.
Sie können blockquote:after verwenden...
Hier haben Sie schließende Anführungszeichen am Ende https://css-tricks.de/examples/Blockquotes/
vergessen wir das..
Wie wird das aussehen?
Vielen Dank dafür!
Meiner Meinung nach sind die vertikale Linie *und* das Anführungszeichen überflüssig, da beide dasselbe bedeuten.
Das scheint in Chrome/Safari nicht zu funktionieren.
... Wenn Sie möchten, dass es in Safari/Chrome funktioniert.
blockquote:before {
content:”\201C”;
}
blockquote:after {
content:”\201D”;
}
Wenn mehrere Blockquotes nacheinander verwendet werden, scheint die erste Instanz ein doppeltes Anführungszeichen davor zu haben, während jede nachfolgende Instanz nur ein einfaches Anführungszeichen davor hat (in Firefox). Woran liegt das?
Habe das gleiche Problem. Wie kann ich das beheben?
Danke
Ja, hatte dieses Problem auch. Ich habe versucht, was der Typ im obigen Kommentar gesagt hat. Es behebt das Problem!
Es sieht so aus, als läge es an den 3. und 4. Parametern im `quote`-Attribut.
Von: http://www.w3schools.com/cssref/pr_gen_quotes.asp
Wenn Sie also keine Anführungszeichen schließen, wird der 3. Parameter verwendet.
Ich habe es für mich wie folgt geändert: `quotes: "\201C""\201D";` und das hat es behoben.
Beste Grüße
Was wäre der
Code für das schließende Anführungszeichen?
erledigt
blockquote:after {color:#B2AFCD;content:close-quote;font-size:4em;line-height:.1em;margin-right:.25em;vertical-align:-.4em;}
nur ein bisschen mit dem Abstand spielen :)
Entschuldigung für meine grauenhafte Rechtschreibung!
final
blockquote:after {color:#B2AFCD;content:close-quote;font-size:4em;line-height:.1em;margin-left: .20em;vertical-align:-.4em;}
Danke für die tollen Tipps, Chris :)
Was ist das
für bei blockquote?
Sie scheinen es nicht zu benötigen, wenn Sie \201C und \201D für :before und :after angeben.
Fehlt mir etwas?
Hallo zusammen, als ursprünglicher Einreicher des Snippets wollte ich nur kurz nachfassen und einige der in den Kommentaren erwähnten Schwächen ansprechen. Hier ist etwas CSS, das meiner Meinung nach eine Verbesserung darstellt
Ich wollte einige der gleichen Änderungen wie Sie erwähnen (z. B. das erste und letzte Kind), Brad, aber dann habe ich Ihren Kommentar bemerkt. Gute Entscheidungen. Ich würde nur hinzufügen, dass es eine gute Idee sein könnte, :first-child auf `inline-block` zu setzen, um den unteren Rand zu erhalten.
Inline-Blocking bewirkt, dass das öffnende Anführungszeichen über und links von der ersten Zeile angezeigt wird. Ich suche selbst nach einer Antwort darauf, da das Beibehalten des Inline-Stils bei einem Blockquote mit mehreren Absätzen (ohne Umwandlung in `inline-block`) dazu führt, dass der erste Absatz direkt auf den nächsten fällt. Sehr seltsame Positionierungsprobleme (zumindest in Fx32/33 Nightly).
Brad, dieses Update funktioniert hervorragend in Safari, aber überhaupt nicht in Chrome und Firefox.
Gibt es eine Möglichkeit, diese Formatierung in diesen Browsern anzuzeigen?
Danke!
Das funktioniert in Chrome nicht.
Sehr nützliche Referenz! Wenn sich jemand fragt, warum nur sein erstes Blockquote doppelte Anführungszeichen hat, die folgenden aber nicht, müssen Sie nur hinzufügen
blockquote:after {
content: no-close-quote;
}
Hallo,
Wie füge ich einen Box-Schatten hinzu?
Danke
https://css-tricks.de/snippets/css/css-box-shadow/ – schau dir das an :)
Ziemlich einfach und cool! Danke Chris!
Danke Mann, das hat mir sehr geholfen :)
Weiß jemand, wie man das CSS so modifiziert, dass zwischen Absätzen in einem Blockquote ein Abstand besteht? Danke für jede Hilfe.
blockquote p{
margin:15px 0;
}
Das Problem „kein Abstand zwischen mehreren Absätzen“ wurde gelöst mit
blockquote p:not(:last-child) { float: left; }Schöne Formatierung!
Die Demo-Seite ist ein toter Link!
@css-trick @David Darnes
Schön gemacht.
Hallo – einige Änderungen am Code, die ihn für mich funktionsfähig machen :-)
Die wichtigen Teile – ich habe auf beiden Seiten Polsterung. Wenn das `blockquote`-Element auf `position:relative` gesetzt wird, können Sie `blockquote:before` und `blockquote:after` auf `position:absolute` setzen und dann das Zitat mit `left`, `right`, `bottom` und `top` positionieren.
Don, der Text überschnitt sich mit den schließenden Anführungszeichen auf der rechten Seite (FF v25).
Das Ändern des rechten Abstands von 1em auf 2,5em behebt es.
padding: 0 2.5em 0 2.5emDanke an alle!
Schön und sauber! Sie haben hier einen Doppelpunkt (:) vergessen
blockquote p {display: inline;
}
danke
Für das `:before`-Element verhinderte `vertical-align` die Textauswahl. Es dauerte eine Weile, bis ich den Fehler behoben hatte, aber ich denke, es funktioniert jetzt.
display:inline-block;color:#FFF;height:25px;font-size:2.8em;line-height:80px;content:'\201F';letter-spacing:-2px;float:left;position:relative;right:8pxGibt es einen einfacheren Weg, Zitate attraktiv zu gestalten, wenn man die obigen CSS-Sachen nicht wirklich versteht. Ich befürchte, das ist zu viel für mich.
Man könnte Blockquotes kursiv formatieren, so
blockquote {
font-style: italic;
}
Wofür ist `blockquote:before`?
Danke! Ich habe gelernt, was ich in den Kommentaren brauchte. Es hat mich immer gestört, dass es nur das erste Zitat gab und nicht zwei.
Ich habe eines der obigen etwas mehr angepasst und lila hinzugefügt.
Sehen Sie, wie sie auf http://meetkarissa.com/sleepphones geworden sind.
Haben Sie versucht, den Text in diesem Beispiel in Chrome auszuwählen?
Danke für dieses Tutorial! Es ist genau das, was ich brauche.
Wie kann ich die Kommas größer machen?
Ich habe einen Zweifel aus dem ersten Beitrag, ich bekomme meinen Text nicht inline angezeigt.
ist blockquote p{
display : inline;
}
für den
Text im HTML.
Mein HTML-Code ist wie
Hallo Leute,
Schauen Sie mal hier..
Einfach und hervorragend……..
.tmls_text:after {
color: #ccc;
content: close-quote;
font-size: 4em;
line-height: 0.1em;
margin-left: 0.25em;
vertical-align: -0.4em;
}
Leider funktioniert das in Internet Explorer nicht.
Versuchen Sie das – Ich habe es in den meisten Browsern getestet und es bricht sie nicht, nur kleine ästhetische Anpassungen erforderlich
Funktioniert perfekt! Danke!
Wenn es bei Ihnen nicht funktioniert, müssen Sie wahrscheinlich die Schriftart ändern. Verwenden Sie einfach eine andere oder entfernen Sie sie wie folgt: `font-family: none !important;`
Es ist nicht nötig, `!important` zu verwenden – dies sollte nur in seltenen Fällen verwendet werden.
Außerdem ist `none` kein gültiger Wert für die `font-family`-Eigenschaft. http://www.w3schools.com/cssref/pr_font_font-family.asp
Hallo Chris. Ich wollte Sie nur wissen lassen, dass es ein kleines Problem mit der Art und Weise gibt, wie Sie doppelte Blockquotes anzeigen. Wenn Sie sicherstellen möchten, dass nachfolgende Blockquotes nicht auf ein einzelnes Zitat gesetzt werden, müssen Sie Folgendes hinzufügen
Dies stellt sicher, dass der Blockquote weiterhin wie vorgesehen funktioniert, aber nachfolgende Blockquotes nicht beeinträchtigt werden. Danke für den tollen Artikel, und ich hoffe, Sie können ihn mit diesen Informationen aktualisieren!
Wie entferne ich die vertikale Linie?
Brittney, versuchen Sie, diese Zeile zu entfernen: `border-left: 10px solid #ccc;`
Sehr schön – und funktioniert. Danke!
Sehr nützliches CSS-Design. Danke.
Hallo,
Ich versuche, die schließenden Anführungszeichen *vor* dem Text im `cite`-Markup erscheinen zu lassen. Ich habe Schwierigkeiten, jede Hilfe oder Hinweise wären sehr willkommen.
Die Verwendung von Positionierung, wie ich sie mache, reicht nicht aus, da die Positionierung vom unteren Rand des Blockquotes (wo `blockquote` = Text des Zitats + `cite`) berechnet wird, was bedeutet, dass, wenn der Text im `cite`-Markup lang ist *und* der Bildschirm, auf dem das Zitat angezeigt wird, schmal ist, *dann* die unteren Anführungszeichen rechts neben dem Text im `cite`-Markup erscheinen, anstatt darüber (und rechts unten vom Zitat selbst).
Ich habe den obigen Code so wie er ist ausprobiert, und er funktioniert bei mir nicht.
Mein Code sieht derzeit wie folgt aus
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}
blockquote p:first-child:before, blockquote p:first-child:after {
display: block;
font-size: 80px;
position: absolute;
color: #7a7a7a;
}
blockquote p:first-child:before {
content: "\201C";
left: -7px;
top: -25px;
}
blockquote p:first-child:after {
content: "\201D";
right: 10px;
bottom: -10px;
}
blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
text-align: right;
}
blockquote cite:before {
content: "\2014 \2009";
}
Vielen Dank im Voraus für Ihre Gedanken.
Kann mir jemand einen schön aussehenden Blockquote-Stil geben? Weil ich keine Ahnung von Code habe...
Wie können wir unsere eigenen öffnenden Anführungszeichen gestalten/erstellen?
Wenn Sie kein schließendes Anführungszeichen wünschen, aber auch nicht möchten, dass der Browser von doppelten öffnenden Anführungszeichen zu einfachen öffnenden Anführungszeichen wechselt, weil er denkt, Sie befinden sich innerhalb eines geöffneten Blockquote-Blocks, z. B. für nachfolgende Blockquotes, können Sie diese deaktivieren, ohne sie visuell anzuzeigen mit
Sehr hilfreicher Tipp und Leitfaden. Vielen Dank für das Teilen!