PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Neue CSS 3 Implementierung in KHTML 3.5.4


undefined
02-08-2006, 21:31
Eine Ausführliche Beschreibung gibt es hier:
http://www.w3.org/TR/css3-background/#the-background-clip


< ? 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>
undefined
02-08-2006, 21:38
Funzt jetzt auch:o


<!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>
undefined
02-08-2006, 21:46
Achtung wenn ihr die größe zu hoch setzt kann Konqueror Memory Probleme bekommen ;)
Rahmen Beispiel:


<!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>
undefined
03-08-2006, 09:24
Also die Reihenfolge ist hierbei Extrem wichtig.


<!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 (http://homes.rhein-zeitung.de/~jheinema/CSS3Khtml/index.html)