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;
}
color: #F00036;
}
aggiungendo text-shadow: #9B0021 2px 2px 3px;
h1 a {
color: #F00036;
text-shadow: #9B0021 2px 2px 3px;
}
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.
Copyright 2008- 
Design by 
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!
RispondiEliminaIo 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!
E per aggiungere l'ombreggiatura al titolo del blog?
RispondiElimina@D-chan: purtroppo con Internet Explorer non si vede... ieri sera ho provato da casa anche con IE8 e non si vede.
RispondiElimina@Den: nel tuo blog dovresti modificare questo parte di codice
RispondiEliminah1 {font-size:30px;}
Prova e fammi sapere!
provato in un post e tutto ok ma cambiare il titolo dei post proprio non mi riesce, hai qualche dritta ? ciao !!
RispondiElimina@ec.log: nel tuo template devi modificare
RispondiElimina.content h1 a, .content h1 a:hover {color:#ca7a1d; text-decoration:none;}
perfetto!! grazie !! come arrivo al tuo "sapere" ? hai un libro da consigliare, un sito, qualcosa ? grazie!! ciao !!
RispondiElimina@ec.log: il mio sapere? una laurea e anni e anni di esperienza ^_^
RispondiEliminacmq potrebbero esserti utili queste guide
Anche con Safari di Apple l'ombreggiatura si vede!
RispondiEliminaNon ci sono piu' parole per descrivere le 'licenze poetiche' che si prende IE nell'interpretare tag HTML e proprieta' CSS :(
Ciao Iole, io usando Microsoft-Internet Explorer l'ombreggiatura la vedo!!!Fortuna?!^_^
RispondiEliminaCiao Ciao :)
@docpap: purtroppo su IE molte cose non funzionano.
RispondiElimina@Mony: si vede??? Io ho provato anche con IE8 e non l'ho vista.
ciao Iole, ho trovato il tuo blog per caso e prima di tutto ti faccio i miei complimenti, sei un genio!!!
RispondiEliminaForse è 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
@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.
RispondiEliminaNaturalmente 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...
RispondiEliminaCiao e buona serata!
@Daniela: per l'effetto sfoglia pagina ecco il post!
RispondiEliminaPer l'ombreggiatura devi aggiungerla dopo
#header h1 {
Sei mitica! Ti farò sapere...
RispondiElimina@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?"
RispondiEliminasiiiiiiiiii, ha funzionato :))))
RispondiEliminagrazie Iole, a te e al tuo amico Den, mi avete fatto un regalo emorme....grazie grazie grazie!!!!
Bacionissi
Fiorella
Iole, ti segnalo che il widget "Google Friends Connect" 'l'ha piantata di rompere le scatole ad explorer!
RispondiEliminaAdesso tutto sembra funzionare bene... chissà per quanto?
Iole, passa da me quando vuoi, un bel premio ti aspetta ;-)
RispondiEliminaIole ......ma sei terribilmente attiva.
RispondiEliminaQuante cose vai a notare?
Se un fenomeno.......ti invidio un pò:-)
Lella
ciao iole,se passi da me ti voglio consegnare un premio!!!
RispondiEliminaciao Iole, come fai ad essere così chiara nell'esposizione dei post??
RispondiEliminadono 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
@Tarkan: ti ringrazio per la segnalazione, ma aspetterò ancora un po' prima di rimettere il widget. E grazie anche per il premio ;)
RispondiElimina@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!
Ciao Iole, eccomi di nuovo qui.... questa volta per assegnarti un premio, vieni a ritirarlo nel nostro blog! ;) A presto!
RispondiElimina@Due Penny: grazie per il premio!
RispondiEliminaTi ho linkata nel mio blog,continua cosi!!!
RispondiEliminaCiao, ciao :)
@Train of thought: grazie! Aggiungo il tuo blog all'elenco dei miei link preferiti.
RispondiEliminaHo 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!
Grande, come al solito, Iole :-D
RispondiEliminaCarina 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 !!!
@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.
RispondiEliminaCiao Iole, ma non volevo darti del "lavoro supplementare" :-D
RispondiEliminaIn 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
Questo commento è stato eliminato dall'autore.
RispondiEliminaCarissima 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!
RispondiEliminaUn bacione enorme!
CIAO
P.S. per l'ombreggiatura del titolo invece...
@Daniela: hai fatto un ottimo lavoro. Anch'io uso digilander per i file js (e non solo).
RispondiEliminaSe hai problemi con l'ombreggiatura, contattami pure!
ciao iole, ma come mai io con firefox non vedo nessuna ombra??
RispondiEliminagrazie a ciao
p.s. non nel mio, ma in quello citato nel post!
@Spyke: non la vedi?!? io con Firefox la vedo... solo su Ineternet Explorer non è visibile.
RispondiEliminaCiao 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@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.
RispondiEliminaSe ti serve una mano per il tuo blog... scrivimi pure!
Grazie mille :) ci provo..
RispondiEliminaVolevo 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 ;)
@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"):
RispondiElimina<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>
Grazieee :-) sei bravissima^^ (:
RispondiEliminaScusa,ma come faccio a mettere questo effetto in ogni titolo e link dei post? Cioè,ovunque? xD Grazie ;)
RispondiElimina@Auroryna_98: in quale dei tuoi blog vuoi aggiungere questo effetto?
RispondiEliminahttp://littlestarofstardoll.blogspot.com/
RispondiEliminaL'unica cosa è che ora c'è per tutto,proprio tutto! Io vorrei aggiungere quest'effetto solo per i link! Così è esagerato penso! :S
@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:
RispondiEliminaa {
color: #FF0099;
}
a:hover {
color: #FF0099;
}
Spero di essere stata chiara.
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.
RispondiEliminaGrazie ancora e scusa per tutto il disturbo :P
@Auroryna_98: mandami via email il tuo template completo; appena ho un po' di tempo gli darò un'occhiata e ti dico cosa modificare.
RispondiElimina(Al momento ho moltissime richieste, quindi dovrai pazientare un po')