Webx 5
ESPERIENZE UTILI
SFONDO ADATTATO ( suggerimento originario di Giuseppe Guida con altre misure)
Lo sfondo riga permette di inserire in sequenza immagini a tempo una serie di immagini tra i vari oggetti che compongono il progetto.
Il trucco utilizzato dall'ideatore è ingegnoso e permette di raggiungere risultati molto accettabili.
Sei Pronto? Segui gli steep:
- Prepara un pagina Test
- all'inizio metti un separatore da 90px
- di seguito inserisci un oggetto testo responsive con un TUO TITOLO da 92px
e completa le opzioni flaggando "adatta alle dimensioni del contenuto". Poi vai sui margini di questo oggetto testo e tra le opzioni specifica quelli esterni come 10-10-10-10 mentre quelli interni in 50-10-10-10. - Ora inserisci di seguito sotto il separatore e all'oggetto titolo responsive ► un oggetto testo
e all'interno di esso mettici uno slogan da 16 px o per la dimensione più preferita a seconda delle esigenze ma mai superare i 36px. Imposta l'interlinea paragrafo dello slogan in SINGOLA. Poi vai sui margini dell'oggetto testo e setta i margini, quelli esterni tutti a zero mentre, quelli interni, a 10-10-10-150. - Ora portati in STILE RIGA e aggancia tra loro tutti e 4 gli oggetti sopra menzionati. Poi scegli a destra delle opzioni ► IMMAGINI IN SEQUENZA e inserisci le tue immagini. Nell'esempio sono state utilizzate due immagini da 1920x1280px.
- Ricordati che l'altezza del contenitore delle immagini è data dalla somma in px dei 4 oggetti agganciati tra loro. Le misure potrebbero differire in base alla risoluzioni delle tue immagini ma ti conviene provare con prima 1920x1280 rapporto 16:9
L'esempio si basa su una struttura layout così suddivisa: ►►► (facoltativa. Puoi utilizzare anche quella di default)
- La pagina completa dovrà presentarsi come l'immagine sottostante che evidenzia la struttura appena creata:
- Come puoi notare gli oggetti sono tutti agganciati mentre le immagini verranno pescate in ELENCO IMMAGINI.
- Ora portati in ANTEPRIMA IMMAGINE E RIDUCI IL TUO BROWSER DALLE OPZIONI DEL PROGRAMMA. Noterai che man mano che riduci le immagini a talune risoluzioni sono tagliate di brutto. Nessun problema. Se seguite questo layout non dovete fare altro che andare nuovamente sul progetto ma questa volta scegliete RESPONSIVE
. Le opzioni vi permetteranno di nascondere gli oggetti quindi, arrivati a 1149px nascondete i due separatori come nell'immagine che segue:▼
Salva e riprova in anteprima il comportamento ora degli oggetti sopra elencati. Noterai che le due immagini ora si sono aggiustate. E un po' come fare i calcoli sul rapporto dell'aspect ratio per cui, a prescindere dal layout che hai, devi nascondere i due separatori dove vedi il primo taglio delle immagini.
PRO
- NESSUN CODICE DA INSERIRE
- L'IMMAGINE SI PRESENTA ADATTATA CON UN GIUSTO COMPROMESSO DI VISUALIZZAZIONE
CONTRO
- E' POSSIBILE RAGGIUNGERE UN RESPONSIVE DEL 100% SOLO CON UNA ELABORAZIONE MIRATA DELLE IMMAGINI
- LA PROCEDURA E' ADATTA PER CHI SA LAVORARE GRAFICA E HA TEMPO DA PERDERCI
COMMENTA ▼
Non sono presenti ancora recensioni.