Alle Artikel in: Markup

News, Tipps und Tricks, Quelltext, Relevantes zu X/HTML und CSS

Googles Universal-Font Noto als Webfont nutzen

Mit dem Noto-Projekt will Google einen freien Font anbieten, der alle Sprachen der Welt unterstützt. Zuletzt wurde er in Zusammenarbeit mit Adobe (als Teil der Source-Familie) um Koreanisch, Japanisch und traditionelles Chinesisch erweitert. Über die Projektwebsite kann man sich für alle Sprachen die geeigneten Fonts herunterladen. Über die eingeblendete Weltkarte findet man zudem für jedes […]

Letterpress- und Embosseffekte mit CSS

Mit wenigen CSS-Anweisungen erstellt man beeindruckende Texteffekte: Mittels text-shadow kann man so Letterpress- und Emboss-Effekte erzeugen, die man sonst nur aus Bildbearbeitungsprogrammen kennt. Wie gehts‘? Jeder Schatten wird durch 4 Werte erzeugt: Versatz links – Versatz oben – Unschärfe (Blur) – Farbe. Schatten nach innen erhält man durch negative Werte für den x-/y-Versatz. Natürlich können […]

Zen Coding

Eine Neuigkeit/Neuheit des heutigen Tages scheint wohl Zen Coding zu sein: Ein Plugin für verschiedene Entwicklungsumgebungen, darunter Textmate, Netbeans und Coda, das ein schnelleres Schreiben von Quelltext erlaubt. Genutzt wird dazu ein eigens entwickelter Shortcode, den man nachher per Klick in „vollwertiges“ HTML oder CSS umwandeln kann. Die gesamte Palette der Möglichkeiten gibt es auf […]

IE-Tipp: IE7 im IE8 simulieren

Immer hilfreich beim Entwickeln, vor allem, wenn man die Webdarstellung im Internet Explorer 7 kontrollieren will, aber nur den kürzlich veröffentlichten IE8 nutzen kann. Ohne Standalone-Versionen kann man auch diese Anweisung in den zu testenden Quelltext einbauen. <meta http-equiv=“X-UA-Compatible“ content=“IE=EmulateIE7″ /> Und schon benimmt sich der IE8 wie ein IE7.

CSS-Tips: table-layout

Eine weitgehend unbenutzte CSS-Eigenschaft ist table-layout. Eric Wendelin zeigt in einem kurzen Beitrag, welchen Nutzen man damit aber erzielen kann: Use the table-layout CSS property to speed up table rendering. /* Set table to „fixed“ (fastest render) layout */ .fixed_table { table-layout: fixed; } /* Set table to „auto“ (best fit) layout. This is the […]

Absolut und relativ

Wieder eine kleine Gedächtnisstütze:

Die absolute Position eines Elements wird relativ zum Elternelement berechnet, wenn dieses ebenfalls positioniert wird. Andernfalls dient der Seiteninhalt (<body>) als Referenz.

Folgende Anweisungen im CSS…

Logos sind Bilder & verdienen ein <img />

Übermut tut selten gut. Und auch bei Standards kann man zu tief in die Markupkiste greifen. Das betrifft auch die korrekte Auszeichnung von Logos. Ich bin heute beim Überarbeiten eines bestehenden Templates über eine Aufzählung mit Partnern gestoßen, deren Logos allesamt als Hintergrundbilder der jeweiligen Absätze (ja, mittels inline-Anweisungen) definiert waren. Beim Hinzufügen eines float-Elementes […]

Radio-Buttons richtig auszeichnen

Manchmal ist es gut, immer wieder an Abläufe und Vorgehensweisen erinnert zu werden. Daher hier die Erinnerung an die richtige Auszeichnung von Radiobuttons. Warum? Weil dem Benutzer so Schwierigkeiten beim Ausfüllen eines Formulars erspart bleiben. Der Text sollte dem Element zugeordnet sein, v.a. für Screenreaderbenutzer. Der User klickt zur Auswahl oft auf den Text nicht […]

Einfacher Layoutwechsel

Manchmal kommt man mit einem Template nicht weit. Aber anstatt eine zweite Vorlage zu erstellen, genügt oft ein kleiner Kniff, um das Aussehen auf einigen Seiten anzupassen. Ein einfaches Beispiel: Eine Kundenwebsite, basierend auf einem einfachen CMS, enthält eine horizontale Navigation mit etwa 4-5 Unterpunkten – lediglich eine Seite besitzt mehr als 10 Navigationspunkte. Da […]