100% height layout
html,body {
margin:0;
padding:0;
height:100%; /* wichtig für den container min-height */
background:#444;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
#container {
position:relative; /* für den footer */
margin:0;
width:1000px;
background:#f5f5f5;
height:auto !important; /* wichtig */
min-height:100%; /* wichtig */
}
#header {
padding:0;
background:#333;
}
#content {
padding:1em 1em 5em; /* footer padding */
}
#footer {
position:absolute;
width:100%;
bottom:0; /* foooter to bottom */
background:#555;
}
CSS3 – Image hover mit Schatten
Einfacher gehts nicht!
img {
padding: 5px;
border: solid 1px #EFEFEF;
}
a:hover img {
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
}
Google und Webschriften
Google hat die web-safe fonts satt und bringt ein neues ausgezeichnetes Tool für Designer und Entwickler auf den Markt: Den Font Previewer. Schrift wählen und den Code copy/paste.
Die zur Verfügung stehenden fonts in der Google Sammlung sind noch nicht sehr viele aber dafür open source. Hier der Link zum Google Font Directory. Alternativ gibt es den Google Font API.
Punkt, Pixel, Ems, Prozent – Umrechner
Da Grafiker mit Punkt und Webdesigner mit Pixel arbeitet, hier eine kleine Tabelle. Dennoch sind die Angaben nicht 100% sicher, da die Grösse von Schriftart, Browser und Betriebssystem abhängig ist. Halleluja!
| Punkt | Pixel | Ems | Prozent |
| 6pt | 8px | 0.5em | 50% |
| 7pt | 9px | 0.55em | 55% |
| 7.5pt | 10px | 0.625em | 62.5% |
| 8pt | 11px | 0.7em | 70% |
| 9pt | 12px | 0.75em | 75% |
| 10pt | 13px | 0.8em | 80% |
| 10.5pt | 14px | 0.875em | 87.5% |
| 11pt | 15px | 0.95em | 95% |
| 12pt | 16px | 1em | 100% |
| 13pt | 17px | 1.05em | 105% |
| 13.5pt | 18px | 1.125em | 112.5% |
| 14pt | 19px | 1.2em | 120% |
| 14.5pt | 20px | 1.25em | 125% |
| 15pt | 21px | 1.3em | 130% |
| 16pt | 22px | 1.4em | 140% |
| 17pt | 23px | 1.45em | 145% |
| 18pt | 24px | 1.5em | 150% |
| 20pt | 26px | 1.6em | 160% |
Web-Typografie 2.0 – Individuelle Schriften für das Internet
Noch ein Bericht über die neue Möglichkeit @font-face.
Wie binde ich die Schriften ein? Aufgrund der unterschiedlichen Formate muss die Schrift zweimal eingebunden werden, damit sowohl der Internet Explorer als auch Firefox die Schrift anwenden können. drweb.de erklärt!
The font-face property
The font-face property is fairly straightforward to grasp and use. Upload the font you want to use to your website (make sure the licence permits it), give it a name and set the location of the file.
For this property to work in IE, we would also need the EOT version of the font. Some font shops offer multiple font formats, including EOT, but in many cases we will need to convert the TrueType font using Microsoft’s own WEFT, or another tool such as ttf2eot.
smashingmagazine.com
Typetester – Compare fonts for the screen
The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier.
Noupe der Webentwickler-Blog
Ein Projekt der Smashing Media GmbH. Es heisst: Noupe is a curious design blog that is always looking for new and interesting stuff on design, jquery, photoshop and more.
The CSS Float Property
Smashing Magazine präsentiert im neuen Bericht “The Mystery Of The CSS Float Property”.
Stripe Generator 2.0
Mit einem origenellen Streifen-Background kann man modernes Webdesign erzeugen. Streifen erzeugt man mit dem Stripe Generator – ajax diagonal stripes background designer! Ein flotte Sache.
