Posts von mike

Jedem Frontend-Entwickler sollten die Frontend-Frameworks Bootstrap und Foundation ein Begriff sein, jedoch sind diese regelrechte Schwergewichte. Jene Frameworks setzten die JavaScript Library jQuery voraus und schlagen in der Regel mit bis zu 300KB zu Buche. Heute liste ich…

Viele von euch stehen bestimmt vor der selben Herausforderung, wenn man eine Galerie bzw. ein Karussell für ein Projekt erstellen will, frag man sich "wie mache ich das oder welche fertige Lösung nehme ich dafür?". Ganz tricky wird Geschichte wenn diese Galerie oder der Slider dazu noch "responsive" bzw. touchfähig sein soll. Da kommt schnell der Gedanke an…

Heute zeige ich euch eine kleine Vorschau auf die neuen Selektoren in CSS. Sachen, die wir uns Frontendler schon vor Jahren gewünscht haben. Also legen wir los.  Der ! Selektor Fangen wir mit den für mich sinnvollsten Seketor an. Den sogenanten parent Selektor. Wo wir früher mit jQuery uns ein Eltern-DIV selektiert haben, können wir nun mit einem einfachen Ausrufezeichzen "!" in der Selektorenkette das zu…

Nachdem ich letztes mal eine simple Flip-Animation gezeigt habe, bauen wir heute einen virtuellen 3D Würfel der sich horizontal rotieren lässt. Und das alles mit der Macht von CSS. Also mein junger Padavan loslegen wir müssen. Das HTML Gerüst. Hier das HTML-Markup. Es gibt ein Wrapper der den eigentlichen Würfel "cube" beinhaltet. Der wiederum hat sechs weitere Divs, welche die sechs Seiten eines Würfels…

CSS wird heute für weit mehr verwendet als nur bloßes Styling. Und ich muss sagen, dass es eine wahre Freude ist, damit zu arbeiten. Animationen benötigen kein Codeschnipsel JavaScript mehr (fahrt mal mit der Maus über der Box!), und sind dazu noch performanter, weil diese meist automatisch Hardware beschleunigt sind. Heute möchte ich euch zeigen wie…

Desktop Benachrichtigungen aka "Web notifications" sind dafür da um den Benutzer über wichtige Ereignisse (wie zum Beispiel eintreffende Nachrichten) auch dann zu…

Mit dem heutigen Beitrag möchte ich das Beispiel einer mobilen Navigation abschließen. Nachdem ich letztes mal über die geniale JavaScript-Bibliothek Velocity.js berichtet habe, stelle ich euch heute eine kleine Bibliothek vor, welche beim Scrollen einer Webseite den iPhone typischen "rubber band"-Effekt…

Slide-Out Navigation Part 2 In meinem letzten Beitrag habe ich eine Implementierung einer Slide-Out Navigation mit jQuery und reinem CSS3 gezeigt. Heute zeige ich euch, wie man mit Hilfe der kleinen JavaScript Library Velocity.js die Vorzüge von javaSript und die Hardwarebeschleunigung von CSS3 vereinen könnt. Was…

Responsive Webdesign wird mit dem Siegeszug der Smartphones immer wichtiger. Im Zeitalter von HTML5 und CSS3 gewinnen Animationen mehr an Bedeutung. Heute will ich euch ein kleinen Vergleich zeigen, wie man mit jQuery, und mit reinem CSS für die Animationen, eine mobile Navigation erzeugt. HTML Grundgerüst Schauen wir uns zunächst das Grundgerüst unseres kleinen Beispieles an: <div…

Heute möchte ich euch eine Vorschau auf das "<dialog>" -Element von HTML5 geben. Bisher war es nicht möglich ohne Javascript Frameworks wie jQuery einfache Dialoge, außer die in die Jahre…