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?
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?
Notte bistecca, ho l'acquolina in bocca e 'sta sera c'è, carne di manzo per me!
Prova a cercare "gradiente css3" su google.
Non so quanto sia compatibile.
Occhio che ogni browser vuole la sua proprietà a parte :\
Ciao!
Ultima modifica di alemoppo : 12-04-2012 alle ore 21.26.45
regolamento altervista_______________ regolamento forum
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.
Ultima modifica di EcologicoFaiDaTe : 12-04-2012 alle ore 22.29.31
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.
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.
Ultima modifica di memai : 13-04-2012 alle ore 16.24.53
Notte bistecca, ho l'acquolina in bocca e 'sta sera c'è, carne di manzo per me!
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); ?
Notte bistecca, ho l'acquolina in bocca e 'sta sera c'è, carne di manzo per me!
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.
Notte bistecca, ho l'acquolina in bocca e 'sta sera c'è, carne di manzo per me!
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.
Notte bistecca, ho l'acquolina in bocca e 'sta sera c'è, carne di manzo per me!
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.
Notte bistecca, ho l'acquolina in bocca e 'sta sera c'è, carne di manzo per me!
Ma esattamente qual'è il problema che hai con le soluzioni che ti ho proposto?