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