Come fare le ombre del testo in Chrome

September 22

Come fare le ombre del testo in Chrome


Web designer utilizzano le ombre del testo per dare la scrittura in una pagina Web maggiore profondità e la consistenza. Mentre ci sono molte varianti e diversi effetti i progettisti possono utilizzare, semplicemente aggiungendo un'ombra di testo richiede solo una riga di codice nel file CSS del sito. I principali browser Web tutti utilizzano standard differenti su come si rende il codice CSS per un sito web. Web browser di Google Chrome, tuttavia, si conforma generalmente a standard Web. Come tale, i progettisti solo bisogno di includere il "text-shadow" codice CSS di base per Chrome di rendere in modo corretto.

istruzione

1 Aprire documento CSS del tuo sito web. Se si utilizza un sistema di gestione dei contenuti, come Drupal o Wordpress, è possibile accedere al codice sorgente tema dall'editor tema built-in.

2 Passare il codice che rende il testo che si desidera avere un'ombra. Ad esempio, se si desidera solo il testo di intestazione di avere ombre, cercare il codice "header".

3 Tipo "text-shadow: Tpx RPX bpx LPX # 000;" (Senza virgolette) all'interno delle parentesi che rendono il testo.

4 Sostituire "T" con la dimensione dei pixel che si desidera per l'ombra superiore, "R" con la dimensione dei pixel a destra, "B" con la dimensione del pixel inferiore e "L" con la dimensione dei pixel di sinistra, e sostituire # 000 con il codice colore per l'ombra. Ad esempio, se si desidera che il testo abbia un tre-pixel ombra grigia, il codice dovrebbe essere simile a questo: ".header {text-shadow: 3px 3px 3px 3px #ccc;}".

5 Ripetere il punto 3 e 4 per ogni area di testo in cui si desidera avere un'ombra di testo.

6 Carica il nuovo CSS di presentare al tuo sito web. Se si utilizza l'editor tema nel proprio sistema di gestione dei contenuti, è sufficiente fare clic sul pulsante "Salva".

Consigli e avvertenze

  • Assicurarsi di non eliminare tutte le informazioni CSS importanti, come ad esempio la dimensione del carattere o il colore. Digitare il codice "text-shadow", dopo il punto e virgola finale in quella sezione. Ad esempio, il codice originale per l'intestazione del tuo sito web potrebbe leggere ".header {color: # 000; font-size: 2em;}". Per aggiungere un'ombra di testo, aggiungere il codice dopo il "2em;" Sezione: ".header {color: # 000; font-size: 2em; text-shadow: 3px 3px 3px 3px #ccc;}".
  • Eseguire un backup del file CSS originale prima di apportare modifiche.