Bordi sfumati tramite righe di codice?

Qualcuno sa se qualcuno ha già pensato (e riuscito) a creare tramite righe di codice (css e o javascript e non con immagini) dei bordi con colori sfumati?

Prova a cercare "gradiente css3" su google.
Non so quanto sia compatibile.
Occhio che ogni browser vuole la sua proprietà a parte :\

Ciao!

Colori sfumati? Puoi fare un esempio? (indica un'immagine o l'indirizzo della pagina)

Ciao, io ho utilizzato i css.
Ho creato tanti <div>, di un pixel di altezza ma tu fai come desideri, ognuno con colori diversi. Per fare la sfumatura ho usato colori di sfondo da un blu scuro ad uno chiaro e poi nella pagina html li ho richiamati uno sotto l'altro senza spazi. È un pò macchinoso ma il risultato è piacevole.

L'hai fatto a mano? Ci sono migliaia di script pronti che lo fanno dinamicamente al caricamento (così anche da non avere un codice orrendo). A me però pare una tecnica antiquata, oramai che i CSS3 sono stati così largamente implementati si può certamente fare a meno di questi stratagemmi.

La prima volta ho fatto a mano, stesso metodo anche per fare i bordi arrotondati. Poi ho trovato su internet strumenti per fare tutto automaticamente. Si hai ragione con i CSS3 è fattibile ma devo ancora studiarmi le novità.

Non voglio fare spam, però questo sito che ora vi posto, dà un pò l'idea dei bordi laterali che ovviamente si vedono sfumati: http://www.karaokeparty.com/ , ecco sotto al banner orizzontale si può vedere dei div con bordo sfumato, non so dirvi se li hanno fatti con delle immagini o no, non ho guardato il sorgente. Questo è quello che vorrei riuscire a fare senza però dover scrivere chissà quante righe di codice


Per ora il mio metodo è creare 3 div, a quelli che metto ai lati è semplice, gli dò la larghezza di 1px e l'altezza di quanto serve e poi con -webkit-linear...-moz-...-ms-... e/o -o-... gli dò la sfumatura che mi interessa e li attacco con un float verso sinistra o destra.

Però, a me piacerebbe poter scrivere una roba come questa: border-left: 1px solid -moz-linear-gradient(#000,#fff);
ma è solo un esempio.

In quel sito l'effetto è banalmente realizzato con una immagine di sfondo, non è dunque una soluzione flessibile. Se sei interessato a realizzare l'effetto di ombreggiatura, usa la proprietà CSS3 box-shadow.

Io ho pubblicato il sito solo per far intendere cosa voglio riuscire a fare tramite righe di codice, a me non interessava sapere come avevano fatto loro a fare quell'effetto, se con un'immagine o proprio come volevo fare io, è irrilevante il loro metodo di sviluppazione. La mia domanda rimane sempre la stessa, come posso riuscire tramite semplici righe di codici a fare quell'effetto? Qualcuno riuscirà a semplificare il lavoro in modo che si possa fare quell'effetto scrivendo per esempio border-color-left: -webkit-linear-gradient(#ddd,#999); ?

Hai provato a vedere come funziona la proprietà CSS3 che ti ho menzionato?

Non è quel che cerco. Ammettiamo infatti di non voler usare troppi div ma d usarne solo uno, come posso io mettere se lo voglio sia una sfumatura ai bordi (intendo quella che si riceve scrivendo bo-shadow:0px 0px 10px #000) che i bordi come visti nel sito del karaokeparty? In pratica proprio quello che si vede in quel sito! Non credo sia possibile farlo, si potrebbe se esistesse un modo per fare i bordi di colori gradienti.

Quindi tu cerchi di ottenere un modo per dare ad un box un'ombreggiatura che andando verso il basso divenga trasparente? E come dovrebbe modificarsi questo effetto al variare delle dimensioni del box? L'ombreggiatura immagino continui ad avere le stesse caratteristiche (raggio di sfocatura), e la sfumatura verticale? Deve andare in proporzione con l'altezza dell'elemento o deve essere fissa? Nell'ultimo caso sarebbe un problema qualora il box in questione sia più corto della lunghezza della sfumatura, quindi o viene tagliata quest'ultima o ridimensionata.
Gli abbozzi di codice che hai scritto sono un po' confusi: non puoi realizzare un ombreggiatura (che altro non è la sfocatura gaussiana del rettangolo di colore avente le dimensioni dell'elemento di partenza) con un gradiente lineare, l'interpolazione di colore è differente. Inoltre anche se esistesse un pseudo elemento che permetta di identificare il bordo dell'elemento e dunque personalizzare lo stile, avresti comunque dei problemi a sovrapporre due gradienti, uno dei quali dovrebbe funzionare come maschera (altrimenti ciò che è sotto che fine fa?).
Probabilmente la soluzione migliore è usare la proprietà CSS3 border-image.

Si però peccato che non è proprio il massimo. Preferirei qualcosa di più veloce e accessibile, aimè però non se pò avere tutto. Chi troppo vuole, troppo vuole.

mi dispiace ma per fare esattamente quello che dici tu l'unico modo per quel che so è usare la tecnica adottata dal sito che hai linkato.

Ciao

Allora, creaimolo il modo per fare ciò che vogliamo.

Ma esattamente qual'è il problema che hai con le soluzioni che ti ho proposto?