nicht angemeldet
Gradient an Bereich anpassen
Hallo zusammen
Ich bräuchte mal wieder einen Tip. Ich habe eine Webseite mit einem zentrierten Bereich der max. 1000 px breit sein kann. In dem spielt sich alles ab, der Rest ist unbenutzt.
Bisher ist das der body mit max-width:1000px; margin:0px auto;
Nun soll ein Gradient als Hintergrund hinter das ganze gelegt werden. Der soll von links her mit weiß beginnen, dann im Anzeigebereich eine Art gelb sein und rechts ab dem Ende des Anzeigebereichs wieder nach weiß ausblenden.
Entschuldigt die Beschreibung, am besten bringe ich was für jsfiddle zum ausprobieren :-)
body { margin:0px auto; width:300px; border:1px solid black;
background:linear-gradient(90deg, white, yellow 100px, yellow 300px, white); }
<body>
<div class="content">Inhalt! Der Border markiert den Rand an dem der Farbwechsel stattfinden soll</div>
</body>
So jetzt das Problem: Ich hab keine Maße. Wie kann ich das so angeben dass der Farbwechsel da passiert wo der Border ist?
-
Abend,
So jetzt das Problem: Ich hab keine Maße. Wie kann ich das so angeben dass der Farbwechsel da passiert wo der Border ist?
Du hast doch Maße: Du sagst, dass dein Body eine max-width von 1000px hat. Schmaler wird der Body als block-Element dementsprechend nur, wenn der Viewport kleiner als 1000px ist. Somit darf dein Gradient von der Mitte aus gesehen frühestens nach 500px beginnen.
Das erreichst du unter anderem so:
body { margin:0px auto; max-width:1000px; border:1px solid black; background-image: linear-gradient(270deg, yellow, yellow 500px, white), linear-gradient( 90deg, yellow, yellow 500px, white); background-size: 50%,50%; background-position: left,right; background-repeat: repeat-y; }Gibt vermutlich noch elegantere Lösungen, aber die kam mir jetzt so in den Sinn.
-
Cool auf sowas wollte ich "gestupst" werden. Danke!
-