Templates, Tools und neue Techniken kann man als Webentwickler immer gebrauchen, auch wenn man diese nicht einsetzten will, kann man doch eine Menge neues lernen und so seinen Werkzeugkasten erweitern. In diesem Tutorial erstellen wir ein Template für einen Chat, welches auf HTML5 Boilerplate und Twitter Bootstrap basiert.

Es gibt viele Ansätze um eine Navigation responsive zu machen, meistens verwendet man ein Grid-System und @media-queries. Responsive Nav geht aber noch einen (kleinen) Schritt weiter und hilft einem dabei, dass die Navigation auf kleinen Displays nicht unübersichtlich wird. Außerdem ist die Verwendung sehr einfach und straight forward.

Viele CSS3 Eigenschaften sind immer noch nicht final in allen Browsern implementiert und man muss aus diesem Grund oft auf sogenannte Vendor Prefixes zurückgreifen. Heute schauen wir uns an welche Möglichkeiten es gibt, den Umgang mit Vendor Prefixes so komfortabel wie möglich zu machen.

Progress Bars sind ein häufig genutztes UI Element und werden primär dazu verwendet, um einen Fortschritt zu visualisieren. Heute schauen wir uns an, wie man eine animierte Progress Bar mit CSS3 und HTML5 erstellen kann.

Tabs werden beim Design von Webseiten sehr häufig eingesetzt, da sie viel Content auf wenig Platz erlauben. In diesem Artikel schauen wir uns 5 Beispiele für schick umgesetzte Tabs mit jQuery an.

Ribbons werden oft eingesetzt um bestimmt Elemente auf einer Website plastischer wirken zu lassen. Früher aber auch heute noch zu einem großen Teil, werden dazu Bilder verwendet. In diesem Tutorial schauen wir uns an, wie solche Farbbänder rein mit HTML5 und CSS3 umgesetzt werden können.

Heute schauen wir uns an, wie man mit CSS3 schöne Buttons mit 3D-Effekt erstellen kann. Im Gegensatz zu Buttons welche auf Bildern basieren, sparen wir hier einen zusätzlichen HTTP Request und steigern dadurch noch die Performance der Website.

Erst vor knapp einem Monat wurde auf Staticfloat vorgestellt, wie man alleine mit CSS3 und HTML5 einen Ajax Loader bauen kann. Heute schauen wir uns einen weiteren, rein auf CSS3 basierenden Loader an. Wiederum wird die Animation des Loaders komplett ohne Javascript, mit Hilfe von Keyframes umgesetzt.

Ein immer noch bestehendes Problem bei der Entwicklung und dem Design von Webseiten ist, dass es Features gibt die in manchen Browsern unterstützt werden und in anderen wiederum nicht. Nun führen Opera und der Firefox Auroa die Möglichkeit ein, mit der @supports Regel spezielle Styles zu definieren, die nur auf Elemente angewendet werden, wenn diese…

Parallax-Scrolling ist sicherlich einer der größten Webdesigntrends in diesem Jahr. Doch was ist Parallax-Scrolling überhaupt und wie kann man so einen Effekt selber erstellen?

Jeder Webdesigner kennt es, man ändert eine Eigenschaft im Stylesheet und drückt dann F5, um zu schauen ob es nun besser aussieht. Dem niederländischen Webdesigner Fred Heusschen wurde dies wohl auf Dauer zu nervig und entwickelte eine Javascript Libary, die das Aktualisieren komplett automatisiert.

Bilder die in in einem Kreis dargestellt werden passen manchmal besser zu einem Design, als normale, eckige. Heute schauen wir uns an, wie man dieses Designelement ganz ohne Photoshop, sondern rein mit CSS3 umsetzen kann.

Das CSS3 einem einen großen kreativen Freiraum lässt wissen wir bereits, aber das Android Logo komplett mit CSS3 zu gestalten, darauf muss man erst einmal kommen. Heute schauen wir uns an, wie das geht.

Manchmal will man seine Bilder optisch ein wenig aufpeppen, zum Beispiel mit einem schicken Retroeffekt. Dazu braucht man nicht immer Photoshop, wenn man mit CSS3 ähnliche Effekte erzielen kann. Wir schauen uns heute an, wie man einen schicken Retroeffekt rein mit CSS3 und HTML5 umsetzen kann.

In Zeiten, in denen Webseiten immer häufiger von mobilen Geräten wie Smartphones aufgerufen werden, kann es Sinn machen, Telefonnummern direkt zu verlinken. Viele Android und iOS Phones können mit solchen Links problemlos umgehen. Mit dieser Technik können Anrufe direkt von einer Website mit nur einem Klick gestartet werden.

Heute schauen wir uns an, wie man rein mit CSS3 und HTML5 einen animierten Ajax Loader erstellen kann. Dazu werden CSS keyframes verwendet, welche unter anderem auch für den scrollenden Star Wars Text eingesetzt wurden.

Jeder der Star Wars kennt, kennt auch das berühmte Opening mit dem fließenden Text. In diesem Tutorial wird gezeigt, wie man einen solchen 3D-Effekt rein mit CSS3 und HTML5 im Browser nachbauen kann.

In vielen Büchern sind Überschriften und Titel zwischen 2 horizontalen Linien zentriert. In diesem Artikel schauen wir uns an, wie man einen ähnliches Effekt mit HTML und CSS nachbilden kann.

Über die Jahre hinweg wurde CSS immer mächtiger und liefert mittlerweile schon einige Werkzeuge für die man sonst ein Bildbearbeitungsprogramm gebraucht hätte. Rahmen, 3-D Transformationen und Schatten sind Beispiele dafür, wofür es aber bisher immer noch externe Bearbeitung braucht sind Filter wie, schwarz-weiß, blur oder ähnliches. Um dieses Problem zu lösen wurden vom W3C CSS…

Einige mobile Geräte haben bereits hochauflösende Displays, wie beispielsweise das iPad oder iPhone4S. Webseiten die auf eine geringere Auflösung optimiert sind, werden möglicherweise nicht mehr optimal auf solchen Displays dargestellt. Mit Hilfe von CSS Media Queries ist man in der Lage, spezielle Styles extra für diese Displays auszuliefern.

Heute gibt es mal ein kleines Tutorial aus der Kategorie sinnlos, und zwar schauen wir uns an, wie man eine Website komplett auf den Kopf stellen kann. Dies hat zwar keinen praktischen Nutzen, außer dass man vielleicht zum ersten April seine Besucher ein wenig auf den Arm nehmen kann, aber zeigt eine Technik, die man…

Mittlerweile läuft schon ein beachtlicher Teil des Internet Traffics über mobile Geräte wie Smartphones oder Tablets. Deswegen sollte man sich auch überlegen, ob man die eigene Website nicht auf diese kleineren Bildschirme anpassen möchte. In diesem Artikel schauen wir uns an, wie man Bilder optimal für bestimmte Auflösungen skaliert.

Um Musik im Browser abzuspielen verwendet man seit langer Zeit Lösungen die auf Flash basieren. Zwar ist Flash nicht unbedingt eine schlechte Lösung, trotzdem wäre es besser, nicht von einem Plugin abhängig zu sein. In diesem Artikel schauen wir uns an, wie man Musik mit HTML5 abspielen kann.

Vor etwas mehr als einem halben Jahr gab es auf Staticfloat ein Tutorial zu einer Shoutbox mit PHP, jQuery und HTML. Die Shoutbox war sehr simpel aufgebaut und hatte keine Funktion um neue Kommentare automatisch nachzuladen. Heute schauen wir uns an, wie wir aus der Shoutbox eine Chatbox machen die neue Beiträge sofort nachlädt.

Heute schauen wir uns an, wie man mit Hilfe von CSS3 Animationen bestimmte Wörter in einem Satz rotieren lassen kann. Wir werden also bestimmte Wörter in einem Text, in bestimmten Zeitabständen durch andere ersetzen. Vor allem für Werbeslogans eignet sich so etwas, zum Beispiel Unser Unternehmen ist {toll, großartig, freundlich}. Wobei zwischen den geklammerten Wörtern…

Früher war ein Vollbildmodus Flashanwendungen vorbehalten, diese Zeit hat sich aber mittlerweile geändert. Viele moderne Browser wie Firefox, Chrome und Safari unterstützen mittlerweile die HTML5 Fullscreen API. In diesem Artikel werfen wir einen genaueren Blick auf die HTML5 Fullscreen API.

Links sollten sich vom Rest eines Textes abheben, normalerweise werden sie deshalb unterstrichen und in einer anderen Farbe dargestellt. Nun hab ich aber auf der der Website von Hakim El Hattab eine weitere, sehr kreative Methode gesehen, Links darzustellen. Dazu wird mit Hilfe von CSS3 ein 3D Effekt beim drüberfahren mit der Maus erreicht.

Heute möchte ich euch ein kleines aber feines Webtool vorstellen, mit dem man verschiedene Farbvariationen testen und passende Ergänzungsfarben finden kann. Das Tool heißt Colllor und ist weit mehr als ein einfacher Colorpicker.

Es kann sinnvoll sein, interne Links einer Website anders darzustellen, als ausgehende Links zu anderen Websites. Besucher sehen so auf den ersten Blick, ob sie das Webangebot über einen Link verlassen oder nicht. Des weiteren kann es auch ein wenig mehr Sicherheit gewähren, wenn Besucher wissen, dass es sich um einen Link auf eine andere…

CSS (Cascading Style Sheets) ist zusammen mit HTML die grundlegende Basis des Webdesigns. In den letzten Jahren hat sich einiges getan, auch was die Darstellung von Texten angeht. In diesem Artikel schauen wir uns an, wie Texte mit den neuen CSS3 Eigenschaften schöner formatiert werden können.