Come inserire un box con una freccia direzionale.

Come inserire un testo in un rettangolo con una freccia direzionale.

CSS Arrow Please è una applicazione web che ci aiuta a inserire un testo  all'interno di un box con una freccia direzionale. Si può personalizzare il colore di sfondo della freccia e la sua direzione. Può essere utile per aggiungere una descrizione originale a una immagine, a un video o a una ricetta.

Si tratta di una personalizzazione dei nostri articoli che è più semplice mostrarla che spiegarla. Appena entrati su CSS Arrow Please si deve configurare la posizione della freccia scegliendo tra Top, Left, Bottom e Right. Poi sarà la volta della scelta delle dimensioni del testo inserendo il numero di pixel dei caratteri. Infine si possono personalizzare lo sfondo del box, la dimensione e il colore del suo bordo

Dopo la configurazione del box, si va sulla finestra di destra e si clicca nella icona in basso per copiare il codice CSS. Invece che sul Blocco Note è meglio incollarlo su Notepad++. Si fa uso delle pseudo-elementi before e after che sono già state utilizzati per personalizzare le citazioni e per numerare le discussioni nei modelli con commenti nidificati.

Altri pseudo-elementi sono :link, :visited, :active, :hover, :focus, :first:letter, :first:line, :first:child e :lang. Il tag :first-letter potrebbe essere usato per rendere di dimensioni più grandi la prima lettera di ciascun post su Blogger. Il codice ottenuto da CSS Arrow Please può essere usato in due modi:

1. Incollarlo in Modello > Modifica HTML > Procedi subito sopra alla riga ]]></b:skin> per poterlo usare in tutti post del blog con un unico inserimento
2. Inserirlo tra i tag <style> e </style> per poterlo usare solo in un singolo post o una singola pagina

Nel secondo caso un esempio di codice potrebbe essere questo

<style type='text/css'>
.arrow_box {
    position: relative;
    background: #d5ca35;
    border: 4px solid #f58236;
}
.arrow_box:after, .arrow_box:before {
    left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.arrow_box:after {
    border-left-color: #d5ca35;
    border-width: 22px;
    top: 50%;
    margin-top: -22px;
}
.arrow_box:before {
    border-left-color: #f58236;
    border-width: 28px;
    top: 50%;
    margin-top: -28px;
}
</style>

Dove le due righe in viola sono state aggiunte al codice di CSS Arrow Please. Per ottenere un risultato come quello visibile qui sotto

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget ipsum eu nibh cursus pharetra. Nunc in libero justo, nec pharetra nunc. Aenean nibh tortor, faucibus sed ullamcorper ut, venenatis sit amet lorem. Curabitur scelerisque bibendum arcu, vel bibendum orci auctor at.

si deve incollare in un post Modalità HTML, oltre al codice precedente, anche il seguente uno dopo l'altro
 

<div class="arrow_box" style="padding: 5px; width: 400px;">
Testo da visualizzare nel box
</div>

dove si può personalizzare la larghezza del box (400 pixel) e la distanza del testo dai bordi (5 pixel).