Ученье - свет, а неучёных - тьма)))

пятница, 8 июля 2016 г.

Профиль автора блога (Идея 7)

       У всезнающего и всеумеющего Justus'a (Вlogodel - Вlogger, Блогспот, ссылка на который дана в сообщении "Послесловие") увидела интересную идею для тех, кто не очень хочет афишировать свой профиль. Эта идея позволяет спрятать информацию, появится она только при наведении мыши. На моём экспериментальном блоге "Живи, село!" эта информация спрятана за словами "Об авторе".
        Делается это на удивление просто. Впрочем, как всё гениальное)

        Добавляем гаджет HTML/JavaScript, в который добавляем код:

<style>#Foll {
  /*фон всего гаджета*/
  overflow: hidden; /*скрываем все что за элементом*/

  border-radius: 5px;
  box-shadow: none;
/*правила анимации*/
  -webkit-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  -moz-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  -o-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  height: 23px; /*высота в состоянии покоя - вычислена опытным путем*/
  width: auto; /*ширина*/
}
/*Стили при наведении курсора*/
#Foll:hover {


  
  height: 260px; /*полная высота - вычислена опытным путем*/
}


}</style><div id="Foll"><left><span style="color: #3d85c6; font-family: Georgia, Times New Roman, serif; font-size: x-large;"><b>Об авторе</b></span></center><br /><div class="separator" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;">
<img border="0" height="50" src="http://img10.proshkolu.ru/content/media/pic/icon/4000000/3226000/3225307-e0134287.jpg" width="47" /></div>
<div style="text-align: left;">
Никогда прежде историей не интересовалась, а тут вдруг... умиляет старина, вещи приводят в трепет и изумление... Похоже, сама стала стариной)))</div>
</div>

То, что выделено зелёным - URL картинки
То, что выделено жёлтым - Ваш текст
left - слева, center - в центре...

Правда, здОрово?)

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

  1. Спасибо, Лидия, очень интересный материал.

    ОтветитьУдалить
    Ответы
    1. Пожалуйста, Лариса! Идеи множатся. Развиваюсь...)

      Удалить