tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
8
ZUGRIFFE
4577
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. #1
    Jantz Jantz ist offline Mitglied Gold
    Registriert seit
    Aug 2003
    Beiträge
    207
    Hallo,

    ich habe diesen Effekt schon öfters gesehen. Ich meine Folgendes.

    www.aliengaming.de
    www.team64.de

    um nur einige Beispiele zu geben. Dort umgibt die "Content boxen" einen Auslaufenden Schatten.

    Hab jetzt schon einiges Probiert aber habe keinen Lösungweg gefunden. Der Schatten 4 only IE möchte ich ungern verwenden.

    Habt ihr eine Idee?

    Gruß Jan
     

  2. #2
    chrislennep Tutorials.de Gastzugang
    Also ich habe es so gemacht:

    Site
     

  3. #3
    Jantz Jantz ist offline Mitglied Gold
    Registriert seit
    Aug 2003
    Beiträge
    207
    hallo,

    ja die Variante kenne ich auch. Es ist jedoch nicht das, was ich mir vorstelle. Ich würde gerne einen Farbverlauf mit einbinden.

    Hab solangsam das Gefühl, dass es so nicht mit css zu realisieren ist. Wäre schade wenn ich dafür extra wieder Grafiken anwenden müsste 8[

    trotzdem danke!

    gruß Jan
     

  4. #4
    Registriert seit
    Dec 2002
    Ort
    Trier
    Beiträge
    17.502
    Blog-Einträge
    10
    Grafiken wirst du auf jeden Fall verwenden müssen. Es gibt jedoch eine elegantere Lösung, als irgendwelche Bildelemente mit absoluten Positionierungen zu positionieren:
     
    Markus Wulftange

  5. #5
    Jantz Jantz ist offline Mitglied Gold
    Registriert seit
    Aug 2003
    Beiträge
    207
    Super!

    Danke *Seite in fav. übernehm*
     

  6. #6
    chrislennep Tutorials.de Gastzugang
    Ich beziehe mich auf die dritte Seite :
    Also irgendwie habe ich damit noch Probleme, kann vielleicht jemand die css und die html posten, weil bei mir sieht das so aus:

    CSS-Code
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    
    body {margin-top: 0%; margin-left: 10%;}
    .wrap1, .wrap2, .wrap3 {
    display:inline-table;
    /* \*/display:block;/**/
    }
    #wrap1 {
    border: 10px;
    float:left;
    background:url(shadow.jpg) right-bottom no-repeat;
    }
    #wrap2 {
    background:url(corner_bl.gif) left »
    bottom no-repeat;
    }
    #wrap3 {
    display:block;
    padding:0 4px 4px 0;
    background:url(corner_tr.gif) right »
    top no-repeat;
    }

    Html-Code
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    
    <html>
    <head>
    <title>Onion Test</title>
    <meta name="author" content="Christian">
    <meta name="generator" content="Ulli Meybohms HTML EDITOR">
    </head>
    <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
    <div class="wrap1">
     <div class="wrap2">
      <div class="wrap3">
       <img src="menue.gif" alt="The object casting a shadow"/>
      </div>
     </div>
    </div>
    </body>
    </html>
    Geändert von chrislennep (12.11.04 um 18:08 Uhr)
     

  7. #7
    Registriert seit
    Dec 2002
    Ort
    Trier
    Beiträge
    17.502
    Blog-Einträge
    10
    Die doppelten spitzen Anführungszeichen (») sind als Symbol der selben Zeile aufzufassen. Es sind bloß stilistische Zeichen, um einen Zeilenumbruch einzusetzen. Sprich: Im tatsächlichen Quellcode sind sie fehl am Platze.
     
    Markus Wulftange

  8. #8
    chrislennep Tutorials.de Gastzugang
    Okay, die habe schonmal entfernt, klappt danach trotzdem nicht so recht. Außerdem zeigt Firefox 0.8 die Sachen bis jetzt gar nicht an. Warum nur?

    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    
    body {margin-top: 0%; margin-left: 10%;}
    .wrap1, .wrap2, .wrap3 {
    display:inline-table;
    /* \*/display:block;/**/
    }
    .wrap1 {
    float:left;
    background:url(shadow.jpg) right-bottom no-repeat;
    }
    .wrap2 {
    background:url(corner_bl.gif) left-bottom no-repeat;
    }
    .wrap3 {
    display:block;
    padding:0 4px 4px 0;
    background:url(corner_tr.gif) right-top no-repeat;
    }
    Geändert von chrislennep (12.11.04 um 18:44 Uhr)
     

  9. #9
    Registriert seit
    Dec 2002
    Ort
    Trier
    Beiträge
    17.502
    Blog-Einträge
    10
    Ich denke, dass ein korrekter Doctype in die richtige Richtung führen könnte.
     

Ähnliche Themen

  1. Schlagschatten
    Von xhtmlFreak im Forum Photoshop
    Antworten: 4
    Letzter Beitrag: 10.12.06, 19:34
  2. Schlagschatten...
    Von Lichtpilger im Forum Photoshop
    Antworten: 2
    Letzter Beitrag: 15.09.06, 21:38
  3. Schlagschatten im Webdesign ?
    Von siob im Forum Photoshop
    Antworten: 6
    Letzter Beitrag: 16.03.05, 20:19
  4. Schlagschatten
    Von therealcharlie im Forum CSS
    Antworten: 0
    Letzter Beitrag: 15.02.05, 20:50
  5. Schlagschatten!
    Von Waterstorm im Forum Photoshop
    Antworten: 2
    Letzter Beitrag: 11.06.03, 15:29