Impostare uno sfondo fisso cornice (png) su un sito responsive 
Autore: Michelangelo F.
Visite 1372,
Followers 1,
Condiviso 0
Salve a tutti,
Sono Michelangelo, sono nuovo nell'utilizzo di questo software. Sto realizzando un sito web per la mia casa di produzione cinematografica.
Ho la necessita di impostare uno sfondo che faccia da cornice a tutto il sito, ho creato lo sfondo su photoshop in formato png ho provato ad applicarlo ma riscontro tanti problemi con i margini e la risoluzione/formato.
Qualcuno sa indicarmi una soluzione? Che fomato deve essere lo sfondo? Qual'e' la migliore via per applicarlo?
Allego un link ad un sito a cui mi sto ispirando. L'intento e' di realizzare un risultato molto simile a questo: http://www.hakawati.co.uk/
Grazie infinite, Michelangelo.
Postato il
... quel link da parte mia(!) è troppo pesante, almeno per tempi e risultati su questo vecchio PC che se sto usando adesso e non lo prenderei in considerazione...
Elenco immagini ed effetti parallasse accoppiati...(*)...
... non ho capito della [cornice (png)] e del perchè PNG(!)...
... comunque devi conoscere bene il programma, consultando anche la Guida...
... puoi ottenere sfondi animati in stile delle righe |
... io non avendo attualmente nè il PC e nè il programma, anche se ti ho già fornito le indicazioni, ti conviene sicuramente attendere il parere degli Esperti...
...................................
...(*)... per come la vedo io, relativamente allo sfondo animato e fisso, potrebbe essere più flessibile, semplice e veloce integrando i miei metodi EXTRA, ma occorrerebbe avere già un bagaglio appresso, e magari più in là se ne potrebbe parlare...
.
Autore
Grazie tante per la risposta,
Si quel sito e' pesante perche' e' pieno di contenuti foto/video. L'ho preso in considerazione solo per ispirarmi ad alcuni aspetti grafici che mi piacciono molto ed aggiungono un valore narrativo al sito che vorrei realizzare.
Ho usato il termine cornice, per richiamare l'idea del quadro, del dipinto. Perche' mi piacerebbe che l'intero sito fosse racchiuso dentro una cornice personalizzata fissa ed al suo interno ci sono tutti i contenuti e le varie pagine del sito. Avevo pensato al PNG come formato perche' ha il supporto alla trasparenza ma chiedo consigli anche in merito.
Il programma sto imparando a conoscerlo, ho consultato la guida prima di scrivervi, ho provato varie soluzioni ma con risultati sempre parziali.
Grazie ancora, allego anche uno screenshot di esempio,
Michelangelo
Una cornice trasparente la puoi ottenere, in tutte le risoluzioni, solo con i @media e css perchè gli sfondi di WS non sono responsive.
Mentre l'esempio che hai postato (esempio.jpg) lo puoi ottenere anche con WS, basta lavorare sugli sfondi e sui margini al passo 2 modello--->struttura inserendo immagini adeguate ad ogni breakpoint
... ok sul PNG, e forse ho capito cosa intendi...
... 
... il quel link la cornice laterale è realizzata con dei DIV_CUSTOM, superflui se si sanno usare le funzioni del programma sui margini, bordi e contenuti; ...invece i due apici grafici, sì sono in PNG ed adatti allo scopo (potrebbero anche essere realizzati in SVG), questi:
http://www.hakawati.co.uk/images/quotemark_blk_rear170x226.png
http://www.hakawati.co.uk/images/quotemark_blk_frontpng170x226.png
... questi simboli o simili li puoi inserire in HEDER e FOOTER...
.
ciao
.
Autore
Grazie infinite ad entrambi,
Anchio sono convito che il programma ha le funzioni necessarie per realizzare questo "effetto cornice".
Ho creato una cornice di prova in png ed ho lavorato come sugeriva Patrizia sugli sfondi nel menu struttura del modello. A questo punto ho impostato lo sfondo della pagina con disposizione adattata alla finestra solo che in anteprima non ho il risultato aspettato... dove sbaglio?
Allengo screenshot di esempio del mio progetto.
Grazie ancora, Michelangelo.
... da parte mia posso solo valutare LINK di esempi online, ...ma sei in buone mani...
Il primo screenshot mostra che stai lavorando sul primo breakpoint mentre il secondo screenshot mostra l'anteprima del secondo break point, clicca sul monitor più grande, per avere il primo brekpoint non deve essere evidenziato.
Autore
Grazie a KolAsim per l'incoragiamento e grazie a Patrizia per il suggerimento ma nulla, il risultato non cambia...
Strano, comunque se puoi posta un link.
Ma l'immagine di sfondo cosa sarebbe ? Perchè non riesco a capire ! Puoi postare l'immagine che metti nello sfondo della pagina ?
ma intendi la cornice ?
perchè nel titolo parli anche di sfondo... e poi dici che lo hai fatto in png...
Se intendi la cornice fissa con le due "virgolette" su quel sito che hai linkato... ... non è un'immagine unica PNG ma è stato applicato un border con i CSS ed aggiunte le due immagini che ti ha già linkato KolAsim dello stesso colore dl bordo ...
Io l'ho ripreso qui :
http://pcuty.altervista.org/dina/gfs.html
Se tu invece vuoi mettere una tua immagine elaborata (quindi non ottenibile con codici css) a mo' di cornice fissa in quel modo ... tieni conto che verrà visualizzata su dispositivi dalle risoluzioni e diagonali schermo più diverse... quindi si deformerà...
se non ho capito nulla ignora il mio messaggio...
Autore
Grazie tante Claudio,
Hai capito benissimo, l'esempio che hai fatto e' proprio quello che vorrei realizare!
Riusciresti a spiegarmi la procedura?
Te ne sarei infinitamente grato,
Michelangelo
Se guardi il codice nella pagina vedrai la parte per creare la cornice grigia
e poi a parte il codice che fa apparire le due immagini...
Però ripeto , a meno che non vuoi fare la stessa cosa identica... non potrai usarlo...
Vai su quella pagina e premi CONTROL U
te l'ho messo commentato ... PER MICHELANGELO con specificato dove va messo...
le immagini delle virgolette le ho lasciate linkate al sito originale... ma è giusto per provare...
Autore
Grazie tante Claudio, sono riuscito a vedere ed impostare il tuo codice, funziona perfettamente!
Si come ben dici non vorrei fare la stessa cosa identica...
se volessi cambiare quelli che chiami DUE OGGETTI FISSI PER MICHELANGELO DOPO APERTURA TAG BODY con oltri oggetti fissi come dovrei fare? Ho provato a cambiare il percorso dell`immagine nella stringa src con un percorso offline di un altra immagine png che ho sul pc ma non si carica... devo perforza inserire un URL presente sul web?
Se volessi creare una cornice personalizzata su photoshop c'e' un modo per impostarla, tramite codice, in modo fisso come hai fatto tu in questo esempio? http://pcuty.altervista.org/dina/gfs.html
Scusa tanto e grazie per la pazienza ma sono davvero poco pratico... Risolvendo questo elemento del sito poi grazie al software il resto dovrebbe venirmi piu in discesa, grazie ancora!
le prove vanno fatte online...
le immagini devono essere sull'host , o le metti tramite ftp oppure allegandole al progetto nella sezione apposita... e quindi poi dovrai dare l'url dell'immagine online...
Se volessi creare una cornice personalizzata su photoshop c'e' un modo per impostarla, tramite codice, in modo fisso come hai fatto tu ..
come già detto la vedo dura...
tieni conto che un conto sono quelle 2 immagini messe negli angoli e le 4 cornici larghe pochi pixel ... un conto è un'immagine col disegno di una cornice ... che comunque per quanto trasparente al centro è pur sempre una immagine sopra al resto della pagina... e quindi ti blocca ciò che c'è sotto...
ma magari mi sbaglio...
e si può fare in altri modi...
metti su internet la tua immagine e posta il link...
Autore
Grazie mille a tutti,
grazie in particolare a Claudio per il codice che mi hai suggerito, sono riuscito a fare la cornice. Anche gli oggetti caricandoli online funzionavano benissimo, grazie ancora.
In questi giorni ho lavorato ai contenuti ed alla grafica del sito ed ho appena caricato una prima versione online.
Questo é il link: http://www.r4real.org/
La cornice peró nella versione mobile del sito é un pó invasiva e in alcune parti si sovrappone al testo... c'é un modo di mantenerla solo nella versione desktop ed invece nella versione mobile lasciare solo la parte alta?
Inoltre il testo nella versione mobile ha una dimensione di font troppo grande e si adatta male... altri post suggerivano di utilizzare l'oggetto titolo peró nel mio caso la cosa é infattibile perché ho inserito elementi grafici e stili diversi, comandi che non sono presenti con l'oggetto testo...
Ho valutato e vorrei percorrere l'idea di fare un progetto diverso per la versione mobile ma con la versione EVO nella pagina d'ingresso non ho l'opzione: Rileva automaticamente la risoluzione.
Qualcuno ha delle soluzioni in merito?
Grazie infinite,
Michelangelo.
umm... hai fatto un po' di casino con i codici che ti avevo dato ... copiando anche parti non necessarie...
Se guardi il tuo codice vedrai delle parti in rosso...
e
Cancella le parti che vedi in rosso.
E si, si può modificare un po' quei codici con delle media query per avere misure diverse.
Per il font ti consiglio di aprire un altro post. In modo da non mischiare gli argomenti...
Se ho tempo ti modifico il codice... , ma non te lo assicuro... ho poco tempo in questi giorni...
Autore
Grazie tante Claudio,
ho cancellato le parti in rosso come da te suggerito e sto ricaricando il sito online. Sono contento di sapere che il problema della cornice su sito versione mobile e' risolvibile. Non preoccuparti, resto in attesa nel frattempo mi documento meglio in merito alle media query ed al problema del font.
Grazie davvero!
se non ho scritto una stupidata questo :
<style>
#top, #bottom, #left, #right {
background: #080309;
position: fixed;
}
#left {
top: 0; bottom: 0; left: 0;
width: 27px;
z-index:1000;
}
#right { right: 0; top: 0; bottom: 0;
width: 27px;
z-index:1000;}
#top {
left: 0; right: 0; top: 0;
height:77px;
z-index:1000;
}
#bottom {
left: 0; right: 0; bottom: 0;
height: 27px;
z-index:1000;
}
</style>
diventa così:
<style>
#top, #bottom, #left, #right {
background: #080309;
position: fixed;
}
#left {
top: 0; bottom: 0; left: 0;
width: 27px;
z-index:1000;
}
#right { right: 0; top: 0; bottom: 0;
width: 27px;
z-index:1000;}
#top {
left: 0; right: 0; top: 0;
height:77px;
z-index:1000;
}
#bottom {
left: 0; right: 0; bottom: 0;
height: 27px;
z-index:1000;
}
@media only screen and (max-width: 480px) {
#left {
top: 0; bottom: 0; left: 0;
width: 27px;
z-index:1000;
}
#right { right: 0; top: 0; bottom: 0;
width: 27px;
z-index:1000;}
#top {
left: 0; right: 0; top: 0;
height:77px;
z-index:1000;
}
#bottom {
left: 0; right: 0; bottom: 0;
height: 27px;
z-index:1000;
}}
</style>
nella seconda parte sotto l'istruzione media query modifica i px come ti servono per lo smartphone
Autore
Grazie infinite Claudio, funziona tutto perfettamente!
Ispirandomi al tuo codice ho anche aggiunto la visualizzazione da 720 a 480 ed a rendere responsive anche la scritta R4REAL. Ho rimesso tutto online http://www.r4real.org/
Grazie a tutti, penso che questo topic si possa chiudere perché siamo riusciti nell'intento di fare una cornice responsive con eventuali oggetti responsive!
...figurati...
si ho visto ... ottimo.
Buon lavoro !
alla prossima