box .. angoli arrottondati

[JANUS70]

Ciao ..
immagino che gli angoli arrottondati dei box che si vedono in siti vari siano frutto di un css ..
c'è qualcuno che mi può aiutare ?
grazie

[dragon88]

Si, si chiamano Nifty Corners, legg qui:

http://www.html.it/articoli/nifty/index.html

è possibile farlo anche con javascript

[Mich_]

Originariamente inviato da JANUS70
Ciao ..
immagino che gli angoli arrottondati dei box che si vedono in siti vari siano frutto di un css ..
c'è qualcuno che mi può aiutare ?
grazie

Ci sono varie tecniche per fare gli angoli arrotondati.

1. (come gia` suggerito) Nifty Corners: e` una tecnica JS (non ha necessita` di marcatura aggiuntiva, che viene invece aggiuinta dinamicamente tramite JS); trovi altre discussioni nel forum javascript; e ci sono altre tecniche sempre basate sui JS

2. Spiffy Corners (riferim. tra i "link utili"): e` una tecnica "solo HTML+CSS", ma necessita di marcatura aggiuntiva; ci sono anche altre tecniche simili, e puo` essere semplificata se c'e` larghezza (oppure altezza) fissa.

3. CSS3 tramite gli attributi specifici (supportati solo da alcuni browser moderni - no IE).
Inoltre ci sono tecniche ibride, vedi ad esempio Progressive Enhancement with CSS 3: A better experience for modern br...

[JANUS70]

grazie per le risposte ..
quindi mi sembra di capire che il sistema più semplice sia quello del Java Script !?
(dovrò approfondire)

PS. dove sono i "link utili" ?

Grazie

[Mich_]

Originariamente inviato da JANUS70
grazie per le risposte ..
quindi mi sembra di capire che il sistema più semplice sia quello del Java Script !?

Semplice ... parola abusata. Semplice e` quello che si sa fare, difficile quello che non si conosce.
Comunque tramite JS trovi soluzioni copia-incolla che funzionano praticamente dappertutto (se JS e` abilitato)

PS. dove sono i "link utili" ?

Nel forum!
E` uno dei primi thread, in evidenza. E` tanto evidente che molti non lo vedono neppure.

[JANUS70]

Ciao,
ho fatto delle prove con 'nifty js' ..

<script type="text/javascript">
window.onload=function(){
if(!NiftyCheck())
return;
Rounded("div#navigation","#CCFFCC","#6633FF");
}
</script>

trovo però le prime difficoltà ..
come dovrei fare se al div applico i bordi ?
grazie mille

[Mich_]

Sposto in JS, dove trovi gli esperti di Nifty (compreso l'autore, qualche volta).

Altre info le trovi mediante ricerca nel forum JS stesso, oppure trovi anche degli articoli sui Nifty sempre nel sito di HTML.it

[JANUS70]

per il problema ai bordi ho risolto ..
usando due div .. uno dentro l'altro .. e applicando gli angoli arrottondati all'esterno .. con colori di sfondo diversi .

però adesso ho un altro problemino .. :-)

come mai se li applico ai 'td' di una tabella ..
gli angoli mi si arrottondano .. ma mi rimane il bordino esterno ('angolo quadrato) in tinta dello sfondo del td ! (spero di esseermi spiegato)
Grazie mille

[JANUS70]

altro problemino ..


come devo fare per colorare in maniera corretta la parte arrottondata della linguetta 'home' che si vede nell'allegato (il 'nav c') ?

/* -------------------------- */

#menu_alfa{margin: 1em 1em 0 1em;
text-align: center; }

#menu_alfa table{border-collapse:collapse; }

#menu{float:left;
margin:0 4em auto;
padding:0;
width: 65em;
background-image: url(navbk.jpg);
text-align: right;
}
#nav,
#nav li{list-style-type:none;
margin:0;
padding:0}
/* --- distanza prima linguetta a sx e ultima a dx ( 35 - 7) ---- */
#nav {padding-left: 2em;
padding-right: 5.5em}
/* --- "margin-right" distanza tra le linguette ---- */
#nav li{float:left;
width:10em;
margin-right:0.5em;
text-align: center}
/* --- linguette link ---- */
#nav a{float:left;
width:10em;
padding: 2px 0 ;
text-decoration:none;
background-color: #CCFFFF;
color: #999}
/* --- linguetta home ---- */
#nav c{float:left;
width:10em;
padding: 2px 0 ;
text-decoration:none;
background-color: #663300;
color: #FFF}

================================================== ====

window.onload=function(){
if(!NiftyCheck())
return;

RoundedTop("div#nav li","transparent","#CCFFFF");
RoundedTop("div# nav li c","transparent","#663300");

}
</script>

================================================== ====


<div id="menu_alfa">
<table width="100%" >
<tr>
<td align="center">
<div id="menu">
<ul id="nav">
<li id="home" <c>Home</c>
<li id="who">About
<li id="prod">Product
<li id="serv">Services
<li id="cont">Contact us
[/list]
</div>
</tr>
</table>
</div>

[gioscarab]

Ciao inserisci semplicemente questo:
-moz-border-radius: (quanti px di stondatura vuoi)px;
-webkit-border-radius: (quanti px di stondatura vuoi)px;
nel css dell'elemento che vuoi stondare.