Text auf den Kopf stellen

Text auf den Kopf stellen mit transform:rotate

HERZLICH MILKOWWEN


gezackter Übergang zickzack Hintergrund mit css3

Für eine kleine Landingpage wollte ein Freund einen 2-farbigen Hintergrund, die Übergänge der Farben sollten dabei gezackt sein. Eine Lösung hierfür hatte ich schon einmal beim Kulturbanausen mit linear-gradient gesehen. Hier die Umsetzung:

Seiten-Titel

Inhalt Text der Webseite

HSL Farben, HSL-Farbangaben und HSLA

CSS3 Farb-Transparenz mit RGBA hatte ich schon einmal beschrieben, heute folgt HSL.

HSL ist eine weitere Möglichkeit, Farbangaben in der CSS zu definieren. HSL ist hier die Abkürzung für „Hue, Saturation, Lightness“ zu deutsch in etwa „Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit“. Die Angaben erfolgen in der CSS nach dem Muster:

hsl(Farbwinkel, Farbsättigung in %, Farbhelligkeit in %);
hsla(Farbwinkel, Farbsättigung in %, Farbhelligkeit in %, Alpha);

Ich persönlich finde HSL für den Anwender intuitiver, besser und einfacher zu merken. Ich stelle mir einfach einen Kreis mit Winkelangaben von 0 bis 359 Grad vor. Der Wert 0 oder 360 steht für ROT, 120 steht für GRÜN und 240 für BLAU (oder eine Uhr und den Uhrzeiten 3Uhr = 90, 6Uhr = 180, 9Uhr = 270, 12Uhr = 360/0).

hsla(0, 100%, 50%, 1) Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit

hsla(60, 100%, 50%, 1) Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit

hsla(120, 100%, 50%, 1) Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit

hsla(180, 100%, 50%, 1) Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit

hsla(240, 100%, 50%, 1) Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit

hsla(240, 50%, 50%, 1) Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit

hsla(240, 100%, 50%, 1) Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit

hsla(300, 100%, 50%, 1) Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit

Die Angabe der Farbsättigung tendiert mit Richtung zum Wert 0% zu einem „grau“ (je kleiner der Wert, desto mehr grau).

Bei der Angabe von 100% Helligkeit erhält man immer „weiß“, bei 0% Helligkeit „schwarz“. Probiert es aus! Wenn man sich erst einmal „zurecht“ gefunden hat, ist das sehr intuitiv.

Hier einmal unterschiedliche „Grauwerte“:
Weiterlesen

ul-Liste in Spalten mit column-count

Die Aufgabe: Für eine Übersichtsseite sollte eine unsortierte Liste mit 8 Listelementen in 2 Spalten dargestellt werden. Der Fluss der Liste sollte dabei erhalten bleiben und zusätzlich wollte man sich die Option offen halten, weitere Listelemente hinzufügen zu können und ggf. die Spaltenzahl auf 3 oder 4 zu erhöhen. Ich habe mich für column-count entschieden, damit war das super einfach umzusetzen.

ul#css3columnlist {
-moz-column-count: 2;
-moz-column-gap: 10px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;
}
ul#css3columnlist li{
line-height: 2em;
display: block;
}

  • Kategorie 1 Kategorie 1
  • Kategorie 2 Kategorie 2
  • Kategorie 3 Kategorie 3
  • Kategorie 4 Kategorie 4
  • Kategorie 5 Kategorie 5
  • Kategorie 6 Kategorie 6
  • Kategorie 7 Kategorie 7
  • Kategorie 8 Kategorie 8

Eine weitere Möglichkeit wäre hier auch gewesen, li-Elemente mit float:left zu nutzen. Hier allerdings wäre der „Textfluss“ von links nach rechts, also hier nicht so optimal. Schaut euch auch das zweite Beispiel einmal an.

Weiterlesen

transition-timing-function Werte veranschaulicht

An einem kleinem Beispiel möchte ich Werte der Eigenschaft „transition-timing-funktion“ veranschaulichen.

Bei einer transition gibt man den Start- und Endpunkt eines Eigenschaftswertes vor. So soll zum Beispiel die Schriftfarbe eines Paragraphen (p) von blau zu rot wechseln und zwar dann, und nur dann, wenn sich ein Benutzer mit der Maus über dem Paragrapen befindet. Die Berechnung des Überganges überlässt man dem Browser. Die Beschreibung der Start- und Endpunkte sehen dann in der CSS so aus:

p {
color: blue;
}

p:hover {
color: red;
}

Hä? Transition? Ohne Transition erhält man doch auch das, was man definiert hat. Ja! Dann noch 3 mal ja! Aber … Eine Transition nun soll den Übergang zwischen den beiden Zuständen animieren und flüssiger gestalten, um dem Benutzer ein besseres Gefühl beim Besuch der Webseite zu vermitteln. Ohne Transition ist es ein Wechsel, der ruckartig stattfindet. Mit einer Transition wird dieser Ruck abgefedert.

Weiterlesen