Pubblicato il 21/07/12e aggiornato il

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


css-arrow-please

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).




8 commenti :

  1. ciao lo volevo usare come blockquote solo che non ci risco. Come potrei fare?

    RispondiElimina
    Risposte
    1. @Manager
      Prova a sostituire .arrow_box con .post-body blockquote e a inserire il codice nel modello. Usa un blog di prova come test. Leggi anche qui
      http://www.ideepercomputeredinternet.com/2012/04/come-personalizzare-le-citazioni-nei.html

      Elimina
  2. ho provato ma non mi si visualizza la freccia, peccato... =D

    RispondiElimina
  3. Buongiorno, sono sempre io... a proposito di frecce non trovo nessuna tua info a riguardo nel caso mi linki qualche tuo post? Nel mio blog parecchio tempo fa avevo inserito uno scroll per la pagina ma non riesco ad eliminarlo oltre a non funzionare è anche brutto, come posso fare? non posso mettere link qui per fartelo vedere

    RispondiElimina
    Risposte
    1. Perché non puoi mettere link?
      C'è solo scritto che non si possono inserire link cliccabili cioè con un collegamento attivo a un'altra pagina web. L'avviso è chiaro. Per toglier l'icona con lo scroll dovresti ricordarti da dove hai copiato il codice per poi cercarlo nel modello o in un gadget di Layout
      @#

      Elimina
    2. ciao, hai ragione a volte sono un pò distratta, il blog è questo http://lemedichessediclo.blogspot.it purtroppo non ricordo dove l'avevo inserito e quindi non saprei dove mettere le mani, se potessi aiutarmi tu ... grazie!

      Elimina
    3. Non vedo alcuno scroll per la pagina. Mi aspettavo di vedere una icona in cui cliccare per tornare in alto o andare in basso. Questo è quello che avevo capito
      @#

      Elimina
    4. si ci sono due specie di frecce marroni che una volta funzionavano, una per scendere e una per salire adesso sono li ferme e nemmeno funzionano più

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.