WEBDESIGN

Archiv

  • Seite 1 von 2:
  • 1
  • 2

Chat Template auf Basis von H5BP und Twitter Bootstrap

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

Responsive Nav – Schlanke Javascript Libary für eine responsive Navigation

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

CSS3 Vendor Prefixes

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

Animierte CSS3 Progress Bar

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

5 schicke Beispiele für Tabs mit jQuery

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

Ribbons mit CSS3

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

Schicke 3D Buttons mit HTML5 und CSS3

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

Here we go again! Animierter Ajax Loader mit CSS3

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

CSS3 Features nativ mit @supports prüfen

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…
0 Kommentare

Parallax-Scrolling mit jQuery Plugin erzeugen

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?
0 Kommentare

CSS Stylesheets schnell und effizient testen mit CSSrefresh

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

Runde Kreisbilder mit CSS3

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

Quick Tipp: Android Logo mit CSS3

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

Retroeffekt für Fotos mit CSS3

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

Telefonnummern Links klickbar machen

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

Animierter Ajax Loader mit CSS3

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

Star Wars 3D-Text mit CSS3

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

Titel zwischen Linien zentrieren mit CSS und HTML

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

CSS3 Filter – Schwarz-Weiß, Blur und noch mehr!

Ü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…
0 Kommentare

CSS Media Query für Retina Display (iPad, iPhone)

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

Komplette Website auf den Kopf stellen mit CSS3

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…
3 Kommentare

Responsive Images – Bilder automatisch der Auflösung anpassen

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

HTML5 Audio-Element | Musik abspielen

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

Shoutbox mit Auto-Refresh zur Chatbox machen

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

Wörter rotieren mit CSS3 Animationen

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…
0 Kommentare

Vollbildmodus mit der HTML5 Fullscreen API

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

3D-Rollende Links mit CSS3 und HTML5 Animationen

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

Colllor Farbtool für Webdesigner, viel mehr als ein Colorpicker

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

Interne Links mit CSS3 hervorheben

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…
0 Kommentare

Schöner formatierte Texte mit CSS3

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.
0 Kommentare
  • Seite 1 von 2:
  • 1
  • 2