angoli arrotondati

8enrico4

angoli arrotondati

Ciao a tutti ragazzi, esiste qualche maniera per poter arrotondare i bordi di un contenitore "#id" ? senza ricorrere a programmi di di disegno tipo fotoshop?
grazie
ciao

8enrico4

Volevo dire gli angoli di un contenitore, grazie

karedas

No attualmente. Ma nelle prossime specifiche css3 sarà possibile farlo. Attendi =(

8enrico4

potresti consigliarmi come fare? devo postare un thread su grafica con fotoshop?

misterwo

con photoshop ti disegni la grafica poi nel tuo div metti in alto e in basso i tuoi pezzi di img con gli angoli tondi...

oppure usi questo codice:

CODICE CSS
span.rtop, span.rbottom{display: block; }
span.rtop span, span.rbottom span{display: block; height: 1px;
overflow: hidden;
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}

CODICE PAGINA
 
 

 
 </div>

Così funziona se hai un colore di background e non un bordo.

8enrico4

Grazie mille Mr.who

laburno

Puoi usare gia quelle specifiche css3, ma funzioneranno solo su Mozilla e Webkit. Ovviamente però il tuo CSS non sarà validato.

-moz-border-radius: 10px;
-webkit-border-radius: 10px;

8enrico4

grazie del consiglio, tantovale aspettare allora
grazie

laburno

@8enrico4 said:

Salve a tutti.
Vorrei creare un contenitore #div Css per circondare e corniciare il layout del mio sito, ma non so come fare per rendere arrotondati gli angoli, qualcuno mi puo` consigliare come fare?
grazie in anticipo
saluti

Esistono diverse soluzioni che fanno ricorso all'uso delle immagini di sfondo.
La più gretta è quella di annidiare 4 div e mettere ad ognuna come sfondo un angolo arrotondato, posizionato di conseguenza.

Soluzioni più pratiche ce ne sono, alcune ricorrono a javascript per non appesantire il markup, come i nifty corners:
http://www.html.it/articoli/niftycube/index.html

In ogni caso la soluzione giusta dipende dal tipo di box che ti serve, se è fisso o liquido e da cosa andrà a contenere.

ideasiti

Ciao io ho usato questo, senza usare immagini di sfondo, ma solo codice html e css.

codice HTML

[html]<div class="contenitore">




<div class="curva contenuto">

        contenuto               
     
    </div>
  <span class="curva segmento4"></span>

</div>[/html]Codice CSS



.curva {
    display:block;     height: 1px; overflow: hidden;      background: #ccffff;
}

.segmento1{ margin: 0 5px }

.segmento2{    margin: 0 3px }

.segmento3{    margin: 0 2px}

.segmento4{    margin: 0 1px;    height: 2px;}

.contenuto {
       height: auto;
       padding: 1px 10px;
}

cali1981

Bello! Grazie per l'utilissimo codice! Peccato che se devo fare 10 box in un stessa pagina viene fuori un codice html lunghissimo, che influisce negativamente anceh sul posizionameno...

karedas

MHhh io personalmente non amo usare così tanto lo span per annidamenti dato che di base lo spam è affibiato a tutt'altro genere.

Consiglierei di prendere in considerazione l'uso dei div piuttosto
Ma è un mio personale parere.
ciao!

cali1981

Cosa intendi con spam? E con div che tecnica intedi?

meryk

...il tag span

karedas

Si scusate errore mio di battitura , era "span" non spam.

cali1981

Immaginavo, ma lo aveva scritto 2-3 volte!:)

lelebart

io mi sono trovato molto bene con questi consigli firmati cssplay:
www.cssplay.co.uk/boxes/, nello specifico
www.cssplay.co.uk/boxes/snazzy2.html
www.cssplay.co.uk/boxes/krazy.html
www.cssplay.co.uk/boxes/chunky.html
www.cssplay.co.uk/boxes/slant.html
www.cssplay.co.uk/boxes/curves.html
tutte le soluzioni proposte non fanno uso né di javascript né di immagini, solo xhtml e css puri! buon lavoro!!

edit: dimenticavo che al limite esiste un plugin per jquery:
( - methvin.com/jquery/jq-corner.html
http://methvin.com/jquery/jq-corner-demo.html)

cali1981

Non male i link sopra! Grazie!

8enrico4

penso che dovrebbero impiccare i programmatori del browser i.e, faro` un layout con photoshop, e il resto lo metto dentro usando le posizioni assolute MI ARRENDO.
Grazie cmq per l'aiuto e i consigli