23 luglio 2009

47 commenti Condividi il post Facebook Twitter Google+

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.

titolo blog D-Chan

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.


Copyright © Iole - Non è consentito ripubblicare, anche solo in parte, i post di questo blog senza l'esplicito consenso dell'autrice.

47 commenti

  1. Ma dai? C'è l'ombra nel titolo del mio blog e io non lo sapevo? Mannaggia a Microsoft!!! In effetti dal computer di mio fratello la vedo (lui usa Firefox), sembra un testo in rilievo, che forte!

    Io non ho fatto nulla, c'era già nel template... ma ora che lo so ombreggerò il mondo! Anzi, no... prima devo scoprire come si fa a far vedere questa sciccheria anche ai Microsoft-users!

    RispondiElimina
  2. E per aggiungere l'ombreggiatura al titolo del blog?

    RispondiElimina
  3. @D-chan: purtroppo con Internet Explorer non si vede... ieri sera ho provato da casa anche con IE8 e non si vede.

    RispondiElimina
  4. @Den: nel tuo blog dovresti modificare questo parte di codice
    h1 {font-size:30px;}
    Prova e fammi sapere!

    RispondiElimina
  5. provato in un post e tutto ok ma cambiare il titolo dei post proprio non mi riesce, hai qualche dritta ? ciao !!

    RispondiElimina
  6. @ec.log: nel tuo template devi modificare
    .content h1 a, .content h1 a:hover {color:#ca7a1d; text-decoration:none;}

    RispondiElimina
  7. perfetto!! grazie !! come arrivo al tuo "sapere" ? hai un libro da consigliare, un sito, qualcosa ? grazie!! ciao !!

    RispondiElimina
  8. @ec.log: il mio sapere? una laurea e anni e anni di esperienza ^_^
    cmq potrebbero esserti utili queste guide

    RispondiElimina
  9. Anche con Safari di Apple l'ombreggiatura si vede!

    Non ci sono piu' parole per descrivere le 'licenze poetiche' che si prende IE nell'interpretare tag HTML e proprieta' CSS :(

    RispondiElimina
  10. Ciao Iole, io usando Microsoft-Internet Explorer l'ombreggiatura la vedo!!!Fortuna?!^_^
    Ciao Ciao :)

    RispondiElimina
  11. @docpap: purtroppo su IE molte cose non funzionano.
    @Mony: si vede??? Io ho provato anche con IE8 e non l'ho vista.

    RispondiElimina
  12. ciao Iole, ho trovato il tuo blog per caso e prima di tutto ti faccio i miei complimenti, sei un genio!!!
    Forse è stato il fato a farmi imbattere nel tuo blog, perché vedi, ho un problema che non riesco a risolvere: io e mia sorella abbiamo un blog di cucina, ma siamo due incompetenti con il pc, ci aiutano mio figlio che ha 12 anni ed è bravissimo, e mio nipote di 17 anni. Il problema è che prima ogni post aveva un suo link che potevo copiare per partecipare a raccolte o inserire come riferimento in un altro post, ora, invece, il link è stranissimo, se clicco sul titolo di una ricetta questa non mi esce e quando cerco il link questo è stranissimo...scusami ma non riesco a spiegarmi bene, forse se dai un'occhiata tu riesci a capirci qualcosa...ti prego aiutamiiiiii!!!! aspetto con ansia una tua risposta.
    a presto.
    Fiorella

    RispondiElimina
  13. @FeF: ho capito qual è il tuo problema vedendo il blog... hai fatto qualche modifica al template di recente? Mandami comunque il tuo template completo che gli do un'occhiata e ti faccio sapere.

    RispondiElimina
  14. Naturalmente anch'io volevo ombreggiare il titolo del blog, come D-chan, ma niente! piuttosto, sai casa mi piace da matti? Il tuo sfoglia pagina in alto a ds per l'iscrizione al feed! Chissà, magari in un prossimo post...
    Ciao e buona serata!

    RispondiElimina
  15. @Daniela: per l'effetto sfoglia pagina ecco il post!
    Per l'ombreggiatura devi aggiungerla dopo
    #header h1 {

    RispondiElimina
  16. Sei mitica! Ti farò sapere...

    RispondiElimina
  17. @FeF: Den mi ha suggerito che la soluzione al tuo problema è facilissima... basta andare in Blogger -> Impostazioni -> Archiviazione e selezionare Sì in "Attivare pagine di post?"

    RispondiElimina
  18. siiiiiiiiii, ha funzionato :))))
    grazie Iole, a te e al tuo amico Den, mi avete fatto un regalo emorme....grazie grazie grazie!!!!
    Bacionissi
    Fiorella

    RispondiElimina
  19. Iole, ti segnalo che il widget "Google Friends Connect" 'l'ha piantata di rompere le scatole ad explorer!

    Adesso tutto sembra funzionare bene... chissà per quanto?

    RispondiElimina
  20. Iole, passa da me quando vuoi, un bel premio ti aspetta ;-)

    RispondiElimina
  21. Iole ......ma sei terribilmente attiva.
    Quante cose vai a notare?
    Se un fenomeno.......ti invidio un pò:-)
    Lella

    RispondiElimina
  22. ciao iole,se passi da me ti voglio consegnare un premio!!!

    RispondiElimina
  23. ciao Iole, come fai ad essere così chiara nell'esposizione dei post??
    dono naturale credo,
    Però io ho un blog con settemila modifiche e di h1 a color ne ho diversi, ho provato a mettere text shadow da qualche parte ma non ho trovato alcun effetto su nulla.
    quando hai tempo potresti vedere il mio html?

    ciao di nuovo

    RispondiElimina
  24. @Tarkan: ti ringrazio per la segnalazione, ma aspetterò ancora un po' prima di rimettere il widget. E grazie anche per il premio ;)
    @Lella: fenomeno io??? semplicemente imparo qualcosa seguendo i blog degli altri ;)
    @Nicole: grazie mille per il premio!
    @vit: ho controllato l'html del tuo blog e hai aggiunto text-shadow in #header h1 a {, cioè nel link dell'header. Nel tuo blog però l'header è un'immagine quindi non noti l'effetto ombreggiatura.
    Contattami via chat che ne parliamo!

    RispondiElimina
  25. Ciao Iole, eccomi di nuovo qui.... questa volta per assegnarti un premio, vieni a ritirarlo nel nostro blog! ;) A presto!

    RispondiElimina
  26. @Due Penny: grazie per il premio!

    RispondiElimina
  27. Ti ho linkata nel mio blog,continua cosi!!!

    Ciao, ciao :)

    RispondiElimina
  28. @Train of thought: grazie! Aggiungo il tuo blog all'elenco dei miei link preferiti.
    Ho visto che hai sistemato il menu e anche lo script per le descrizioni. Mi sono ricordata ora che ti devo ancora inviare il codice per il popup dell'icona Link. Lo faccio subito!

    RispondiElimina
  29. Grande, come al solito, Iole :-D
    Carina l'idea, anche se prima devo scoprire l'arcano per cui da qualche giorno il primo paragrafo di ogni post mi appare in caratteri più piccoli del resto del testo...
    E sono anche passato a Mozilla da Explorer (quindi aggiorna pure il tuo sondaggio di qualche settimana fa :-D), anche se i caratteri più piccoli sono apparsi da prima...
    Un salutone !!!

    RispondiElimina
  30. @JAJO: ho dato un'occhiata all'html del tuo blog e non c'è niente che non va. Non capisco perché il primo paragrafo è diverso dal resto del post.

    RispondiElimina
  31. Ciao Iole, ma non volevo darti del "lavoro supplementare" :-D
    In effetti anche io mi stavo ristudiando dei post precedenti e, magari, cominciando qualcuno con delle foto piuttosto che con del testo, sono diversi come inizio di codice html, ma ho provato anche a togliere la stringa dove c'è scritta la percentuale del carattere al 100%; secondo me dipende dalla pagina principale del layout di blogger ma se vado a giostrare lì sulla dimensione del carattere non succede nulla :-?
    Vabbe'... ciccia hehehehe
    Eppure dei post precedenti gli ultimi 5 o 6 sono perfettamente normali.
    Un bacione e grazie intanto per la consulenza :-D

    RispondiElimina
  32. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  33. Carissima Iole, alla fine ce l'ho fatta! Inserito lo sfoglia pagina seguendo il tuo post!!! Sono tre giorni che ci lavoro e non riuscivo a hostare i file .js, ma mi ero intestardita a farcela senza chiedere sempre il tuo aiuto!! VITTORIA!! Vai a vedere e dimmi che ne pensi!
    Un bacione enorme!
    CIAO

    P.S. per l'ombreggiatura del titolo invece...

    RispondiElimina
  34. @Daniela: hai fatto un ottimo lavoro. Anch'io uso digilander per i file js (e non solo).
    Se hai problemi con l'ombreggiatura, contattami pure!

    RispondiElimina
  35. ciao iole, ma come mai io con firefox non vedo nessuna ombra??
    grazie a ciao
    p.s. non nel mio, ma in quello citato nel post!

    RispondiElimina
  36. @Spyke: non la vedi?!? io con Firefox la vedo... solo su Ineternet Explorer non è visibile.

    RispondiElimina
  37. Ciao Iole, è la prima volta che visito il tuo blog e a dire la verità è favoloso, ti voglio chiedere se l'ombra ai testi intendevi ai titoli dei post o altro? Grazie in anticipo ^^

    RispondiElimina
  38. @Samantha.96: si può aggiungere l'ombreggiatura a qualsiasi testo del blog (titolo del blog, titolo dei post, elementi della sidebar, links, ecc). Basta impostare la proprietà text-shadow per il testo desiderato.
    Se ti serve una mano per il tuo blog... scrivimi pure!

    RispondiElimina
  39. Grazie mille :) ci provo..
    Volevo chiederti un'altra cosa, in un blog bemadaboutstardoll.blogspot.com c'è un bellissimo cursore di babbo natale, ho chiesto alla fondatrice del blog settimane fa dove l'abbia preso ma non mi risponde.. girando sul web ho trovato un simile in questo blog --> http://logicerrima.blogspot.com/2010/12/cursore-di-babbo-natale.html#comments , solo che non mi funziona! mi potresti fare un cursore tale e quale?
    Grazie in anticipo ;)

    RispondiElimina
  40. @Samantha.96: per modificare il puntatore del mouse e far apparire il cappello di Babbo Natale copia e incolla il codice riportato di seguito in un gadget di tipo Html/Javascript (lasciando vuoto il campo "Titolo"):

    <style type="text/css">html, body {
    cursor: url("http://digilander.libero.it/A_N_A_L_O_G_I_C_A/Logica/LOGICERRIMA_Cursori/gif/BNCappuccio.gif"), auto;
    }</style>

    RispondiElimina
  41. Grazieee :-) sei bravissima^^ (:

    RispondiElimina
  42. Scusa,ma come faccio a mettere questo effetto in ogni titolo e link dei post? Cioè,ovunque? xD Grazie ;)

    RispondiElimina
  43. @Auroryna_98: in quale dei tuoi blog vuoi aggiungere questo effetto?

    RispondiElimina
  44. http://littlestarofstardoll.blogspot.com/

    L'unica cosa è che ora c'è per tutto,proprio tutto! Io vorrei aggiungere quest'effetto solo per i link! Così è esagerato penso! :S

    RispondiElimina
  45. @Auroryna_98: se vuoi aggiungere l'ombreggiatura solo ai link, devi eliminare dal template tutte le proprietà text-shadow presenti nelle vari classi del css e aggiungere tale proprietà solo in questa porzione di codice:
    a {
    color: #FF0099;
    }
    a:hover {
    color: #FF0099;
    }

    Spero di essere stata chiara.

    RispondiElimina
  46. L'unico problema è che nel CSS non c'è niente è vuoto e non posso rimuoverlo! E la porzione di codice che mi hai dato non ho ben capito dove va aggiunta.

    Grazie ancora e scusa per tutto il disturbo :P

    RispondiElimina
  47. @Auroryna_98: mandami via email il tuo template completo; appena ho un po' di tempo gli darò un'occhiata e ti dico cosa modificare.
    (Al momento ho moltissime richieste, quindi dovrai pazientare un po')

    RispondiElimina

Se volete sostenere il mio blog, visitate questi siti. Grazie!
Licenza Creative Commons This blog by Iole is licensed under a Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Copyright © 2008- iolecal.blogspot.it|Design by Iole|Privacy Policy