Citace uvnitř článku

Dneska se podíváme na to, jaké druhy citací můžeme na blogu použít. Je jich opravdu nepřeberné množství, takže uvedu jen pár jako příklad, aby bylo jasné, jaké možnosti vůbec existují... V tomto návodu jsem hodně využila svoje nápady, věci, které jsem objevila a pár tipů z této stránky.

Předem upozorňuji, že před veškerými změnami proveďte zálohu, ať máte jistotu, kdyby se vám něco nepodařilo...

Veškeré kódy se vkládají nad ]]></b:skin>

Můj návod.

Kopírovat se zdrojem!

Obyčejná citace

blockquote {
font-weight: normal;
font-size: 12px;
padding: 10px 40px 10px 40px;
width: 75%;
margin-left: 40px;
text-align: justify;
position: relative;
border: 1px solid #DDDDDD;
}

border: ...; - rámeček citace, můžete hodně experimentovat
width: 75%; - šířka citace
font-size: 12px; - velikost písma
1px - určuje šířku ráměčku, klidně mužete mít širší linky,
#DDDDDD - určuje barvu rámečku,
solid je jednoduchá čára, dotted tečkovaná, double dvojitá

rámeček můžete mít i jen na některé straně nebo různě kombinovat, nahradit border: 1px solid #DDDDDD;

• levý rámeček border-left: 1px solid #DDDDDD;
• pravý rámeček border-right: 1px solid #DDDDDD;
• rámeček nahoře border-top: 1px solid #DDDDDD;
• rámeček dole border-bottom: 1px solid #DDDDDD;

také můžete přidat řádek border-radius: 3px; - tím určíte zaoblené rohy (3px určuje velikost obloukových hran)

Citace s uvozovkami

blockquote {
font-weight: bold;
padding: 10px 40px 10px 40px;
width: 75%;
margin-left: 40px;
text-align: justify;
position: relative;
}

.post blockquote:before {
 content: " \201C ";
color: #757575;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
  position: absolute;
  left: 10px;
  top:25px;
}

.post blockquote:after {
 content: " \201D ";
color: #757575;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
  position: absolute;
  right: 10px;
  bottom:5px;
}

blockquote... vzhled citovaného boxu
post blockquote:before ... určuje symbol na začátku
post blockquote:after... určuje symbol na konci

bold - určuje typ písma (tučné - bold, normální - normal)
\201C - symbol uvozovek, na této stránce si můžete vybrat jakýkoli jiný symbol a vložíte jeho číslo za obrácené lomítko, nebo můžete vložit i text...
#757575 - kód pro barvu písma, na této stránce si můžete zvolit barvu a získáte k ní její html kód
50px - velikost symbolu
10px - posuváte symbol doleva či doprava podle potřeby (left - levá, right - pravá)
5px - posuváte symbol nahoru či dolů podle potřeby (top - nahoru, bottom - dolů)

Také můžete kombinovat více věcí...

blockquote {
font-weight: bold;
padding: 10px 40px 10px 40px;
width: 75%;
margin-left: 40px;
text-align: justify;
position: relative;
border-left: 1px solid #DDDDDD;
}

.post blockquote:before {
content: " \201C ";
color: #757575;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
position: absolute;
left: 10px;
top:25px;
}

Citace v bublině

.post blockquote {
background: linear-gradient(#C1BDBD, #5F5F5F) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 10px 10px 10px 10px;
color: #FFFFFF;
margin: 30px 15px 5px;
padding: 15px 30px;
position: relative;
font-size: 11px;
}
.post blockquote:after {
border-color: rgba(0, 0, 0, 0) #C1BDBD;
border-style: solid;
border-width: 30px 0px 0px 20px;
top: -30px;
content: "";
display: block;
left: 50px;
position: absolute;
width: 0;
}

#C1BDBD, #5F5F5F - barva boxu, nejdříve nahoře, potom dole, vytvoří to přechod
#FFFFFF - barva textu
11px - velikost písma
#C1BDBD - barva trojúhelníku nad boxem

.post blockquote {
background: linear-gradient(#C1BDBD, #5F5F5F) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 10px 10px 10px 10px;
color: #FFFFFF;
margin: 30px 30px 5px;
padding: 15px 30px;
position: relative;
font-size: 11px;
}
.post blockquote:after {
border-color: rgba(0, 0, 0, 0) #C1BDBD;
border-style: solid;
border-width: 0px 30px 20px 0px;
top: 20px;
content: "";
display: block;
left: -30px;
position: absolute;
width: 0;
}

A ještě jednobarevná nestínovaná verze...

.post blockquote {
background: #C1BDBD;
border-radius: 10px 10px 10px 10px;
color: #FFFFFF;
margin: 30px 30px 5px;
padding: 15px 30px;
position: relative;
font-size: 11px;
}
.post blockquote:after {
border-color: rgba(0, 0, 0, 0) #C1BDBD;
border-style: solid;
border-width: 0px 30px 20px 0px;
top: 20px;
content: "";
display: block;
left: -30px;
position: absolute;
width: 0;
}

Další bubliny

Opravdu hodně flexibilní. Máte na výběr mnoho možností a kombinací. Bubliny lze umístit kamkoli...

.post blockquote {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #C92E2E;
border-radius: 70px 70px 70px 70px;
color: #333333;
margin: 1em 140px 80px;
padding: 30px 30px;
position: relative;
text-align: justify;
font-size: 11px;
}
.post blockquote:before {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #D56666;
border-radius: 50px 50px 50px 50px;
bottom: -40px;
content: "";
display: block;
height: 50px;
position: absolute;
right: 100px;
width: 50px;
z-index: 10;
}
.post blockquote:after {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #F19E9E;
border-radius: 25px 25px 25px 25px;
bottom: -60px;
content: "";
display: block;
height: 25px;
position: absolute;
right: 50px;
width: 25px;
z-index: 10;
}

.post blockquote {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #EE7C2A;
border-radius: 130px 130px 130px 130px;
color: #333333;
margin-bottom: 50px;
padding: 50px 50px;
position: relative;
text-align: justify;
font-size: 11px;
}
.post blockquote:before {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #EEA36D;
border-radius: 50px 50px 50px 50px;
bottom: -40px;
content: "";
display: block;
height: 50px;
position: absolute;
right: 100px;
width: 50px;
z-index: 10;
}
.post blockquote:after {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #F2C6A6;
border-radius: 25px 25px 25px 25px;
bottom: -60px;
content: "";
display: block;
height: 25px;
position: absolute;
right: 70px;
width: 25px;
z-index: 10;
}

.post blockquote {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #3228EB;
border-radius: 130px 130px 130px 130px;
color: #333333;
margin-top: 50px;
padding: 50px 50px;
position: relative;
text-align: justify;
font-size: 11px;
}
.post blockquote:before {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #8B87DA;
border-radius: 50px 50px 50px 50px;
top: -40px;
content: "";
display: block;
height: 50px;
position: absolute;
right: 100px;
width: 50px;
z-index: 10;
}
.post blockquote:after {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #C9C7F7;
border-radius: 25px 25px 25px 25px;
top: -60px;
content: "";
display: block;
height: 25px;
position: absolute;
right: 70px;
width: 25px;
z-index: 10;
}

.post blockquote {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #2FB41D;
border-radius: 70px 70px 70px 70px;
color: #333333;
margin: 1em 140px 80px;
padding: 30px 30px;
position: relative;
text-align: justify;
font-size: 11px;
}
.post blockquote:before {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #69CF5C;
border-radius: 50px 50px 50px 50px;
top: 20px;
content: "";
display: block;
height: 50px;
position: absolute;
left: -40px;
width: 50px;
z-index: 10;
}
.post blockquote:after {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #E39A25;
border-radius: 25px 25px 25px 25px;
top: 10px;
content: "";
display: block;
height: 25px;
position: absolute;
left: -70px;
width: 25px;
z-index: 10;
}

border: 5px solid #...; - barvy a tloušťka ráměčků
border-radius: ...; - určuje jak moc se rámeček podobá kruhu či obdélníku
#333333 - barva textu
padding: ...; - odsazení textu od okraje rámečku
margin: 1em 140px 80px; - čím bude text delší, bude se rámeček prodlužovat směrem dolů, ale nebude se rozšiřovat, pokud nechcete, smažte celý řádek
top: 10px; / left: -70px; / ... - tímto určíte polohu menších kruhů, vždy vybíráte pozici odshora nebo odspodu (top, bottom) a zleva nebo zprava (left, right). Například když chcete kruh v horním levém rohu, použijete top a left. Čísla potom určují o kolik je posun oproti rohu rámečku. Takže když chcete kruh například nad rámeček, dáváte hodnotu se znaménkem mínus viz příklady.



Snad vám pomůže na pochopení i tento obrázek...

Doufám, že je to alespoň trochu srozumitelné. Těch možností je samozřejmě mnohem více. Příště se pokusím ukázat, jak je možné mít i více druhů citací. Například když budete chtít mít citát z knihy, pak třeba spoiler v jiném rámečku apod...