Kategoriearchiv für ‘Tutorial’

CSS3 im Detail: Border-Radius

27. Februar 2010 15:20 Uhr

Runde fünf von CSS3 im Detail – Border-Radius.

Entschuldigt die enorme Verzögerung aber ich hatte bisschen Prüfungsstress und viel Arbeit, sodass mir dann die Motivation gefehlt hat noch diese Artikel zu schreiben. Sei’s drum, heute gehts um eine nützliche Technik, mit der man runde Ecken erstellen kann. Früher musste man immer mindestens zwei Grafiken erstellen, um einer Box runde Ecken zu verpassen – das wird sich jetzt ändern. Border-Radius wird euch gefallen, es erspart einem sehr viel Arbeit und wird von den meisten Browsern schon ganz gut unterstützt.

Möchtest du mehr wissen?

Etwas verspätet nun auch der vierte Teil von CSS3 im Detail!

Dieses mal erwarten euch lineare und radiale Farbverläufe (engl. gradients) in CSS, mit deren Hilfe wir einige ganz hübsche Effekte erzielen können. Benutzt werden sie überall dort, wo wir eine url() angeben können. In den folgenden Beispielen werden wir sie aber im Zusammenhang mit background verwenden, indem wir statt einem Hintergrundbild den gewünschten Verlauf angeben.

Möchtest du mehr wissen?

Die CSS3 im Detail-Reihe geht in die dritte Runde!

Im dritten Teil werden wir eine weitere Möglichkeit unter die Lupe nehmen, die es uns erlaubt background noch weiter zu manipulieren. Dabei soll es uns um das Ändern der Größe des Hintergrundes gehen. Kurz gesagt, wir reden über background-size.

Möchtest du mehr wissen?

Willkommen zum zweiten Teil der CSS3 im Detail-Reihe! :)

Diesmal geht es um die Möglichkeit einem Element mehrere Hintergrundbilder zu vergeben. Bisher war es nur möglich 1 Bild pro Element als Hintergrund zu definieren. Wollte man mehr, mussten sogenannte Wrapper um das Element gesetzt werden. Das verursacht unnötiges Mark-up, was vielen schon lange ein Dorn im Auge war. Das zusätzliche Mark-up war sicherlich auch einer der Hauptgründe für die Einführung von Multiple Backgrounds.

Möchtest du mehr wissen?

CSS3 im Detail: RGBa

5. Februar 2010 02:01 Uhr

Hallo und herzlich willkommen zum ersten Teil meiner CSS3 im Detail-Reihe. :)

Während dieser Reihe möchte ich euch gern die wichtigsten Neuerungen, die CSS3 mit sich bringt, vorstellen und einzeln näher betrachten. Weiterhin wird die Unterstützung in der derzeitigen Browserlandschaft aufgezeigt und welche Vor- und eventuell auch Nachteile die Techniken haben.

Im ersten Teil von CSS3 im Detail dreht sich alles um den neuen Farbraum RGBa.

Möchtest du mehr wissen?

Simple jQuery Accordion

17. Dezember 2009 21:26 Uhr

Wie macht man eigentlich..

jsHabt ihr schon mal eine Seite mit so einem netten Accordion-Effekt gesehen und euch gefragt wie das geht? Ich erkläre es euch, schaut euch doch aber erstmal die Demo an, damit ihr wisst, was ich meine.

Wie ihr seht, klappt immer der Bereich auf, auf den geklickt wird. Alle anderen Blöcke bleiben dagegen geschlossen oder schließen sich. Wir bedienen uns hier einfach jQuery und schreiben ein paar Zeilen Code, die den gewünschten Accordion-Effekt realisieren.

Möchtest du mehr wissen?

Wenn CSS nicht mehr reicht..

1. August 2009 00:01 Uhr

Hi-de-ho

jsDiese Woche hatte ich auf Arbeit ein ungewöhnliches Problem, mit dem ich an die Grenzen von CSS gestoßen bin. Ich bekam die Aufgabe einige Screendesigns umzusetzen, an sich nichts Ungewöhnliches, allerdings gab es einige Bedingungen bezüglich der Sidebar: ein Widget – also eine Box innerhalb der Sidebar – sollte sich immer am unteren Rand der Sidebar aufhalten, wobei Sidebar und Content immer gleich hoch sein sollten, je nachdem, welches der beiden höher ist.

Möchtest du mehr wissen?