Effetto Zoom per testo e immagini con il CSS3

In questo sito ho già presentato diversi effetti da applicare, soprattutto alle immagini, quando ci si passa sopra con il cursore. Ricordo tra gli altri la Descrizione della foto che appare al passaggio del cursore, gli effetti hover per immagini ruotanti e 10 effetti speciali al passaggio del mouse. 

Queste trasformazioni vengono solitamente innescate quando si passa sopra all'oggetto HTML con il mouse. Questa tipologia di effetti viene chiamata Hover e viene attivata con il linguaggio CSS3 mediante delle trasformazioni. In sostanza viene indicato l'aspetto iniziale e quello finale dell'oggetto HTML al passaggio del cursore. Si imposta la durata della trasformazione, ovvero il tempo che deve intercorrere per passare dalla situazione iniziale a quella finale. Quando il cursore lascia l'oggetto HTML viene ripristinato l'aspetto iniziale.

Un'altra interessante applicazione del CSS3 è quella con cui ho realizzato i pulsanti animati di Demo e di Download. In questo breve post voglio mostrare come si possa realizzare un semplicissimo effetto di zoom al passaggio del mouse, da utilizzare non solo per le immagini, ma anche per il testo. Potrebbe essere applicato a un avviso particolarmente importante, a una foto, o anche a una piccola galleria di immagini, per evidenziare dei contenuti con un tocco di professionalità.

5 effetti speciali per immagini con il CSS3

In un post di qualche settimana fa abbiamo visto una personalizzazione delle immagini con il CSS3 con un effetto per zoomare e per mostrare la descrizione al passaggio del cursore.

In questo articolo vedremo altri effetti speciali hover per le foto, ovvero che si attivano al passaggio del mouse. Gli effetti creati con il CSS sono da preferire a quelli che si hanno con il javascript, perché non appesantiscono la velocità di caricamento della pagina.

Gli utenti di Blogger che volessero utilizzare questi codici più volte, possono incollare la prima parte del codice, senza i tag <style>,  nel Tema per poi inserire solo la seconda parte dell'HTML nei post, riprendendo la classe dell'effetto desiderato. Nello specifico tali utenti possono incollare la prima parte del codice  senza i tag <style> e </style>, subito sopra alla riga ]]></b:skin> per poi salvare il Tema.

Sottolineatura animata in un testo con il CSS3

L'introduzione del linguaggio CSS3 ha significato per gli webmaster la possibilità di aggiungere effetti animati, senza bisogno di usare il javascript, che appesantisce sensibilmente la pagina.

Per esempio abbiamo già visto come con il CSS3 si possano creare dei pulsanti che si animano al passaggio del cursore. Sempre con il CSS3 abbiamo anche creato un codice per mostrare testo e immagini lampeggianti.

Per le animazioni si utilizzano i tag transition e transform e si impostano il punto di partenza e quello di arrivo della animazione, oltre alla durata della stessa.

Le animazioni con il CSS3 sono solitamente attivate con gli eventi del mouse, soprattutto quando il cursore passa sopra a un oggetto HTML, questo modifica il suo aspetto secondo le regole che sono state impostate. Infatti le animazioni con il CSS3 sono spesso associate agli effetti hover ovvero alle trasformazioni al passaggio del mouse.

Creare elenchi personalizzati su più colonne

Chi scrive nel web si trova spesso nella esigenza di dover inserire degli elenchi nella pagina che sta editando. Gli elenchi possono essere aggiunti direttamente tramite pulsanti degli editor, perché sono universalmente supportati.

Solitamente l'utente ha a disposizione due bottoni, uno per gli elenchi puntati e uno per quelli numerati. I primi aggiungeranno i vari elementi preceduti da un puntino mentre i secondi ne mostreranno il numero di ordine.

Gli elenchi puntati inizieranno con il tag <ul> mentre quelli numerati con il tag <ol>. Per aggiungere i vari elementi si va su Invio nella tastiera. Al posto dei numeri, si possono mostrare le lettere latine, quelle greche e si possono creare elenchi nidificati con una o più voci dell'elenco, che a loro volta contengono un altro elenco.

Come per esempio nell'elenco dei capitoli dell'indice di un ebook a loro volta suddivisi nell'elenco delle sezioni degli stessi capitoli. Gli elenchi così creati possono anche essere personalizzati nell'aspetto impostandone il colore dello sfondo, il colore del testo, la famiglia di font, la dimensione dei caratteri, ecc.

Negli editor HTML non esiste la possibilità di creare elenchi su più colonne che invece è utile per risparmiare spazio. Poniamo che gli elementi di un elenco siano molto brevi e formati da una sola parola di poche lettere. In compenso siano invece parecchi gli elementi da mettere in elenco. Con gli editor classici si finisce per mostrare un elenco molto lungo con notevole spreco di spazio. Sarebbe molto più pratico inserire gli elenchi in colonne.

Pseudo-classi e pseudo-elementi nel CSS3

Le pseudo-classi sono usate nel linguaggio CSS fin dalla sua prima stesura CSS1 e rappresentano un grosso aiuto per gli web designer che devono progettare pagine web o interi siti.

Le pseudo-classi differiscono dalle classi propriamente dette perché vengono create virtualmente dal browser quando si verificano determinati eventi. La più conosciuta è :hover che è usata per modificare l'aspetto di un oggetto al passaggio del cursore, per esempio un link con il tag a:hover. Chi avesse delle difficoltà a seguire questo post può scaricare il mio ebook gratuito Guida all'HTML e al CSS per avere le nozioni propedeutiche su questi linguaggi di markup.

La sintassi per la dichiarazione di una pseudo-classe è la seguente

selettore:pseudo-classe {dichiarazione;}

I nomi delle pseudo-classi sono preceduti dai due punti (:). Una pseudo-classe segue senza spazi il selettore e può essere associata a tutte le tipologie di selettore.. Alcuni esempi possono essere quelli mostrati qui di seguito:

4 siti per codici CSS di effetti di animazione

Il passaggio dal linguaggio CSS a quello CSS3 ha portato grandi benefici nel web. Le animazioni, che in precedenza era inserite nelle pagine con il javascript, adesso possono anche essere aggiunte con i CSS che non rallentano il caricamento del sito e che non hanno bisogno di librerie esterne.

In questo blog abbiamo già visto come con il CSS3 si possano creare animazioni nei menù, nei pulsanti animati, nelle gallerie responsive di foto e nel testo e immagini lampeggianti. Ci sono però dei siti specializzati in cui reperire codici per realizzare animazioni ancora più complesse e gratificanti.

L'utilizzo del CSS è importante anche perché il suo codice può essere inserito nel Tema del sito, in modo da rendere omogenei tutti gli effetti. Modificando il CSS nel Tema, automaticamente si modificheranno anche tutti gli effetti inseriti nelle pagine che abbiano ripreso quel dato CSS.

INDICE DEL POST

1. CSS Trick
2. Code My UI
3. Little Snippets
4. Bootsnipp Tag

Testo e immagini lampeggianti con CSS o javascript

Con l'ausilio di programmi di grafica come Photoshop o Gimp si possono creare delle immagini animate in formato GIF allo scopo per esempio di creare dei pulsanti lampeggianti.

Nel linguaggio HTML esiste pure il tag blink per creare testo lampeggiante, un tag che però è stato deprecato da diverso tempo. In questo post vedremo come creare del testo e delle immagini lampeggianti tramite il linguaggio CSS3 e con il javascript.

La scelta del CSS3 è migliore di quella del javascript, perché non rallenta in modo significativo l'apertura della pagina da parte dei navigatori. Questa personalizzazione può essere interessante per evidenziare un particolare paragrafo e per incentivare i click su un elemento. Per maggiore chiarezza dividerò il post in 4 sezioni: testo lampeggiante con i CSS, immagini lampeggianti con i CSS, testo lampeggiante con i javascript e testo lampeggiante con i javascript. Inserirò anche dei collegamenti e del testo formattato di esempio che naturalmente possono essere adattati alle singole esigenze o sostituiti da testo piano. Il tag target="_blank" serve unicamente per far aprire i collegamenti in un'altra scheda e può essere tralasciato.

Come centrare un oggetto HTML

Chi possiede un sito o un blog, si trova spesso nella necessità di inserire in modo simmetrico, nel layout della pagina o in un articolo, un particolare oggetto HTML che può essere un testo, una immagine, un video, un iframe o una tabella. In verità quando si parla di centrare un oggetto dovremmo specificare meglio se si tratta di centrarlo orizzontalmente o verticalmente.

Inserire un oggetto centrato verticalmente ha significato solo se si inserisce dentro un contenitore, lasciando lo stesso spazio in alto e in basso. Centrare un oggetto orizzontalmente ha invece sempre senso e consiste nel lasciare lo stesso spazio alla sua sinistra e alla sua destra.

Chi non ha neppure una infarinatura del linguaggio HTML, può scaricare gratuitamente il mio ebook Guida all'HTML e al CSS, in cui sono spiegati i fondamenti di questi due linguaggi di markup. Per maggiore chiarezza ho diviso la trattazione del tema in più sezioni e mostrerò gli screenshot dei codici utilizzati incollati nell'Editor online Real Time HTML  che mostra il rendering del codice nella parte bassa della pagina.

Come mostrare bordi diversi in uno o più lati di un elemento HTML

I bordi sono un elemento grafico presente in molte pagine web e vengono inseriti con dei tag ben codificati. Si possono aggiungere bordi a un contenitore come a una immagine e, con qualche accortezza, anche ai player dei video.

Riepilogo brevemente quali sono le regole per aggiungere un bordo con un CSS inline, per esempio in una immagine. Si usa un codice come questo <img style="border: dotted #f00; 4px;" src="URL_IMMAGINE"/>, dove i tag colorati di rosso sono quelli che determinano l'aspetto del bordo.

Il primo attributo (dotted) indica che il bordo sarà punteggiato, il secondo (#f00) ne determina il colore con il suo codice e infine il terzo (4px) ne configura lo spessore.

Creare sfondi con gradiente e a strisce orizzontali o verticali con i CSS

Oggi ci divertiremo un po' con i CSS per creare degli sfondi colorati non omogenei, in cui inserire del testo o delle immagini da evidenziare in un modo originale. Per esempio si possono inserire i testi di alcuni articoli della Costituzione Italiana in uno sfondo con i classici colori tradizionali verde, bianco e blu.

Partiremo dalla situazione più semplice per poi mostrare delle personalizzazioni sempre più sofisticate. Chi non avesse sufficiente dimestichezza con i linguaggi HTML e CSS, può scaricarsi gratis il mio ebook dal titolo Guida all'HTML e al CSS, in cui troverà informazioni propedeutiche ma sufficienti per avvinarsi a questi linguaggi di markup.

Nel seguito del post vedremo come creare un rettangolo in cui avere uno sfondo di un solo colore o con una sfumatura di colore ovvero con quello che si chiama Gradiente. All'interno del rettangolo potremo poi inserire del testo, anche formattato, immagini o altri oggetti HTML.

Come posizionare e sovrapporre gli elementi di una pagina web

Quando si inserisce in una pagina web un elemento, questo va a posizionarsi nel normale flusso del documento. In questo post vedremo come modificare queste regole di base quando sia necessario.

Per esempio quando si apre un menù, è necessario che vada a sovrapporsi agli elementi sottostanti, in modo da poter cliccare sulle voci, e non a esserne nascosto. Un'altra situazione molto comune è quella che si verifica quando c'è da posizionare un elemento, non in funzione della intera pagina web, ma in relazione a un suo contenitore.

La posizione di un elemento all'interno di una pagina web è determinata dalla proprietà position e può essere applicata generalmente a tutti gli oggetti, dai contenitori <div> alle immagini o ai video.

I valori che può assumere il tag position sono quattro: static, fixed, absolute e relative. Il valore static solitamente non si utilizza perché, con questa scelta, l'elemento assume la posizione di default, cioè la stessa che occuperebbe senza il tag position:static;.

Effetti speciali per le immagini - Parte prima

Con questo post inauguro una rassegna di alcuni effetti speciali piuttosto semplici da applicare alle foto e che possono essere implementati in tutte le tipologie delle pagine web. Non so ancora se i post dedicati a questo argomento saranno solo due o di più; in ogni caso alla fine degli articoli metterò i link per consultare gli altri post che ho pubblicato sullo stesso tema.

In questo primo articolo mi occuperò solo degli effetti creati con l'ausilio del CSS3 mentre nei post successivi mostrerò anche effetti generati da javascript, sempre molto semplici, e che saranno attivati non solo dal passaggio del mouse sulle foto ma anche da eventi click o doppio click.

I codici di questi effetti sono autosufficienti e possono essere incollati così come sono in qualsiasi pagina web. La prima parte del codice è il CSS compreso tra i due tag <style> e </style> mentre la seconda non è altro che il codice HTML che riprende la classe definita all'interno dei tag style.

Come mostrare le citazioni con un effetto speciale

Riprendo brevemente il tema degli stili personalizzati, per mostrare come si possano pubblicare citazioni con effetti speciali. La creazione di CSS personali è importante in un sito per renderlo unico anche come aspetto.

Si possono creare stili personali per pubblicare del codice oppure per mettere in evidenza un paragrafo. Lo si può fare in una singola pagina oppure si può inserire il CSS nel Tema per richiamarlo con il nome della classe.

Un esempio di personalizzazione degli stili che uso spesso anche io è quello delle Intestazioni. Si possono però creare CSS personali pure per le tabelle e per gli elenchi.

Un CSS presente di default in tutti i Temi di Blogger è quello della citazione che si può inserire tramite il tag <blockquote>. Si può personalizzare pure questo aspetto del modello, anche se non lo consiglio, perché il tag <blockquote> ha pure altre funzioni, almeno nei vecchi temi di Blogger.

Come creare uno stile personalizzato con i CSS

Le piattaforme utilizzate per la creazione di siti come Blogger e Wordpress, offrono diversi strumenti per personalizzare alcuni aspetti dei Temi in generale e, in particolare, per quello che concerne il corpo della pagina, come il colore del testo, le dimensioni dei caratteri, la famiglia di font, il colore dei link.

Nella realizzazione di un articolo, potrebbero però sussistere delle esigenze particolari per evidenziare in modo diverso un dato paragrafo, che si ripete in più articoli. In questo sito per esempio ho creato uno stile per il codice, uno stile per le intestazioni, uno stile per un elenco e uno stile per una tabella responsive.  Ricordo anche un interessante post che ho dedicato alla personalizzazione dello stile delle citazioni nei blog letterari.

In questo articolo vedremo come creare uno stile personalizzato per dei paragrafi di testo che vogliamo evidenziare in modo efficace e riprenderò il tema della creazione di uno stile per pubblicare codici di linguaggi di programmazione in modo da renderli immediatamente riconoscibili rispetto al resto dei contenuti.

6 tool per testare online i codici HTML, CSS e Javascript

Chi si occupa di pubblicazione sul web ha spesso a che fare con i linguaggi di programmazione di cui deve testare i codici prima di inserirli in un post, in un Tema o in una pagina web.

I linguaggi per il web sono diversi e vanno dal Javascript al Python ma il linguaggio che li riunisce tutti è quello denominato HTML giunto alla versione HTML5. Tale linguaggio è quello che viene riconosciuto dai browser e che permette loro di effettuare il rendering del codice di una pagina web per mostrarne il layout risultante.

Per rispondere alla domanda su come verrà mostrato dal browser un determinato codice esistono gli Editor professionali che servono appunto per creare le pagine web ma, per le piccole esigenze di un webmaster, sono eccessivi e poco pratici. Ci sono infatti molti Editor HTML online che ci mostrano in tempo reale come verrà visualizzato un oggetto HTML incollandone il relativo codice in una sezione dell'Editor.

Come creare una tabella Responsive con HTML e CSS.

Le tabelle sono un oggetto HTML molto usato nelle pagine web. Sono utili per mostrare schede di tecnologia come informazioni su film e serie TV. Vengono inoltre utilizzate per comparazioni di ogni genere e sono generalmente presenti in molti siti web compresi i blog.

Il codice HTML per generare una tabella è piuttosto semplice e ha solo bisogno di alcuni parametri fondamentali che sono il numero di righe, il numero di colonne, la distanza tra le celle, la distanza del contenuto dal bordo della cella e la larghezza della tabella.

Ci possono poi essere tag opzionali per formattare i contenuti all'interno delle celle, per inserire uno sfondo e per mostrare la riga dell'intestazione in modo diverso da quelle della tabella vera e propria.

Se nella tabella sono presenti i valori assoluti della sua larghezza questi, se sono stati calcolati per la versione desktop, mostreranno la tabella tagliata nella versione mobile in caso di larghezza superiore a quella della risoluzione del dispositivo. In questo post vedremo come creare una tabelle responsive passo dopo passo che sarà visualizzata nello stesso modo da desktop e da mobile.

HTLML DI UNA TABELLA

I tag essenziali di una tabella sono <table> per iniziare la tabella, <tr> per l'inizio della riga, <td> per l'inizio della cella insieme alle loro chiusure </table>, </tr> e </td>. I contenuti delle celle della tabella sotto forma di codice HTML vanno inseriti tra i vari tag <td> e </td>. Viene anche usato il tag <tbody> che indica il corpo della tabella. I tag <thead> e <tfoot> non incidono nel layout della tabella e servono quando ci sia da aggiungere una parte alta, per esempio per la descrizione e una parte bassa, per esempio per delle considerazioni.

Come creare una tabella online con HTML e CSS.

Gli Editor WYSIWYG ovvero What You See Is What You Get (ottieni quanto vedi in italiano) che sono disponibili per Blogger e per Wordpress non hanno dei bottoni per aggiungere una tabella ai post. La soluzione di usare Open Live Writer non è più facilmente praticabile perché non viene più mostrata l'anteprima della tabella in tale Editor rendendo difficile la sua realizzazione.

Molte tipologie di siti hanno spesso l'esigenza di pubblicare tabelle. Sono utili per schede tecniche di prodotti tecnologici ma anche per articoli di genere diversissimo. Una soluzione potrebbe essere quella di usare un Editor CSS gratuito come BlueGriffon che però dovrebbe essere installato nel computer.

Un'alternativa interessante è quella di usare strumenti online specifici per creare tabelle. In sostanza si impostano i parametri come il numero di righe, il numero di colonne, lo spazio tra le celle, il padding all'interno delle celle, la presenza o meno del bordo e il suo stile, la larghezza in pixel o in percentuale. Si digita il contenuto per poi ottenere il codice HTML da incollare nella pagina web in cui inserire la tabella.

10 effetti hover per le immagini al passaggio del mouse.

Il passaggio del mouse su una immagine è un evento che può essere sfruttato per modificare il suo aspetto. Con il CSS si può usare la pseudo-classe a:hover per modificare il colore del collegamento quando quest'ultimo viene puntato con il mouse.

Si può per esempio utilizzare questa riga di codice a:hover {color: #FDBCB7;} per mostrare il link con il colore determinato dal codice inserito. Si può seguire questa falsariga anche per creare delle regole per intervenire sull'aspetto delle immagini quando ci si passa sopra con il mouse.

In condizioni normali quando il mouse passa sopra a un foto viene mostrato solo un tooltip con il testo che è stato inserito nel tag title. Gli effetti inseriti con l'evento onmouseover o mousevover vale a dire con il passaggio del mouse sulla immagine vengono definiti solitamente effetti hover.

Come creare un elenco con stile personalizzato.

Il linguaggio HTML ha dei tag specifici per creare gli elenchi numerati e puntati. I primi si realizzano con il tag <ol> seguito dai tag <li> per ciascun elemento dell'elenco con i rispettivi tag di chiusura </ol> e </li>.

Gli elenchi puntati utilizzano sempre i tag <li> e </li> per i singoli elementi mentre il tag iniziale e quello finale sono rispettivamente <ul> e <ul>. A questa struttura di base possono essere aggiunti altri tag per rendere gli elenchi esteticamente più originali.

Si possono inserire dei marcatori diversi dai punti e dai numeri come per esempio i cerchietti, i quadratini, le cifre romane o le lettere greche.

Si possono anche creare elenchi nidificati cioè inserire un elenco in un altro elenco. Per modificare lo stile di un elenco si aggiunge un attributo nel primo tag <ol> o <ul>. Per esempio nel tag <ol> si aggiunge style="list-style:upper-alpha;" in questo modo <ol style="list-style:upper-alpha;"> per ottenere questo risultato

Effetto opacità o trasparenza al passaggio del mouse sopra le immagini.

Nei post precedenti abbiamo visto come creare un effetto hover per lo zoom e un effetto hover per passare dal bianco e nero ai colori e viceversa. Come preannunciato vado a illustrare un effetto hover anche per la trasparenza o opacità.

Ricordo che con l'utilizzo del javascript e di jQuery si possono rendere trasparenti o opache tutte le immagini di un sito. In questo post mi occuperò di mostrare solo gli effetti dovuti agli eventi mouseover e mouseout cioè a quegli eventi determinati dal cursore che passa sopra a una foto o dallo stesso che la lascia.

In sostanza si può mostrare una foto trasparente che diventa opaca al passaggio del mouse e una foto opaca che invece diventa trasparente. I maggiori browser sono in grado di leggere la trasparenza di un colore o di una foto. È stata introdotta anche la rappresentazione dei colori RGBA con cui inserire una trasparenza nel codice del colore tramite il canale Alpha.