WebSite X5Help Center

 
Giampy ッ
Giampy ッ
User

Personalizzare CSS stile ios 7  it

Autor: Giampy ッ
Visitado 1637, Followers 2, Compartido 0  

Giorno a tutti, ragazzi chiedo chi ne capisce piú di me di linguaggi di programmazione, come si potrebbe apolicare ad un menu a tendina personalizzato un effetto di opacitá come quello che ultimamente ci sta abituando ios 7. 

Ho provato diverse guide online, ma senza avere risultati...qualcuno riuscirebbe a darmi qualche dritta magari con la visione di qualche sua demo?

Sarei interessato ad applicare l effetto d opacitá trasparenza magari ad un futuro progetto

grazie.

Publicado en
19 RESPUESTAS - 1 ÚTIL
Skeggia 12
Skeggia 12
Moderator

dal primo link, verso il basso dell'articolo c'è il ink alla pagina di esempio, cliccalo e poi apri il sorgente della pagina, troverai nella sezione head

<linkrel="stylesheet" href="opacity.css" media="screen" type="text/css" />

clicca su opacity.css, copy il codice e lo inserisci in un ogg html sezione esperto, poi prendi la riga

<aid="box" href="#" class="testo" title="....................

e la inserisci nello stesso ogg html . . . Fatto. Poi ti modifichi i valori dei colori e delle trasparenze.... ciao

Leer más
Publicado en de Skeggia 12
Giampy ッ
Giampy ッ
User
Autor

antonio grazie per il consiglio ma purtroppo non riesco.

potresti per caso riuscirmi ad ellegare una demo con website cosi che io possa poi capire i codici come sono messi ecc ecc?

Leer más
Publicado en de Giampy ッ
Skeggia 12
Skeggia 12
Moderator

allora, in una pagina inserisci un oggetto html; nell'ogg. html copiaci dentro il contenuto del file body.txt; poi sempre nello stesso oggetto, nella sezione esperto, nella parte alta, ci copi il contenuto del file opacity.css.

Fatto.

L'esempio con website lo trovi qui:

www.skeggia12.it/test/v10pro         alla pagina 9 . . .

I file sopranominati sono nell'allegato zip.... ciao

Leer más
Publicado en de Skeggia 12
Giampy ッ
Giampy ッ
User
Autor

Antonio io ti ringrazio per la disponibilità, ma forse hai frainteso la mia richiesta, io intendo l effetto di opacità/trasparenza presente sul nuovo ios 7 dei suoi menu..cioè per capirci quello che vedi in foto in allegato...questo cerco..

Leer más
Publicado en de Giampy ッ
Skeggia 12
Skeggia 12
Moderator

ok, ma dai link che hai postato non si evinceva, quello del mio esempio era l'effetto che compariva... dai vediamo di spulciare qualcos'altro...

Leer más
Publicado en de Skeggia 12
Skeggia 12
Skeggia 12
Moderator

però attento che non mi funziona in FF 24....

Leer más
Publicado en de Skeggia 12
Giampy ッ
Giampy ッ
User
Autor

Ciao antonio, eh si scusami ma pensavo che quei link potessero esser d aiuto...cmq si é l effetto che hai postato sul tuo link...anche dai un occhiata qui che mostra e parla proprio di come realizzare l effetto come quello di ios7...anche se ho provato ora dal cellulare...e l effetto opaco non funziona...ma dal pc si vede..cmq guarda qui:

http://www.upcreative.net/css3-tutorial-creare-effetto-overlay-ios-7-blur/

Leer más
Publicado en de Giampy ッ
Skeggia 12
Skeggia 12
Moderator

Dal tutorial che hai segnalato:

Conclusioni finali

Purtroppo questo esperimento non è ancora ottimizzato con tutti i browser (per esempio nel caso di Firefox non è possibile applicare l’effetto blur al contenuto della pagina con il semplice attributo “filter:blur” ma solo servendosi degli effetti svg) e inoltre si tratta in fin dei conti di un workaround, in quanto l’effetto sul documento non è scaturito dalla sovrapposizione dell’overlay bensì da uno stile completamente separato. Tuttavia spero che questo tutorial ti sia d’aiuto per imparare nuove regole CSS3 e che magari potrai utilizzarlo nel tuo prossimo progetto!

Mi sa tanto che questi effetti sono ancora troppo evoluti per i browser che abbiamo, e sono artificiosamente composti per "somigliare" a ioS, quindi non compatibili al 100%, come l'esempio che ho postato io che su FF non funziona... aspetteremo tempi migliori . . . ciao

Leer más
Publicado en de Skeggia 12
Giampy ッ
Giampy ッ
User
Autor

vabenissimo...ti ringrazio per il tempo dedicatomi..sempre gentilissimo :D

Leer más
Publicado en de Giampy ッ
Giampy ッ
Giampy ッ
User
Autor

Ciao Mirko, si ho visto che si potesse modificare il testo con questo effetto solo che io dovrei applicare questo effetto solo allo sfondo e non al testo...e questo che non riesco...anche se volessi creare un immagine ad esempio nera...e con photoshop opacizzarla..al momento che vado poi a settarla come trasparente con la proprietà css: opacity:0.9 ad esempio...l opacità dell immagine è come se nn ci fosse prorpio...purtroppo secondo me..come ha detto anche antonio..purtroppo al momento possiamo solo aspettare..

Leer más
Publicado en de Giampy ッ
Giampy ッ
Giampy ッ
User
Autor

Ho trovato questo: me lo riuscireste a realizzare però con delle vostre immagini? xkè io utilizzando il codice cosi com è...funziona..ma come vado a cambiare le immagini nn piu..strano..

http://jsfiddle.net/SvH6w/6/

Leer más
Publicado en de Giampy ッ
Skeggia 12
Skeggia 12
Moderator

con una prova al volo ha funzionato solo con una immagine già presente sul mio dominio e non con una immagine allegata in sezione esperto dal pc . . . da verificare con calma . . .

Leer más
Publicado en de Skeggia 12
Skeggia 12
Skeggia 12
Moderator

ciao giampy, ho capito come funziona: nel css devi inserire la stessa immagine nei due posti dove sono inserite quelle originali, perchè poi il "#myDiv: hover #effect" si occupa di deformare la seconda immagine per ottener l'effetto... spero di essermi spiegato, altrimenti puoi vedere l'effetto a pagina 11 di questo link:

http://www.skeggia12.it/test/v10pro

ciao

Leer más
Publicado en de Skeggia 12
Skeggia 12
Skeggia 12
Moderator

in ff e IE10 si vede meno che su Chrome . . . prova a modificare i parametri del canale alpha...

Leer más
Publicado en de Skeggia 12
Giampy ッ
Giampy ッ
User
Autor

ah capito...ma se io lo volessi  estendere come nero opaco, senza l effetto hover, cioè al momento dell apertura del menu, lo sfondo di esso si vede con quell effetto (hover direttametne)...il sito a cui vorrei apportare questo effetto è: www.wimbledonpaint.com/m

Leer más
Publicado en de Giampy ッ
Skeggia 12
Skeggia 12
Moderator

nel css devi cambiare il colore nel #color da lightblue in black e regolare la trasparenza

Leer más
Publicado en de Skeggia 12