CSS Background Verlauf

rantanplan2000 · 11 November 2016

Hey Leute,

ich wollte ein Background erstellen wie:

Code:

background: -moz-linear-gradient(45deg,  #3a5b89 0%, #3a5b89 79%, #3a5b89 79%, #4182db 79%, #2b4a71 80%, #2b4a71 100%); 
background: -webkit-linear-gradient(45deg,  #3a5b89 0%,#3a5b89 79%,#3a5b89 79%,#4182db 79%,#2b4a71 80%,#2b4a71 100%);

Kann ich sowas auch anders machen, dass die Kanten scharf sind? Also den Verlauf ausmachen? So sieht es zwar okay aus, aber grade im Mobile sieht man eben den kleinen Verlauf zwischen den Farben.

MrMurphy · 12 November 2016

Hallo

aber grade im Mobile sieht man eben den kleinen Verlauf zwischen den Farben

Falsch. Du bist der einzige der das sieht. Und die Personen die du selbst darauf hinweist, zum Beispiel hier im Forum. Als ganz normaler Besucher nimmt man solche kleinen Unschärfem im Hintergrund überhaupt nicht wahr. Schon gar nicht habe ich bei solchen Hintergründen jemals erlebt dass ein Besucher einen Herzinfarkt bekommen hat oder auch nur fluchtartig die Seite verlassen hat.

Aber zu deinem eigentlich überhaupt nicht vorhandenem Problem:

Mit background-image lassen sich solche Unschärfen nicht vermeiden. Wozu auch, wenn sie niemanden stören.

Scharfe Abgrenzungen erhältst du mit svg-Dateien als Hintergrundbild.

Gruss

MrMurphy

rantanplan2000 · 12 November 2016

okay, ja dann bin ich wohl etwas so tüpfelescheisserle-mäßig. :-)
dachte nur, eventruell kann man den verlauf ja ausstellen, dass eben direkt die neue farbe beginnt.

danke :-)

djheke · 12 November 2016

Also, wenn Du drei Farben möchtest, dann probier mal das hier.

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SPAN</title>

<style>
p{
background: linear-gradient(45deg,  red 0%, red 79%,  yellow 79%, yellow 70%);
 position:relative;
 z-index:99;
}
p:after{
 content:"";
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background: linear-gradient(45deg,  transparent 81%, green 81%, green 100%);
 z-index:-1;
}
</style>
</head>
<body>

<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</body>
</html>

@edit Oder ohne Pseudoelement

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>verlauf</title>

<style>
p{
 padding:50px;
 height:200px;
 background: linear-gradient(45deg, magenta 30%, magenta 30%, red 30%, red 70%,  yellow 70%);
}
</style>
</head>
<body>
<p></p>
</body>
</html>

CSS Background Verlauf

rantanplan2000

Mitglied

MrMurphy

Senior HTML'ler

rantanplan2000

Mitglied

djheke

Aktives Mitglied

Neueste Beiträge