Kategorien
Design HTML/CSS Webdesign

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. Transitions mit Delay Die „transitions“-Eigenschaft kennt vier unterschiedliche Werte. Der erste Wert teilt mit, welche […]

Kategorien
HTML/CSS Webdesign

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. Zeichen, Wörter […]

Kategorien
Design Webdesign

Adobe Portfolio: Neuer Website-Builder für kreative Berufe

Mit dem Kreativnetzwerk Behance hat Adobe bereits ein soziales Netzwerk für Gestalter und Illustratoren etabliert. Mit dem neuen Dienst Adobe Portfolio kannst du dir nun im Handumdrehen eine Website zur Präsentation deiner Arbeiten erstellen. Der Dienst ist für alle Abonnenten der Creative Cloud kostenlos. Wer bereits ein Profil bei Behance hat und dort seine Arbeiten präsentiert, […]

Kategorien
E-Business E-Commerce HTML/CSS Webdesign

Erstelle HTML5-Banner im Handumdrehen mit diesen vier Tools

Dass Bannerwerbung per Flash ausgespielt wird, kommt immer seltener vor. Auch in der Online-Werbung hat sich HTML5 als Standard durchgesetzt. Dabei sind Animationen dank CSS3 und Interaktionen mit JavaScript problemlos möglich. Natürlich lassen sich HTML5-Banner von Hand erstellen. Aber es gibt eine Vielzahl an sowohl kostenlosen als auch kostenpflichtigen Tools, die sich auf das Erstellen von […]

Kategorien
Design UI/UX Webdesign

Gute Slider, schlechte Slider: Was du beim Einsatz beachten solltest

Die Art und Weise, wie Websites entwickelt und besucht werden, hat sich in den letzten Jahren stark verändert. Die mobile Nutzung wächst und Techniken wie HTML5 und CSS3 machen vieles möglich, was vorher nicht ging oder nur über Umwege realisierbar war. Aber eines hat sich seit Jahren bewährt: Content-Slider. Sie haben zwei große Vorteile. Zum einen […]

Kategorien
Programmierung Webdesign

jQuery: Inhalte animiert einblenden mit animatedModal.js

Dank CSS3 sind Animationen immer häufiger ein fester Bestandteil zeitgemäßer Websites. So werden sie für Off-Canvas-Navigationen oder auch zur Einblendung zusätzlicher Inhalte wie Galerien eingesetzt. Das Framework animatedModal.js ermöglicht es, solche zusätzlichen Inhalte – Modals genannt – per CSS3-Animationen browserfüllend einzublenden. So lassen sich Bilder, Filme, zusätzliche Texte und alles, was sonst noch per Buttonklick eingeblendet werden […]

Kategorien
Design HTML/CSS Webdesign

HTML-Formulare verbessern mit „autocomplete“

Um Formulare schneller ausfüllen zu können, bieten Browser die Möglichkeit der Autovervollständigung an. Einmal gemachte Eingaben werden gespeichert und bei erneutem Ausfüllen desselben Formulars oder eines anderen Formulars mit identischem Namen werden bisher gemachte Eingaben zur Vorauswahl angeboten. Das Problem dabei ist, dass abweichende Bezeichnungen für bestimmte Eingaben – zum Beispiel ein Name oder auch eine Kreditkartennummer – dazu […]

Kategorien
Inspiration Webdesign

28 inspirierende Beispiele für gutes responsives Webdesign (Showcase)

Responsives Webdesign ist bereits seit längerer Zeit in aller Entwickler Munde. Eine responsive Website gilt sozusagen als die eierlegende Wollmilchsau, denn sie funktioniert auf jedem Ausgabegerät und mit jeder denkbaren Bildschirmauflösung. Egal, ob Sie eine Website auf einem Smartphone, einem Tablet oder einem Desktop-Rechner anschauen, überall wird der Inhalt optimal lesbar dargestellt. Selbstverständlich ist bei einer modernen […]

Kategorien
Webdesign

Service Worker: JavaScript unabhängig von einer Website ausführen

Neue JavaScript-APIs haben in den letzten Jahren viele neue und nützliche Funktionen hervorgebracht, die vor allem für das mobile Web entwickelt wurden – zum Beispiel die Geolocation-der Application-Cache-API. Von den technischen Möglichkeiten nähern sich Webanwendungen immer mehr nativen Apps für Mobilgeräte an. Eine Sache war bislang jedoch den Apps vorbehalten: Anders als Webanwendungen können Apps […]

Kategorien
Design HTML/CSS Webdesign

CSS Contact Form: Schicke Kontaktformulare sehr einfach

Die Gestaltung benutzerfreundlicher und ansprechender Formulare ist nicht immer einfach. Pflichtfelder sollten gut erkennbar und Fehlermeldungen auffällig sein. Dazu kommt, dass Felder wie Radio-Buttons und Checkboxen nur auf Umwegen mit gänzlich eigenem Aussehen versehen werden können. Wie man Kontaktformulare raffiniert, übersichtlich und sehr individuell gestalten kann, zeigt das CSS Contact Form von CodyHouse. Formular mit […]

Kategorien
Design Photoshop Webdesign

Brandneu: Photoshops Zeichenflächen erleichtern das Webdesign

Eine der größten Neuerungen der aktuellen Creative Cloud von Adobe ist die Einführung von Zeichenflächen in Photoshop. Aus Illustrator kennt man diese Funktion bereits. Sie erlaubt es, innerhalb eines Dokumentes mehrere eigenständige Bereiche anzulegen, die unabhängig zu anderen gestaltet werden können. Gedacht ist diese neue Möglichkeit vor allem für das Erstellen von Weblayouts. Eine Website, mehrere Layouts […]

Kategorien
Programmierung Webdesign

JavaScript: Template-String erlaubt Variablen und Umbrüche in Zeichenketten

Arbeitet man mit JavaScript, kommt es immer wieder vor, dass Variablen oder Zeilenumbrüche  in einer Zeichenkette untergebracht werden müssen. Während man Variablen per Plus-Zeichen an eine Zeichenkette anhängt, ist das Einfügen von Zeilenumbrüchen nur als spezielle Steuerzeichen vorgesehen. Mit den neuen Template-String-Möglichkeiten von JavaScript, die derzeit noch experimentell sind, lassen sich Variablen und Umbrüche künftig […]

Kategorien
Design HTML/CSS Responsive Design Webdesign

Media Queries Level 4: Pointer optimiert Websites für Zeigegeräte

Dank Media Queries lässt sich eine Website unter anderem für verschiedene Auflösungen und Geräteorientierungen gestalten. So ist es möglich, für nahezu alle Geräte ein optimales Aussehen bereitzustellen. Eine Sache konnte bislang jedoch nicht berücksichtigt werden, nämlich das Zeigegerät beziehungsweise der Pointer. Zwar darf man sich bei kleinen Auflösungen relativ sicher sein, dass es sich um ein […]

Kategorien
HTML/CSS Webdesign

Lining.js: Textzeilen verändern per CSS-Selektor

Dank der zahlreich zur Verfügung stehenden CSS-Selektoren kann man per Stylesheets auf fast jedes einzelne HTML-Element innerhalb eines Dokumentes zugreifen. Und dank des Pseudoelementes ::first-line hat man sogar innerhalb eines Textes die Möglichkeit, CSS-Eigenschaften nur auf die erste Zeile anzuwenden – unabhängig davon, ob die Zeile automatisch umgebrochen oder durch manuellen Zeilenumbruch herbeigeführt wird. Da es neben ::first-line […]

Kategorien
Design HTML/CSS Responsive Design Webdesign

Kurzvorstellung: Der Pinegrow Web-Editor will das Design beschleunigen

Einer unserer Leser machte uns auf den Pinegrow Web Editor aufmerksam, einen visuellen Web-Editor zur Entwicklung von HTML-Websites. Das klang gut und war somit für uns Grund genug, dem Editor wenigstens eine Kurzvorstellung zu widmen. Pinegrow arbeitet mit den bekannten Frameworks Bootstrap, Foundation, AngularJS und anderen zusammen. Wenn Sie mit HTML-Seiten, Templates oder mit den Frameworks Bootstrap […]

Kategorien
Inspiration Webdesign

Best Practice: 30 Websites mit Video-Hintergründen

Video-Hintergründe werden immer populärer. Nachdem nun auch Dienste für frei und kostenlos zu verwendende HD-Videos gibt, wird die Popularität wohlmöglich noch zunehmen. Der für seine kostenlosen und backlinkfreien Bilder bekannte Dienst Pexels bietet neuerdings auch Videos an. Diese Videos sind unter der Creative Commons Zero (CC0) license veröffentlicht, eine Nennung der Quelle oder ein Backlink ist […]

Kategorien
Webdesign

Fetch-API: Einfaches Laden von Inhalten ohne XMLHttpRequest

Komplexe Web-Applikationen setzen zunehmend auf JavaScript. Dabei werden auch Inhalte immer häufiger per JavaScript geladen. Bislang erfolgte dies über ein XMLHttpRequest-Objekt, was aber immer vergleichsweise umständlich war. So sind hierzu die Methoden open() und send() notwendig, um Inhalte zu laden. Per Callback-Funktion, die über einen Event-Listener aufgerufen wird, können die Inhalte dann abgerufen werden. Die neue Fetch-API […]

Kategorien
Design HTML/CSS Webdesign

Mit JotForm erstellen Sie komplexe Formulare, ganz ohne Programmierung

Formulare zu erstellen ist zwar kein Hexenwerk; aber je umfangreicher sie werden, desto zeitintensiver wird das Unterfangen. Neben der HTML-Auszeichnung und gegebenenfalls JavaScript zur clientseitigen Validierung ist es vor allem die serverseitige Verarbeitung von Formularen, die nicht immer einfach ist. JotForm hat diese Problematik erkannt und stellt ein Werkzeug zur Verfügung, mit dem man sich komplexe […]

Kategorien
HTML/CSS Webdesign

Gut ankommen: Responsives CSS-Dropdown-Menü ohne JavaScript

Wohin mit der Navigation? Diese Frage muss bei eigentlich jedem Webprojekt beantwortet werden. Gerade bei umfangreichen Websites ist es nicht immer einfach, die richtige Antwort darauf zu finden. Besteht eine Webpräsenz aus vielen Seiten und Unterseiten, bietet sich häufig ein Dropdown-Menü an. Dank CSS lassen sich Dropdown-Menüs ganz ohne Einsatz von JavaScript anlegen und mit Hilfe von Media […]

Kategorien
Design HTML/CSS Programmierung Webdesign

„Animsition“: Benutzerfreundliches jQuery-Plugin für animierte Seitenübergänge

Dank JavaScript in Kombination mit CSS3 stellen Animationen auf Websites keine große Herausforderung mehr da. Auch Seitenübergänge innerhalb einer Website werden gerne per CSS3-Animationen ein wenig in Schwung gebracht. Mit der aktuellen Fassung der Cascading Stylesheets sind einfache Fade-in- und Slide-in-Effekte ebenso möglich wie 3D-Drehungen, um von einer Seite auf eine andere überzuleiten. Das recht frische jQuery-Plugin „Animsition“ hilft, […]