css

“Bullet-Proof” Rounded Corners

When I wrote this article in 2002, it was one of the few methods for making rounded corners. CSS support in web browsers has improved dramatically since then and I no longer use this technique. Instead I use background-images and wrapper divs as needed.

Zusätzliches Markup und Bilder mit Klassen. Alt aber stabil.

http://www.albin.net/css/roundedcorners

CSS Rounded Corners example

This trick uses background images, one for each corner. The focus here is getting it to work in the simplest way possible, without trying to hack fixes together for the benefit of specific browsers. It is designed to just work.

Wieder mal eine Lösung mit Bildern und zusätzlichem Markup. Diese Lösungen scheinen die derzeit stabilsten zu sein.

http://www.redmelon.net/tstme/4corners/

Rounded corners in CSS

There are other ways that I’ve seen it done, but the other methods always require lots of complex HTML and CSS. I figure that lots of nested divs aren’t much better than using a table, so my way doesn’t require much in the way of HTML or CSS. Here’s how I do it.

Create four images for your corners. Most graphics programs have a tool that will create rounded-off squares. I’ll be using this square here…

Einfache Lösung mit geringem x(HTML)/CSS-Aufwand und 4 Bildern für die abgerundeten Ecken.

http://kalsey.com/2003/07/rounded_corners_in_css/

Rounded Corners: Nifty Corners

Rounded Corners with CSS are a hot topic in web design: I think that there are hundreds of articles on them. This page is intended to present the solution I came up, that doesn't requires images, extra markup nor CSS.

Nifty Corners arbeitet mit CSS und Javascript ohne Bilder oder zusätzliches (x)HTML-Markup.

http://www.html.it/articoli/nifty/index.html

CSSType - Schrift Vorschau im Browser

Damit man einen Eindruck davon bekommt, wie die jeweilige Schrift mit unterschiedlichen Parametern im Browser aussieht, gibt es eine Art Spielwiese zum selbst ausprobieren: CSSType. Dort kann man diverse Parameter verändern, sieht sofort das Ergebnis im Browser und kann sich so an die optimale Einstellung herantasten.

http://www.csstype.com/

Yet Another Multicolumn Layout | Ein (X)HTML/CSS Framework

Yet Another Multicolumn Layout" (kurz YAML) ist ein (X)HTML/CSS Framework zur Erstellung moderner und flexibler Layouts auf Grundlage von float-Umgebungen. Dabei stehen ein möglichst hohes Maß an Flexibilität für den Webdesigner und Zugänglichkeit für die Nutzer im Vordergrund.

http://www.yaml.de/

Über hasLayout — das Konzept des hasLayout im IE/Win

Corina Rudel hat einen der wichtigsten Artikel zu Darstellungsproblemen im IE aus dem Englischen ins Deutsche übersetzt.

Viele Darstellungsprobleme des Internet Explorer lassen sich beheben, indem man einem Element »Layout« gibt.

http://onhavinglayout.fwpf-webdesign.de/#elem

Das Original "On having layout" von Ingo Chao ist unter http://www.satzansatz.de/cssd/onhavinglayout.html zu finden.

Conditional comments

Conditional comments only work in Internet Explorer, and are thus excellently suited to give special instructions (CSS and JavaScript) meant only for Internet Explorer. They are supported from Internet Explorer 5 onwards.

<!--[if IE]>
This is Internet Explorer
<![endif]-->
<!--[if IE 5]>
This is Internet Explorer 5
<![endif]-->
<!--[if IE 5.0]>
This is Internet Explorer 5.0
<![endif]-->
<!--[if IE 5.5]>
This is Internet Explorer 5.5
<![endif]-->
<!--[if IE 6]>
This is Internet Explorer 6
<![endif]-->

Image-Replacement-Techniken

Image Replacement beschreibt das Ersetzen von HTML-Elementen durch Bilder, wobei der eigentliche Textinhalt selbst nicht mehr angezeigt wird.

http://meiert.com/de/publications/articles/20050513/

Phark-Methode:
h1 {
background: url(muster.gif);
height: 25px;
text-indent: -999em;
width: 250px;
}

http://meiert.com/de/publications/articles/20050513/#toc-phark

CSS Hacks

* html
Wirkt in diesen Browsern
Nur IE bis Version 6
Selektiertes Element
html
Validität
Valides CSS
*+html
Wirkt in diesen Browsern
Nur IE, nur Version 7
Selektiertes Element
html
Validität
Valides CSS
*+html, * html
Wirkt in diesen Browsern
Nur IE, alle Versionen