Guymon

CSS3: border-image

Der Artikel Understanding border-image erklärt die CSS Anweisung border-image. Dazu gibt es eine Demo Seite.

Schöner Artikel denn border-image gehört nicht zu den intuitivsten Eigenschaften.

Z.B. muss bei den top, right, bottom, left zwar ein % geschrieben werden, allerdings wenn es Pixel sein sollen darf da nichts stehen.

border-image: url(my-image.gif) 25% 30% 10% 20% repeat;
border-image: url(my-image.gif) 25 30 10 20 repeat;

Cross-browser CSS box-shadows

Rustam Gaffanov stellt eine Cross-browser CSS box-shadow Möglichkeit vor, will sagen er zeigt wie es im IE < 9 funktioniert .

Ist nicht wunderschön, aber funktioniert und manchmal muss das Layout eben überall gleich aussehen.

Progressive Internet Explorer

Noch mal eine kleine Hilfe bis der IE 6 & 7 gestorben sind:

PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties.

PIE currently has full or partial support for the following CSS3 features:

• border-radius
• box-shadow
• border-image
• multiple background images
• linear-gradient as background image

Mal testen…

CSS3: Full-Browser Background Images

Bobby van der Sluis zeigt wie man mit der CSS3 Anweisung background-size browserfüllende Hintergrund Grafiken realisiert.

body {
 background: #000 url(myBackground_1280x960.jpg) center center fixed no-repeat;
 -moz-background-size: cover;
 background-size: cover;
}

Gewölbte Schatten

Divya Manian zeigt wie sich mit CSS3 ein gewölbter Schatten herstellen lässt. Sehr cool, wenn auch zur Zeit eher ein Blick in die Zukunft ist.

article:before, article:after {
 -webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
 -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
 background:none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
 bottom:15px;
 content:"";
 height:20%;
 position:absolute;
 width:50%;
 z-index:-1;
}
article:after {
 -webkit-transform: rotate(3deg);
 -moz-transform: rotate(3deg);
 -o-transform: rotate(3deg);
 left:auto;
 right:10px;
}
article:before {
 -webkit-transform: rotate(-3deg);
 -moz-transform: rotate(-3deg);
 -o-transform: rotate(-3deg);
 left:10px;
 right:auto;
}