WordPress & Webwork - perun.net

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. Bei dieser Lösung bleiben ältere Versionen vom Internet Explorer außen vor. Seit der Version 9 des Internet Explorers (IE) beherrscht auch dieser Browser abgerundete Ecken, die per CSS3 realisiert werden. (weiterlesen…)

Die zwei englischsprachigen Artikel Single-Line vs Multi-Line CSS und Single Line CSS haben mich dazu gebracht ein paar Worte dazu zu schreiben wie ich meinen CSS-Code organisiere und warum ich es so mache. In den folgenden Beispielen, gehe ich von der Arbeit eines einzelnen Webworkers aus, da man sich in Gruppen auf ein gemeinsames Vorgehen einigen sollte. (weiterlesen…)

• Die Top-8-Ausreden der Leute (Hinweis von Sahanya), die sich dreist an dem Inhalt anderer Leute bedienen. Ich würde noch zwei weitere faule Ausreden hinzufügen: Du bietest doch einen vollen Newsfeed an und Auf deine Website steht kein Hinweis, dass man die Inhalte nicht 1:1 übernehmen darf.
• Mit Draw Here kann man im Browser eine Website aufrufen und diese dann bemalen, mit Zeichen versehen und dann als Abbildung abspeichern. Ist sehr nützlich wenn man Teile einer Website näher beschreiben möchte.
• Abgerundete Ecken mit CSS 3 und den proprietären CSS-Eigenschaften von Geckos und Webkit.
• 10 Tipps für PHP-Coder. Blake Soley hat an Hand der Erfahrungen aus den Bewerbungs-Tests eine kleine Liste mit Tipps veröffentlicht. (via entwickler.com)
• FreundeNews: die deutsche "Ausgabe" von FriendFeed. Hat es schon jemand getestet?

Was man mit CSS alles machen kann zeigt die Demo von Roman Cortes. Er hat mit jede Menge div-Elementen und CSS das Portrait von Homer Simpson gezeichnet. Einfach mal in den Quelltext schauen.

Ned Batchelder hat die Demo erweitert und daraus mit ein bisschen jQuery eine Animation erstellt.

Vielen Dank an Sahanya für den Hinweis.