Autor: f-hack-4u

Ist der Header auf Fixed oder Sticky gesetzt, scrollt man bei Verweisen auf der Seite meistens zu weit nach oben. Beheben kann man das natürlich mit jQuery oder Js. Ein einfacher Fix geht so:

Ist auf einer Seite eine Sprungmarke gesetzt, „springt“ man sehr plötzlich zu dem Sprungziel. Bisher wurde das am besten mit JS/jQuery gelöst. Will man keine ausgefallenen Effekte, geht das auch mit CSS. Hier für die gesamte Seite:

So sehen hr besser aus. Oder mit Verlauf ins Transparente:

Da es für background-image kein opacity also keine halbtransparente Hintergrundbilder Eigenschaft gibt, funktioniert das in der Regel nur wenn man das Bild mit einem Bildeditor halb/transparent speichert.

Die ol in diesem Beispiel muss natürlich die Klasse rounded-list bekommen. Einfacher geht das natürlich mit einm Präprozessor wie z.B. LESS oder SCSS.

Um ein Element sticky zu machen, musste früher js her. Jetzt geht es mit css position: sticky; Wie bei anderen Positionsangaben in css, bezieht sich die Positionsangabe auf das nächste Elternelement bei dem ein position vergeben wurde. Hat keins der Elternelemente eine Positionsangabe, wird der body als maßgebendes Elternelement verwendet. Beispiel für Header: Beispiel für… Position Sticky weiterlesen

CSs Dateien sind meistens in dem head-Bereich, können aber auch an anderen Stellen eingebunden werden. Normal Import lokal Import in CSS Import in LESS. Die Angabe der Dateiendung ist optional. Import ins SASS/SCSS. Die Angabe der Dateiendung ist optional. Bei Import ist auch die Verwendung von externen Ressourcen über http/https möglich.

Die Pseudoklassen für Links sind folgende:a:link – Normaler unbesuchter Linka:visited – Bereits besuchter Linka:hover – Link wenn man mit der Maus darüberfährta:active – Link der gerade angeklickt ist z.B. zusammengefasst:

Wird einem Element mit einer bestimmten Größe ein Rahmen (border) oder eine Innenabstand (padding) vergeben, wird dies zur angegebenen Größe addiert.Mit box-sizing : border-box; kann dies verhindert werden. Da dieses Verhalten bei den meisten Elementen gewünscht ist, legt man am besten am Anfang seiner CSS-Datei ein Wildcard mit box-sizing an: