0

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

Ефект "отваряне - затваряне"
Здравейте приятели. Как с помощта на 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 режим го инсталирайте на мястото, което желаете. Ще изглежда така.





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

Доскоро.

Няма коментари :

Публикуване на коментар


Copyright © БЛОГ ЗА БЛОГОВЕ©2016- | All Rights Reserved
Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита