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

цитата Привет друзья. Как с помощью 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


18 комментариев:

  1. ух, ты, как интересно! СПАСИБО! надо подумать где применить))))))

    ОтветитьУдалить
    Ответы
    1. Ирина, тут можно хоть что вставить. Хоть цитату, текст и т. д.

      Удалить
  2. Ух ты, здорово как!

    ОтветитьУдалить
  3. Наташ, а ведь туда и фото можно воткнуть. Не хочешь попробовать.

    ОтветитьУдалить
    Ответы
    1. Я так уже делала, только с другим кодом. Этот твой наряднее)) Я себе в закладки беру твои посты, которые могут потом пригодиться. Спасибо, Вика!

      Удалить
    2. Не за что Наташ, не потеряй закладки только.

      Удалить
    3. Иногда мне хочеться так сделать - вставить какой-то текст в свернутом виде, вместо ссылки. Только мне кажется, что было бы понятнее, если бы на этой полосочке было написано, например, "читать..." или заголовок.
      Спасибо за код!

      Удалить
    4. Пожалуйста, Олеся.Обычно над ней пишут пояснение.

      Удалить
  4. Хех, исключено) Закладки по папкам, синхронизировано как надо, и все такое прочее. Опять таки, поиск у тебя хороший, коли что ;)

    ОтветитьУдалить
    Ответы
    1. Ну, Наташа, ты молодец. А у меня такой балаган с закладками...всё ни как не могу генеральную уборку сделать.

      Удалить
  5. Здравствуйте, полезная статья. Подскажите, пожалуйста, имею канал на ютубе, но хочу еще сделать блог на blogger, обязательно ли создавать блог на туже почту google, что регистрировал канал на ютубе или можно создать блог на blogger совершенно на другую google почту. Но тогда еще один вопрос, а как быть с google+ страницей, ведь ее тоже нужно привязать к блогеру на blogger?

    ОтветитьУдалить
    Ответы
    1. Анна, блог можно создать на любую почту Гугл. Потом после создания можно ещё и дополнительно указать ещё одну если надо. Что касается привязки со страницей Гугл+ это дело личное. У меня блог не привязан не к профилю в +, не к странице. Предпочитаю отделять мух от котлет. Блог блогом, Гугл+ пусть останется соц.сетью. Многие привязывают, потом наоборот. Кто как хочет.
      Здесь можно проще. Я создала страницу на Гугл+ и анонсирую туда статьи. Ровно, как и в профиле или в сообществах. Всё ОК. Без вской привязки.
      Создавайте блог, будут вопросы, всегда рада ответить. Удачи.

      Удалить
  6. Добрый день, Виктория! Почему при каждом повторном использовании этого эффекта на странице "сообщения", настройки цветового разрешения, высота откр. окна и т.д. перебрасываются от первого размещённого варианта. Можно как-то сохранять свои настройки для каждого отдельного публикуемого сообщения ?

    ОтветитьУдалить
    Ответы
    1. Конечно можно. И для второго и для других Просто в обеих кодах все значение "collapsed" надо сделать "collapsed 1". "collapsed 2" и так далее.

      Удалить
    2. Спасибо большое:))

      Удалить
    3. Обращайтесь.

      Удалить
  7. Вика, привет. Вот таким симпатичным эффектом я и воспользовалась. Спасибо. Мне понравилась идея.

    ОтветитьУдалить
  8. Привет Люба. Сбегала к тебе в блог, посмотрела. Здорово получилось.

    ОтветитьУдалить

Пользовательский поиск