Ефект "отваряне - затваряне" на цитат или част от текст

Здравейте приятели. Как с помощта на CSS красиво да оформите един цитат или част от текст в публикация от блога си, така че да постигнете ефекта да се отваря и затваря. Какви ли не варианти на оформление на цитати или част от текста съществуват! Но днес аз предлагам на вашето внимание следният ефект. Кодът му е в два варианта. С текстово обяснение на руски език и без него.
Това е така, защото чета и ползвам руски източници. Рунет, както руснаците наричат своя рускоезичен Internet, е много богат на всякаква информация.
Кодът е с текстово обяснение на руски език:

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

и без него:

<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:#FECFBF ;

  border:10px solid #FEEFDF ;

  border-left-color:#FE9F9F  ;

  -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:#FEFFBF ;

  border:5px solid #CCFECC;

  height:300px;

}</style>

Редовете от типа / * височина при отваряне * /, са с текстово обяснение. На руски език. Това текстово обяснение по ваша преценка можете да отстраните или не. И в двата случая всичко ще работи правилно. Фрагментите от кода, които са в синьо са цветовите решения. Можете да ги промените лесно и така ще ги приспособите към цветовата гама на вашия проект. Ширината при отваряне е 500px; , а височината при отваряне е 300px;. Променете ги по свое собствено усмотрение, в зависимост от това, с какво място разполагате. Ако възнамерявате да използвате този ефект често, по-добре е да въведете CSS кода в шаблона на блога си. Пътят е следният ➔ шаблон (тема) ➔ промяна на HTML код ➔ намерете реда от него ]]></b: skin> (предполагам, че си спомняте как) и над него вграждате кода. Само че без таговете <style> и </style>.  Ето така.

<blockquote class="collapsed">текст или цитат</blockquote>

blockquote.collapsed {
  margin:15px 30px;
  font:italic normal 14px/1.4 Georgia,Serif;
  height:0;
  padding:0 0;
  background-color:#FECFBF ;

  border:10px solid #FEEFDF ;

  border-left-color:#FE9F9F  ;

  -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:#FEFFBF ;

  border:5px solid #CCFECC;

  height:300px;

}

++++

<blockquote class="collapsed">текст или цитат</blockquote>

blockquote.collapsed {
  margin:15px 30px;
  font:italic normal 14px/1.4 Georgia,Serif;
  height:0;
  padding:0 0;
  background-color:#FECFBF ;

border:10px solid #FEEFDF ;

border-left-color:#FE9F9F  ;

-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:#FEFFBF ;

border:5px solid #CCFECC;

height:300px;

}

И да не забравите да запазите промените! След това, когато създавате публикация, преминете в HTML режим и на необходимото място в нея вмъкнете само този малък HTML код.

<blockquote class="collapsed">текст или цитат</blockquote>

Вместо участъка от реда в синьо въведете вашия цитат или текст. Ако ще използвате ефекта "отваряне - затваряне" на цитат или част от текста в публикация еднократно, копирайте целия код и в публикацията в HTML режим го инсталирайте на мястото, което желаете. Ще изглежда така.

Здравейте приятели. Как с помощта на CSS красиво да оформите един цитат или част от текст в блога си, така че да постигнете ефекта да се отваря и затваря. Какви ли не варианти на оформление на цитати или част от текста съществуват! Но днес аз предлагам на вашето внимание следният ефект. кодът му е:

Само сложете курсора върху розовата стрелка и ще постигнете ефекта "отваряне". Прочетете текста и отдалечете курсора от него. Постигате ефекта "затваряне".
Напомням, че е добре предварително да направите промяна на посочените по-горе стойности в него по ваш вкус.
Няма да отнемам повече от ценното ви време. Ползотворна работа на всички. И благодаря, че прочетохте моята публикация.

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и гласувате за блога на: