WEBDESIGN

Archiv

  • Seite 1 von 3:
  • 1
  • 2
  • 3

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

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

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

HTML5 und SEO

Seit es Suchmaschinen gibt versuchen Webseitenbetreiber mit allerhand Methoden ihre Webseiten weiter oben in den Suchergebnissen zu platzieren. Da Google und Co. keinen Einblick in ihre Algorithmen bieten, bleibt nichts anderes übrig, als die besten Möglichkeiten durch Erfahrungswerte zu finden.
2 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.
2 Kommentare

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

HTML5 Tags schließen oder nicht?

In HTML5 ist es nicht unbedingt verlangt, dass bestimmt HTML Tags wieder geschlossen werden. Diese speziellen Tags sind sozusagen selbst-schließend. Nun stellt sich die Frage, ob man nach wie vor, alle Tags kategorisch abschließen sollte, oder nicht.
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…
5 Kommentare

Responsive Images – Bilder automatisch der Auflösung anpassen #2

Im ersten Artikel zum Thema Responsive Images wurde eine Technik vorgestellt, die so noch nicht von aktuellen Browsern unterstützt wird. Heute schauen wir uns an, ob es trotzdem eine Möglichkeit gibt mit Responsive Images zu arbeiten und dabei nur CSS zu verwenden.
0 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

Eigene HTML5 data- Element Attribute

Eine kleine Neuerung mit großen Auswirkungen ist das Setzen von eigenen Attributen bei HTML Elementen. In diesem Tutorial schauen wir uns einige praktische Beispiele an und wie man die HTML5 data Attribute verwenden, manipulieren und darauf zugreifen kann.
0 Kommentare

HTML5 Mouse Wheel Event | Dinge mit dem Mausrad steuern

Das Mausrad zu unterstützen kann die eigene Website interaktiver machen und dabei noch zur Benutzerfreundlichkeit beitragen. Heute schauen wir uns an, wie man auf das Scrollen mit dem Mausrad reagieren kann und was damit alles möglich ist.
0 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

CSS !important Deklaration, wo und wann einsetzen?

Das Schlüsselwort !important gibt es bereits seit den 90er Jahren und wurde mit der ersten CSS Spezifikation eingeführt. Der Intention war, dem Entwickler die Möglichkeit zu geben bestimmte Styles einfach überschreiben zu können. In diesem Artikel schauen wir uns an, wann und ob Deklarationen mit !important sinnvoll sind.
0 Kommentare
  • Seite 1 von 3:
  • 1
  • 2
  • 3