Git Cheat Sheet, CSS Gradients, CSS Filters und Positionierung von Elementen
Git Cheat Sheet
git add -A
Füge alle aktuellen Änderungen dem nächsten commit hinzu.
git commit -m "meine Commitnachricht"
Speichere alle Änderungen in dem entsprechenden Commit und beschreibe deine Arbeit mit einer Nachricht (Message -m)
git push
Pushe die Änderungen zu Github, deiner remote Namens origin
Änderungen aus dem originalen Repository holen
Um neue Versionen der Website aus dem orignalen Repository zu holen, von welchem du zu Beginn eine Kopie erstellt hattest, führst du folgende Schritte aus:
Führe diesen ersten Schritt nur beim ersten Mal durch. Hast du dies bereits durchgeführt, starte mit Schritt 2
git remote add originalRepo https://github.com/vanillavillage/coding101-website.gitgit fetch --set-upstream originalRepo main
git merge -X theirs -m "merged content from original repository" --allow-unrelated-histories
git push --set-upstream origin main
CSS Gradients
CSS-Gradients sind eine Möglichkeit, um einen Farbverlauf von einer Farbe zu einer anderen auf einem Element wie einem Hintergrund, einer Schrift oder einer Rahmenlinie darzustellen. Gradients können aus verschiedenen Farben und Farbverläufen bestehen und helfen, ein Design visuell ansprechender zu gestalten.
Es gibt zwei Arten von CSS-Gradienten: lineare Gradienten und radiale Gradienten.
Lineare Gradienten bewegen sich in einer geraden Linie von einer Farbe zur anderen. Sie können horizontal, vertikal oder diagonal verlaufen und können durch Angabe von Winkeln gesteuert werden. Zum Beispiel würde ein horizontaler Verlauf von links nach rechts mit einer Farbe von Rot nach Gelb aussehen wie folgt:
div {
/* Ein simpler Gradient */
background: linear-gradient(to right, red, yellow);
/* Ein komplexer Gradient */
background: linear-gradient(151deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
}
CSS Filter
CSS-Filter sind eine Möglichkeit, um visuelle Effekte auf ein Element anzuwenden, ohne die zugrunde liegende Grafik oder den Text zu verändern. CSS-Filter sind wie ein "digitales Filter", das über dem Element gelegt wird, um das Aussehen des Elements zu ändern.
Es gibt verschiedene Arten von CSS-Filtern, darunter:
Farbfilter: Hiermit kann die Farbe des Elements verändert werden, indem beispielsweise eine Farbe verändert oder hinzugefügt wird.
Unschärfe-Filter: Hiermit kann ein Unschärfeeffekt auf das Element angewendet werden, um es weicher und verschwommener erscheinen zu lassen.
Verzerrungsfilter: Hiermit kann das Element in verschiedene Formen und Richtungen verzerrt werden, um beispielsweise ein Spiegeleffekt zu erzeugen.
Helligkeits- und Kontrastfilter: Hiermit kann die Helligkeit und der Kontrast des Elements verändert werden, um es heller oder dunkler erscheinen zu lassen.
CSS-Filter können mit anderen CSS-Stilen und Effekten kombiniert werden, um noch mehr visuelles Interesse zu schaffen.
div {
filter: blur(5px) brightness(150%) contrast(50%);
}
CSS-Positionierung
CSS-Positionierung ist eine Methode, um HTML-Elemente auf der Seite zu positionieren. Es gibt vier grundlegende Positionierungsoptionen in CSS: statisch, relativ, absolut und fixiert.
Die Positionierung relative und absolute sind Positionierungsarten, die auf dem Kontext basieren, in dem sich das Element befindet.
Position relative
Elemente mit position: relative; bleiben im Fluss und behalten ihre natürliche Position innerhalb des HTML-Dokuments bei. Das Element kann jedoch mit den Eigenschaften top, right, bottom und left verschoben werden. Diese Eigenschaften geben an, wie weit das Element von seiner ursprünglichen Position entfernt verschoben werden soll. Wenn also top: 10px; und left: 20px; festgelegt werden, wird das Element 10 Pixel von oben und 20 Pixel von links verschoben.
.container {
position: relative;
top: 10px;
left: 20px;
}
Position absolute
Ein Element mit position: absolute; wird relativ zu dem nächsten Vorgänger-Element mit position: relative; oder zum Dokumentfenster positioniert, wenn kein Vorgänger-Element mit position: relative; gefunden wird. Wenn Sie also top: 10px; und left: 20px; festlegen, wird das Element um 10 Pixel von oben und 20 Pixel von links verschoben, relativ zum nächsten Vorgänger-Element mit position: relative;.
.container {
position: relative;
}
.box {
position: absolute;
top: 10px;
left: 20px;
}
Es ist wichtig zu beachten, dass absolute positionierte Elemente aus dem normalen Fluss des Dokuments entfernt werden und überlappende Elemente verdecken können. Daher sollten Sie sie mit Bedacht einsetzen und möglicherweise z-index verwenden, um sie in der korrekten Reihenfolge zu stapeln.