Iole: fonts

Aggiungere l'ombreggiatura al testo del blog

Ieri visitando il blog di D-Chan mi sono accorta che il titolo del suo blog aveva l'ombreggiatura.

Mi sono detto chissà che diavoleria ci sarà dietro per mostrare il testo con l'effetto ombra.

Quando in un blog o sito noto qualcosa di carino, la prima cosa che faccio è dare un'occhiata al codice html della pagina e ho scoperto che per creare l'effetto ombra basta solo modificare il css del template aggiungendo la proprietà text-shadow.

Purtroppo l'effetto ombra non viene visualizzato su Internet Explorer, quindi se avete aperto il mio blog con il browser di casa Microsoft vedrete il testo normale, per vedere l'ombreggiatura vi consiglio di usare Firefox, Chrome o Opera.

Se utilizzate altri browser, fatemi sapere se l'ombreggiatura si vede.

Dopo questa breve introduzione, vediamo la sintassi per realizzare questo effetto:

text-shadow: #9B0021 2px 2px 3px;

dove #9B0021 rappresenta il colore dell'ombra, 2px 2px sta ad indicare di quanti pixel deve essere spostata l'ombra verso destra e verso il basso e infine 3px indica il fattore di sfocatura

Se volete applicare questo effetto ad esempio al titolo del blog, al titolo dei post, alle etichette nella sidebar o a qualsiasi altra porzione di testo del blog basta aggiungere la proprietà text-shadow nella classe interessata.

Mi spiego meglio, se volete personalizzare i titoli dei post basta modificare questa parte di codice:

h1 a {
color: #F00036;
}

aggiungendo text-shadow: #9B0021 2px 2px 3px;

h1 a {
color: #F00036;
text-shadow: #9B0021 2px 2px 3px;
}

(ovviamente le classi possono cambiare da template a template)

una volta salvate le modifiche vedrete i titoli dei post ombreggiati, con Internet Explorer invece li vedrete senza ombreggiatura.

Ecco alcuni esempi:

Benvenuti sul Blog!!!

Grazie D-Chan

Ciao ^_^

Come al solito, resto a disposizione per ogni dubbio e chiarimento.

Come "importare" nuovi fonts su Blogger

Scrivo questo post per rispondere ad una domanda che mi è stata posta prima da Alberto e poi anche da Giugiu':

si possono importare nuovi fonts su blogger?

In Blogger in effetti abbiamo a disposizione soltanto 8 font che possiamo scegliere cliccando sul menu a tendina

Vediamo ora come importare nuovi fonts su Blogger ossia come utilizzare altri fonts oltre agli 8 disponibili.

Innanzitutto dalla vostra bacheca cliccate sul pulsante NUOVO POST e posizionatevi nel tab Scrivi:

e provate a scrivere una frase o una parola, selezionatela e scegliete il carattere tra quelli disponibili; io ad esempio ho scritto Benvenuti sul mio blog! e ho selezionato il font Courier e questo è il risultato:

Benvenuti sul mio blog!

Ora se cliccate sul tab Modifica Html vediamo l'html generato e quindi:

<span style="font-family:courier new;">Benvenuti sul mio blog!</span>

Se a voi interessa un font in particolare, ad esempio Comic vi basta modificare l'html in questo modo:

<span style="font-family:comic sans ms;">Benvenuti sul mio blog!</span>

e il risultato è questo:

Benvenuti sul mio blog!

Come potete vedere ciò che cambia è la font-family. Quindi possiamo scrivere i nostri post anche utilizzando font diversi da quelli messi a disposizione da blogger. Il problema è sapere il nome della font-family del font che ci interessa.

E poi c'è un altro problema: se il font che utilizziamo nel nostro blog non è installato sul computer del lettore, allora quest'ultimo visualizzerà il post con un carattere di default che non è quello che abbiamo scelto noi.