Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D-Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online-Marketing-Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Menü
  • Beste Agentur finden
    • 3D-Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online-Marketing-Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

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.

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.

Chrome-Entwicklertools mobil: Touch-Events und Geolocation am Desktop emulieren

Mit den Chrome-Entwicklertools stellt Google ein umfangreiches Werkzeug für seinen Browser zur Verfügung, das einen bei der Umsetzung von Webprojekten unterstützt. Vor recht kurzer Zeit stellten wir den sehr gelungenen Online-Kurs zu den DevTools vor, der nach wie vor kostenfrei zur Verfügung steht. Heute möchte ich Ihren Blick auf die interessanten Möglichkeiten lenken, die die Tools für die Entwicklung mobiler Anwendungen bieten und die einem den ständigen Wechsel zwischen Desktop- und Mobilgerät ersparen.

Leaflet: Interaktive Karten mit JavaScript und OpenStreetMap

Wenn es um die Einbindung von Kartenausschnitten in eine Website geht, ist Google Maps die erste Wahl. Dank der JavaScript-API ist es zudem leicht, Karten mit Markern und anderen Overlays zu versehen. Das freie Pendant OpenStreetMap liefert eine solch einfache Möglichkeit der Herangehensweise nicht. Die JavaScript-Bibliothek Leaflet jedoch bietet viele Features, die man von Google Maps kennt, um interaktive Karten auf der Grundlage von OpenStreetMap zu erzeugen.

Favicons online erstellen mit diesen fünf praktischen Editoren

Jeder kennt sie, jeder hat sie schonmal gesehen: Favicons. Sie gehören zu jeder Website dazu wie die Butter auf’s Brot. Einfach erstellen lassen sie sich auch. Zum Beispiel mithilfe des großen Icon-Sets von Dr. Web mit über 970 hochwertigen Icons, das du jetzt kostenlos herunterladen kannst.

Neue Zeitrechnung mit der JavaScript-Bibliothek Moment.js

Mit Zeitangaben zu rechnen, ist nicht ganz einfach. Es gibt viele unterschiedliche Einheiten (Jahr, Monat, Tag, Stunde etc.) und beinahe ebenso viele Zahlensysteme, von denen keines dezimal ist. Die JavaScript-Bibliothek Moment.js liefert eine Reihe nützlicher Funktionen, mit denen sich bequem Zeitspannen ausrechnen und Zeitangaben in unterschiedlichen Formaten ausgeben lassen – und das für verschiedene Sprachen und Länder.

easings.net: Bremsen und Beschleunigen mit CSS3

Mit der Einführung von CSS3 sind auch animierte Hover-Effekte und andere Übergänge möglich. Für die Transitions – wie diese Form der Animationen genannt werden – existieren mehrere vordefinierte Effekte, die sogenannten Easings. Sie unterschieden sich in der Art der Beschleunigung und des Abbremsens der Bewegung. Die Seite easings.net hat eine Reihe zusätzlicher Easings zusammengestellt und liefert den passenden Quelltext dazu.

CSS3: Native Feature-Detection mit @supports

Wer mit CSS3 arbeitet, läuft immer Gefahr, dass ein Browser bestimmte CSS-Eigenschaften nicht interpretieren kann. Das betrifft nicht nur ältere Browser, wie der aktuelle Internet Explorer beweist. Dienste wie Modernizer erkennen, welche Eigenschaften ein Browser versteht und welche nicht. Mit der „@supports“-Regel gibt es jedoch auch eine native Feature-Detection – derzeit allerdings nur für Opera.

Performantere JavaScript-Animationen mit requestAnimationFrame

Dank CSS3 sind Animationen ohne Flash und JavaScript kein Problem mehr. Aber nicht immer kommt man mit den Möglichkeiten von CSS3 aus. Vor allem, wenn Animationen berechnet werden müssen, ist der Einsatz von JavaScript unumgänglich. Es gibt jedoch eine wesentlich performantere Möglichkeit als den Einsatz von setTimeout und setInterval. Denn setTimeout und setInterval haben den Nachteil, dass sie eine Funktion immer nach einer fest definierten Zeitspanne wiederholen. Gerade für Animationen ist ein solch fester Wert ungeeignet. Jeder, der schon einmal eine Animationen mit den beiden Funktionen programmiert hat, kennt wahrscheinlich die Schwierigkeit, den idealen Wert für die Zeitspanne in Kombination mit den jeweiligen Animationsschritten zu finden. Außerdem sind die Funktionsaufrufe per setTimeout und setInterval selten im Einklang mit der Bildfrequenz des Monitors, sodass nicht bei jedem Aufruf tatsächlich eine Aktualisierung der Animation dargestellt werden kann.

CSS: Scrollleisten in Chrome individuell gestalten

Vom Internet Explorer kannte man die Möglichkeit bereits, die Scrollleisten des Browsers individuell anzupassen. Bereits seit der uralten Version 5.5 ist es möglich, die Farbe der Leiste und ihrer Bestandteile zu ändern. Mittlerweile erlauben Webkit-Browser (beispielsweise Chrome und Safari) ebenfalls, die Leisten zu individualisieren. Allerdings geht Webkit hier noch einen Schritt weiter – nicht nur die Farbe lässt sich ändern.

Aus dem Off: Navigation und Inhalte platzsparend unterbringen

Für Webdesigner ist es oft eine Herausforderung, alle Inhalte einer Website für Mobilgeräte – vor allem Smartphones – aufzubereiten. Header, Navigation, Text und Bild, Seitenleisten und andere Elemente finden nur selten gemeinsam Platz im mobilen Layout. Off-Canvas-Layouts sind hier die Lösung des Problems. Sie verstauen bestimmte Inhalte dort, wo sie nicht stören – außerhalb des sichtbaren Bereichs.

CSS3: Individuelle Nummerierungen mit der Counter-Eigenschaft

Mit der CSS3-Counter-Eigenschaft ist es möglich, ein beliebiges HTML-Element mit einer Nummerierung zu versehen. In den meisten Fällen reicht die einfache Nummerierung mit dem OL-Element zwar aus; allerdings sind die Gestaltungsmöglichkeiten hierbei arg eingeschränkt. Denn Nummerierung und dazugehöriger Inhalt des Listenpunktes können nur gemeinsam gestaltet werden – in Kombination mit der Counter-Eigenschaft geht es jedoch auch anders.

CSSrefresh: JavaScript vereinfacht das Testen von CSS-Änderungen

Die Gestaltung von Websites mit CSS ist ein mitunter langwieriges Unterfangen. Sind neue Eigenschaft ins Stylesheet geschrieben, muss die Seite neu geladen werden, um das Ergebnis sehen zu können. Das ständige Neuladen und den damit verbundenen Wechsel der Fenster oder Tabs kann man sich mit geeigneten Tools jedoch schenken – zum Beispiels mit CSSrefresh!

Solides Syntax-Highlighting mit Prism

JavaScript-Bibliotheken zum Hervorheben von Quelltexten sind nicht neu. Zu den zahlreichen Angeboten hat sich nun der Syntax-Highlighter Prism gesellt, der allerdings mit lediglich drei Kilobyte Dateigröße sehr platzsparend daherkommt. Seine weiteren Features sind so interessant, dass ich Ihnen Prism im folgenden Beitrag einmal vorstellen will.

Object-fit für Bilder: CSS-Eigenschaft für clientseitige Bildausrichtung und -beschneidung

Opera ist bekanntermaßen ein Browser mit sehr geringer Verbreitung. Darum ist es auch wenig sinnvoll, CSS-Eigenschaften einzusetzen, die ausschließlich vom norwegischen Browser unterstützt werden. Allerdings ist die „object-fit“-Eigenschaft eine schöne Idee für bessere Bildausrichtung sowie -beschneidung, weshalb es sich lohnt, sie sich einmal anzuschauen.

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.

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 sinnvoll, beziehungsweise gewollt, eine Datei explizit zum Herunterladen anzubieten.

Border-Image-Generator: Grafische CSS-Rahmen leicht gemacht

Mit der CSS3-Eigenschaft border-image lassen sich individuelle und ausgefallene Rahmen erstellen. Die Grundlage für diese Rahmen ist jeweils eine Grafikdatei, die in verschiedene Bereiche eingeteilt wird. Jeder Bereich steht für ein bestimmtes Rahmensegment. Die Web-App Border-Image-Generator erstellt solche grafische Rahmen bequem und einfach.

.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.

CSS3: Verläufe so einfach wie in Photoshop mit ColorZilla

Farbverläufe in CSS3 zu erstellen, ist gerade bei komplexeren Verläufen gar nicht so einfach. Vor allem nicht, da eine grafische Bedienoberfläche fehlt. Mit dem CSS Gradient Generator von ColorZilla gibt es jedoch genau eine solche Oberfläche, wie man sie aus Photoshop und anderen Bildbearbeitungsprogrammen kennt. So wird das Erstellen von Verläufen fast schon zum Vergnügen.
Seite1 Seite2 Seite3 Seite4 Seite5
Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich
  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich

Agentur nach Schwerpunkt finden

  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden
  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen