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 risus 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>
