Trasformare un testo in una immagine

[lleo]

Per iniziare, buon anno a tutti.
Poi la domanda. Quale istruzione CSS, se ce ne è una, è possibile usare per trasformare un testo in una immagine all'interno di una pagina web? O bisogna usare un video?
Grazie per ogni eventuale aiuto.

[KillerWorm]

Ciao e buon anno a te.

Senza offesa ma ti direi che la tua richiesta è della serie "poche idee e ben confuse".

In linea di massima, trasformare qualcosa (che sia testo o altro) in una immagine non è compito del CSS.

Se ti serve ottenere una immagine da usare poi nelle tue pagine web, solitamente si adoperano software di grafica.

Se invece ti serve creare un sistema per permettere ad altri utenti di salvare/scaricare, dalla tua pagina web, qualcosa come immagine, il discorso può ricadere sul markup SVG, oppure sugli oggetti Canvas di HTML5 ed eventualmente su JavaScript con cui puoi manipolare tali oggetti, o ancora su linguaggi lato server che possono elaborare e restituire il tuo qualcosa come immagine.

Se invece ti serve giusto catturare un elemento della schermata o effettuare uno screenshot, per un tuo uso personale, le alternative sono varie: usare il classico tasto stamp, usare degli strumenti appositi su alcuni browser (vedi "Cattura schermata" su FireFox), usare altre estensioni simili, ecc.

Non è chiaro cosa ti serve ottenere. Per poterti rispondere in maniera mirata dovresti spiegare meglio il contesto e per quale motivo pensi ti serva fare ciò che hai chiesto.

[lleo]

Ciao KW,
ho dimenticato di premettere che sono praticamente un neofita. Conosco l'html, pochissimo CSS e stop.
Le idee le ho ben chiare, probabilmente le ho esposte in modo non chiaro per gli esperti.
Cerco di spiegare meglio.
Fai conto che abbia una parola "TERRA" le cui lettere arrivano dai diversi lati dello schermo, sotto, sopra, destra e sinistra, o solo destra e sinistra, formando la parola al centro della pagina dopodichè la parola stessa si sposta in un angolo della pagina trasformandosi in un logo, fai conto una immagine stilizzata della Terra.
Un effetto che vedrebbe chiunque si collegasse alla pagina web. Niente server, solo pagina web.
Non so se sia chiaro, ho cercato di spiegarlo meglio che ho potuto.

[KillerWorm]

Ora è più chiaro, avevo capito male io, quel "trasformare" lo avevo inteso come "convertire".

Con CSS (assieme anche al markup SVG) puoi sicuramente creare delle animazioni più o meno complesse ma, se si tratta di realizzarle manualmente da zero, non esiste una istruzione magica che ti permette di farlo in modo semplice, è chiaro che si deve avere un'adeguata conoscenza del linguaggio.

In alternativa esistono vari software e altrettanti servizi online che permettono di realizzare, in modo relativamente semplice, questo tipo di elaborati da applicare poi nelle proprie pagine web. Personalmente non ne uso e non saprei nemmeno cosa consigliare, ma magari puoi fare qualche ricerca del tipo "creazione animazioni siti web" o qualcosa del genere.

Magari qualche altro utente saprebbe indirizzarti meglio.


Note a margine:

Sia chiaro che non è mia intenzione forviarti dall'obiettivo che ti sei prefissato, voglio però esprimere un mio parere personale sull'uso di animazioni del genere; ciò che hai descritto nell'ultimo post mi fa tornare alla mente i vecchi siti Flash, roba di 10, 15 e anche 20 anni fa, dove questo tipo di animazioni con effetti speciali erano all'ordine del giorno. Oggi, sebbene si continuino ad usare particolari animazioni per rendere accattivanti i propri siti, sono comunque piuttosto ridimensionate a favore di una migliore navigabilità dei siti stessi.

Ora non ho idea di cosa tratti il tuo sito, del contesto in cui si colloca, del tuo target di utenza, ma il mio consiglio da vecchio web designer è comunque quello di valutare sempre, anche documentandoti con ricerche sul web, i pro e i contro di ogni elemento che vai a ficcare dentro le tue pagine web.

Qui un link a riguardo che potrebbe risultare interessante: Animazioni per i siti web: vantaggi e svantaggi


Buon proseguimento

[lleo]

Grazie mille per le info, KW.
Avevo visto un video sul tubo sulla trasformazione, meglio dire l'apparizione di un testo usando SVG e CSS con tanto di script.
E' simile a quello che vorrei fare, tranne il fatto che la scritta è già formata, non ci sono le lettere che arrivano da lati diversi. Potrebbe anche andare bene, dovrei solo capire quali istruzioni aggiungere per farla trasformare nel logo e spostarla.
Nel mio sito, che tratta di fotografia, sarebbe l'unica animazione. Voglio tenerlo leggero senza appesantirlo, mi interessa più la navigabilità del sito stesso.
Poi stavo pensando se renderlo consultabile anche da telefono, per cui credo che dovrei studiare una home diversa da usare solo per i dispositivi mobili.
Il Flash me lo ricordo, all'epoca lo usavo. Appesantiva in modo assurdo i siti ma era quasi la preistoria delle animazioni per uso web.

[KillerWorm]

Ciao, mi sembra comunque un'animazione relativamente complessa. Se hai seguito qualche tutorial e hai già del codice, potresti provare a postarlo per capire come ti si può aiutare. Se invece stai chiedendo che qualcuno faccia il lavoro al posto tuo, dovresti riaprire una discussione nella sezione apposita, Offro lavoro/collaborazione.

Poi stavo pensando se renderlo consultabile anche da telefono, per cui credo che dovrei studiare una home diversa da usare solo per i dispositivi mobili.

Al giorno d'oggi penso che il termine tecnico più adatto sia "Responsive Web Design", ma c'è un mondo dietro; eventualmente prova intanto a documentarti su questa strada.

Su html.it trovi una guida completa, se può esserti utile: Responsive Web Design, la guida

[lleo]

Eccomi, scusa per il ritardo.
L'esempio che ho visto è in questo video: https://www.youtube.com/watch?v=vJNVramny9k
Anche in questo modo andrebbe bene, manca solo lo spostarsi del testo una volta completato e il trasformarsi nel logo.
Il sito cercherò di farlo da me, anche perchè lavoro diciamo nel turismo, ergo non potrei pagare nessuno per farlo per me data la situazione.
Ho un sito che ho in parte fatto, con qualche aiuto, devo rinnovarlo e sto guardando un pò in giro per capire come dovrebbe venire.
L'unica cosa sicura è l'animazione all'inizio.
Riguardo il responsive ti ringrazio. Avevo letto da qualche parte i vari modi per creare un sito e il responsive dovrebbe essere il più usato e soprattutto la tecnica con la quale si svilupperanno i siti nel prossimo futuro.
Comunque leggerò di sicuro la guida che hai linkato.
Per ora ti ringrazio ancora (ho fatto anche rima)

[SoloWiFi]

Scusa se mi intrometto.

Un sito ben fatto, ovvero che porta guadagno ad una attività, deve essere in primis:

- Consultabile nello stesso modo e con la stessa comprensione da qualsiasi dispositivo. Tu non sai che dispositivi ci saranno domani.

- Accedere a tutti i contenuti in modo elementare e veloce.

- Massima cura nella pulizia del codice e dell'estetica.

- Massima cura all'indicizzazione

- Massima cura alla facile lettura dei testi, quindi con studio delle varie composizioni cromatiche.

Questi punti, come avrai intuito, non lasciano spazio ad esibizioni artistiche che normalmente chiamiamo fronzoli.

Non vai a vendere la tua bravura come Grafico ma il tuo prodotto.

[lleo]

Ciao Solo.
Lo so, infatti il sito che ho ora è addirittura scarno. A me interessa che la gente veda le fotografie, non artifici strani.
Tant'è che a me interessa solo l'effetto iniziale della scritta, non ce ne sono altri. Forse tranne lo sfondo che scorre, come va di moda ora.
Ma sempre qualcosa legato alle immagini.

[KillerWorm]

Ciao, mi pare un'elaborazione abbastanza complessa da realizzare per un neofita, comunque se hai del codice da postare se ne può discutere.