W3.CSS Цитати
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.
Відображення цитат
Клас w3-panel є ідеальним класом для відображення цитат.
Цитати часто відображаються із сірим фоном, лівою межею і курсивним шрифтом:
Приклад
<div class="w3-panel w3-leftbar w3-light-grey">
<p class="w3-xlarge w3-serif">
<i>"Зробіть це якомога простіше, але не примітивно."</i></p>
<p>Альберт Эйнштейн</p>
</div>
Великі цитати
Великі цитати часто використовуються в Інтернеті:
Приклад
<div class="w3-panel w3-leftbar w3-sand">
<p class="w3-xxlarge w3-serif">
<i>"Ви хочете провести залишок життя, продаючи газовану воду, чи хочете просто змінити світ?."</i></p>
<p>Стів Джобс</p>
</div>
Стандартний HTML елемент blockquote / Цитати
Якщо ви використовуєте стандартний HTML елемент <blockquote>, майте на увазі, що браузер додасть додаткові лівий та правий поля (margin):
"Ми знаходимось тут, щоб зробити свій внесок в цей світ. Інакше навіщо ми тут?"
Стів Джобс
Приклад
<blockquote class="w3-panel w3-leftbar w3-light-grey">
<p class="w3-large">
<i>"Ми знаходимось тут, щоб зробити свій внесок в цей світ. Інакше навіщо ми тут?"</i></p>
<p>Стів Джобс</p>
</blockquote>
Використання HTML символів
Ви можете використовувати стандартні символи HTML замість амперсандів:
| Символ | Код |
|---|---|
| ≪ | #8810 |
| ✂ | #9986 |
| ❝ | #10077 |
| ❞ | #10078 |
| ❠ | #10080 |
| ✔ | #10004 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.
Приклад
<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>
Приклад
<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>
Програмування на С буде поступово знижуватись.<br>
Програмування на JavaScript буде ставати більш популярним.</i></p>
</div>
Використання іконок Font Awesome
Ви також можете використовувати іконки із бібліотеки Font Awesome:
Приклад
<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>
Ви також можете змінити колір та непрозорість:
Приклад
<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>
Чорна цитата:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.
Приклад
<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>
Показати цитати як картки
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.
Приклад
<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>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper. Phasellus us urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.
Приклад
<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>
