In diesem Video möchte ich zeigen, wie man mithilfe von CSS (Cascading Stylesheets) Buttons erzeugen kann, die runde Ecken haben, die einen Schatten werfen und die als Hintergrund einen Verlauf haben. Diese Buttons kann man z.B. auf einer Webseite als Hauptmenü oder ähnliches verwenden. Besonders möchte ich dabei auf die unterschiedliche Syntax für die Abrundungen, die Schatten und den Verlauf bei den einzelnen Browsern eingeben (Opera, Firefox, IE, Chrome)

Ein toller Artikel von Peter Gasston auf netmagazine.com zum Thema zukunftsgerichtete CSS Layouts:
» The future of CSS layouts

Angesprochen werden die Themen

• Columns: Hierbei geht es um mehrspaltige Layouts, die variabel oder fest angelegt werden können.
• Flexible box: Das Flexible Box-Layout-Modul ("FlexBox") bietet ein Verfahren zur automatischen Größenanpassung Elemente innerhalb der Eltern, ohne Höhe und Breite zu berechnen.

sowie Grids, Templates, Positioned floats, Exclusions und Regions. Schaut am besten mal selbst hinein; es lohnt sich.

Adobe ist bereits seit einiger Zeit dabei, ein Authoring-Tool für HTML5/CSS3/JS Animation zu entwickeln. Jetzt gibt es eine eigene Seite in den Adobe Labs und die Ankündigung, dass in nicht allzuferner Zukunft eine erste Preview-Version verfügbar sein wird.

Dank CSS3 ist es mittlerweile möglich, einfache, aber wirksame Texteffekte zu ermöglichen – der Fantasie sind hierbei keine Grenzen gesetzt. Ein paar Effekte sollen an dieser Stelle inklusive Code vorgestellt werden.


Weißer Schatten mit dunklem Schein nach außen

Hallo,
angeregt durch einen Beitrag im (X)HTML-Forum möchte ich zeigen, dass man eigentlich nur noch für den Internet-Explorer Javascript/jQuery braucht, um ein "Accordion" auf einer Web-Seite zu realisieren.

In meinem Funktionsbeispiel habe ich einen HTML-Seitenaufbau gewählt, der aus einer H1-Überschrift und mehreren folgenden DIV-Blöcken ("sections") besteht. Jeder "section"-Block ist mit einem Klassenattribut "section" markiert und enthält als erstes Kindelement wiederum eine Überschrift (hier: H2) mit einem eingeschlossenem Hyperlink (A-Element). Danach folgt beliebiger Blockinhalt.

Voraussetzung:
HTML-Grundkenntnisse

Kurze Einleitung:
Ich erlerne z.Zt. selber noch HTML und CSS, möchte aber meine bisher erlernten Grundkenntnisse gerne weitergeben.
In diesem Tutorial (übrigens mein erstes für Tutorials.de und über CSS) habe ich mich erstmal einem leichten Thema gewidmet und zwar dem Zuweisen von Farbe zum Text.
Auch habe ich gleich zwei versch. Wege aufgeführt wie dies möglich sein kann.

Für welchen Weg ihr euch im Endeffekt entscheiden werdet bleibt euch überlassen.

Um den Rahmen von HTML-Elementen zu gestalten, besitzt CSS mehrere Eigenschaften, mit denen man das Aussehen des Rahmens bestimmen kann.
Im folgenden Tutorial werden die Verschiedenen Eigenschaften vorgestellt und mit Beispiel an den Inputboxen von HTML demonstriert.

Links mit CSS wie professionelle Buttons aussehen lassen.

Ein Navigationsmenü nur mit Hyperlinks erstellen und diese Links trotzdem wie professionelle Buttons aussehen lassen? Kein Problem mit ein bisschen CSS, denn solcherart aufgepeppte Hyperlinks präsentieren sich optisch so elegant wie mit Hilfe von Java Script wechselnde Button-Images.