W3.CSS Cytaty
Sam ból jest miłością, głównym systemem przechowywania. Że masa życia nie jest ciepłym uśmiechem niedźwiedzi. Śmiech urny Nic nie jest skomplikowane.
Wyświetlanie cytatów
Klasa w3-panel to idealna klasa do wyświetlania cytatów.
Cytaty są często wyświetlane z szarym tłem, lewym paskiem obramowania i kursywą:
Przykład
<div class="w3-panel w3-leftbar w3-light-grey">
<p class="w3-xlarge w3-serif">
<i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</div>
Duże cytaty
W Internecie często używa się dużych cytatów:
Przykład
<div class="w3-panel w3-leftbar w3-sand">
<p class="w3-xxlarge w3-serif">
<i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</div>
Cytaty blokowe
Jeśli używasz standardowego elementu HTML <blockquote>, zauważ, że przeglądarka doda dodatkowy lewy i prawy margines:
"Make it as simple as possible, but not simpler."
Albert Einstein
Przykład
<blockquote class="w3-panel w3-leftbar w3-light-grey">
<p class="w3-large">
<i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</blockquote>
Korzystanie z symboli HTML
Zamiast znaków ampersand możesz użyć standardowych symboli HTML:
| Symbol | Kod |
|---|---|
| « | #8810 |
| ✂. | #9986 |
| ❝. | #10077 |
| ❞. | #10078 |
| ❠. | #10080 |
| ✔ | #10004 |
Sam ból jest miłością, głównym systemem przechowywania. Że masa życia nie jest ciepłym uśmiechem niedźwiedzi. Śmiech urny Nic nie jest skomplikowane.
Sam ból jest miłością, głównym systemem przechowywania. Że masa życia nie jest ciepłym uśmiechem niedźwiedzi. Śmiech urny Nic nie jest skomplikowane.
Przykład
<div class="w3-panel w3-light-grey">
<span
style="font-size:150px;line-height:0.6em;opacity:0.2">❝</span>
<p class="w3-xlarge" style="margin-top:-40px">
<i>"Lorem ipsum dolor sit amet, consectetur adipiscing elit ..."</i></p>
<p>Albert
Einstein</p>
</div>
Przykład
<div class="w3-panel w3-center w3-leftbar w3-sand">
<p><i
class="w3-serif w3-xlarge">
<span
style="font-size:150px;line-height:0.6em;opacity:0.2">✔</span>
Programming in C will slowly decline.<br>
Programming in JavaScript
will be more important.</i></p>
</div>
Korzystanie z niesamowitych ikon czcionek
Możesz także użyć ikon z biblioteki Font Awesome:
Przykład
<div class="w3-panel w3-leftbar">
<p><i class="fa fa-quote-right
w3-xxlarge"></i><br>
<i class="w3-serif w3-xlarge">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</i></p>
</div>
Możesz także zmienić kolor i krycie:
Przykład
<div class="w3-panel w3-sand w3-leftbar">
<p><i class="fa fa-quote-right
w3-xxlarge w3-opacity"></i>
<span class="w3-serif
w3-xlarge">
Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</span></p>
</div>
Czarny cytat:
Sam ból jest miłością, głównym systemem przechowywania. Że masa życia nie jest ciepłym uśmiechem niedźwiedzi. Śmiech urny Nic nie jest skomplikowane.
Przykład
<div class="w3-panel w3-black">
<p class="w3-large
w3-serif">
<i class="fa fa-quote-right w3-xxlarge w3-margin-right"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</p>
</div>
Wyświetlaj cytaty jako karty
Sam ból jest miłością, głównym systemem przechowywania. Że masa życia nie jest ciepłym uśmiechem niedźwiedzi. Śmiech urny Nic nie jest skomplikowane.
Przykład
<div class="w3-panel w3-card-4 w3-light-grey" style="width:50%">
<p
class=" w3-large w3-serif">
<i class="fa fa-quote-right w3-xxlarge
w3-text-red"></i><br>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit ...</p>
</div>
Sam ból jest miłością, głównym systemem przechowywania. Że masa życia nie jest ciepłym uśmiechem niedźwiedzi. Śmiech urny Nic nie jest skomplikowane.
Przykład
<div class="w3-panel w3-card-4 w3-center" style="width:50%">
<span
style="font-size:100px">❝</span><br>
<p style="margin-top:-60px">
<i><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</b></i></p>
</div>