Border-radius la fisicità non conta..

Discussioni inerenti lo sviluppo di markup XHTML e CSS validi.

Moderatori: antoscarface, Kagemitsu

Regole del forum
Per scrivere del codice all'interno di ogni post, utilizzare il tag: [syntax=il_linguaggio]codice[/syntax] sostituendo "il_linguaggio" con il linguaggio del codice che dovete inserire, ad esempio: html, css, javascript, php, asp, ecc...

Border-radius la fisicità non conta..

Messaggioda Paper-bat » venerdì 18 febbraio 2011, 17:31

Salve a tutti,
il mio quesito della giornata di oggi si rivolge ai css o per meglio dire, come facciamo a creare un'immagine all'interno di un div (come background, immagine o qualsiasi altra cosa che possa essere contenuto all'interno del div).

Questo è il mio percorso fino ad ora:
1. Applico al div border-radius, per i vari browser, applico l'immagine come sfondo.
bleaah!.. l'immagine scappa fuori da tutte le parti, il bordo arrotondato non è fisico (per quel che il nostro lavoro lo può permettere), per non parlare di internet explorer che i bordi arrotondati non li può vedere.. Bocciato!

2. Creo l'immagine già con i bordi arrotondati.. non è male ma è parecchio scomodo.. e ovviamente se devi fare modifiche.. non è semplice.. soprattutto se le modifiche non le fa un addetto ai lavori.. Bocciato!

mmhh.. come faccio a far stare una fetta di mortadella (la fetta di mortadella è l'immagine :P) in un div? idea.. gli applico una maschera..

3. Ecco la maschera.. mi faccio la mia bella png a mo di cornice.. la rendo trasparente al centro.. e dietro ci metto tutte le immagini che voglio.. magari un po' complicato.. ma più fattibile.. ah.. dimenticavo.. internet explorer non gradisce le png trasparenti.. uff Bocciato anche questo!

4. Soluzione drastica.. riprendo la mia png e la faccio applicare ad uno scriptino php che mi resaiza l'immagine come mi pare a me e la fa stare sotto la png.. potrebbe funzionare.. ma se decidessi di cambiare dimensioni??..devo mettere mano allo script e all'immagine :( Rimandato!

Sembra che ho bevuto.. ma non è così.. ^^
Aspetto responsi, magari con qualche candidato più preparato :)
Code is Poetry | Ruby! A programmer's best friend..
Paper-bat

Moderatore

Avatar utente
 
Messaggi: 44
Iscritto il: giovedì 30 dicembre 2010, 19:03
Località: Cattolica (RN)

Re: Border-radius la fisicità non conta..

Messaggioda antoscarface » venerdì 18 febbraio 2011, 19:38

Paper-bat ha scritto:3. Ecco la maschera.. mi faccio la mia bella png a mo di cornice.. la rendo trasparente al centro.. e dietro ci metto tutte le immagini che voglio.. magari un po' complicato.. ma più fattibile.. ah.. dimenticavo.. internet explorer non gradisce le png trasparenti.. uff Bocciato anche questo!

Ma questo problema lo conosco solo su IE6... è per forza che deve funzionare anche su IE6? nel caso, hai provato a usare qualche pngfix?
antoscarface

Amministratore

Avatar utente
 
Messaggi: 723
Iscritto il: giovedì 21 gennaio 2010, 1:08
Località: Siracusa

Re: Border-radius la fisicità non conta..

Messaggioda Paper-bat » venerdì 18 febbraio 2011, 21:17

ie7
le png con ie7 funzionano, anche se si verifica il fenomeno dello scarto temporale non se lo conoscete, praticamente carica l'immagine con lo sfondo grigio (o del colore di sfondo che è stato dato alla png) e poi viene applicata la trasparenza..

pngfix
Il problema che sorge con ie6 è appunto che normalmente lo considero un browser obsoleto e la percentuale di javascript disattivato è decisamente più alta.

però ora stavo guardando più nello specifico del problema che mi hai detto e guarda un po' cosa ho trovato ^^
http://mcapewell.wordpress.com/2006/09/07/how-to-make-a-transparent-png-image-for-ie-6-in-the-gimp/
e dovrebbe risolvere anche tutti i problemi a partire da ie6, non sarebbe male.. ora lo provo

è in inglese.. ma relativamente semplice :)
spero possa essere di aiuto a qualcuno.. :)

ps: non si potrebbe fare un post bloccato in ogni sezione con le soluzioni "veloci" ai problemi più comuni della sezione? :)
Code is Poetry | Ruby! A programmer's best friend..
Paper-bat

Moderatore

Avatar utente
 
Messaggi: 44
Iscritto il: giovedì 30 dicembre 2010, 19:03
Località: Cattolica (RN)

Re: Border-radius la fisicità non conta..

Messaggioda Caluk » sabato 19 febbraio 2011, 5:47

mmm posso proporre una soluzione drastica?? eliminare il supporto a ie6, così vai liscio con le png xD

Ormai nemmeno le talpe usano più questa specie di browser :D
Caluk

Amministratore

Avatar utente
 
Messaggi: 410
Iscritto il: giovedì 4 febbraio 2010, 18:17
Località: Castellana Sicula

Re: Border-radius la fisicità non conta..

Messaggioda Paper-bat » sabato 19 febbraio 2011, 13:33

Putroppo non è così.. ad esempio sul sito della w3school dove fanno vedere le statistiche dei browser abbiamo ancora un 3,8% di utenti che usano ie6 (ed è da considerare con le pinze, visto che è un sito visitato per la maggior parte da esperti nel settore), mentre per i miei siti, sono ancora sopra il 9% :(

non immagini nemmeno come vorrei chiudere definitivamente la compatibilità per ie6.. che tristezza :(
Code is Poetry | Ruby! A programmer's best friend..
Paper-bat

Moderatore

Avatar utente
 
Messaggi: 44
Iscritto il: giovedì 30 dicembre 2010, 19:03
Località: Cattolica (RN)

Re: Border-radius la fisicità non conta..

Messaggioda Caluk » sabato 19 febbraio 2011, 14:09

bhè io ho fatto una scelta, non ho tempo da perdere con i suoi capricci e nemmeno posso rimpinzare il sito di js per far vedere le png con ie6. :)

Ho messo un bel popup dove informa che il browser è obsoleto e tanti saluti.

Gli unici siti dove controllo la compatibilità con ie6 sono quelli istituzionali, dove infatti c'è più possibilità di avere utenti con ie6 (vedi gli impiegati stessi :D ).
Caluk

Amministratore

Avatar utente
 
Messaggi: 410
Iscritto il: giovedì 4 febbraio 2010, 18:17
Località: Castellana Sicula


Torna a XHTML & CSS