Kategorie: Css/Scss/Less

hr

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

Halbtransparente Hintergrundbilder

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.

Position Sticky

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 einbinden

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.

Attribute bei Links

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:

Boxsizing

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:

Border Darstellungsfehler bei Tabellen

Haben Zellen von Tabellen (td) border, kann es bei einigen älteren Browsern so aussehen: Das liegt am border-collapse: collapse;Ändert man jedoch den auf separate, sieht die Tabelle in diesen Browsern so aus: Der Abstand zwischen den Zellen kommt vom border-spacing. Hier mit dem default Wert 1px.Ändert man den auf 0, sieht die Tabelle in den… Border Darstellungsfehler bei Tabellen weiterlesen

Box shadow

Schatten um oder in html Elementen erzeugen. Erläuterung: Der erste Wert, in diesem Beipiel 1px, ist der horizontaler Versatz des Schattens. Positiver Wert [nach rechts] und negativer Wert [nach links]. Der zweite Wert, in diesem Beispiel 2px, ist der vertikale Versatz des Schattens. Ppositiver Wert [nach unten] und negativer Wert [nach oben]. Der dritte Wert,… Box shadow weiterlesen