CSS Floating

With the CSS float propertie you can float elements right or left. But they’re only floated horizontally and not up or down. Keep in mind, that following elements will flow around it. Elements before the floating element will not be affected.

This allows us to use the float propertie for layout purposes. But how does it works and looks like. Let’s start with a simple example. In a text paragraph I would like float an picture to the right, so that the text flow around the image.

„CSS Floating“ weiterlesen

A stylish search form

With the new CSS3 properties you can style simple form elements, so that they looks more handsome. To give an example, I will explain the steps to create a search form as you’ll find on the startpage of www.circlecount.com

A stylish search form

Let’s start with the html part. At first you need a form element which serves like a frame for the search field and the search button. The first input tag is the search field (type text), the second one the button (type submit).
„A stylish search form“ weiterlesen

Pure CSS Image Galerie

CSS (Cascading Style Sheets) are used to define the layout and style of web pages. At the moment, CSS3 is the latest standard for CSS properties. This tutorial teaches you about the new image galerie feature at the startpage of www.circlecount.com.

Accordion image galerie

The image galerie looks like an accordion. By hovering with the mouse over an accordion part, the image expands to a wider size. How does it works?

„Pure CSS Image Galerie“ weiterlesen

Nachfolgeselektor

Oftmals neigt man dazu jedem html Element eine CSS Klasse zuzuordnen um möglichst flexibel und unabhängig eine Formatierung der Elemente durchzuführen. Aber wie immer im Leben, wird immer irgendwo eine Klasse vergessen. Schnell werden so viele Klassen in das Stylesheet geschrieben und man muss sich dafür zweckmässierweise auch sinnvolle Namen ausdenken.

Unter gewissen Umständen kann man dies auch eleganter lösen, nämlich mit den sog. Nachfolgeselektoren. Da man sich die Website eh mittels Container oder sprechen wir von div Tags in Blöcken einteilt, kann man die in diesen Blöcken enthaltenen Elemente auch mit einem Nachfolgeverweis von dem Elternelement auf das Kindelement ansprechen.

„Nachfolgeselektor“ weiterlesen

HTML 5 und Canvas

Alles redet von den neuen Möglichkeiten, die das Canvas Element mit der Einführung von HTML 5 bietet. Ich habe mich im Netz ein wenig umgesehen. Von Balken, Kuchen-diagrammen bis zu schicken Ziffernblättern einer Uhr reicht die Palette.

Über das <canvas> Tag wird eine Zeichen- oder Bildfläche zur Verfügung gestellt. Mittels Javascript kann ich dann auf dieser Fläche zeichnen.

„HTML 5 und Canvas“ weiterlesen

EMail Adresse per CSS gegen Spam schützen

Eine schicke und wirksame Methode die EMail-Adresse gegen Spam zu schützen ist die Schreibrichtung per CSS mit direction: rtl; umzudrehen. Weiterhin können im Quellcode der Mail-Adresse zuätzliche Zeichen zur Verfälschung eingebaut werden, die mit dem CSS-Befehl display: none; ausgeblendet werden. Die EMail kann aber somit nicht per mailto Link verlinkt werden. Jedoch ist dies eine gute Alternative anstatt eine Grafik zubenutzen.

„EMail Adresse per CSS gegen Spam schützen“ weiterlesen