Es handelt sich um eine Firefox-Erweiterung für Webentwickler, mit der sich durch eine Zoom-Funktion (bis 3200% Vergrößerung) pixelgenau Abstände messen und Farbwerte analysieren lassen.

Der PixelZoommer kann den Schritt über ein Bildbearbeitungsprogramm überflüssig machen, so dass bei der Entwicklung von Web-Projekten direkt im Browser Größen und Abstände analysiert und Farbwerte aufgenommen werden können.

Ich finde, es ist ein praktisches und übersichtliches Tool, das hilft Zeit zu sparen und etwas schnell zu prüfen.

Hinweis:
Derzeit ist es  auf der  offiziellen Mozilla-Seite noch als experimentelles Add-on gekennzeichnet. Bis zum finalen Status sind daher alle Benutzer zum Testen eingeladen.

Offizielle Seite mit genaueren Infos und Video-Demonstration:
http://matthiasschuetz.com/pixelzoomer/de/

Zwar wird der Wechsel von CSS 2 auf CSS 3 bekanntermaßen wohl noch etwas dauern. Aber eine hilfreiche Neuerung ist das CSS3-Modul “multi-column layout”. Auch wenn es nicht mehr wirklich “taufrisch” ist, möchte ich es trotzdem kurz vorstellen. Denn wenn die Seite nicht in allen Browsern gleich aussehen muß, spart man sich dadurch verschachtelte divs – von tables gar nicht zu reden…
Geeignete Anwendungen wären, Listenaufzählungen, Navigationslisten aber auch Textebereiche.

Beispiel:

Code für Mozilla-Browser:
#TopNav ul{
-moz-column-count: 3;
-moz-column-width: 32%;
-moz-column-gap: 1em;
-moz-column-rule: solid #818285 1px;}

Über column-count wird die Spaltenanzahl definiert.

Column-width bestimmt die jeweilige Spaltenbreite. Derzeit sind alle Spalten immer gleich breit & hoch. (Das kann sich zukünftig ggf. noch ändern.)

Column-gap regelt den horizontalen Abstand zwischen den einzelnen Spalten. Der Wert darf nicht negativ sein.

Mit column-rule kann eine Trennlinie definiert werden.

Bitte nicht vergessen, für Safari-Browser wird statt “-moz” einfach “-webkit” definiert.

Umbrüche:

Um Umbrüche in die nächste Spalte gezielt zu steuern, stehen folgende Eigenschaften zur Verfügung:

• break-before
• break-after
• break-inside

Versucht Umbrüche innerhalb von p Elementen zu  vermeiden:
p { break-inside: avoid-column }

Umbruch nach Bildern:
img { break-after: column }

Umbruch vor h2:
{ break-before: column; }

Weitere Möglichkeiten:

Element über alle Spalten darstellen:
h2 { colum-span: all;}

Wer noch tiefer einsteigen möchte, dem empfehle ich dazu die Seite des W3C:
http://www.w3.org/TR/css3-multicol/

Browser Kompatibilität:

mac:

• Chrome  5
• Firefox 3.6
• Safari 4

Win:

• Chrome 4
• Firefox 3, 3.6
• Safari 4

Bisher keine Unterstützung:

• IE 6,7 und 8
• Opera 10, 10.1 und 10.5

Für die Gestaltung von Subnav-Boxen einer Kundenwebsite, wollten wir  Schatteneffekte mit reinem CSS erstellen – ohne die Verwendung von background-images.

Das gelingt mit der CSS3 Eigenschaft”box-shadow” sehr schön, die Styledefinition lautet dann z.B. für den Firefox (Gecko) so:
-moz-box-shadow: 8px 8px 18px #6f7072;

Diese CSS-Eigenschaft benötigt folgende Angaben:

Der 1. Wert: “x-Abstand”
Er verschiebt  den Schattens horizontal. Ein positiver Wert verschiebt den Schatten nachch rechts, ein negativer nach links.

Der 2. Wert:  “y-Abstand”
Er verschiebt  den Schattens vertikal.  Ein positiver Wert positioniert den Schatten unten, ein negativer oben.

Der 3. Wert : “Blur-Radius” (optional)
Die Größe des Weichzeichnereffektes.
Je größer der Wert, desto größer und transparenter wird der Schatten. Wenn kein Wert angegeben wird, wird der Wert auf 0 gesetzt.

Der 4. Wert  hier definiert die Schattefarbe.

Es ist noch ein  weitere Wertangabe, vor der Farbdefinition, möglich:
“Spread-Radius” (optional)
Der “Überfüllungs-Radius”, er vergrößert bei positivem Wert den Schatten und weitet ihn aus – und umgekehrt.
Wenn kein Wert angegeben wird, wird der der Wert auf 0 gesetzt.

Anmerkung:
Wenn “inset” (optional)  als keyword angegeben ist, wird der Schatten nicht außen, sondern innerhalb des Rahmens gezeichnet.
Inset Schatten werden über dem Hintergrund, aber unter Rahmen und Inhalt dargestellt.

(more…)

Sicher haben Sie auch schon eine der vielen Hundeerziehungs-Dokusoaps im Fernsehen gesehen. Man kommt ihnen ja auch fast gar nicht mehr aus…