Boxen gestalten
Gestalte dein ordentliches Reich
Mit CSS kannst du deine Boxen ganz nach deinen Wünschen verzaubern und ihnen ein klares, ansprechendes Design verleihen. Du kannst ihnen elegante Rahmen hinzufügen, den Innenabstand sanft justieren und die Außenabstände harmonisch abstimmen, sodass dein Layout wie von magischer Hand geordnet erscheint.
Darüber hinaus kannst du den Hintergrund kreativ gestalten – ob mit strahlenden Farben, fließenden Verläufen oder sogar Mustern und Bildern, die deiner Seite Tiefe und Persönlichkeit verleihen. Schatten lassen die Boxen förmlich schweben, während abgerundete Ecken weiche, harmonische Übergänge schaffen. So verwandelst du einfache Boxen in beeindruckende, stilvolle Elemente, die deine Inhalte in einem bezaubernden Rahmen präsentieren.
Hintergründe & Styles für divs
Bilder, Farbverläufe, Schatten – mach aus Blöcken echte Hingucker!
Boxen plazieren
Setze deine Boxen in Szene
Weise deinen Boxen eine feste Größe zu, und schon schieben sie sich brav nach links. Doch mit der magischen margin: auto-Formel kannst du sie mühelos zentrieren oder nach rechts lotsen. Da kaum jemand möchte, dass die Texte einer Webseite die volle Breite des Monitors einnehmen, ist diese Technik entscheidend für ein ausgewogenes Layout.
div {
max-width: 1200px;
margin: 0 auto;
height: 80vh;
}Der Container hat eine feste Breite von 1200px. Mit margin: 0 auto; wird er oben und unten ohne Abstand, seitlich automatisch zentriert. Er nimmt außerdem 80% der Browserfensterhöhe ein.
Farbverlauf
Setze deine Boxen in Szene
Mit CSS-Farbverläufen schaffst du sanfte Übergänge zwischen Farben und gestaltest ansprechende Hintergründe. Ob linear oder radial, sie bringen Tiefe und visuelles Interesse in deine Designs. Verwende Online-Generatoren, um Farbverläufe schnell zu erstellen und anzupassen. So wird es kinderleicht!
.box {
background: linear-gradient(to right, #ff7e5f, #feb47b);
}Erzeugt einen Farbverlauf von links nach rechts, beginnend mit einem warmen Pinkton und endend mit einem sanften Orange.
Eckradien
Runde deine Boxen ab
Mit der CSS-Eigenschaft border-radius verwandelst du scharfe Kanten in sanft gerundete Ecken und gibst deinen Boxen ein elegantes, weiches Aussehen. Egal ob nur leicht abgerundet oder komplett rund , diese kleine Anpassung lässt deine Elemente glänzen.
.box {
border-radius: 1rem;
}Mit border-radius kannst du Ecken abrunden. Du kannst gegenüberliegende Ecken abrunden, z.B. mit border-radius: 1rem 0; oder jeder Ecke eine eigene Rundung geben, wie bei border-radius: 10px 5px 0 25px;
Hintergrundbilder
Visuelle Tiefe für deine Webseite
Hintergrundbilder in CSS bringen Tiefe und visuelle Anziehungskraft. Sie fügen deinem Design beeindruckende Effekte hinzu und lassen sich vielseitig einsetzen, um deine Webseite lebendig zu gestalten.
.box {
background-image: url('bild.jpg');
}background-image: Legt das Bild fest, das als Hintergrund verwendet wird.
Stile für Hintergrundbilder
Präzise Kontrolle über dein Design
.box {
background-image: url('bild.jpg');
background-position: center;
}Bestimme die Position des Hintergrundbildes innerhalb des Elements. Werte wie center, top, bottom, left, und right oder Maßeinheiten wie % ermöglichen eine präzise Ausrichtung.
.box {
background-image: url('bild.jpg');
background-size: cover;
}Definiere die Größe des Hintergrundbildes. Werte wie cover, contain oder feste Maßeinheiten (z.B. 100px 50px) bestimmen, wie das Bild skaliert wird.
.box {
mix-blend-mode: overlay;
}Erlaube es, den Mischmodus des Hintergrundbildes und der Hintergrundfarbe zu steuern. Mit Werten wie multiply, screen, oder overlay kannst du kreative Effekte erzielen und das Design dynamischer gestalten. Die verschiedenen Modi findest du unter anderem bei mdn.
.box {
background-image: url('bild.jpg');
background-repeat: no-repeat;
}Kontrolliere, ob und wie das Hintergrundbild wieder-holt wird. Optionen wie no-repeat, repeat-x und repeat-y erlauben es dir, das Bild horizontal, vertikal oder gar nicht zu wiederholen.
.box {
background-image: url('bild.jpg');
background-attachment: fixed;
}Bestimme, ob das Hintergrundbild beim Scrollen fixiert bleibt oder sich mit dem Inhalt bewegt. Mit fixed bleibt das Bild fest an seiner Position, während scroll das Bild mit dem Inhalt bewegt.
.container {
width: 100%;
height: 400px;
background: #000 url('img.jpg') no-repeat center/cover;
mix-blend-mode: multiply;
}In der Kurzform von background werden mehrere Eigenschaften kombiniert: Hintergrundfarbe (#000), Bildquelle (url(‚img.jpg‘)), Wiederholverhalten (no-repeat), Position (center) und Skalierung (cover) werden in einer einzigen Zeile definiert.
In dieser Lektion hast du gelernt…
- wie du mit
margin: autodeine<div>-Container zentrierst, damit dein Layout harmonisch und professionell wirkt.erfahren - wie du mit CSS-Farbverläufen (
linear-gradient,radial-gradient) sanfte Farbübergänge erstellst, um deine Hintergründe lebendiger zu gestalten.entdeckt - wie du mit
border-radiusEcken abrundest, um deinen Boxen ein weiches, modernes Aussehen zu verleihen. - verstanden, wie du Hintergrundbilder mit
background-imagein dein Design einbindest und mitbackground-position,background-sizeundbackground-repeatoptimal anpasst. - gesehen, wie du mit
background-attachment: fixedeinen Parallax-Effekt erzeugst, bei dem sich der Inhalt bewegt, während das Hintergrundbild stehen bleibt. - herausgefunden, wie du mit
mix-blend-modekreative Effekte erzielst, indem du dein Hintergrundbild mit Farben verschmelzen lässt.gelernt - wie du mit
background: #000 url('img.jpg') no-repeat center/cover;eine kompakte und flexible Hintergrundgestaltung umsetzt.
Hier siehst du den Code, den du gelernt hast – aber fühl dich frei, zu experimentieren! Probiere Änderungen aus, teste neue Ideen und sieh, was passiert. Das ist dein Raum zum Tüfteln!
Die Magischen Rahmen
Es heißt, die Hüter des Gleichgewichts erschufen einst Rahmen, die nur dann sichtbar werden, wenn sie mit der richtigen Magie geformt sind. Deine Aufgabe: Meistere die Kunst, Boxen mit CSS zu zentrieren und sie mit zauberhaften Hintergrundbildern und Farbverläufen zu versehen. Spiele mit Größen und Höhen, bis die Rahmen ihre magische Aura entfalten – aber denke daran, nur ein perfekt gestalteter Rahmen hält die Magie im Gleichgewicht!
Deine Aufgabe: Gestalte deine Boxen
- Zentrierung und Größe der Boxen:
• Setze für .box1 die Breite (max-width) auf 1200px und zentriere die Box mit margin: 0 auto;. Gib der box eine Hintergrundfarbe um es besser zu sehen.
• Verwende für die Höhe (height) 50vh, um die Box auf die Hälfte der Fensterhöhe zu setzen. - Hintergrundverläufe und Eckradien:
• Füge für .box2 einen Hintergrundverlauf (background: linear-gradient(to right, forestgreen, lightgreen);) hinzu und setze einen Eckradius (border-radius) von 15px. - Hintergrundbilder und deren Positionierung:
• Verwende für .box3 ein Hintergrundbild (assets/img/unicorn-large.jpg) und setze background-size: cover; und background-position: center; ein.
• Experimentiere mit anderen Eigenschaften wie background-attachment: fixed;, background-repeat: no-repeat; und background-blend-mode: multiply;. - Kombination verschiedener Techniken:
• Kombiniere verschiedene CSS-Techniken in box4, um eine Box mit Hintergrundbild, Farbverlauf, und Eckradien zu gestalten.
Öffne Visual Studio Code und lasse diese Worte auf der Seite erscheinen. Oder probiere es direkt hier im Editor aus!
.box1 {
max-width: 1200px;
margin: 0 auto;
height: 50vh;
background-color: purple;
}
.box2 {
max-width: 1200px;
margin: 0 auto;
height: 50vh;
background: linear-gradient(to bottom, forestgreen, lightgreen);
border-radius: 15px;
}
.box3 {
background-image: url(img/waterfall.jpg);
height: 50vh;
background-size: cover;
background-position: center;
}
.box4 {
background-image:
linear-gradient(rgba(0, 0, 0, 0.52), rgba(255, 255, 255, 0.251)),
url('assets/img/unicorn-large.jpg');
height: 70vh;
background-size: contain;
background-position: right;
background-repeat: no-repeat;
}