Anzeige:
Ergebnis 1 bis 4 von 4

Thema: Neue CSS 3 Implementierung in KHTML 3.5.4

  1. #1
    Registrierter Benutzer Avatar von undefined
    Registriert seit
    01.03.2004
    Beiträge
    1.255

    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-repeatno-repeat;
                -
    khtml-background-clippadding;
                -
    khtml-background-originborder;
                -
    khtml-background-size25auto;
                
    background-position1020%; /* LEFT TOP */
                            /* wave ist leider noch nicht Implementiert */
                
    border1px wave #000000;
            
    }
        
    /* ]]> */
        
    </style>
      </
    head>
      <
    body>
    <
    div>123456789
    </div>
    </
    body>
    </
    html
    Geändert von undefined (02-08-2006 um 22:34 Uhr)
    mfg undefined
    --
    Undefined Behavior (undefiniertes Verhalten) bedeutet meistens etwas ungültiges.
    xhtml Debugger

  2. #2
    Registrierter Benutzer Avatar von undefined
    Registriert seit
    01.03.2004
    Beiträge
    1.255
    Funzt jetzt auch
    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-imageurl('./test.png'), url('./test.png');
                
    background-repeatrepeat-xrepeat-yrepeat-y;
                
    background-position2025%, 4010%, 5015%, 7040%, 9035%;
            }
        
    /* ]]> */
        
    </style>
      </
    head>
      <
    body>
    <
    div>123456789
    </div>
    </
    body>
    </
    html
    mfg undefined
    --
    Undefined Behavior (undefiniertes Verhalten) bedeutet meistens etwas ungültiges.
    xhtml Debugger

  3. #3
    Registrierter Benutzer Avatar von undefined
    Registriert seit
    01.03.2004
    Beiträge
    1.255
    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-imageurl('./test.png'), url('./test.png'), url('./test.png'), url('./test.png');
                
    background-position:  top lefttop centertop rightbottom center;
                
    background-repeat:  repeat-yrepeat-xrepeat-yrepeat-x;
                -
    khtml-background-clip:    borderborderborderborder;
                -
    khtml-background-origin:  paddingpaddingpaddingpadding;
                -
    khtml-background-size:    11%,  11%, 11%, 11%;
                
    background-colorwhite;
            }
        
    /* ]]> */
        
    </style>
      </
    head>
      <
    body>
    <
    div>123456789
    </div>
    </
    body>
    </
    html
    mfg undefined
    --
    Undefined Behavior (undefiniertes Verhalten) bedeutet meistens etwas ungültiges.
    xhtml Debugger

  4. #4
    Registrierter Benutzer Avatar von undefined
    Registriert seit
    01.03.2004
    Beiträge
    1.255
    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-colorgraymargin0; }
            
    h1 margin2%; }
            
    h1::before content'→ '; }
            
    h1::after content' ←'; }
            
    pre margin2%; widthauto; }
            
    span displayblockcolorred; }

            
    div.header {
                
    margin1%;
                
    widthauto;
                
    heightauto;
                
    bordernone;
                
    padding30px 30px 30px 30px;
                
    /*  Vertical-Left, Vertical-Right, Horizontal-Top, Horizontal-Bottom */
                
    background-imageurl('./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 lefttop rightbottom leftbottom righttop lefttop righttop centerbottom center;
                
    background-repeat:  no-repeatno-repeatno-repeatno-repeatrepeat-yrepeat-yrepeat-xrepeat-x;
                
    /* KHTML Konqueror >= 3.5.4 */
                
    -khtml-background-clip:    borderborderborderborderborderborderborderborder;
                -
    khtml-background-origin:  paddingpaddingpaddingpaddingpaddingpaddingpaddingpadding;
                -
    khtml-background-size:    27px 27px27px 27px27px 27px27px 27px27px 1px,  27px 1px1px 27px1px 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
    mfg undefined
    --
    Undefined Behavior (undefiniertes Verhalten) bedeutet meistens etwas ungültiges.
    xhtml Debugger

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •