Hallo liebe ZP Gemeinde
Für mein aktuelles Projekt suche ich nach einer Möglichkeit, dass die randlos Bilder im Header eine lesbare Überschrift bekommen.
Ich habe da an einen Blureffekt gedacht, Leider ist dies nicht per default möglich einzustellen. Gäbe es eine Möglichkeit dies via CSS zu realisieren ?
Vielen Dank und liebe Grüsse
Stefan
Um das zu beantworten, haben wir etwas zu wenige Informationen.
Welche Programmversion nutzen Sie?
Welches Layout nutzen Sie?
Wie ist die URL zu einer Seite, die solch einen Header enthält?
Hallo,
Ich nutze die ZP 15 Business Version, das genutzte Layout heisst Stripe Responsive.
Da das aktuelle Projekt zu gross für den Testserver und die aktuelle Homepage noch online steht, konnte ich die neue noch nicht uploaden...
In Stripe Responsive haben die Überschriften in den Headern doch eigentlich nen leichten Schatten. Sind die trotzdem nicht lesbar?
Schwer zu sagen, wie das am besten zu lösen wäre bevor wir das konkret sehen können. Vielleicht können Sie ja einen Screenshot hier anhängen?
Gute Idee mit dem Printscreen... Hab einen angeheftet,...
Find ich ok so. Noch mehr Effekte wären bestimmt nicht zuträglich. Einen "Blur" filter gibt es, der würde sich aber auf das Hintergrundbild auswirken und das wäre ja bestimmt absurd und nicht wünschenswert.
den vorhandenen Blureffekt habe ich gesehen und ja dies wäre nicht das was ich suche. Mir geht es nur um den unteren Text "Wir bieten Ihnen..." welcher auf dem weissen Hintergrund vom Foto schlechter lesbar ist...
Ggf. mal mit den Textfarben spielen?
Ja werde es mal so versuchen... Muss mich aber an das bestehende Layout / Design halten...
Danke trotzdem und Gruss
Stefan
Probiere mal folgenden Code, ich habe zusätzlich die Schriftgröße der doch recht großen Überschrift für "Mobile" angepasst. Die Werte kannst du natürlich anpassen. BEISPIEL
<style>
div.flex-caption .caption-text {
width: auto;
background-color: rgba(0, 0, 0, 0.2);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
padding: 5px 20px 10px 20px;
border: 2px solid rgba(255, 255, 255, 0.8);
}
@media (max-width: 660px) {
.flex-caption h1, .flex-caption h2, .flex-caption h3 {
font-size: 32px;
}}
</style>Ein paar nette Tricks (Englisch): https://css-tricks.com/methods-contrasting-text-backgrounds/
Alternativ kann man auch mit einem Textschatten eine stärkere Umrandung erstellen. Das sieht dann ungefähr so aus: LINK
Das CSS für den Header in "Stripe Responsive" würde dann so aussehen:
<style>
.flex-caption p, .flex-caption h1, .flex-caption h2, .flex-caption h3 {
text-shadow:#000000 3px 0px 0px,
#000000 2.83487px 0.981584px 0px,
#000000 2.35766px 1.85511px 0px,
#000000 1.62091px 2.52441px 0px,
#000000 0.705713px 2.91581px 0px,
#000000 -0.287171px 2.98622px 0px,
#000000 -1.24844px 2.72789px 0px,
#000000 -2.07227px 2.16926px 0px,
#000000 -2.66798px 1.37182px 0px,
#000000 -2.96998px 0.42336px 0px,
#000000 -2.94502px -0.571704px 0px,
#000000 -2.59586px -1.50383px 0px,
#000000 -1.96093px -2.27041px 0px,
#000000 -1.11013px -2.78704px 0px,
#000000 -0.137119px -2.99686px 0px,
#000000 0.850987px -2.87677px 0px,
#000000 1.74541px -2.43999px 0px,
#000000 2.44769px -1.73459px 0px,
#000000 2.88051px -0.838247px 0px;
}
</style>Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
Wenn Sie neu bei uns sind, hilft Ihnen unsere Hilfe-Seite dabei, sich im Forum zurechtzufinden. Dort erfahren Sie alles Wichtige, von der Registrierung bis hin zur Erstellung eigener Themen (Fragen).
Ohne Programmierkenntnisse gleich mit Zeta Producer loslegen. Layout auswählen, Text eingeben – fertig. Kostenloser Support und über 99% zufriedene Kunden. Überzeugen Sie sich selbst!