Слайдер открывашка.

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

Применение слайдера эхо.

Куда его вставить на страницу и зачем я не знаю,но чтобы не потерять и не забыть для себя некоторые нюансы публикую его на страницах на общее обозрение.Суть не в том,что он будет полезен или нет,каждый решит по своему,но само решение его простота и гибкость в настройках может доставить удовольствие редактирования и отладки  CSS каждому,кто найдёт пару свободных минут и воспользуется онлайн редактором,который в визуальном режиме позволяет редактировать и изменять все переменные не боясь,что либо сломать или испортить,так как есть возможность в любой момент перезагрузить страницу и начать всё сначала.

Опросы онлайн-отзывы.

Установка слайдера.

Установка стандартна без всяких изысков и нюансов.Для единовременного использования можно просто скопировать весь код и вставить на страницу в редакторе HTML.Для многократного использования копируем код CSS и устанавливаем его или в шаблон или же в любой гаджет HTML и JavaScript .

<style>
h1, h3 {color:#675;font-family:sans-serif;
}.v-gol7 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDtJyAWNeCujkHP8WfcFB4AVBKxs1lAX0RK_ODhlxqBfLar6JTQnmz1jYv_d3dwdeVIsEtTdFQWMKtYJ-n502fc6Tsv_lcrI9pBsG-5q-n8Hl9oLQ-NtcWgMlcgoz4xSLen1ZABYg3OPd3/s1600/v-gol.ru_baterf.gif)#fff;
    width:560px;
    height:360px;
    overflow:hidden;
    position:relative;
    -webkit-perspective:600px;
}.cube {
    width:230px;
    height:250px;
    position:absolute;
}.cube .title {
    color:#facfac;
    font-family:sans-serif;
    font-weight:lighter;
    padding:jhun 18px;
}.title span {
    display:block;
    font-size:18px;
    padding-top:8px;
}.red {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2nqB9Jrj5-cOMv_YbczYSH3ywTXbEgsxQme_upcFqbvXQ3ANkOA60E4ZdvGxPrAHN3BPV7-eIkpAOlmAt_KQt6hdU4qlIxRZ04Eom5OFMCO9WcZnBt0lKHh4EQnqKpw1QisuhIPaxFbr8/s1600/v-gol.ru77.jpg)#ed4343;
    top:50px;
    left:278px;
   -webkit-transform-origin: right center;
   -webkit-transform-style: preserve-3d;
   -webkit-transition: -webkit-transform 0.5s ease-in-out;
    z-index:50;
}.blue {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfWBOnHvbhBGKUUEW2ADPWLlx_7t86K-fHhHzv4n8MqI1Bs0GcyIx9sDNKjjyD7EN2OFeeqokJJ9AqOH7uMzSXQNXczNwCrZE0K3zVZL9ma_ZjBEKVp-FIqjqnMJPsID8DSqp-MDcZcFHJ/s1600/v-gol.ru-78.jpg)#43b7ed;
    top:50px;
    left:78px;
    -webkit-transform-origin: left center;  
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
        z-index:50;
}.header {
    background:#f0aaff;
    position:absolute;
    top:-40px;
    height:40px;
    line-height:40px;
    color:#000;
    font-weight:bold;
    font-family:sans-serif;
    text-align:center;
    width:100%;
    opacity:0.8;
    -webkit-transition: -webkit-transform 0.5s ease;
}.v-gol7:hover .red {
        -webkit-transform: rotateY(-70deg) translateX(150px) translateY(24px) translateZ(50px);
}.v-gol7:hover .blue {
        -webkit-transform: rotateY(70deg) translateX( -150px )  translateY(24px) translateZ(50px);
}.v-gol7:hover .header {
    -webkit-transform: translateY(40px);
}.v-gol7:hover .next {
 opacity:1;
        margin-top:10px;
}.next {
    background:#;opacity:0.3;
    top:50px;
    left:178px;
    -webkit-transform-origin: left center;  
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 0.6s ease-in-out;
    z-index:1;
     -webkit-transform: translate3d( -50px, 400px, -800px );
    box-shadow:0px 0px 30px 10px #eee;
    opacity:0.4;
}.v-gol7 .next {
    -webkit-transform: translate3d( 0px, 20px, 0px );
    box-shadow:none;
    opacity:0;
    margin-top:250px;
}.v-gol img {
 width: 100px;
 height: 100px;
-webkit-border-radius: 100px;
 -moz-border-radius: 100px;
 -ms-border-radius: 100px;
 -o-border-radius: 100px;
 border-radius: 100px;
 }</style>

<div class="v-gol7">
    <div class="header">
 Время, которое мы имеем, - это деньги, которых мы не имеем.
    </div><div class="cube blue">
        <div class="title"></div>
    </div><div class="cube red"><div class="title"></div></div>
        <div class="cube next">
         <div style="width:230px; height:260px; text-align:center; opacity:0.9;background:url()#fff;">Текст видео ссылка<div class="v-gol img"><a href="Адрес сайта" rel="nofollow" target="_blank"><img class="border-radius: 100px" src="Адрес картинки" height="120px" width="120px" /></a></br></div></div></div></div>

Следующая часть HTML будет устанавливать на страницу в том месте,где будет располагаться сам слайдер.Менять можно всё что угодно в гаджете. Изображения,цвет блоков,цвет текста,размер и т.д и т.п. В самом блоке,где будет выводиться скрытая информация можно при желании разместить всё что душа пожелает,даже контент 18+.Там прекрасно будут чувствовать себя не только текст и картинки,но и различные скрипты и коды.При желании можно даже будет вмонтировать видеоролик или ещё что-то похожее.Удачи в творчестве и пускай ваши успехи эхом отразятся на вашем благосостоянии.Наведите курсор на картинку и перед вами откроется мини кинозал с шикарным сборником композиций Franka Duval.Приятного просмотра.