kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Frontend


Einführung in CSS 3

Auf die offizielle Veröffentlichung von CSS 3 darf die Webdesign-Gemeinde wohl noch etwas warten. Kein Grund jedoch sich nicht einige der neuen Funktionen etwas genauer anzuschauen:
In diesem Artikel zeige ich anhand simpler Beispiele die CSS 3-Funktionen "rounded courners", "multiple backgrounds", "box-shadow", "text-shadow" und "multi-column-layout".

Beitrag zu Ende lesen

Simple CSS Mouse Over Image Gallery

Vor einigen Tagen brauchte ich eine simple Bildergalerie in der man mit der Maus über Miniaturansichten fährt und das entsprechende Bild in groß angezeigt bekommt. Auf der Suche nach einer entsprechenden Lösung fand ich jedoch leider nichts was mir wirklich zusagte. Zum einen wollte ich komplett auf JavaScript verzichten, zum anderen das Markup möglichst übersichtlich halten.
Im folgenden erläutere ich Euch die nun entwickelte Lösung.

Beitrag zu Ende lesen

Räumlichkeit und Bewegung mittels CSS

Bewegung und Räumlichkeit in Internetseiten beschränken sich heutzutage keinesfalls mehr auf Flash oder Javascript.
Mittels unterschiedlich positionierter Grafiken kann während der Skalierung des Browserfensters ein räumlicher, dreidimensionaler oder gar bewegter Eindruck entstehen.

Hier findet Ihr einige beeindruckende Beispiele für Räumlichkeit und Bewegung mittels Parallax (Linienrasterbild) und Background-Ausrichtung in CSS.

Beitrag zu Ende lesen

XFN (XHTML Friends Network) Microformat

Das XFN (XHTML Friends Network)-Mikroformat zeichnet soziale Beziehungen in Hyperlinks aus. So kann beispielsweise angegeben werden, dass der verwendete Hyperlink auf einen Blog eines Freundes, die Homepage der Ehefrau oder die E-Mailadresse des Arbeitskollegen verweist.

Beitrag zu Ende lesen

HTML vCard mittels Mikroformat erstellen

vCards sind elektronische Visitenkarten die per Mausklick ins Adressbuch (lokal, online, mobil, pda, etc.) importiert werden können. Mikroformate sind Markup Auszeichnungen die es dem Programm (z. B. Browser) ermöglichen den semantischen Zusammenhang von Zeichenfolgen zu verstehen. Der Computer stellt folglich nicht nur eine Reihenfolge von Zeichen dar, sondern er versteht auch in was für einem Zusammenhang die Daten stehen und was sie bedeuten. In diesem Beitrag erklären wir wie vCards mittels Mikroformaten in Internetseiten integriert werden können.

Beitrag zu Ende lesen

HTML-Elemente und Semantik

HTML und Semantik

Fast jedes HTML-Element hat eine festgelegte Bedeutung, mit der Inhalte auf einer Webseite ausgezeichnet und strukturiert werden können. Wenn für die verschiedenen Inhalte der Website das jeweils passendste HTML-Element verwendet wurde, spricht man von semantisch wertvollem Code. Da eine professionelle Website immer semantisch korrekt aufgebaut sein muss, erklären wir in diesem Beitrag den Begriff »Semantik« und die Bedeutung der verschiedenen HTML-Elemente.

Beitrag zu Ende lesen