Visualizzazione dei risultati da 1 a 4 su 4
  1. #1

    personalizzazione responsive

    Buongiorno a tutti....
    devo fare un progetto di personalizzazione vestiario... in pratica ho delle magliette in cui posso combinare vari colori, ad esempio maniche colletto busto, più ricamo....
    i colori vengono scelti tramite una select che richiama i jpg e li posiziona dei div sopra la maglietta stilizzata sotto come sfondo.... maniche e colletto ovviamente sono sagomate quindi x posizionarle sopra devo essere precisa al mm..... il problema mi si pone nel responsive.....
    quindi chiedo... c'è modo di nn impazzire x ogni device? C'è qualche comando che può aiutare?

    Grazie a tutti

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Ciao, potresti risolvere in vari modi.
    In linea di massima mi vengono in mente 3 o 4 modi ma possono chiaramente essercene molti altri. Bisogna eventualmente valutare come vorresti procedere anche a seconda delle tue specifiche esigenze, della complessità del progetto, della flessibilità del codice e dell'accuratezza che vuoi ottenere, del supporto richiesto sui vari browser, e vari altri fattori legati anche al lato programmatico di tale caratteristica oltre che all'impostazione del CSS.

    Magari è possibile che ci siano anche degli strumenti/sistemi già sviluppati per realizzare delle cose del genere. Non so se hai valutato anche questa possibilità e se hai già fatto delle ricerche in merito. Chiaramente non conoscendo nemmeno quale sia l'ambito del progetto, non ho idea se questa sia una possibilità che puoi prendere in considerazione

    Non per demoralizzarti (anche perché non conosco assolutamente il tuo livello di preparazione in merito) ma mi sembra comunque un progetto non così semplice da sviluppare. Non ho capito comunque se già parte del progetto è sviluppata. Ad ogni modo, anche se tu dovessi scegliere un metodo tra i vari, il mio consiglio principale è quello di non pensare che ci sia una bacchetta magica per cui sia possibile applicare un "comando" e il tutto si materializzi dal nulla. Chiaramente dopo aver valutato un possibile metodo, ci si dovrà rimboccare le maniche per svilupparlo, applicarlo al progetto e testarlo.


    Rispondendo comunque sul piano tecnico,

    il problema mi si pone nel responsive.....
    per la questione "responsive" presumibilmente converrà definire prima di tutto i breakpoints, impostando delle opportune media queries. Dalle tue indicazioni non è chiaro se ti serve avere informazioni anche su questa parte ma, in tal caso, puoi fare riferimento a qualche guida.

    c'è modo di nn impazzire x ogni device? C'è qualche comando che può aiutare?
    Qualche soluzione:

    1) Potresti usare un contenitore principale (un div) dove inserire degli elementi <img> a cui applicare delle dimensioni (ed eventuali posizioni) con valori in percentuale. In questo modo, quando il contenitore viene ridimensionato, anche tutti gli elementi interni saranno ridimensionati di conseguenza.

    2) Potresti inserire tutto dentro un contenitore principale quindi usare la proprietà transform a cui applicherai la funzione scale() impostata con opportuni valori in base agli eventuali breakpoints.

    3) Potresti usare un unico div sul quale impostare dei "background multipli" opportunamente posizionati e dimensionati in percentuale così che, ridimensionando il div, tutte le immagini siano ridimensionate di conseguenza.

    4) Potresti "realizzare" la composizione lato server, cioè con uno script lato server (ovviamente da sviluppare ad hoc se già non esiste qualcosa) che assembla opportunamente le varie immagini e restituisce un immagine singola al client (magari usando AJAX per aggiornare l'immagine al volo, secondo le opzioni scelte). Questo potrebbe facilitare la questione del "responsive" lato client ma chiaramente lo sviluppo di tutto il sistema, e soprattutto la parte lato server, potrebbe essere molto complesso.


    Qualche ulteriore consiglio:

    - Dal momento che stai usando delle immagini sovrapposte, magari è più opportuno che siano delle png (con trasparenza) anziché jpg, come hai indicato tu.

    - Per facilitare il posizionamento dei vari elementi sull'immagine base, potrebbe essere più pratico realizzare tutte le immagini che abbiano le stesse dimensioni di quella base. Chiaramente dovrai preparare le varie immagini in modo che il disegno degli elementi coincida, nella posizione, con l'immagine di base. In questo modo l'impostazione del CSS risulterà molto più semplice a prescindere dal metodo utilizzato, perché non dovrai occuparti del posizionamento e dei possibili eventuali problemi/errori che questo può comportare.


    Chiaramente sono giusto delle idee di base ma, ripeto, dovrai valutare tu e quindi procedere eventualmente nello sviluppo.

    Buon proseguimento.
    Ultima modifica di KillerWorm; 14-12-2017 a 11:45
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Buongiorno e grazie per la risposta.....
    quando mi riferivo ad un "comando" non intendevo assolutamente alla bacchetta magica, sono anni che faccio il webdesign, e so che niente è semplice, ma per molteplici ragioni sono rimasta un po' indietro con i CSS ecco perchè chiedevo se c'era qualche nuova funzione da poter studiare.....
    l'accoppiata transform e scale() mi sembra la più funzionale..... il progetto è già avviato e quindi ho già tutti i png pronti (sì, uso png, ho solo sbagliato a scrivere nella fretta )

    Grazie del suggerimento, spero di riuscire, in caso chiederò altri suggerimenti

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    bene, buon lavoro
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.