Responsive Webdesign ist die Zukunft — das ist denke ich nicht zu hoch gegriffen. Also habe ich mir letzte Woche endlich einmal die Zeit genommen, mein Blog und meine Website von den statischen Fesseln zu befreien und ein reaktionsfähiges Design umgesetzt. Dabei bin ich wie folgt vorgegangen:
"Von statischem Design zu responsive Design" Weiterlesen
Icon Fonts haben gegenüber Bildicons den Vorteil, dass sie wie Schrift behandelt und verändert werden können. Per font-size kann die Größe festgelegt werden, mit color wird die Farbe verändert. Font Awesome ist eine solche Icon Font, die für die Nutzung mit Twitter Bootstrap entworfen wurde. Ich persönlich finde, dass unter den 220 Icons sehr viele dabei sind, die perfekt zu einem Blog passen — rechts in der Sidebar habe ich ein paar davon untergebracht.
Gut einsetzbar sind sie auch für viele Arten von Menüpunkten oder Buttons, wie hier deutlich zu sehen ist.
Manchmal kommt man in die Lage, die Ausgabe einer MySQL Tabelle je nach Fall auf- oder absteigend sortieren zu wollen. Wenn man sich hier nicht gut mit der Materie und der Syntax auskennt, kann es eine ganze Weile dauern, bis man sich die richtige Lösung heraus gesucht hat.
Hier möchte ich zeigen, wie eine solche Sortierung in verschiedene Richtungen möglich ist.
Auf dem kulturbanause Blog bin ich vorgestern auf diesen Beitrag über Prism — ein kleines Highlight Plugin für Code — gestoßen: Syntax Highlightning mit Prism.
Ein gutes Highlightning ist meiner Meinung nach sehr wichtig in einem Blog, in dem öfter Codeschnipsel gepostet werden. Vorher habe ich Crayon genutzt und da schon über ein kleines Problem mit der Codedarstellung im RSS Feed berichtet. Auch diesem Problem und der Umständlichkeit der Lösung wollte ich mit Prism begegnen.
Im World Wide Web begegnet man häufig Slidern, beispielsweise auf Referenzseiten. Dort kann man dann zwischen den einzelnen Referenzen mit Hilfe von Navigationspfeilen hin und her wechseln, wobei oft auch noch eine kleine Beschreibung eingeblendet wird. Wenn die CSS3 Klasse :target verwendet wird, ist das auch nur mit CSS3 möglich.
"Slider auf Basis von CSS3 :target" WeiterlesenIn älteren Internet Explorer Versionen gibt es diverse Probleme mit der Darstellung von Dropdown Menüs, die nur auf CSS basieren. Wenn das Menü mehr als zwei Unterebenen hat, werden diese dritten, vierten usw. Ebenen bis zum IE8 alle dargestellt, wenn man über einen Oberpunkt in der ersten Unterebene hovert. Das ist so natürlich nicht gewünscht und kann auf einigen Umwegen korrigiert werden.
Dafür benötigen wir zuerst in der HTML Datei zwischen den HEAD-Tags den Code für ein alternatives Stylesheet (conditional stylesheet), das für IE8 und älter gilt:
Häufig werden Dropdown Menüs mit Javascript umgesetzt, um eine Animation zu ermöglichen. Doch mittlerweile geht dies auch gut alleine mit CSS3. Hier zeige ich Ihnen, wie ein Dropdown Menü zu realisieren ist, dass sich mit einer auf CSS3 basierenden Animation ausklappt.
Zuerst schreiben wir eine einfache verschachtelte Liste in HTML, die wir für die horizontale und vertikale Variante verwenden können:
Tooltips sind nützliche kleine Erklärungen zu eventuell unbekannten Begriffen oder Ähnlichem. Tooltips haben gegenüber dem title-Tag den Vorteil, dass sie individuell an das Design der Seite angepasst werden können.
Um einen Tooltip zu erstellen, gehen wir ähnlich vor wie bei einem Dropdown Menü, das mit CSS umgesetzt wurde.