Articles by Denis Potschien

Google Profile: http://plus.google.com/+DenisPotschien

Design

SVG-Filter: So wendest du sie auf HTML-Elemente an

4. Februar 2016
von
SVG-Filter: So wendest du sie auf HTML-Elemente an

Mit der Hilfe von CSS3 fügst du einem Element unter anderem Unschärfe, Schlagschatten, Helligkeit und Kontrast  hinzu. Insgesamt zehn solcher Filter stehen dir zur Verfügung. Auch das SVG-Format kennt Filtereffekte. Teils überschneiden sich die Möglichkeiten, so etwa bei der Unschärfe. Aber das SVG-Format kennt eine Reihe zusätzlicher Filter, die mit CSS3 allein nicht zu realisieren sind. Ohne großen Aufwand fügst du aber beliebige SVG-Filter einem HTML-Element hinzu.

Design

Die schönsten Layer-Fonts und wie man sie im Webdesign verwendet

1. Februar 2016
von
Layer-Fonts im Webdesign

Dass eine Schrift auch mal mehrfarbig gesetzt sein kann, ist keine Erfindung der digitalen Typografie. Bereits im 19. Jahrhundert gab es Schriften, die in zwei oder mehr Schnitte aufgeteilt waren, sodass man sie mehrfarbig übereinander drucken konnte. Mit dem OpenType-Format gibt es solche sogenannten Layer-Fonts auch für den digitalen Einsatz. Gerade für 3D- und Schatteneffekte sind mittlerweile zahlreiche Schriften auf dem Markt, welche eine mehrfarbige Darstellung ermöglichen. Und dank der Webschriften kannst du solche mehrfarbigen Texte sogar im Webdesign verwenden.

Design

Sicher surfen: Chrome-Entwicklertools mit neuem Security-Panel

26. Januar 2016
von
Sicher surfen: Chrome-Entwicklertools mit neuem Security-Panel

Sicheres Surfen ist ein Thema, mit dem sich auch Webentwickler zu beschäftigen haben. Gerade im Umgang mit persönlichen Nutzerdaten ist es wichtig, dass diese verschlüsselt übertragen werden. Doch die Umsetzung sicherer Übertragungen mittels HTTPS ist nicht immer einfach. Gerade bei komplexen Webprojekten werden häufig viele externe Quellen eingebunden, die eine Verbindung nicht durchgängig sicher machen. Das neue Security-Panel der Chrome-Entwicklertools unterstützt dich bei der Umsetzung sicherer Übertragungswege für dein Webprojekt.

JavaScript & jQuery

A-Frame macht virtuelle Realitäten lebendig

23. Januar 2016
von
A-Frame macht virtuelle Realitäten lebendig

Virtuelle Realität spielt eine immer größere Rolle im World Wide Web. JavaScript und moderne Browser machen es mittlerweile grundsätzlich möglich, dreidimensionale Welten zu erschaffen, in denen man sich bewegen kann. Mit dem JavaScript-Framework A-Frame baust du dir auf der Grundlage einer eigenen Auszeichnungssprache schnell solche virtuelle Realitäten.

JavaScript & jQuery

fullPage.js: Schnell und einfach „mehrseitige“ One-Pager erstellen

21. Januar 2016
von
fullPage.js: Schnell und einfach „mehrseitige“ One-Pager erstellen

Gerade bei kleinen Webprojekten sind One-Pager sehr beliebt. Anspruchsvoll und großzügig gestaltet, sorgen sie oft für maximale Aufmerksamkeit. Mit dem jQuery-Plugin fullPage.js erstellst du auf einfache Weise „mehrseitige“ One-Pager. Das Plugin sorgt dafür, dass einzelne Bereiche eines HTML-Dokumentes seitenfüllend dargestellt und per Navigation oder auch per Scrolling animiert gewechselt werden.

Bilder & Vektorgrafiken bearbeiten

Satyr.io stellt Dummies zum Testen von Websites bereit

19. Januar 2016
von
satyr

Bevor eine Website an die Öffentlichkeit geht, sollte man sie testen. Gerade bei responsivem Layout ist es wichtig, abzuklären, ob Bilder bei verschiedenen Browserauflösungen beziehungsweise auf Mobilgeräten richtig dargestellt werden. Wird die richtige Datei ausgegeben? Wie verhält sich das Laden von Bildern bei langsamer Internetverbindung? Satyr.io ist ein Dienst, der Dummy-Bilder erstellt, mit denen du deine Webprojekte in dieser Hinsicht einmal prüfen kannst.

HTML/CSS

Firefox Developer Edition: Der Browser für Entwickler

18. Januar 2016
von
Firefox Developer Edition: Der Browser für Entwickler

Mittlerweile stellt jeder Browser Entwicklerwerkzeuge zur Verfügung, mit denen du Webprojekte ausgiebig auf Gestaltung und Funktionalität prüfen kannst. Standardmäßig gehören das Debugging von JavaScript und das Inspizieren des Quelltextes dazu. Mozilla hat mit dem Firefox Developer Edition einen eigenen Browser entwickelt, der sich ganz besonders an Webentwickler richtet und ihnen mit speziellen Tools hilft, eine Website ausgiebig zu prüfen. Dazu gehört nun auch das ausgiebige Testen von CSS3-Animationen und -Transitions.

Design

Wix 2016: Neuer Editor, Musik-Store und mehr

14. Januar 2016
von
Wix 2016: Neuer Editor, Musik-Store und mehr

Mit Wix ist seit Jahren ein Homepage-Baukasten auf dem Markt, der das Erstellen ansprechender und zeitgemäßer Websites vereinfachen und professionalisieren will. Zahlreiche Vorlagen und umfangreiche Bearbeitungsmöglichkeiten zeichnen Wix aus. Da sich Trends und Techniken gerade bei Webdesign und -entwicklung schnell ändern, hat Wix soeben einen rundum erneuerten Editor mit neuen Features herausgebracht. So unterstützt Wix nun auch den Trend, Videos als Hintergrund einzusetzen, sowie das nach wie vor sehr beliebte Parallax-Scrolling.

Design

Simbla 2016: Responsive Websites für jedermann

13. Januar 2016
von
Simbla 2016

Dank zahlreicher Baukästen und Website-Builder ist es möglich, sich im Handumdrehen – und ohne Kenntnisse in HTML, CSS und JavaScript – eine eigene Website zusammenzustellen. Oftmals mangelt es diesen Websites an gestalterischer, aber auch technischer Qualität. Simbla ist ein Website-Builder, der sich sowohl an Profis richtet, die selbst per HTML auszeichnen können, als auch an Laien, die einfach per Drag-and-Drop eine Website bauen möchten. Die mit Simbla erstellten Websites sind darüber hinaus vollständig responsiv und somit für die Darstellung auf Mobilgeräten wie Tablets und Smartphones geeignet.

Design

CSS3-Transitions für komplexe Animationen kombinieren

13. Januar 2016
von
CSS3-Transitions für komplexe Animationen kombinieren

Animierte Übergänge sind dank CSS3-Transitions mit wenig Aufwand möglich und werden mittlerweile ganz selbstverständlich eingesetzt. Dabei kannst du verschiedene Eigenschaften gleichzeitig verändern. Es gibt aber auch die Möglichkeit, die zu animierenden Eigenschaften zu unterschiedlichen Zeiten und mit unterschiedlicher Länge abzuspielen.

Design

Texteffekte mit SVG: Muster, Masken und Beschneidungspfade

11. Januar 2016
von
Texteffekte mit SVG

Dass das SVG-Format weit mehr als nur vektorbasierte Formen darzustellen in der Lage ist, weißt du bereits. Heute will ich dir zeigen, was für Texteffekte mit SVG möglich sind. Mit Mustern, Masken und Beschneidungspfaden setzt du eine Vielzahl kreativer Ideen um. So realisierst du beispielsweise interessante und ungewöhnliche Texteffekte, die auch mit den vielseitigen CSS3-Möglichkeiten so nicht machbar sind – oder zumindest nicht in allen aktuellen Browsern funktionieren.

HTML/CSS

HTML5: Automatische Großschreibung mit „autocapitalize“

9. Januar 2016
von
HTML5: Automatische Großschreibung mit „autocapitalize“

Formulareingaben auf Smartphones und Tablets sind nicht immer eine angenehme Angelegenheit. Mittels Eingabehilfen werden einem Wörter vorgeschlagen. Auch die Groß- und Kleinschreibung kann beeinflusst beziehungsweise vorgegeben werden. Mit dem HTML-Attribut autocapitalize ist es möglich, für Formularfelder zu definieren, wann Wörter mit einem Großbuchstaben begonnen und wann sie komplett in Großbuchstaben dargestellt werden sollen.