cornici con curve

[Georgias]

Ciao a tutti
1) è possibile realizzare curve alle cornici dei div senza dover per forza fare un'immagine di sfondo?
2) è possibile realizzare curve alle cornici di input senza dover fare un'immagine di sfondo?

se sì, come?

grazie

[yappo]

per il primo credo che sarà possibile non appena tutti i browser supporteranno CSS3...
...con i CSS3 lo standard invece sarà una semplice riga di codice..

ti allego un paio di link:

http://www.onsitus.it/css3/border-radius/
(guardalo con firefox 3 altrimenti li vedi tutti uguali...)

http://www.w3.org/TR/css3-background/

http://css.html.it/articoli/leggi/23...ccoli-passi/1/

a presto...

[Georgias]

Grazie
c'ho provato e sperato!
comunque non trovavo più il link a "onsitus"

speriamo che i vari browser siano attivi al più presto a facilitare questa gentile possibilità!


grazie ancora

[yappo]

de nada...

se vuoi puoi provare anche:

span.rtop, span.rbottom{display: block; }
span.rtop span, span.rbottom span{display: block; height: 1px;
    overflow: hidden; filter: alpha(opacity=80);
-moz-opacity:0.80;
opacity:0.80;
background-color: #FFF;}
span.r1{margin: 0 5px}
span.r2{margin: 0 3px}
span.r3{margin: 0 2px}
span.rtop span.r4, span.rbottom span.r4{margin: 0 1px; height: 2px}

p.rcentro {
filter: alpha(opacity=80);
-moz-opacity:0.80;
opacity:0.80;
background-color: #FFF;
height:170px;padding:0px; margin:0px; text-align:center;}

span.rtopb, span.rbottomb{display: block; }
span.rtopb span, span.rbottomb span{display: block; height: 1px;
    overflow: hidden; filter: alpha(opacity=80);
-moz-opacity:0.80;
opacity:0.80;
background-color: #FFF;}
span.r1{margin: 0 5px}
span.r2{margin: 0 3px}
span.r3{margin: 0 2px}
span.rtop span.r4, span.rbottom span.r4{margin: 0 1px; height: 2px}

ora devo trovare il codice html...scusami ma lo avevo tenuto in un vecchio css ma mi serve l'altro...

ops...

[custanz]

per il primo caso come ha detto yappo è previsto nel css3, che però dovrebbe funzionare su quasi tutti i browser (a parte IE), oppure mi pare ci fossero dei javascript apposta

per il secondo purtroppo c'è poco da fare, a quanto pare i form sono intoccabili

[Georgias]

Originariamente inviato da custanz
per il primo caso come ha detto yappo è previsto nel css3, che però dovrebbe funzionare su quasi tutti i browser (a parte IE), oppure mi pare ci fossero dei javascript apposta

già le curve si visualizzano su konquero e safari, ma spero presto lo rendano disponibili anche su IE

per il secondo purtroppo c'è poco da fare, a quanto pare i form sono intoccabili

per gli input ho sperato si potessero aggiustare, ma a non è così
almeno posso cambiargli il colore, ma non la forma

[Georgias]

avevo trovato questo pulsante che da pure l'ombra e la curva (visualizzato da tutti):

div#baffo{ background: #b0b0b0; width: 140px; height: 17px; margin: 0 10%  ; padding-top: 3px; }
b.r1 { margin: 0 0 0 5px  }
b.r2 { margin: 0 0 0 3px  }
b.r3 { margin: 0 0 0 2px  }
b.rbottom b.r4 { background-color: #b0b0b0; margin: 0 0 0 1px; height: 2px  ; }
b.rbottom { background: #e6e6e6; display: block  }
b.rbottom b { background: #b0b0b0; display: block; height: 1px; overflow: hidden  ; }
a { color: white; font-weight: bold; text-decoration: none; padding-left: 6px; }
a:link { color: white; font-weight: bold; text-decoration: none; }
a:visited { color: #2f2f2f; font-weight: bold; text-decoration: none; }
a:hover { color: #939393; font-weight: bold; background-image: url(curv.gif); background-repeat: no-repeat; background-position: left top; text-decoration: none; position: relative; top: 0; left: 0; right: 16px; bottom: 3px; padding: 3px 100% 5px 6px; }
a:active { color: #939393; font-weight: bold; text-decoration: none; }
i.rbottom { background: #fff; display: block  }
i.rbottom i { background: #e6e6e6; display: block; height: 1px; overflow: hidden  ; }
i.r1 { margin: 0 0 0 5px  }
i.r2 { margin: 0 0 0 3px  }
i.r3 { margin: 0 0 0 2px  }
i.rbottom b.r4 { background-color: #fff; margin: 0 0 0 1px; height: 2px  ; }

<div id="baffo">
Georeferenziazione
<b class="rbottom">
<b class="r4">[/b]
<b class="r3">[/b]
<b class="r2">[/b]
<b class="r1">[/b]
[/b]
<i class="rbottom">
<i class="r4">[/i]
<i class="r3">[/i]
<i class="r2">[/i]
<i class="r1">[/i][/i]
</div>

ma il cliente vuole un input!!!