WordPress & Webwork - perun.net

Zur Abwechslung gibt es mal wieder ein CSS-Artikel in diesem Weblog. Seit CSS1 existiert die Pseudoklasse :first-child und seit CSS3 :last-child. Mit :first-child spricht man das erste und mit :last-child das letzte Kindelement eines Elternelements an. Verstanden? Nein, hier ein Beispiel:

<div id="sidebar">
    <h3>Erste Überschrift</h3>
    <p>...</p>

    <h3>Überschrift</h3>
    <p>...</p>

    <h3>Letzte Überschrift</h3>
    <p>...</p>
</div>

Das obere Code-Beispiel stellt eine recht übliche Seitenleiste aka Sidebar dar. Jetzt könnte es sein, dass man der ersten Überschrift den oberen, äußeren Abstand (margin-top) wegnehmen möchte, damit es auf der gleichen Höhe wie der Inhalt anfängt. Anstatt jetzt der ersten Überschrift ein zusätzliches Klassenattribut zu vergeben, könnte man einfach folgendes in der CSS-Datei notieren: (weiterlesen…)

Die deutsche Sprache ist dafür bekannt dass sie einige lange Wörter hat. Hier nur zwei Beispiele:

• Unionsfraktionsvizevorsitzender
• Donaudampfschiffahrtsgesellschaftskapitän

Es gibt noch längere Beispiele, aber wir wollen hier nicht schon am Anfang das Pulver verschießen. Hat man viel Fläche zur Verfügung, dann machen solche Wörter kein Problem, aber in eingerückten Kommentarbereichen oder Infoboxen kann das schon problematisch werden. Ist das Wort breiter als die Box, dann wird die Breite der Box im Normalfall ignoriert und das Wort ragt raus: (weiterlesen…)

Für manche neu, für andere olle Kamelle: aber die Deklaration border-collapse: collapse; deaktiviert die abgerundeten Ecken, die man durch CSS3 erreichen will. Dabei werden sowohl die "offizielle" Eigenschaft (border-radius) als auch die browserspezifischen Eigenschaften (zum Beispiel -moz-border-radius) übergangen.

Siehe auch CSS Backgrounds and Borders Module Level 3 von W3C.

Der Hintergrund der ganzen Sache ist, dass ich letztens vor hatte auch den Tabellen im Artikel Tastaturkürzel für schnelleres Schreiben im WordPress-Editor abgerundete Ecken zu spendieren, so wie ich es schon hier im Artikel CSS3 und abgerundete Ecken beschrieben habe. (weiterlesen…)

Welcher Webdesigner wünscht sich das nicht: Grafiken und farbige Ebenen übereinander zu lagern und die untere durch die obere durchscheinen zu lassen und dies schnell, unkompliziert ohne Hilfe von Photoshop-Trickkiste und ressourcensparend durchzuführen. Dies alles ist mit CSS3 möglich. Schauen wir uns die Möglichkeiten, die uns die Eigenschaft opacity und RGBA ermöglichen.

Hinweis: die folgenden Beispiele funktionieren nur in modernen Browsern: Firefox und andere aktuelle Mozilla-Geschwister, Safari, Google Chrome und Opera. (weiterlesen…)

Im Anschluss an den Artikel CSS3 und abgerundete Ecken widme ich mich jetzt den Schatteneffekten für Text und Boxen. Bevor ich anfange, möchte ich einen Hinweis loswerden: die folgenden werden nur in modernen Browsern – Firefox, Safari, Chrome, Opera und dem IE9 – angezeigt. Leider werden die inline CSS-Angaben auch im Google Reader ignoriert. Aber da ist kein Bug, sondern lediglich ein Grund mehr um die Website zu besuchen.

Textschatten mit text-shadow

Bei dem Schatten für Text gibt es freundlicherweise lediglich eine Eigenschaft text-shadow und man muss daher nicht browserspezifisches Gematsche berücksichtigen. Die Eigenschaft wird nach folgendem Muster notiert: (weiterlesen…)

Abgerundete Ecken sind ein beliebtes Mittel um das Layout einer Website aufzupeppen. Um abgerundete Ecken zu erreichen gibt es mehrere Ansätze: per Javascript, mit verschachtelten div-Blöcken und Grafiken oder mit Hilfe von CSS3.

Im folgenden werde ich mich der Lösung mit CSS3 widmen. Damit bleiben momentan alle Internet-Explorer-Versionen außen vor. Mit der Version 9 des Internet Explorers (IE) soll sich das aber ändern. (weiterlesen…)