[CSS] box-fumetto solo codice

[Faber882]

da questo sito http://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: #ffffff; 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 #ffffff; border-right: 1px solid #ffffff; }
      
      .xb1 { margin: 0 8px; background: #ffffff; }
      .xb2 { margin: 0 6px; background: #ffffff; }
      .xb3 { margin: 0 4px; background: #ffffff; }
      .xb4 { margin: 0 3px; background: #7f7f9c; border-width: 0 5px; }
      
      .xb5 { margin: 0 2px; background: #7f7f9c; border-width: 0 4px; }
      .xb6 { margin: 0 2px; background: #7f7f9c; border-width: 0 3px; }
      .xb7 { margin: 0 1px; background: #7f7f9c; border-width: 0 3px; height: 2px; }
      
      .xboxcontent {display:block; background:#7f7f9c; border:3px solid #fff; border-width:0 3px;}

[thomas_anderson]

ciao!
quello che trovi su CSS Play non va assolutamente bene per un sito reale. la tecnica proposta fa uso di un numero spropositato di elementi annidati, che sono deleteri per l'accessibilità. ti consiglio di usare delle immagjni di sfondo, come ho fatto in questo demo:

http://www.css-zibaldone.com/test/cs...ced-layout-21/
http://www.css-zibaldone.com/test/cs...ut-21/demo.css

leggi il codice della pagina. ho inserito anche degli elementi ad hoc per i lettori di schermo.

[Faber882]

dici che tutta quella rete di tag appensantisce più delle immagini?
cmq dal tuo esempio, le img non sono proprio a fimetto per come cercavo io, che parte di codice dovrei guardare?!

[thomas_anderson]

le immagini le crei con un programma di grafica. se vuoi fare un box fumetto a dimensione fissa, ti servono due immagini, una per la parte superiore ed una x quella inferiore.
se invece lo vuoi fare fluido, ti servono cinque immagini: angoli superiori, angoli inferiori e linguetta del fumetto. la soluzione di CSS Play è solo **sperimentale**. un lettore di schermo deve passare attraverso una marea di elementi annidati prima di arrivare al testo del box. è una questione di accessibilità.

[gelmo]

scusa il disturbo !!

thomas_anderson

posso chiederti un favore !??