Die indiviuelle und außergewöhnliche Gestaltung von Formularen ist mitunter schwierig. Gerade für Checkboxen und Radio-Buttons stehen nur sehr eingeschränkte gestalterische Möglichkeiten zur Verfügung. Mit CSS3 kann man sich jedoch behelfen und schnöde Checkboxen in schicke On/Off-Schalter verwandeln. Mit dem Dienst FlipSwitch lassen sich solche Formularelemente im Handumdrehen erstellen. On/Off FlipSwitch Switch-Button mit FlipSwitch erstellen FlipSwitch ist ein Online-Dienst, über den grafische Switch-Buttons erstellt werden....

Weiterlesen »

Hintergrundbilder in einer einzelnen, Sprite genannten Datei unterzubringen, und sie dann per CSS zu adressieren, macht eine Website schneller. Denn statt jedes Hintergrundbild einzeln zu laden, muss das Sprite nur einmal geladen werden. Das spart Server-Requests und somit Ladezeit. Es gibt eine ganze Reihe von Webdiensten, die einem bei der Erstellung von Sprites für eine neue Website behilflich sind. SpriteMe geht einen eigenen Weg:...

Weiterlesen »

Mit der Einführung von Data-Attributen können HTML-Elementen weitere Informationen – beginnend mit „data-“ – hinzugefügt werden. In vielen Fällen enthalten diese Attribute Werte, die von JavaScript ausgelesen und verarbeitet werden. Aber auch eine Nutzung in Kombination mit CSS ist möglich und erspart oft die zusätzliche Vergabe von Klassen. Data-Attribute mit HTML5 und CSS3 nutzen Wozu Data-Attribute? Manchmal besteht die Notwendigkeit, einem HTML-Element Informationen mit...

Weiterlesen »

Bei der Gestaltung mehrspaltiger Weblayouts ist der Einsatz der CSS-Float-Eigenschaft bisher meist unumgänglich. Gerade bei der Darstellung nebeneinander liegender Elemente wird sie eingesetzt und bringt gerne das ein oder andere Problem mit sich. Das CSS3-Flexbox-Modell bietet neue Möglichkeiten bei der Gestaltung nebeneinander liegender Elemente mit zusätzlichen Features und das ganz ohne Float-Probleme. Zunächst muss erwähnt werden, dass sich das Flexbox-Modell noch in der Entwicklung...

Weiterlesen »

Responsive Gridsysteme gibt es ja mittlerweile einige. Das „Responsive Grid System“ ist ebenso eines. Es ist schnell und einfach einsetzbar und zudem noch sehr flexibel. Denn es können ein- bis zwölfspaltige Layouts angelegt werden. Die unterschiedlich breiten Spalten lassen sich beliebig miteinander kombinieren und aufteilen. Responsive Grid System Einteilung in Sektionen und Spalten Für jede der zwölf möglichen Spaltenbreiten gibt es je eine CSS-Datei. Sind...

Weiterlesen »

Form follows function: Dieser Grundsatz gilt auch bei der Entwicklung von Websites. Erst werden mit HTML Inhalt und Semantik festgelegt, anschließend per CSS das Design. Bear CSS hilft bei der Erstellung eines Stylesheets für eine Website. Aus einer bestehenden HTML-Datei extrahiert der Dienst alle nötigen Angaben, für die später CSS-Angaben definiert werden können. Bear CSS HTML-Datei hochladen, CSS-Datei herunterladen Die Idee von Bear CSS...

Weiterlesen »

Die Gestaltung von Formularen vor CSS3 ist mit der Vergabe diverser Klassen und oftmals mit kleinen JavaScript-Funktionen zum clientseitigen Überprüfen von Eingaben verbunden. Mit CSS3 gibt es einige zusätzliche Pseudo-Klassen, mit denen unterschiedliche Eigenschaften und Zustände von Formularfeldern und -eingaben ohne zusätzliche Klassen und ohne den Einsatz von JavaScript gestaltet werden können. Neue Eingabetypen und Pseudo-Klassen Dank vieler neuer Eingabetypen kann bereits clientseitig geprüft...

Weiterlesen »

Zu den vielen neuen Möglichkeiten von CSS3 gehören auch diverse Filter, mit denen sich beispielsweise Farbigkeit, Helligkeit, Kontrast und Unschärfe von Bildern manipulieren lassen. All diese Filter kennt man auch aus Photoshop und anderen Bildbearbeitungsprogrammen. Bisher werden die CSS3-Filter jedoch nur von Webkit-Browsern unterstützt. Beispiele für CSS3-Filter Die Anwendung ist spielend einfach. Über die Eigenschaft „filter“ wird einer der verfügbaren CSS3-Filter einem Element zugewiesen....

Weiterlesen »