CSS, HTML und Javascript mit {stil}

CSS: Text mit Verlauf füllen

CSS Text mit Verlauf füllen

Ein Verlauf oder Gradient wird durch CSS background-image erzeugt, aber für Text hat CSS nur color zu bieten. CSS color hingegen weist einem Text Farbe zu, aber keinen Verlauf, denn gradient ist ein Wert für die Eigenschaft background-image

Open Source – Code-Editor Brackets

Brackets Open Source HTML Editor

Brackets ist ein Code-Editor, programmiert in HTML und Javascript. Dennoch ist Brackets eine Desktop-Anwendung. Adobe hat das Projekt ins Leben gerufen, heute wird es von seiner eigenen Community auf Github weitergeführt.

SVG image-Tag

SVG image – Bitmapbilder, Fotos, SVG-Grafik in SVG einbinden

Das SVG image-Element bettet Bilder in ähnlicher Weise wie das HTML-img-Tag in eine SVG-Grafik ein. Das Bild kann eine Bitmap (jpg, png, gif) oder eine weitere SVG-Grafik sein.

Genauso wie beim Einbetten von Bildern in HTML bleibt beim Einbetten von PNG und GIF die Transparenz im Bild erhalten.

CSS organisieren und aufräumen

CSS organisieren, ändern, pflegen

CSS-Dateien entwickeln sich schnell zu einem brodelnden Hexenkessel. Sie wachsen, werden unüberschaubar und versanden in Redundanz. Wie behalten wir die Übersicht und wie finden wir das CSS above the fold?

Bad Bots blockieren oder wie man Bots fern hält

Bad Bots blockieren

Gibt es ein Gegenteil von Suchmaschinen-Optimierung? Bad Bots und Spider machen auf vielen Webseiten mehr als die Hälfte des Traffics aus und belasten einen Server in Stoßzeiten zusätzlich.

MathML in Chrome

Chrome unterstützt MathML nicht mehr

Vor gut sieben Jahren habe ich mich gefreut, dass MathMl so schön integriert war und ich mir Bitmaps für Formeln sparen konnte. Aber Google meinte „Formeln kannste googeln“ und Chrome zog MathML wieder ab. Jetzt feiert MathML in Chrome Canary Wiederauferstehung.

Gleich mittenrein

HTML-Dokumente einbinden: object oder iframe

object Tag oder iframe

In XHTML gehörte das iframe-Tag zu den eher unerwünschten Elementen und wurde in einen eigenen Dokumententyp verbannt. Statt dessen bevorzugte XHTML das object-Tag. Mit HTML5 hat sich das Blatt zugunsten des iframe-Tags gewendet.

Responsive Formulare

Responsive Formulare

Formulare machen dem Benutzer mit mobilen Geräten das Ausfüllen schwer. Ohne besondere Auszeichnung durch angepasstes CSS sind die Eingabefelder mikroskopisch klein.

placeholder und label sind die wichtigsten Elemente bei der Gestaltung von Formularen, die dem Benutzer auf mobilen Geräten entgegenkommen.

Icon-Fonts aus SVG erstellen

SVG Icon Fonts

Sonderzeichen werden heute dank der Webfonts zuverlässig angezeigt, selbst exotische Symbole wie Yin Yang und ein Schneemann kommen mit so umfangreichen Fonts wie Droid (sehen wir einmal von IE8 ab) auf den Monitor.

Anstandsregeln für PDFs in Webseiten

PDF für Webseiten richtig anlegen

Eingebettete PDFs sind beliebte Downloads in Webseiten – in erster Linie beliebt in Marketing und Kommunikationsabteilungen und den Kollegen, die für die Redaktion des Internetauftritts zuständig sind. Meine Kunden hingegen flehe ich auf Knien an: Lasset ab vom PDF auf der Homepage oder behandelt es besser. Aber wie bindet man ein PDF richtig ein und was muss ein PDF mitbringen?

Sieben Wege, SVG in HTML-Seiten zu setzen

SVG in HTML-Seiten

SVG als Standalone ist klasse. Der Clou von SVG ist, dass es sich als Komponente in die wohlbekannten Techniken des Webdesigns integrieren läßt.

Formular – Eingabefelder : Datum, Email, Suche

Input-Felder für Formulare

Wenn Formulare auf mobilen Geräten landen, sind die wiederspenstigen Eingabefelder eine Bremse:

Immer wieder umschalten zur numerischen Tastatur, weil Ziffern, Sonderzeichen oder Emailadressen eingegeben werden. Mit neuen Input Types bringt HTML5 Komfort in HTML-Formulare.