Utilizzando questo sito accetti il nostro uso dei cookie. Approfondisci

Creare bordo alle singole lettere di una parola tramite css

Creare bordo alle singole lettere di una parola tramite cssPer creare un bordo attorno ad ogni singola lettera di una parola, ci viene in soccorso il fantastico css, che serve per mostrare la parte grafica di un blog.
Sottolineo bordo, non una semplice ombra! Verrà bordata tutt la lettera, non un semplice bordo esterno alla parola. In questo post ti mostro come creare un bordo nero di 1 pixel di spessore. In fondo trovi un esempio che mostra il risultato finale.


il codice CSS che ti serve è:

text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

Come utilizzarlo? Molto semplice, ci possono essere 2 casi:

  1. usi già un contenitore per il testo, ad esempio il div o span con id “title” che si usa per il titolo di un post, allora nel codice css devi aggiungere:
    #title {text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;}

    Se usi la classe al posto dell’id, allora sostituisci il # con un punto ‘.

  2. non usi un contenitore, allora puoi creare il contenitore (sono davvero molto comodi) e dire che stile applicare su questo preciso contenitore. Per il contenitore consiglio di usare un <div>, solamente nel caso in cui si vuole modificare delle parole all’interno di un testo consiglio di utilizzare <span>, come ti mostrerò fra poco.
    Aggiungi il contenitore, dove inserirai la parola a cui vuoi applicare il bordo, segui questo esempio (va aggiunto nel codice html della pagina):

    <span style="text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;"> PAROLA DA BORDARE </span>

Ti mostro come esce su una parola rossa, utilizzando lo <span>, questo è il codice che ho utilizzato:

<span style="color: #f00; font-weight: bold; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;">Roberto Iacono</span>

Appena finisco di leggere questo post aggiungerò Roberto Iacono alle mie cerchie su Google+

Aggiungo il codice e ottengo:

Appena finisco di leggere questo post aggiungerò Roberto Iacono alle mie cerchie su Google+


VUOI CREARE IL TUO SITO O BLOG WORDPRESS?

Scegli uno tra i migliori hosting per WordPress

HOSTING

Scegli uno tra i migliori hosting per WordPress

Hosting

Scegli uno tra i migliori temi WordPress professionali

GRAFICA

Scegli uno tra i migliori temi WordPress professionali

Grafica

Guide e risorse per gestire il sito WordPress a 360°

GESTIONE

Guide e risorse per gestire il sito WordPress a 360°

Gestione

EMAIL NEWSLETTER

Vuoi ricevere i miei ultimi articoli
comodamente nella tua email? È gratis!
Ben 3552 persone lo stanno già facendo!
Anonimo
   
con le dita sempre in costante, frenetico movimento sulla tastiera… vengo spesso trascinato e catturato “in rete” per colpa delle mille idee che mi girano per la testa (prima o poi troverò quella giusta)… dal futuro incerto (nonostante una laurea, e chi non lo è?..siamo in tanti!) .. credo fortemente nella condivisione della conoscenza!

Al momento non è possibile commentare questo articolo...

Seguimi

Scarica gli ebook gratuiti

Vuoi creare e gestire il tuo blog WordPress autonomamente ed in maniera gratuita?

Allora scarica gratuitamente gli ebook Blogging Box e Le 30+ cose da non fare con WordPress, inserisci la tua email qui sotto:
13584+
Scarica gratuitamente gli ebook!

Per maggiori informazioni guarda questa pagina per la Blogging Box e questa per le 30+ cose da non fare con WordPress.

Scarica gli ebook gratuiti

Vuoi creare e gestire il tuo blog WordPress autonomamente ed in maniera gratuita?

Allora scarica gratuitamente gli ebook Blogging Box e Le 30+ cose da non fare con WordPress, inserisci la tua email qui sotto:
13584+
Scarica gratuitamente gli ebook!

Per maggiori informazioni guarda questa pagina per la Blogging Box e questa per le 30+ cose da non fare con WordPress.
Unisciti agli oltre 10999 lettori
che seguono questo blog
3152
982
2251
4614