LautundKlar

Mit Hilfe von CSS3 kann man Tabellen runde Ecken und damit eine etwas abwechslungsreichere Optik verleihen. Zu beachten ist jedoch, dass man nicht einer ganze Tabelle (<table>) abgerundete Ecken “verpassen” kann, sondern die runden Ecken müssen auf die Zellen (<td>) übertragen werden, welche abgerundet erscheinen sollen. Durch Verwendung folgender CSS2-Selektoren (: first-child etc.) und der CSS3-Eigenschaften “border-radius” kann man diese vier außeren Ecken abrunden:
 

table.mit_runden_ecken tr:first-child td:first-child { border-top-left-radius: 15px; }
table.mit_runden_ecken tr:first-child td:last-child { border-top-right-radius: 15px; }
table.mit_runden_ecken tr:last-child td:first-child { border-bottom-left-radius: 15px; }
table.mit_runden_ecken tr:last-child td:last-child { border-bottom-right-radius: 15px; }

Eine noch besser ausgearbeitete Lösung findet man bei Red Team Design:

Zur DEMO-Website

Popularity: 1% [?]

Not Just A Grid – flexibles und modulares CSS-Framework

“Not Just a Grid” ist ein flexibles und modulares CSS-Framework, das bei der Entwicklung von Websites hilfreich sein kann. Es ist zukunftsorientiert für größere Bildschirmdiagonalen und den Einsatz von CSS3 konzipiert worden. Wie der Name schon sagt, bietet es nicht nur ein CSS-Grid-System sondern darüber hinaus auch Vorlagen für Buttons, Tabellen, Formulare, Alert Boxen und vieles mehr.

Website: www.notjustagrid.com

Popularity: 1% [?]

Mit dem sehr kompakten JavaScript  spryMap lassen sich Kartenausschnitte in einem kleinen Container einbinden und verschieben. Das Script sollte auch bei Verwendung von JavaScript Frameworks funktionieren und kann mit einigen Parametner individuell angepasst werden.

Website: http://candrews.net/sandbox/spryMap/

Popularity: 2% [?]

Grundlagen zur Verwendung der Google Font API

CSS-Dateien verlinken

Per Hotlink lädt man die CSS-Dateien direkt von Google.com.
Anhand der URL-Parameter werden die Schriftarten sowie die Variationen dieser Schriftarten bestimmt.

Einfaches Beispiel:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Tangerine">

Etwas aufwändiger:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=
Inconsolata:italic,bolditalic|Droid+Sans">

CSS

Im eigenen CSS-File können diese Schriftarten für jedes beliebige Element festgelegt werden:

body { font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif; font-size: 48px; }

FontLoader

Anstelle auf das CSS bei Google.com zu verlinken, kann der JavaScript WebFont Loader verwendet werden. Dies hat Vorteile wie z.B. die Kontrolle über das “Flash of Unstyled Text” (FOUT), aber auch Nachteile, wie die Tatsache, dass die Schriftarten bei deaktiviertem JavaScript nicht geladen werden.

<script type="text/javascript">// <![CDATA[
WebFont.load({
google: {
families: ['Cantarell']
}
});
// ]]></script>

Klassennamen wie .wf-loading werden auf die entsprechenden HTML-Elemente angewendet.
Wenn die Schriftarten geladen werden, können diese Klassennamen verwendet werden, um den Text zu verstecken/auszublenden. Dann wenn sie fertig geladen sind, müssen sie wieder sichtbar gemacht werden. So funktioniert FOUT.

Websites: http://paulirish.com/2010/details-on-the-new-google-webfont-api/
http://code.google.com/webfonts

Popularity: 3% [?]