Pagina aggiornata... Lunedì, 13 Aprile 2026 * Tempo di caricamento 0.003 secondi
Link navigazione : Home ~ Template ~ Blogger_tutorial » Eliminare effetto trasparenza

Eliminare effetto trasparenza o ombreggiatura - shadow

Se attiviamo un blog Blogger con l'idea di personalizzarlo la scelta del tema per iniziare
è per lo più tra quelli semplici, "Simple Simply Simple" o "Simple Pale"
Il primo è tutto bianco tranne per un paio di linee grigie che si possono facilmente togliere dai css,
potete leggere il tutorial in Sfondo base grafica, nel secondo invece ci sono dei parametri per un effetto
ombreggiatura (shadow) che creano un fastidioso effetto trasparenza su uno sfondo con base grafica,
ma anche in questo caso possiamo eliminarli senza toccare il codice sorgente

In questa immagine potete vedere come si visualizza lo spazio blog, è evidenziato
dall'effetto shadow, in pratica è come se ci fosse una pagina in rilievo sopra la base grafica
🌷Cliccate sull'immagine per ingrandire e vedere maggiori dettagli


Questi sono i parametri che creano l'effetto rilievo/ombreggiatura e io li adoro, ci sono anche
qui nella cornice del telaio, ma in questo caso, lo spazio/blog è parte dello sfondo (base grafica)
quindi non ci sono utili al contrario creano un antiestetico effetto trasparenza

.content-outer {
-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
margin-bottom: 1px;
}


Per eliminarli useremo il box "Aggiungi CSS" del tool per le personalizzazioni,
bisognerà però "ingannare" il codice, affinché la modifica funzioni occorre necessariamente
aggiungere dei parametri, per cui rimetteremo il codice modificando i valori, in realtà un valore,
l'ultimo, al posto di .15 scriveremo 0 e aggiungeremo un bordo "invisibile"
perchè per la misura scriveremo "0px"

.content-outer {
-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, 0);
-webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, 0);
-goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, 0);
margin-bottom: 1px;
border: 0px solid #ffffff;
}

Se vi state domandando perché non inseriamo semplicemente
.content-outer {margin-bottom: 1px;} è perché non funziona...

Clicchiamo su "Design" per accedere al pannello, poi su "PERSONALIZZA" e in fondo
(scroll nel box) sulla sinistra della pagina che si visualizzerà apriamo il menu "Avanzate"
clicchiamo sul triangolino accanto a "Testo pagina" per aprire il menu a tendina,
scorriamo fino in fondo e clicchiamo su "Aggiungi CSS"



Incolliamo il codice dove c'è scritto "Aggiungi CSS personalizzati"
🦉Se abbiamo già inserito dei parametri andiamo a capo dopo la parentesi graffa



Salviamo cliccando sul sull'icona floppy che troviamo a destra in fondo alla pagina,
nell'anteprima è possibile che non si visualizzi subito la modifica ma il blog sarà bello pulito

🌷Cliccate sull'immagine per ingrandire e vedere maggiori dettagli



Cancellare i parametri shadow dal codice sorgente

In alternativa si possono cancellare i parametri direttamente nel codice sorgente, non è complicato
basta fare attenzione a non cancellare altri parametri, clicchiamo su "Design" per accedere
al pannello, poi sul triangolino accanto a "PERSONALIZZA" quindi clicchiamo su "Modifica HTML"

Si aprirà la pagina che contiene il codice sorgente, scrolliamo giù fino ad arrivare ai parametri css



Cancelliamo solo i parametri shadow



Ed in questo caso si potrà lasciare margin-bottom: 1px; e l'effetto shadow sarà eliminato ma
fate questa modifica con molta attenzione a non cancellare altri parametri altrimenti potreste
compromettere l'aspetto del vostro blog o mandare in tilt il codice O_o'

🦉Salviamo cliccando sull'icona floppy che troviamo a destra in alto alla pagina

Spero di essere stata chiara in ogni passaggio, in caso contrario scrivetemi un messaggio
Un abbraccio... buon lavoro e come sempre buon divertimento ^_^
Ciao alla prossima ೡPenelope ♥

Copiato negli appunti!

Dai un giudizio a questo tutorial, Grazie ^_^


Vota qui! Grazie!
0%
Voti totali: 0
Rating... 0



Commentario...

Scrivi qui per lasciare un saluto, una richiesta di aiuto,
un suggerimento o una critica ^_^










~ Pagina visitata da 2237 utenti