- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- angoli arrotondati
-
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
-
Volevo dire gli angoli di un contenitore, grazie
-
No attualmente. Ma nelle prossime specifiche css3 sarà possibile farlo. Attendi =(
-
potresti consigliarmi come fare? devo postare un thread su grafica con fotoshop?
-
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
<span class="rtop"> <span class="r1"></span> <span class="r2"></span>
<span class="r3"></span> <span class="r4"></span> </span>
<p class="rcentro"></p>
<span class="rbottom"> <span class="r4"></span> <span class="r3"></span>
<span class="r2"></span> <span class="r1"></span> </span> </div>Così funziona se hai un colore di background e non un bordo.
-
Grazie mille Mr.who
-
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;
-
grazie del consiglio, tantovale aspettare allora
grazie
-
@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
salutiEsistono 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.htmlIn ogni caso la soluzione giusta dipende dal tipo di box che ti serve, se è fisso o liquido e da cosa andrà a contenere.
-
Ciao io ho usato questo, senza usare immagini di sfondo, ma solo codice html e css.
codice HTML
[html]<div class="contenitore">
<span class="curva segmento1"></span>
<span class="curva segmento2"></span>
<span class="curva segmento3"></span>
<span class="curva segmento4"></span>
<div class="curva contenuto">contenuto </div> <span class="curva segmento4"></span>
<span class="curva segmento3"></span>
<span class="curva segmento2"></span>
<span class="curva segmento1"></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; }
-
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...
-
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!
-
Cosa intendi con spam? E con div che tecnica intedi?
-
...il tag span
-
Si scusate errore mio di battitura , era "span" non spam.
-
Immaginavo, ma lo aveva scritto 2-3 volte!:)
-
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)
-
Non male i link sopra! Grazie!
-
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