Marvin Kellermann |
Überschrift Auszeichnen mit Hintergrundgrafik
Überschriften sollen auffallen; mit Ihnen willst du die Aufmerksamkeit des Website-Besuchers auf einen bestimmten Bereich leiten. Standardmäßig sind Headlines in Contao nicht wirklich eine Schönheit, daher versuche ich immer, wenn ich eine Website mit Contao baue auch den Website etwas verspieltes, kreatives mitzugeben. In dem Fall habe ich mich für einen Brush-Background entschieden.
.cc_headline-brush {
background-image: url(/files/cwe/assets/brush-accent.svg);
background-repeat: no-repeat;
padding: 3%;
color: white;
rotate: -2deg;
margin-bottom: 4%;
margin-top: -3%;
}Hintergrund-Bild in Überschrift einfügen.
Im Prinzip ist diese CSS-Definition auch relativ schnell durchgesprochen: zunächst habe ich das wichtigste eingefügt: das Hintergrund-Bild für meine Überschrift mit background-image. Dieser Part variiert bei euch logischerweise, je nachdem, wo eure Hintergrundgrafik liegt. Weil ich in meinem Fall der Headline eine Klasse mitgegeben habe und H1, H2, H3, ... block-Elemente sind, benötigen wir das background-repeat: no-repeat, damit die Grafik nur ein Mal angezeigt wird. Das Padding von 3% sorgt dafür, dass die Schrift ein wenig mehr Luft hat und color:white, um sie in weiß zu Färben. Mit dem Befehl rotate: -2deg; drehen wir die komplette Headline samt Grafik um -2° (Beim Befehl Rotate müsst ihr aufpassen, der Safari kann es zum Beispiel nicht in allen Versionen anzeigen.). Zum Schluss sorgt das Margin-Bottom und Margin-Top dafür, dass unsere Überschrift genau den richtigen Abstand zu anderen Elementen hat.
Wichtig ist an der Stelle noch, dass ihr diese Definition je nach Wortlänge anpassen müsst. Sollen viele verschiedene Wortlängen automatisch abgedeckt werden, würde ich vorschlagen, mit einem span zu arbeiten.
<p>Dieser Text hat kein Hintergrund - <span class="cc_text-brush">dieser schon</span>.</p>Dann kannst du mit der CSS-Definition background-size: cover; arbeiten und die Hintergrundgrafik wird sich automatisch auf die Größe des Spans erstrecken!
Ich beschäftige mich seit Contao 3 mit dem CMS. Auf meinem Blog und auf YouTube findest du einige kostenlose Beiträge und Videos. Gerne unterstütze ich dich bei deinen Projekten, schau gern auf meiner Agentur-Website vorbei.
Du benötigst Unterstützung bei deiner Contao-Instanz?
