Archivio 16 Giugno 2014

Immagini in bianco e nero con i css

Stavo cercando una soluzione comoda ed intuitiva per gestire un effetto particolari sulle immagini da applicare sul sito di un cliente.

Il fine è quello di utilizzare delle immagini a colori che al caricamento della pagina appaiano in bianco e nero ed abbiano l’effetto di prendere i colori originali al passaggio del browser come nell’esempio qui sotto:

colori-di-un-sito-web

La soluzione per applicare questo effetto è quella di assegnare all’immagine una classe che chiameremo “scaladigrigi” e nel nostro foglio di stile andremo ad inserire il seguente codice:

Questo serve per impostare l’immagine in scala di grigi

img.scaladigrigi {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><fecolormatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'></fecolormatrix></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

Per ottenere la colorazione al passaggio del mouse andremo a scrivere invece

img.scaladigrigi:hover {
filter: url("data:image/svg+xml;utf8,#grayscale");
-webkit-filter: grayscale(0%);
}

WordPress: come creare uno shortcode

shortcodeMolto comodi ed intuitivi soprattutto per tenere un certo ordine all’interno della nostra pagina è l’utilizzo degli shortcode. Piccolo codice testuale che normalmente si vede nella forma: [shortcode] che viene inserito all’interno dell’editor testuale delle nostre pagine o articoli e che in base a come è configurato il codice, viene interpretato per produrre un codice html più complesso.

Un esempio molto semplice è quello di applicare per esempio un separatore all’interno della vostra pagina che si mantenga costante per tutto il sito.

Un’altro esempio è magari quello di utilizzare lo shortcode per inserire un icona personalizzata standardizzata, ma vediamo un esempio pratico:

Inserendo nel vostro editor testuale per esempio lo shortcode:

[PDF-icon]

nel vostro codice avete configurato che lo shortcode venga convertito in:

<img src=”images/pdf-icon.png” alt=”icona pdf” class=”align-left”/>

Ma vediamo come realizzare i nostri shortcode personalizzati, partendo appunta dal fine di ottenere un’icona PDF standard caricata nella cartella del vostro template.

Per prima cosa dovrete caricare l’immagine nella cartella, o in una sottocartella del vostro template.

Successivamente aprire il vostro file functions.php del vostro template ed andrete ad aggiungere il seguente codice:

add_shortcode(“nome_shortcode”, “funzione_nome_shortcode”);

function funzione_nome_shortcode( $atts ) {
return ‘<img src=”<percorso dell’immagine” alt=””/>’;
}

E se vogliamo gestire dei parametri nel nostro shortcode?

Per esempio [shortcode variabile=3] ? Ecco qui cosa dovete fare:

add_shortcode(“nome_shortcode”, “funzione_nome_shortcode”);

function funzione_nome_shortcode( $atts ) {
extract(shortcode_atts(array(
“variabile” => 0
), $atts));
return ‘<div>La variabile è impostata a ‘.$variabile.'</div>’;
}

©2021 AGANIS WEB SOFTWARE di Francesca Roccabruna P.IVA TRENTO 02183500228 - N.REA 205930 La Web Agency per la realizzazione del tuo sito web
Privacy Policy