»DarkNickli`s Tutorials«

HTML

Der beste Weg, die Zukunft vorherzusagen, ist, sie selbst zu gestalten. Peter F. Drucker

Kopiere den folgenden Code und setze ihn in den <body>-Bereich Deiner Webseite.

html

<blockquote>
 Zitat hier rein
<cite>Der/Die es gesagt hat</cite>
</blockquote>

Kopiere den Stil-Code in Deine CSS-Datei.
Du kannst die Farben anschließend an Dein Design anpassen.

css

blockquote {
position: relative;
background: #fff;
border-left: 4px solid #d4af37;
padding: 20px 25px;
margin: 20px auto;
max-width: 600px;
font-family: 'Georgia', serif;
font-size: 1.1rem;
font-style: italic;
color: #1a0c1a;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
border-radius: 8px;
line-height: 1.6;
}

blockquote:hover {
box-shadow: 0 6px 20px rgba(0,0,0,0.40);
}

blockquote::before {
content: "“";
font-size: 3em;
color: #d4af37;
position: absolute;
left: 10px;
top: -10px;
line-height: 1;
}

blockquote cite {
display: block;
margin-top: 15px;
text-align: right;
font-size: 0.9em;
font-style: normal;
color: #7d6d7d;
letter-spacing: 0.5px;
}

blockquote cite::before {
content: "– ";
}

css

blockquote {
background: #fff; 
color: #1a0c1a;
font-style: italic;
border-left: 4px solid #d4af37;
font-family: 'Georgia', serif;

background: #fff; – passt den Hintergrund an Dein Design an.
color: #1a0c1a; – Damit kannst Du die Schriftfarbe an Dein Design anpassen.
font-size: 1.1rem; – damit kannst Du die Schriftgröße an Dein Design anpassen.
Mit border-left: 4px solid #d4af37; kannst Du einen linken Rahmen hinzufügen.
▸ 4px ist die Dicke,
▸ solid bedeutet durchgezogen,
▸ #d4af37 ist die goldene Farbe.

css

blockquote::before {color: #d4af37;

Mit color: #d4af37; kannst Du die Schriftfarbe an Dein Design anpassen.

html

blockquote cite { 
color: #7d6d7d;

Mit color: #7d6d7d; kannst Du die Schriftfarbe an Dein Design anpassen.

Das war's auch schon von mir. 😊
Verfasst am 25.Januar 2013, aktualisiert am 13.Juli 2025

Blockquote

HTML