Bordi sfumati tramite righe di codice?

[memai]

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?

[alemoppo]

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

Ciao!

[karl94]

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

[EcologicoFaiDaTe]

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.

[karl94]

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.

[EcologicoFaiDaTe]

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à.

[memai]

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.

[karl94]

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.

[memai]

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); ?

[karl94]

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

[memai]

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.

[karl94]

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.

[memai]

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

[memai]

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

[karl94]

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