Открыть-закрыть цитату или часть текста

Привет друзья. Как с помощью CSS красиво оформить цитату в блоге, а именно, чтобы её можно было закрыть и открыть. Каких только нет вариантов оформления цитаты не существует. Один из таких можно посмотреть в этом сообщении. И здесь 3 варианта оформления участка текста.

Сегодня пополню эту коллекцию и предлагаю вашему вниманию вот такой эффект.

С тех пор как Незнайка совершил путешествие в Солнечный город, прошло два с половиной года. Хотя для нас с вами это не так уж много, но для маленьких коротышек два с половиной года - срок очень большой. Наслушавшись рассказов Незнайки, Кнопочки и Пачкули Пестренького, многие коротышки тоже совершили поездку в Солнечный город, а когда возвратились, решили и у себя сделать кое-какие усовершенствования. Цветочный город изменился с тех пор так, что теперь его и не узнать. В нем появилось много новых, больших и очень красивых домов. По проекту архитектора Вертибутылкина на улице Колокольчиков было построено даже два вертящихся здания. Одно пятиэтажное, башенного типа, со спиральным спуском и плавательным бассейном вокруг (спустившись по спиральному спуску, можно было нырять прямо в воду), другое шестиэтажное, с качающимися балконами, парашютной вышкой и чертовым колесом на крыше. На улицах появилось множество автомобилей, спиралеходов, труболетов, авиагидромотоколясок, гусеничных вездеходов и других разных машин.

Код.

<blockquote class="collapsed">здесь текст цитаты</blockquote>

<style>blockquote.collapsed {
  margin:15px 30px;
  font:italic normal 14px/1.4 Georgia,Serif;
  height:0;
  padding:0 0;
  background-color:#CC3300 ; /*цвет полосы*/
  border:10px solid #CC9966 ; /*размер рамки и её цвет*/
  border-left-color:#CC3333  ; /*цвет уголка слева*/
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  overflow:auto;
width: 500px;
  -webkit-transition:all 1s cubic-bezier(1,0,0,1) .5s;
  -moz-transition:all 1s cubic-bezier(1,0,0,1) .5s;
  -ms-transition:all 1s cubic-bezier(1,0,0,1) .5s;
  -o-transition:all 1s cubic-bezier(1,0,0,1) .5s;
  transition:all 1s cubic-bezier(1,0,0,1) .5s;
}

blockquote.collapsed:hover {
  padding:10px 15px;
  background-color:#CCCC99 ;/* цвет фона открытого окна*/
  border:5px solid #156715;/*цвет рамки окна */
  height:300px;/*высота окна */
}</style>

То что в коде выделено синим цветом- это цветовые решения. Можно поменять их и легко подстроить под свой дизайн. Ширину окна width: 500px; подгоняйте по своему усмотрению.
 Если предполагаете часто такой вариант использовать, лучше код CSS установить в шаблоне блога. Вкладка шаблон-изменить HTML. Находим строку ]]></b: skin> и над ней его устанавливаем. Только уже без тегов style> и </style>.
Затем при написании сообщения перейти из режима создать в режим HTML и в нужном месте вставить маленький код HTML.

<blockquote class="collapsed">здесь текст цитаты</blockquote>

Вместо строки синего цвета вставляйте свой текст.

При одноразовом использовании, копируйте весь код целиком и в редакторе, также в режиме HTML устанавливайте его. Предварительно поменяйте в нём все значения и текст на свои.

Строки вот такого вида /*высота окна */, с текстовым пояснением, на ваше усмотрение. Хотите убирайте, хотите нет. И в том и в другом случае всё будет работать корректно.

Не буду отнимать больше ваше драгоценное время. Хороших всем выходных. Заглядывайте ещё в мои шпаргалки. Спасибо всем. Увидимся.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email