7 maggio 2015

Graphic Tricks #5 Blockquote

Bentornati cari!
Scusate l'assenza della rubrica avvenuta giovedì scorso. La vita ha richiesto più attenzioni del solito e in questi giorni lo studio la fa da padrone.
Ma bando alle ciance! Come argomento di oggi abbiamo pensato di proporvi qualche style carino da utilizzare nei blockquote. :3
Io e Giusy ne proporremo uno ciascuno e ve lo spiegheremo passo passo... ma prima: cos'è un blockquote?

Il tag blockquote html definisce un blocco di testo come una citazione prelevata da una fonte. Possiamo fare in modo che il browser lo visualizzi in modo particolare, ad esempio spostando a destra il rientro del testo, o cambiando il font.

Per procedere con degli esempi, ecco la mia proposta. :3
Per ottenere questo stile del blockquote, come sempre basta andare in Modello Personalizza Avanzato Aggiungi CSS.
Ecco il codice necessario:
blockquote { padding: 10px 20px 10px 30px;
border: 1px solid #f8aab9;
margin: 10px 10px 10px;
font-family: Cambria;
text-align: justify;
-webkit-box-shadow: 4px -4px 0px 0px #f8aab9;
-moz-box-shadow: 4px -4px 0px 0px #f8aab9;
box-shadow: 4px -4px 0px 0px #f8aab9;
}
  • In border: specifichiamo di volere un bordo solido, di spessore un pixel e dal colore il cui codice hex è #f8aab9.
  • con margin: stiamo chiedendo che la distanza del blockquote rispetto a tutti gli altri elementi che lo circondano sia di 10 pixel.
  • font-family: ormai dovreste saperlo! (Vedi Graphic Tricks #2)
  • In text-align: specifichiamo di volere la posizione del testo giustificata. Potremmo sostituire justify con left (per l'allineamento a sinistra) o right (per l'allineamento a destra).
  • Adesso box-shadow: permette di creare un'ombra attorno ad un elemento html, in questo caso il nostro tag blockquote. box-shadow: richiede cinque elementi. Vediamoli uno ad uno:
    • Il primo valore (4px) definisce lo spostamento dell'ombra in senso orizzontale. Poiché il valore usato è positivo, l'ombra è collocata sul lato destro del blockquote
    • Il secondo valore (-4px) definisce lo spostamento dell'ombra in senso verticale. Essendo un valore negativo, l’ombra viene collocata sul lato superiore del box.
    • Il terzo valore (0px) definisce il livello di sfocatura dell’ombra. Per aumentare la sfocatura basta aumentare questo valore. Dato che noi abbiamo usato 0px abbiamo ottenuto un’ombra netta e senza alcuna sfocatura.
    • Il quarto valore (0px) definisce il livello di diffusione dell'ombra Più il valore è alto, più l’ombra tenderà ad espandersi. In questo caso la nostra diffusione è nulla.
    • Il quinto valore non è altro che il colore che vogliamo dare all'ombra, sempre definito tramite codice hex.
  • Gli altri due elementi (-moz-box-shadow: e -webkit-box-shadow:) servono solo per estendere il supporto di box-shadow anche nei browser come Safari e Firefox. :3 
GIUSY: ecco invece la mia proposta.
Il codice che ho utilizzato:
blockquote {
background: url(http://i59.tinypic.com/242y8at.png)no-repeat;
padding: 15px;
padding-left: 50px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border: 2px solid #f8aab9;
text-transform: uppercase;
font-size: 10px;
}

  • In background, come ben sapete, ho aggiunto il codice delle "virgolette" tra parentesi (per il codice io utilizzo TinyPic) e "no-repeat" per evitare che l'immagine si ripeti. Se volete aggiungere anche il colore di sfondo, aggiungete il codice hex prima di "url"; se invece volete cambiare la posizione dell'immagine, aggiungete le due dimensioni in px subito dopo no-repeat.
  • In padding ho aggiunto la distanza complessiva del testo dal bordo.
  • In padding-left ho invece inserito la distanza dal lato sinistro in modo che il testo non si sovrapponga con l'immagine.
  • I vari border che ho inserito servono per dare l'effetto arrotondato ai bordi eccetto in quello in basso a sinistra. Se volete modificarli, ricordate che dopo border dovete inserire top o bottom, poi right o left e infine radius, che è il valore che da l'effetto arrotondato. Potete anche utilizzare border-radius per tutti e quattro gli angoli.
  • border per il bordo.
  • In text-transform ho inserito il valore "uppercase" che rende tutto il testo in stampatello maiuscolo. Potete sostituirlo con lowercase per avere l'effetto contrario.
  • Font-size la dimensione.

E con questo è tutto! Speriamo davvero di esservi state utili c: se avete qualche domanda noi siamo sempre a vostra disposizione! Buona serata :)

10 commenti:

  1. Io ho una domanda u.u (non odiatemi xD) ...ma dove viene visualizzato esattamente questo blockquote? E come si fa a scriverci dentro? xD non c'ho capito niente u.u abbiate pietà di me u.u

    RispondiElimina
    Risposte
    1. Il blockquote è una citazione e viene visualizzato nel post :3 hai presente quando stai scrivendo qualcosa e nella "barra degli strumenti" (chiamiamola così ) ci sono quelle due virgolette (stile quelle che io ho messo nel mio blockquote)? Selezionando il testo e cliccando le virgolette crei un blockquote. Nel nostro post in poche parole è la parte grigio/verde xD spero di essermi spiegata, altrimenti chiedi pure ^_^

      Elimina
    2. Ohhhhhhh ora ho capito xD cioè rendetevi conto che io non sapevo nemmeno esistesse questa funzione xD Giusy, perchè quando ti dico che sono un caso disperato non mi credi? u.u
      Grazie ragazze! E' utilissimo questo blockquote *_* adesso grazie a voi lo metterò dappertutto xD <3

      Elimina
    3. Ahahahahah sono curiosa di vedere risultato ^_^

      Elimina
  2. Belli! *-*
    Proverò ad inserirne uno...

    RispondiElimina
  3. Io stavo appunto cercando di inserire un riquadro per le citazioni e grazie ai vostri consigli ho smanettato un pò e sono riuscita a inserirne uno semplice semplice che mi piace un sacco. Quindi grazie milleee *.*

    RispondiElimina
  4. Grazie !!! Sono mesi che cerco di capire come inserire un riquadro del genere per le citazioni !!!
    :)

    RispondiElimina