Kategorien
Programmierung

Codeblock.js: JavaScript direkt im Browser editieren und ausführen

Wenn es um die Vorstellung von JavaScript-Frameworks und -Bibliotheken geht, ist es immer sinnvoll, den Nutzern mit konkreten Beispielen zu erklären, wie das Framework oder die Bibliothek funktioniert, wie sie eingesetzt wird und welche Einstellungsmöglichkeiten vorhanden sind. Statt nur Quelltext-Schnipsel zu veröffentlichen, ist es natürlich wünschenswert, wenn Besucher sich selbst am Quelltext versuchen können, ohne […]

Kategorien
Design HTML/CSS

CSS3: Komplexe Beschneidungspfade mit der Eigenschaft Clip-Path

Bisher war es mit CSS nicht möglich, Elemente jenseits rechteckiger Begrenzungen darzustellen. Die mittlerweile etablierte Eigenschaft „border-radius“ erlaubt zwar abgerundete Ecken, die somit auch eine runde Grundform erlauben; komplexere Beschneidungen sind damit aber nicht zu erstellen. Die CSS3-Eigenschaft „clip-path“ bringt jedoch komplexe Beschneidungspfade zur Anwendung, die auch per SVG-Grafik definiert werden können. Maskierung in CSS […]

Kategorien
Design HTML/CSS

HTML5up: 13 kostenlose und moderne Templates auf Basis von HTML5

Wer nach fertigen Templates für Webprojekte sucht, wird bei Google schnell fündig. Aber nicht immer entsprechen die Vorlagen hinsichtlich Qualität von Quelltext und Gestaltung den eigenen Ansprüchen. Der Dienst HTML5up bietet hingegen einige optisch ansprechende und dank HTML5 und CSS3 auch zeitgemäß umgesetzte Templates für moderne Webprojekte. Und kostenlos sind diese obendrein. Übersicht aller Templates […]

Kategorien
Design HTML/CSS

CSS3: Mit Exclusions und Regions Texte darstellen wie in InDesign

Dank Adobe könnten Texte auf Websites bald so gestaltet werden, wie es beispielsweise in InDesign möglich ist. Der kalifornische Software-Konzern hat zwei Vorschläge gemacht, wie sich Texte mit CSS in Form bringen lassen und wie sie auf unterschiedliche HTML-Elemente aufgeteilt werden können. Adobe und HTML Texte in Form bringen mit CSS-Exclusions Texte in HTML sind […]

Kategorien
Inspiration

Favicons online erstellen mit diesen fünf praktischen Editoren

Favicons gehören seit geraumer Zeit, fast war ich versucht, “seit Menschengedenken” zu schreiben, zur Grundausstattung einer Website. Für viele Bildbearbeitungsprogramme existieren Plugins, mit denen die Minimalsymbole erstellt werden können. Es gibt mittlerweile jedoch auch einige Online-Favicon-Editoren mit unterschiedlichen Schwerpunkten. Diese unterscheiden sich in Details recht deutlich voneinander. X-Icon-Editor X-Icon-Editor Der X-Icon-Editor kommt mit vergleichsweise vielen […]

Kategorien
Design HTML/CSS

CSS3: Nebeneinander liegende Elemente mit Flexbox statt Float

Bei der Gestaltung mehrspaltiger Weblayouts ist der Einsatz der CSS-Float-Eigenschaft bisher meist unumgänglich. Gerade bei der Darstellung nebeneinander liegender Elemente wird sie eingesetzt und bringt gerne das ein oder andere Problem mit sich. Das CSS3-Flexbox-Modell bietet neue Möglichkeiten bei der Gestaltung nebeneinander liegender Elemente mit zusätzlichen Features und das ganz ohne Float-Probleme. Zunächst muss erwähnt […]

Kategorien
Inspiration Tutorials

Download-Attribut bei Links: Dateien herunterladen statt sie im Browser zu öffnen

Werden Dateien in einem HTML-Dokument verlinkt, versucht der Browser zunächst immer, diese Datei innerhalb der Anwendung zu öffnen und darzustellen. Bei den meisten Bilddateien ist das so gewünscht und auch pei PDF-Dateien, insofern ein Plugin installiert ist, welches die Darstellung von PDFs innerhalb des Browserfensters ermöglicht, hat sich die Vorgehensweise etabliert. Manchmal ist es jedoch […]

Kategorien
Design HTML/CSS

Pures CSS3: Ein schicker Content-Slider ganz ohne JavaScript

Vieles, was bisher nur mit Flash oder JavaScript möglich war, lässt sich mittlerweile mit purem CSS3 realisieren. Heute zeige ich einen schicken Contentslider, der ausschließlich mit HTML und CSS3 umgesetzt ist. Möglich machen dies  CSS3-Animationen und -Transitions. „The Pure CSS3 Content Slider“ The Pure CSS3 Content Slider ist ein experimentelles Projekt, mit dem sich jeder sehr […]

Kategorien
Webdesign

.htaccess-Tester prüft Rewrite-Regeln auf ihre Richtigkeit

Das Werkeln an der .htaccess ist nicht jedermanns Sache. Besonders das Umschreiben von URLs mit mod_rewrite bringt oft nicht auf Anhieb das gewünschte Ergebnis. Um die Rewrite-Rules nicht direkt am eigenen Server ausprobieren zu müssen, gibt es den .htaccess-Tester. Über einige wenige Eingabefelder lassen sich Regeln schnell und unkompliziert überprüfen. Umleitung: Eine der Aufgaben der […]

Kategorien
Webdesign

Adaptive Images: PHP-Script skaliert Bilder passend in responsiven Layouts

Seit es mit Media-Queries möglich ist, Websites an unterschiedliche Displaygrößen anzupassen, sind spezielle mobile Versionen für Websites nicht mehr zwingend notwendig. Allerdings gibt es ein Problem: Während Schriftgrößen, Positionen und Breiten per Media-Queries angepasst werden können, lassen sich Bilder nicht ohne weiteres in unterschiedlichen Auflösungen bereitstellen. Das serverseitig arbeitende Tool „Adaptive Images“ ändert das. Adaptive […]

Kategorien
Design HTML/CSS

CSS3-Lightbox komplett ohne Javascript

Die Lightbox ist eine beliebte Möglichkeit, Bilder im Großformat auf einer Website darzustellen. Mittels diverser Javascript-Bibliotheken lassen sich Bilder dynamisch im Vordergrund einer Seite anzeigen, während die eigentliche Website verdunkelt wird. Mit CSS3 lässt sich ein solcher Lightbox-Effekt auch ganz ohne Javascript realisieren. Erst HTML, dann ein wenig CSS CSS3-Lightbox CSS3 macht vieles einfacher und […]

Kategorien
Design HTML/CSS

Formulare gestalten und validieren mit HTML5 und CSS3

Mit HTML5 und CSS3 lassen sich Formulare clientseitig validieren und Fehlermeldungen mit Hilfe neuer Pseudoklassen per CSS ausgeben. Neue Eingabetypen sowie die Möglichkeit, Pflichtfelder und Vorgaben bereits per HTML festzulegen, machen JavaScript für Validierungszwecke unnötig (jedenfalls irgendwann in der Zukunft…). Vorgaben per HTML5 festlegen Seit HTML5 gibt es viele neue Eingabetypen. So lassen sich spezielle […]

Kategorien
HTML/CSS

CSS3: Texte beschneiden mit der Eigenschaft Text-Overflow

Gerade in Tabellen sind Texte oder Wörter gerne mal zu lang und müssen entweder umgebrochen oder beschnitten werden. Mit der CSS-Eigenschaft „text-overflow“ lassen sich nicht nur Texte auf eine feste Breite beschneiden, sondern auch automatisch mit Auslassungszeichen versehen. Die Eigenschaft sorgt dafür, dass ein Text nur so viel Raum einnehmen kann, wie das umschließende Element […]

Kategorien
E-Business Programmierung SEO

PHP und .htaccess: Lesbare URLs mit variablen Verzeichnisnamen

Bei dynamischen Websites wird oftmals eine kompletter Auftritt über eine einzige PHP-Datei gesteuert. Dabei werden Variablen als URL-Parameter übergeben und Seiten mit unterschiedlichen Inhalten generiert. So entstehen kryptische URLs, die a) sehr lang und b) für Mensch und Suchmaschine äußerst schwer verdaulich sind. Mit ein bisschen PHP-Code lässt sich das ändern.

Kategorien
Webdesign

Bannerwerbung – Formate, Fakten und Kosten

Internetwerbung rangiert heute vor Anzeigen in Fach- und Publikumszeitschriften. Auch die Werbung auf Plakaten und im Rundfunk hat sie überholt. Trotz ihrer weiten Verbreitung herrscht über Formate und Abrechnungsmethoden Unklarheit. Finden Sie hier die gängigen Formate für Bannergestaltung sowie Fakten und Kosten für die Anzeigenplanung.

Kategorien
Design HTML/CSS

Webinhalte für Smartphones und Pocket PCs aufbereiten

Seitdem Internetseiten nicht nur per PC und Notebook aufgerufen werden können, sondern auch per Mobiltelefon und PDA, stehen Webdesigner vor neuen Herausforderungen. Wollen Website-Betreiber die wachsende Zahl der mobilen Surfer mit ihren kleinen Displays nicht durch ständiges Scrollen verärgern, sind sie gut beraten, Internetseiten speziell für dieses Medium aufzubereiten.