• F
    User •

    [CSS] box-fumetto solo codice

    da questo sito www.cssplay.co.uk/boxes/chunky.html ho trovato un bell'esempio per creare un box-fumetto e solo con lì'uso di css e html.
    [approposito, se conoscete altri siti dove spiegano come realizzare un box-fumetto SENZA l'uso di immagini per favore segnalatemelo, grazie!!]

    ho lavoricchiato un pò sul codice css per fare delle prove e capire come funziona.
    Voglio portare le frecce al contrario e sopra il box..
    ci son riuscito in parte, solo non riesco a capire perchè se messo sotto [come dal sito segnalato] il triangolo scuro si mette sopra il bordo bianco;
    se invece messo sopra, il trinagolino risulta sempre sotto.
    spero di essermi spiegato.. é un pò complicato anche perchè il gioco di tag e css non é semplice...

    vi posto il codice css per come sono arrivato a modificarlo, magari qualcuno saprà aiutarmi!!...

    #container {background:#d8d8ee; width:600px; margin:15px; padding:20px;}
      
      .xsnazzy h1, .xsnazzy h2, .xsnazzy p {margin:0 10px; letter-spacing:1px;}
      .xsnazzy h1 {font-size:2.5em; color:#fc0;}
      .xsnazzy h2 {font-size:2em; color:#234; border:0;}
      .xsnazzy p {padding-bottom:0.5em; color:#eee;}
      .xsnazzy h2 {padding-top:0.5em; padding-left:10px;}
      .xsnazzy {background: transparent; margin:1em;}
      
      .xsnazzy em           { display: block; width: 0; height: 0; color: #d8d8ee; overflow: hidden; border-bottom: 12px solid #ffffff; border-left: 12px dotted transparent; border-right: 12px dotted transparent; margin-left: 500px; }
      * html .xsnazzy em    { width: 24px; height: 12px; w\idth: 0; hei\ght: 0; } /* hack for IE5.5 */
      .xsnazzy span         { display: block; width: 0; height: 0; color:; overflow: hidden; border-bottom: 10px solid #7f7f9c; border-left: 10px dotted transparent; border-right: 10px dotted transparent; margin-left: 502px; margin-top: -10px; }
      * html .xsnazzy span  { width: 20px; height: 10px; w\idth: 0; hei\ght: 0; } /* hack for IE5.5 */
      
      
      .xb1, .xb2, .xb3, .xb4, .xb5, .xb6, .xb7  { display: block; overflow: hidden; font-size: 0; }
      .xb1, .xb2, .xb3, .xb4, .xb5, .xb6        { height: 1px; }
      .xb4, .xb5, .xb6, .xb7                    { background: #cccccc; border-left: 1px solid; border-right: 1px solid; }
      
      .xb1 { margin: 0 8px; background:; }
      .xb2 { margin: 0 6px; background:; }
      .xb3 { margin: 0 4px; background:; }
      .xb4 { margin: 0 3px; background:; border-width: 0 5px; }
      
      .xb5 { margin: 0 2px; background:; border-width: 0 4px; }
      .xb6 { margin: 0 2px; background:; border-width: 0 3px; }
      .xb7 { margin: 0 1px; background:; border-width: 0 3px; height: 2px; }
      
      .xboxcontent {display:block; background:#7f7f9c; border:3px solid #fff; border-width:0 3px;}
    0
  • K
    Super User •

    Ciao FaberGray 🙂

    Intanto analizzo il tuo problema e ti faccio sapere.

    Ti avviso però che da regolamento non è possibile inserire link attivi all'interno di questa sezione.
    In più mi raccomando , sempre da regolamento, non usare colori diversi da quello standard per spiegare il tuo problema (il blu nel tuo caso) se non per evidenziare alcune parole importanti. 😄

    0
  • F
    User •

    @karedas said:

    Ciao FaberGray 🙂

    Intanto analizzo il tuo problema e ti faccio sapere.

    Ti avviso però che da regolamento non è possibile inserire link attivi all'interno di questa sezione.
    In più mi raccomando , sempre da regolamento, non usare colori diversi da quello standard per spiegare il tuo problema (il blu nel tuo caso) se non per evidenziare alcune parole importanti. 😄

    si, il colore ricordavo, solo che quando ho postato ho sbagliato, non volevo segnare tutto il periodo! = p del link non sapevo, l'ho inserito perchè senza non si può capire il problema e cosa intendo!! ; )

    0
Effettua l'accesso per rispondere