Объявление
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.

Оригинальное всплывающее окно к Новому году Blogger

Приветствую, всех. В преддверии Новогодних праздников хочу вам сегодня предложить красивое всплывающее окно, в котором можно будет разместить любую информацию. Ещё сделаем красивую кнопку - картинку с эффектом анимации для открытия этого окна, которая уже одним своим видом ни как не оставит без внимания ваших посетителей. Такое обычное, но с необычным эффектом всплывающее окно.

всплывающее окно

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

Давайте уже смотреть, что у меня получилось. Яркая кнопка в левом нижнем углу на тестовом блоге. Настройки разберём ниже.


Скопируйте сначала весь код и внесите свои изменения.

<style>
/*<![CDATA[*/
.tada{-webkit-animation:tada 1s linear 1s infinite normal;animation:tada 1s linear 1s infinite normal}
@-webkit-keyframes tada{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
}
@keyframes tada{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
}
.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
@keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
.idul_layout{text-align:center;position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(9,150,13,.8);z-index:99999;display:none}
.idul_message{width:50%;background:#fff;font-size:16px;border-radius:5px;padding:20px;border:1px solid transparent;text-align:center;color:#FF0000;position:absolute;top:10%;left:50%;margin-left:-25%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}l
.profile-idul,.profile-idul2{padding:4px}
.idul_message:before{content:"";height:0;width:0;position:absolute;bottom:-40px;left:20px;border:20px solid transparent;border-color:#fff transparent transparent}
.profile-idul{background:#0c9f17;border:1px solid transparent;border-radius:100%;position:fixed;bottom:10px;left:10px;cursor:pointer;width:50px;height:50px;z-index:9999}
.profile-idul2{background:#fff;border:1px solid transparent;border-radius:100%;position:absolute;bottom:-240px;left:-120px;width:200px;height:200px}
.close_idul{font-size:12px;color:#E0FFFF
;position:absolute;top:-35px;right:-35px;cursor:pointer}
@media (max-width:800px){.idul_message{width:90%!important;margin-left:-45%!important;}
.profile-idul2{left:50%;margin-left:-105px;}
.idul_message:before{left:50%;margin-left:-20px;}
.close_idul{color:#555;top:-16px;right:0;}
}
/*]]>*/
</style>

<img class='profile-idul tada' onclick='openIdulfitri()' expr:alt='data:post.author' height='50' src='http://www.kid.ru/forummam9/08d1ac21623c032c8b94599c8b1cf30d.gif' width='50' title="Нажми здесь!"/>
<div class="idul_layout animated flip" id="id_fitri">
  <div class="idul_message">
    <h2>"Дороги друзья, подписчики и гости блога"</h2>
    <p>От всего сердца поздравляю вас с Новым 2018 годом.
      <br/><br/> Пусть в вашем доме будет радость и счастье. Добра и мира вашему дому <b />Спасибо за то что мы вместе<b>УРА!!!</b>
      <br/>
<img src='http://novymgodom.ru/_ph/23/2/549759756.png' width='200' />
      </b></p><br />
    <img class='profile-idul2' expr:alt='data:post.author' height='200' src='http://www.kid.ru/forummam9/08d1ac21623c032c8b94599c8b1cf30d.gif' width='200' />
    <div class="close_idul" onclick='closeIdulfitri()'>закрыть</div>
  </div>
</div>
<script>
//<![CDATA[
function openIdulfitri(){var e=document.getElementById("id_fitri");"block"!==e.style.display?e.style.display="block":e.style.display="none"};
function closeIdulfitri(){var e=document.getElementById("id_fitri");"none"!==e.style.display?e.style.display="none":e.style.display="block"};
//]]>
</script>


От строки <div class="idul_message"> до строки <div class="close_idul" onclick='closeIdulfitri()'>закрыть</div> можно вставлять что угодно. Разместить любую информацию, картинки, формы подписки, текст, галереи.

Сейчас немного с настройками цвета. Основной полупрозрачный фон задали в формате rgba. Можно поменять на своё.

Немного для понимания.Если вы сейчас перейдёте к этой таблице цветов, то увидите что все цвета в формате R G B и все они имеют трёхзначное значение. Цвета RGBA схоже со стандартными правилами RGB, но мы должны задать дополнительное десятичное значение прозрачности после значения цвета в промежутке от 0.0 (полная прозрачность) до 1 (полная непрозрачность).

У меня в коде зелёный цвет background:rgba(9,150,13,.8). То есть первые 3 цифры в формате R G B и последняя это значение прозрачности. Будьте внимательны при смене ко всем символам. Если вам не нужна полупрозрачность, просто вставляйте трёхзначные значения R G B.

Как смогла объяснила, но думаю, что суть понятна. обещаю написать позже подробнее про это.

С фоном разобрались. Сейчас нужно подобрать картинку в формате PNG, которая будет отображаться в углу блога и при открытии окна. В двух местах - 1 маленькая и 2 большая. Можно большую вообще убрать или установить другую.

http://www.kid.ru/forummam9/08d1ac21623c032c8b94599c8b1cf30d.gif

Жёлтым цветом я отметила своё изображение
, которое отражено в поздравлении. Можете убрать совсем тоже, если не предполагается картинка или поменять на своё. И весь текст, отмеченный зелёным это уже ваше дело.

Готовый код вставляйте обычным способом в гаджет HTML/JavaScript в любом месте макета блога. Всегда легко можно удалить или поменять что - то.

Если решите применить у себя такое интересное всплывающее окно, напишите пожалуйста в комментариях. Хочется посмотреть, как вы решили реализовать такую идею. И если возникнут вопросы по дизайну, обращайтесь.
✻✻✻
И ещё сделала подборку Новогодних украшений для блога, которые публиковала у себя раньше. Чтобы не бегать и не искать делюсь с вами. Ссылки, во избежании спама, не кликабельные. Скопируйте и установите любую в строку браузера.


Новогодний таймер отсчёта времени
http://www.shpargalochki.ru/2015/12/Novogodnij-tajmer-otschjota-vremen.html 

Красивый новогодний пейзаж для блога
http://www.shpargalochki.ru/2014/12/novogodnij-pejzazh-v-bloge.html

Новогодние идеи для блога
http://www.shpargalochki.ru/2016/12/novogodnie-ukrashenija-bloga.html

Новогодние украшения для блога
http://www.shpargalochki.ru/2014/11/novogodnie-ukrashenija-dlja-bloga.html

И опять про Новый год
http://www.shpargalochki.ru/2014/12/novogodnie-ukrashenija-bloga.html


✻✻✻

Для просмотра следующих вариантов, скопируйте код и просмотрите на этой странице результат.

Целующиеся справа снеговики 

<div style="position:absolute; right:0%; top:-20px;"><img src="http://mynew-year.ru/Animation/Snegoviki.gif" border="0" /></div>

Шарики 

 <div style="position:absolute; top:0; right:0;">
  <img border="0" src="http://pro-fi.at.ua/neydalat/shapka.gif" align="right">
  </div>

Красива надпись  красная

<img src="http://i44.servimg.com/u/f44/16/54/26/99/3010.png" alt="C Новым годом" title="C Новым годом" border="0" height="87px" width="440px" />

Голубая надпись

<img src="http://i44.servimg.com/u/f44/16/54/26/99/36-cop11.png" alt="C Новым годом" title="C Новым годом" border="0" height="156" width="300" />

Ветка слева в углу 

<div style="position:absolute; right:70%; top:-90px;"><img src="http://img-fotki.yandex.ru/get/5313/111874181.a4/0_94e0f_86e3ab9c_XL" border="0" /></div>

 Можно на эту ветку ещё игрушек добавить подставьте код рядом

 <div style="position:absolute; right:70%; top:-90px;"><img src="http://img-fotki.yandex.ru/get/6616/136487634.775/0_b4aba_42fa64c8_XL.jpg" border="0" /></div>

Во всех кодах можно поменять картинку, заменив лишь её адрес

<img src="http://img-fotki.yandex.ru/get/6616/136487634.775/0_b4aba_42fa64c8_XL.jpg"

Гирлянда


<style type="text/css">
#garland {position:absolute;top:0;left:0;background-image:url('https://i13.servimg.com/u/f13/14/80/95/87/christ10.png');height:36px;width:100%;overflow:hidden;z-index:99}
#nums_1 {padding:100px}
.garland_1 {background-position: 0 0}
.garland_2 {background-position: 0 -36px}
.garland_3 {background-position: 0 -72px}
.garland_4 {background-position: 0 -108px}
</style>  <div id="garland" class="garland_4"><div id="nums_1">1</div></div>

<script type="text/javascript">
function garland() {
nums = document.getElementById('nums_1').innerHTML
if(nums == 1) {document.getElementById('garland').className='garland_1';document.getElementById('nums_1').innerHTML='2'}
if(nums == 2) {document.getElementById('garland').className='garland_2';document.getElementById('nums_1').innerHTML='3'}
if(nums == 3) {document.getElementById('garland').className='garland_3';document.getElementById('nums_1').innerHTML='4'}
if(nums == 4) {document.getElementById('garland').className='garland_4';document.getElementById('nums_1').innerHTML='1'}
}

setInterval(function(){garland()}, 400) 

</script>


Регулируйте частоту мерцания лампочек, меняя значения 400. Код вставляем в гаджет HTML/JavaScript.

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

Всем спасибо за внимание и до новых встреч.


здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


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

  1. Спасибо, Виктория! Сейчас все украшают свои блоги к Новому году!

    ОтветитьУдалить
  2. Да, пора уже. У многих уже видела. Сама не знаю на чём выбор остановить

    ОтветитьУдалить
  3. Примеряла себе украшения, классно смотрятся! И настроение праздничное сразу задают. Снеговики очаровательные :)

    ОтветитьУдалить
  4. Наташа, конечно, ближе к празднику настроение другое. магазины и улицы уже украшают. А тут увидела что и на блогах некоторые уже понавешали украшалок.

    ОтветитьУдалить
  5. И тебе всего хорошего в наступающем году! Пойду что ли хоть фон сменю.)

    ОтветитьУдалить
    Ответы
    1. Ой, Олеся. Сколько лет сколько зим. Спасибо. Вас успею ещё поздравить.

      Удалить
  6. Анонимный12/25/2017

    Круто украсила свой блог Спасибо Вам)))

    ОтветитьУдалить
  7. Сбегала к Вам за Новогодним настроением. Красота.

    ОтветитьУдалить
  8. смотрится классно.Я тоже поставила.А что можно поставить на это место,или выше,когда не праздники? Чтобы как-то заполнить пустоту по бокам?Может картинка какая есть с активной ссылкой,или видео , или спойлер,ну что-нибудь и красивое и полезное?

    ОтветитьУдалить
  9. Так я вроде написала в статье - От строки можно вставлять что угодно. Разместить любую информацию, картинки, формы подписки, текст, галереи.Или что ты имеешь в виду. И про какую пустоту ты говоришь. Не поняла.

    ОтветитьУдалить
  10. я имею в виду,что на встроенных шаблонах можно было ширину делать на весь монитор,ну или как правильно сказать,а на стороннем нет и бо бокам полосы пустые будут когда всё новогоднее уберется.

    ОтветитьУдалить
  11. Попробуй поиграться со всеми значениями ширины width в этом участке кода ( обязательно сделай резервную копию заранее.
    #outer-wrapper {
    font: 110% Arial,Serif;
    margin: 0 auto;
    padding-top: 0;
    text-align: left;
    width: 970px;
    }
    #outer-wrapper1 {
    }
    #main-wrapper {
    background: #b7b9bb;
    border: 1px solid #DDDDDD;
    float: left;
    margin-left: 7px;
    margin-top: -7px;
    overflow: hidden;
    padding: 8px;
    width: 609px;
    word-wrap: break-word;
    }
    #sidebar-wrapper {
    float: right;
    margin-right: -23px;
    margin-top: 9px;
    overflow: hidden;
    width: 355px;
    word-wrap: break-word;
    }
    #sidebar-wrapper2 {
    float: left;
    margin-right: 0;
    margin-top: 0;
    overflow: hidden;
    width: 200px;
    word-wrap: break-word;
    }
    тут может картинка некорректно выглядеть. Ну пробовать надо.
    Какие ярлыки под сообщениями. У тебя как таковых сообщений ведь нет.

    ОтветитьУдалить
  12. а под или над чем его вставить,кож этот?

    ОтветитьУдалить
  13. Не надо его вставлять ни куда Он в шаблоне твоём. Там в нём нужно поиграться с width

    ОтветитьУдалить
  14. а,нашла,поняла.Про ярлыки я имею в виду,что сам гаджет с ними не удаляется из слайдбара и ещё внизу под сообщениями сидит,я спецом ща все ярлыки поудаляла,думала уйдет и всё равно сидит.

    ОтветитьУдалить
  15. Оригинальная штучка не только для поздравлений,но и для какого-нибудь объявления.
    https://www.manyofis.site
    Так что и после праздников убирать не буду.
    Спасибо Вика,и с наступившим тебя!

    ОтветитьУдалить
  16. Монетка, конечно можно под разные нужды приспособить. И тебя с наступившим годом.

    ОтветитьУдалить
  17. Вика привет.А есть у тебя ещё какая-нибудь подобная фишка этой? Чтобы так же можно было показать либо новинку,либо ещё что-то такое?

    ОтветитьУдалить
  18. Привет. попробуй код на примере меню http://www.shpargalochki.ru/2014/11/neobychnoe-animirovannoe-menju.html

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

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML