Bordi smussati

**tryhere** · 14-04-2009, 12.49.13

Vorrei che un mio div avesse il bordo con gli angoli smussati ma senza utilizzare immagini, solo codice. Si può?

14-04-2009, 12.54.29

qui ci sono vari esempi.
solo immagini, solo css, css e js...
http://css.html.it/articoli/leggi/16...ai-cosi-fac/1/

**tryhere** · 14-04-2009, 13.30.04

L'ho usato, qualcosa sono riuscito a fare ma gli angoli non si vedono...
Qui ho caricato l'esempio su cui l'ho provato.

14-04-2009, 13.37.11

Secondo me basta utilizzare solo un pò di css...

Codice:

.miaclasse {
-moz-border-radius: 3px; /* Per Firefox */
-webkit- border-radius: 3px; /* Safari e Chrome*/
border-radius: 3px; /* Standard CSS */
}

Fonte : http://saitfainder.altervista.org/webnology/

**tryhere** · 14-04-2009, 13.45.09

wow fantastico! grazie
però con internet explorer non funziona...

14-04-2009, 13.48.24

Originalmente inviato da nokiagames

Secondo me basta utilizzare solo un pò di css...

Codice:

.miaclasse {
-moz-border-radius: 3px; /* Per Firefox */
-webkit- border-radius: 3px; /* Safari e Chrome*/
border-radius: 3px; /* Standard CSS */
}

Fonte : http://saitfainder.altervista.org/webnology/

però mi sa che su ie non funziona

**tryhere** · 14-04-2009, 14.03.19

non c'è nessun modo per farlo funzionare su ie?

**nukta** · 14-04-2009, 14.29.49

solo con i css NO

per avere l'effetto angoli arrotondati su Explorer devi per forza usare le immagini. (.. o aspettare paziente un miracolo)

14-04-2009, 14.33.46

Si.
Leggi qui => http://www.juliusdesign.net/bordi-ar...-il-css-e-div/
C'è un po' troppo codice da mettere attorno al bordo, però una volta ho messo il codice dei bordi superiori in un file, e quello dei bordi inferiori in un altro file, così da richiamarli con include...E' un po' un pasticcio, e gli angoli non sono del tutto arrotondati, poichè lo smussamento non è altro che una serie di pixel..., e quindi si vede che il bordo non è perfettamente rotondo.

**tryhere** · 14-04-2009, 14.39.23

Grazie della segnalazione, tuttavia non è una soluzione molto pulita in quanto più si vuole che l'angolo sia dettagliato più suddivisioni si devono fare

**nukta** · 14-04-2009, 14.41.43

Originalmente inviato da musicanapoli

Si.
Leggi qui => http://www.juliusdesign.net/bordi-ar...-il-css-e-div/

Si, giusta precisazione. Il mio NO si riferiva all'uso della proprietà Css3 "border-radius".

14-04-2009, 14.53.30

Originalmente inviato da nukta

solo con i css NO

per avere l'effetto angoli arrotondati su Explorer devi per forza usare le immagini. (.. o aspettare paziente un miracolo)

forse con js...
nell'articolo che ti ho linkato c'è

14-04-2009, 15.18.49

Originalmente inviato da tryhere

Grazie della segnalazione, tuttavia non è una soluzione molto pulita in quanto più si vuole che l'angolo sia dettagliato più suddivisioni si devono fare

Purtroppo se vuoi che i tuoi bordi risultino arrotondati e vengano visualizzati in tutti i browser, devi utilizzare il sistema delle immagini oppure il sistema che ti ho linkato...

Oltre a tutto quello che ti abbiamo segnalato, credo che non ci siano altri sistemi.

**miki92** · 14-04-2009, 15.29.26

Vorrei solo aggiungere che vi siete dimenticato di toninosite il quale usa PHP per semplificare diversi codici che sono reperibili on-line e per una questione di "codice più pulito".

**tryhere** · 14-04-2009, 23.05.14

Ho provato ad utilizzare nifty ma non sono riuscito (ho caricato qui il mio lavoro)...

15-04-2009, 07.50.21

con nifty ho trovato anche io dei problemi.
prova a copiare il codice dall'articolo e di modificare grandezza e colori e basta

**tryhere** · 15-04-2009, 11.39.14

è praticamente quello che ho fatto ma non funziona...

15-04-2009, 14.29.38

non so che dirti

**tryhere** · 15-04-2009, 18.33.17

avevo dimenticato i css, ora li ho aggiunti ma non è cambiato niente...

**sliver** · 15-04-2009, 20.59.22

la cosa piu semplice e veloce che ho trovato in passato è stato jquery.

**tryhere** · 15-04-2009, 22.24.17

Non mi è chiarissimo come funziona perchè non trovo un tutorial...mi puoi aiutare?
Vorrei arrotondare (round) gli angoli di un div.

**sliver** · 15-04-2009, 22.51.06

Originalmente inviato da tryhere

Non mi è chiarissimo come funziona perchè non trovo un tutorial...mi puoi aiutare?
Vorrei arrotondare (round) gli angoli di un div.

Basta spulciare la sorgente di quella pagina:

1) scarichi le 2 librerie js che trovi nella pagina...
2) ...e le inserisci negli header:

Codice:

<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>

3) supponendo che hai

<div id="voglio_arrotondarti">contenuto</div>

inserisci anche negli header

Spulciando la pagina puoi capire che si possono passare diversi parametri alla funzione corner() in modo da customizzare l'arrotondamendo.

**tryhere** · 15-04-2009, 22.56.31

L'ho fatto ma non funziona...non devo mettere nessun css particolare alla pagina?

**sliver** · 16-04-2009, 10.53.50

devi invertire l'ordine delle librerie nell'header, prima jquery e poi corner ;).

16-04-2009, 15.07.24

Dipende comunque sempre dal tipo di bordo che vuoi, perchè dovrebbe essere possibile farlo sempre con CSS e HTML

**tryhere** · 16-04-2009, 18.41.51

Risolto

Grazie
Però ho notato che lo sfondo dove va a smussare l'angolo lo fa bianco...come posso rimediare?

16-04-2009, 19.57.20

Originalmente inviato da tryhere

Risolto

Grazie
Però ho notato che lo sfondo dove va a smussare l'angolo lo fa bianco...come posso rimediare?

come hai fatto a risolvere?
mi dai uno screenshot del problema dello sfondo per capire meglio?

**tryhere** · 16-04-2009, 19.59.22

ho invertito le librerie, come mi è stato suggerito pochi post sopra.
la pagina la trovi qui.

16-04-2009, 20.13.30

a JS non si vede, con il CSS invece si vedrebbe SEMPRE e in TUTTI i browser

**tryhere** · 16-04-2009, 20.46.18

In internet explorer è impossibile farlo con i css, comunque rimane il problema del colore di sfondo sugli angoli...

Discussione: Bordi smussati

LinkBack

Strumenti discussione

Display

Bordi smussati

Regole di scrittura