ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

W3.CSS Учебник

W3.CSS Учебник W3.CSS Введение W3.CSS Цвета W3.CSS Контейнеры W3.CSS Панели W3.CSS Границы W3.CSS Открытки W3.CSS Шрифты W3.CSS Текст W3.CSS Округлости W3.CSS Внутренние отступы W3.CSS Внешние отступы W3.CSS Отображение W3.CSS Кнопки W3.CSS Примечания W3.CSS Цитаты W3.CSS Оповещения W3.CSS Таблицы W3.CSS Списки W3.CSS Изображения W3.CSS Вводы W3.CSS Значки W3.CSS Ярлыки W3.CSS Иконки W3.CSS Адаптив W3.CSS Макеты W3.CSS Анимация W3.CSS Эффекты W3.CSS Панели W3.CSS Выпадающие W3.CSS Аккордионы W3.CSS Навигация W3.CSS Сайдбар W3.CSS Вкладки W3.CSS Пагинация W3.CSS Прогресс-бары W3.CSS Слайдшоу W3.CSS Модальные окна W3.CSS Всплывающие подсказки W3.CSS Сетка W3.CSS Код W3.CSS Фильтры W3.CSS Тренды W3.CSS Кейс W3.CSS Material-дизайн W3.CSS Валидация W3.CSS Версии W3.CSS Мобильность

W3.CSS Цвета

W3.CSS Классы цветов W3.CSS Цвет Material W3.CSS Цвет Flat UI W3.CSS Цвет Metro UI W3.CSS Цвет Win8 W3.CSS Цвет iOS W3.CSS Библиотеки цветов W3.CSS Цветовые схемы W3.CSS Цветовые темы W3.CSS Генератор цветов

Примеры

W3.CSS Примеры W3.CSS Демо W3.CSS Шаблоны

Справочники

W3.CSS Справочник W3.CSS Загрузки

W3.CSS Уроки для начинающих

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">&#10077;</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>

Попробуйте сами »

Программирование на С будет медленно снижаться.
Программирование на JavaScript будет становиться более популярнее.

Пример

<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">&#10004;</span>
  Программирование на С будет медленно снижаться.<br>
  Программирование на JavaScript будет становиться более популярнее.</i></p>
</div>

Попробуйте сами »


Использование иконок Font Awesome

Вы также можете использовать иконки из библиотеки Font Awesome:


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

Попробуйте сами »

Вы также можете изменить цвет и непрозрачность:


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-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">&#10077;</span><br>
  <p style="margin-top:-60px">
  <i><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</b></i></p>
</div>

Попробуйте сами »