Come personalizzare le citazioni con CSS in un blog

Le citazioni in genere sono utilizzati su siti di notizzi o varie blog . Le citazioni sono molto popolari anche su social,  e per questo che post con le citazioni, di regola, guadagnando molto rapidamente tantisimi like. Un bel design di citazioni  non solo permette di trasmettere meglio informazioni ai propri lettori, ma anche rispecchia comprensione visuale del sito web nel nostro caso. .

 

Questo tutorial presenta varie tecniche di decorazione di  citazioni che è possibile utilizzare nei vostri progetti.

Per aggiungere una citazione in un apagina web si utilizzano i seguenti tag:
1) <blockquote>  viene usato per introdurrere le citazioni lungi come testo . Esso li separa dal resto del testo del articolo con una interruzione di riga.

<blockquote>
  <p>Sono egoista, impaziente e insicura. Faccio degli errori, sono fuori controllo e a volte difficile da gestire. Ma se non puoi gestire la mia parte peggiore, allora sicuro come l’inferno non mi meriti quando sono al mio meglio!</p>
  <cite> Marilyn Monroe </cite>
</blockquote>

Il tag <blockquote> di default ha  i seguenti stili predefiniti:

blockquote {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

Sono egoista, impaziente e insicura. Faccio degli errori, sono fuori controllo e a volte difficile da gestire. Ma se non puoi gestire la mia parte peggiore, allora sicuro come l’inferno non mi meriti quando sono al mio meglio!

Marilyn Monroe

2) <q> - viene usato per inserire le citazioni  brevi all'interno di un paragrafo.

<p>Come ha detto  <cite>Oscar Wilde </cite>, <q>Sii te stesso, tutto il resto è già stato preso </q></p>

3) <cite> - viene utilizzato per identificare l'URL di origine, titolo del opera o il nome dell'autore.
Negli  esempi qui sotto vine utilizzano  font Lato ed emoi da Font Awesome.

Esempio 1

 

Fashion is not something that exists in dresses only. Fashion is in the sky, in the street, fashion has to do with ideas, the way we live, what is happening.

Coco Chanel

Aprire per vedere il codice del esempio

<style>
blockquote {
margin: 0;
background: white;
border-top: 5px solid #EAF9F9;
border-bottom: 5px solid #EAF9F9;
color: #3A3C55;
padding: 30px 30px 30px 90px;
position: relative;
font-family: 'Lato', sans-serif;
font-weight: 300;
}
blockquote:before {
content: "\201C";
font-family: serif;
position: absolute;
left: 20px;
top: 20px;
color: white;
background: #FB6652;
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 50px;
line-height: 1.35;
text-align: center;
}
blockquote p {
margin: 0 0 16px;
font-size: 22px;
letter-spacing: .05em;
line-height: 1.4;
}
blockquote cite {
font-style: normal;
}
</style>
<blockquote>
  <p>Fashion is not...</p>
  <footer>— <cite>Coco Chanel</cite></footer>
</blockquote>

 

Esempio 2

I invented my life by taking for granted that everything I did not like would have an opposite, which I would like.

Coco Chanel

Aprire per vedere il codice del esempio

<style>
blockquote {
margin: 0;
background: #F0F0F1;
color: #333334;
padding: 20px 30px;
position: relative;
border-left: 35px solid #DFDEDE;
font-family: 'Lato', sans-serif;
}
blockquote:before {
content: "\201C";
font-family: serif;
position: absolute;
left: -29px;
top: 5px;
color: #BCBCBC;
font-size: 50px;
text-shadow: 1px 2px 0 white;
}
blockquote p {
margin: 0 0 16px;
font-size: 20px;
letter-spacing: .05em;
line-height: 1.4;
}
blockquote cite {
font-style: normal;
font-weight: 300;
}
</style>
<blockquote>
  <p>I invented my life...</p>
  <footer>— <cite>Coco Chanel</cite></footer>
</blockquote>

Esempio 3

The most courageous act is still to think for yourself. Aloud.

Coco Chanel

Aprire per vedere il codice del esempio

<style>blockquote {
margin: 0;
background: #FFF4E0;
color: #474C4F;
padding: 30px;
position: relative;
text-align: center;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
}
blockquote:before {
content: "\f10d";
font-family: FontAwesome;
position: absolute;
z-index: 2;
left: 50%;
transform: translateX(-50%);
top: 14px;
color: #474C4F;
font-size: 20px;
background: #FFF4E0;
padding: 0 15px;
}
blockquote:after {
content: "";
position: absolute;
left: 15px;
top: 20px;
right: 15px;
height: 4px;
border-top: 1px dotted #474C4F;
border-bottom: 1px dotted #474C4F;
}
blockquote p {
font-size: 20px;
letter-spacing: .05em;
line-height: 1.4;
}
blockquote cite {
font-style: normal;
font-weight: 300;
}</style>
<blockquote>
  <p>The most courageous act...</p>
  <footer>— <cite>Coco Chanel</cite></footer>
</blockquote>

Esempio 4

Look for the woman in the dress. If there is no woman, there is no dress.

Coco Chanel

Aprire per vedere il codice del esempio

<style>
blockquote {
margin: 0;
background: #FDFBFB;
color: #5F5F5F;
padding: 30px 30px 30px 80px;
position: relative;
font-family: 'Lato', sans-serif;
}
blockquote:before {
content: "\1F676";
position: absolute;
z-index: 2;
left: 30px;
top: 15px;
width: 60px;
height: 60px;
border-radius: 50%;
text-align: center;
line-height: 80px;
color: #F2EAD7;
font-size: 50px;
background: rgba(188,231,250, .7);
}
blockquote:after {
content: "";
position: absolute;
left: 34px;
top: 19px;
width: 60px;
height: 60px;
border-radius: 50%;
background: rgba(242,124,176, .7);
}
blockquote p {
font-size: 24px;
letter-spacing: .05em;
line-height: 1.4;
margin: 0 0 16px;
position: relative;
z-index: 3;
}
blockquote cite {
font-style: normal;
font-weight: 300;
}
</style>
<blockquote>
  <p>Look for the woman in the dress. If there is no woman, there is no dress.</p>
  <footer>— <cite>Coco Chanel</cite></footer>
</blockquote>

Esempio 5

Elegance does not consist in putting on a new dress.

Coco Chanel

Aprire per vedere il codice del esempio

<style>blockquote {
margin: 0;
background: #FFF1DE;
color: #58554B;
padding: 30px;
border-radius: 5px;
font-family: 'Lato', sans-serif;
}
blockquote p {
margin-top: 0;
font-size: 24px;
}
blockquote footer {
position: relative;
padding-left: 80px;
line-height: 60px;
}
blockquote footer:before {
content: "\f10d\00A0\00A0\f10e";
font-family: FontAwesome;
color: white;
width: 60px;
height: 60px;
text-align: center;
border-radius: 50%;
position: absolute;
left: 5px;
background: #F29987;
box-shadow: inset 0 1px 0 #D4E8EF, 0 0 0 5px rgba(0,0,0,.1);
text-shadow: 1px 1px 2px rgba(0,0,0,.2)
}
blockquote cite {
font-style: normal;
text-transform: uppercase;
}</style>
<blockquote>
  <p>Elegance does not...</p>
  <footer>— <cite>Coco Chanel</cite></footer>
</blockquote>

Esempio 6

Elegance is not the prerogative of those who have just escaped from adolescence, but of those who have already taken possession of their future.

Coco Chanel

Aprire per vedere il codice del esempio

<style>blockquote {
margin: 0;
background: white;
border: 15px solid #FDE640;
border-radius: 8px;
text-align: center;
color: #58554B;
padding: 30px 50px;
font-family: 'Lato', sans-serif;
}
blockquote p {
margin-top: 0;
font-size: 22px;
line-height: 1.25;
}
blockquote span {
background: #FDE640;
box-shadow: -20px 0 #FDE640, 20px 0 #FDE640;
position: relative;
}
blockquote span:before {
content: "\201C";
font-family: serif;
position: absolute;
font-size: 60px;
left: -50px;
top: 10px;
line-height: 0;
}
blockquote span:after {
content: "\201D";
font-family: serif;
position: absolute;
font-size: 60px;
right: -50px;
bottom: -10px;
line-height: 0;
}
blockquote cite {
font-style: normal;
text-transform: uppercase;
font-size: 14px;
}</style>
<blockquote>
  <p><span>Success is often...</span></p>
  <footer>— <cite>Coco Chanel</cite></footer>
</blockquote>

Esempio 7

Elegance is not the prerogative of those who have just escaped from adolescence, but of those who have already taken possession of their future.

Coco Chanel

Aprire per vedere il codice del esempio

<style>blockquote {
background: linear-gradient(135deg, #F6EEDB 50%, #F4FEF9 50%);
padding: 50px 30px;
text-align: center;
position: relative;
color: #49152C;
padding: 30px 50px;
font-family: 'Lato', sans-serif;
}
blockquote p {
font-size: 22px;
margin-top: 30px;
}
blockquote p:before {
content: "\201C";
font-size: 100px;
color: #EA6844;
font-family: serif;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
blockquote cite {
font-style: normal;
}</style>
<blockquote>
  <p>Elegance is not...</p>
  <footer>— <cite>Coco Chanel</cite></footer>
</blockquote>

 

Esempio 8

I don't know why women want any of the things men have when one of the things that women have is men.

Coco Chanel

 

Aprire per vedere il codice del esempio

<style>blockquote {
margin: 0;
background: #FFF4ED;
padding: 40px;
color: #3F484D;
position: relative;
font-family: 'Lato', sans-serif;
text-align: center;
}
blockquote:before, blockquote:after {
font-size: 45px;
color: #3CA1D9;
position: absolute;
height: 2px;
left: 40px;
right: 40px;
line-height: .5;
background: linear-gradient(to right, #3CA1D9 45%, transparent 45%, transparent), linear-gradient(to right, transparent, transparent 55%, #3CA1D9 55%);
font-family: serif;
}
blockquote:before {
content: "\201C";
top: 30px;
}
blockquote:after {
content: "\201D";
bottom: 30px;
}
blockquote p {
font-size: 20px;
}
blockquote footer {
margin-bottom: 1em;
}
blockquote cite {
font-style: normal;
}</style>
<blockquote>
  <p>I don't know...</p>
  <footer>— <cite>Coco Chanel</cite></footer>
</blockquote>

Esempio 9

Since everything is in our heads, we had better not lose them.

Coco Chanel

Aprire per vedere il codice del esempio

<style>blockquote {
margin: 0;
color: #231E28;
padding: 30px 30px 30px 60px;
border-left: 8px solid #CBDDE7;
position: relative;
background: #FAF8EB;
font-family: 'Lato', sans-serif;
font-weight: 300;
}
blockquote:before{
content: "\201C";
font-family: Arial;
color: #CBDDE7;
font-size: 70px;
position: absolute;
left: 15px;
top: 5px;
}
blockquote p {
font-style: italic;
font-size: 24px;
margin-top: 0;  
}</style>
<blockquote>
  <p>Since everything is in our heads, we had better not lose them.</p>
  <footer>— <cite>Coco Chanel</cite></footer>
</blockquote>

Esempio 10

Don't spend time beating on a wall, hoping to transform it into a door.

Coco Chanel

Aprire per vedere il codice del esempio

<style>blockquote {
margin: 0;
background: #BCE8EA;
color: #131314;
padding: 30px 30px 30px 90px;
position: relative;
font-family: 'Lato', sans-serif;
}
blockquote:before {
content: "\201C";
font-family: serif;
position: absolute;
top: 20px;
left: 16px;
color: black;
width: 40px;
height: 40px;
border-radius: 50%;
background: white;
font-size: 40px;
font-weight: bold;
text-align: center;
line-height: 50px;
}
blockquote:after {
content: "";
width: 4px;
background: white;
position:absolute;
left: 70px;
top: 20px;
bottom: 20px;
}
blockquote p {
margin-top: 0;
font-size: 24px;
font-weight: 300;
}
blockquote cite {
font-style: normal;
text-transform: uppercase;
}</style>
<blockquote>
  <p>Don't spend time beating on a wall, hoping to transform it into a door.</p>
  <footer>— <cite>Coco Chanel</cite></footer>
</blockquote>
Letto 495 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso