Neue CSS 3 Implementierung in KHTML 3.5.4

Eine Ausführliche Beschreibung gibt es hier:
http://www.w3.org/TR/css3-background...ackground-clip

PHP-Code:

< ? xml version="1.0" encoding="utf-8" ? > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr"> <head> <title>test</title> <style type="text/css"> /* <![CDATA[ */ body { color: #FFFFFF; background: #353535 url('./test.png'); /* Note that if 'background-clip' is 'padding', 'background-origin' is 'border', and 'background-position' is 'top left' (the initial value), then the top left of the background image will be clipped. */ background-repeat: no-repeat; -khtml-background-clip: padding; -khtml-background-origin: border; -khtml-background-size: 25% auto; background-position: 10% 20%; /* LEFT TOP */ /* wave ist leider noch nicht Implementiert */ border: 1px wave #000000; } /* ]]> */ </style> </head> <body> <div>123456789 </div> </body> </html>

Funzt jetzt auch:o

PHP-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr"> <head> <title>test</title> <style type="text/css"> /* <![CDATA[ */ body { background-image: url('./test.png'), url('./test.png'); background-repeat: repeat-x, repeat-y, repeat-y; background-position: 20% 25%, 40% 10%, 50% 15%, 70% 40%, 90% 35%; } /* ]]> */ </style> </head> <body> <div>123456789 </div> </body> </html>

Achtung wenn ihr die größe zu hoch setzt kann Konqueror Memory Probleme bekommen ;)
Rahmen Beispiel:

PHP-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr"> <head> <title>test</title> <style type="text/css"> /* <![CDATA[ */ body { background-image: url('./test.png'), url('./test.png'), url('./test.png'), url('./test.png'); background-position: top left, top center, top right, bottom center; background-repeat: repeat-y, repeat-x, repeat-y, repeat-x; -khtml-background-clip: border, border, border, border; -khtml-background-origin: padding, padding, padding, padding; -khtml-background-size: 1% 1%, 1% 1%, 1% 1%, 1% 1%; background-color: white; } /* ]]> */ </style> </head> <body> <div>123456789 </div> </body> </html>

Also die Reihenfolge ist hierbei Extrem wichtig.

PHP-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr"> <head> <title>CSS3 Testcase</title> <style type="text/css"> /* <![CDATA[ */ body { background-color: gray; margin: 0; } h1 { margin: 2%; } h1::before { content: '→ '; } h1::after { content: ' ←'; } pre { margin: 2%; width: auto; } span { display: block; color: red; } div.header { margin: 1%; width: auto; height: auto; border: none; padding: 30px 30px 30px 30px; /* Vertical-Left, Vertical-Right, Horizontal-Top, Horizontal-Bottom */ background-image: url('./corner.png'), url('./corner.png'), url('./corner.png'), url('./corner.png'), url('./v-left.png'), url('./v-right.png'), url('./h-top.png'), url('./h-bottom.png'); background-position: top left, top right, bottom left, bottom right, top left, top right, top center, bottom center; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-y, repeat-y, repeat-x, repeat-x; /* KHTML Konqueror >= 3.5.4 */ -khtml-background-clip: border, border, border, border, border, border, border, border; -khtml-background-origin: padding, padding, padding, padding, padding, padding, padding, padding; -khtml-background-size: 27px 27px, 27px 27px, 27px 27px, 27px 27px, 27px 1px, 27px 1px, 1px 27px, 1px 27px; background-color: #FFFFFF; } /* ]]> */ </style> </head> <body> <h1>KHTML 3.5.4 CSS3 Background Implementation</h1> <div class="header"> <div class="txt"> free scalable background image style. <a href="http://www.w3.org/TR/css3-background">CSS3 Background Reference</a> <span> Note that if 'background-clip' is 'padding', 'background-origin' is 'border', and 'background-position' is 'top left' (the initial value), then the top left of the background image will be clipped. </span> </div> </div> </body> </html>

Demo/Test Seite