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

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


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

//<![CDATA[

(function() {

    var a = document.getElementsByTagName('a');
    var t = document.createElement('span');
        t.id = "tt";
        t.style.position = "absolute";
        t.style.zIndex = 999;
        t.style.backgroundColor = "#E46969 ";
        t.style.border = "1px solid  #9F0707";
        t.style.font = "bold 11px Tahoma,Arial,Sans-Serif";
        t.style.boxShadow = "0 1px 3px rgba(0,0,0,0.4)";
        t.style.padding = "5px 10px";
        t.style.color = "#000";
        t.style.maxWidth = "170px";
        t.style.wordWrap = "break-word";
        t.style.display = "none";
    document.body.appendChild(t);
    var tooltip = document.getElementById('tt');

    function over(e) {
        tooltip.style.display = "block";
        tooltip.innerHTML = this.title;
        tooltip.style.top = (e.pageY + 25) + 'px';
        tooltip.style.left = e.pageX + 'px';
        this.setAttribute('original', this.title);
        this.title = "";

    }

    function out() {
        tooltip.innerHTML = "";
        tooltip.style.display = "none";
        this.title = this.getAttribute('original');
        this.removeAttribute('original');
    }

    for (var i = 0; i < a.length; i++) {
        if (a[i].title) {
            a[i].onmouseover = over;
            a[i].onmouseout = out;
        }
    }

})();
//]]>
</script>

Я отметила другим цветом, то что вы сможете поменять. Здесь сам фон окна  подсказки, толщина и цвет рамки, размер и цвет шрифта, тень, отступы.

После того, как внесли свои изменения, идём во вкладку шаблон и выбираем изменить HTML. Сделайте перед этим резервную копию шаблона. С помощью клавиш CTRL+F ( читаем здесь про это) находим закрывающийся тег </body> и над ним готовый код устанавливаем. Если пока таким образом не получается отыскать, просто начните просматривать шаблон с конца. Обычно </body> там недалеко.

Нажимаем просмотр и если нет замечаний - сохраняем.

Теперь при написании сообщения в том месте, где предполагается ссылка, переходим из режима создать в режим HTML и оформляем её в такой код -

<a href=" адрес страницы, куда ведёт ссылка" title=" отображаемый текст в окне всплывающей  подсказки">вот ссылка</a>


И всё. Сложного нет ничего. Пробуйте, экспериментируйте и все обязательно получится.

В этом посте вариант красивого оформления ссылок.

Сегодня у меня всё и спасибо вам всем за внимание. До новых встреч.

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


Введите Ваш email


Доброго времени суток, друзья. Не знамо, что там вытворяет Блоггер с новым интерфейсом, но пока о его стабильности говорить оказалось рано. А ведь говорят, что в августе уже старый отключат. Конечно, я понимаю, что всё течёт, всё изменяется, но не с такой же скоростью.Так вот о чем я, собственно.

новый редактор блоггер

Совсем недавно делала обзор про новые функции и изменении редактора сообщений блога. На днях увидела вдруг новые преображения. Кнопка создать сообщение с правого нижнего угла, переместилась в левый верхний. Обратите внимание. В самом редакторе для перехода из обычного режима в формат HTML уже нет значка < > который был вверху слева. Сейчас справа символ карандаша.

Куда - то делась функция оформления таблиц, о которой писала в предыдущеё статье. Которая порадовала раньше, но не на долго, как оказалось.

Очень убого выглядят общие настройки в разделе Тема. Посмотрите для интереса на дополнительные настройки в старом интерфейсе. Там и ссылки, и гаджеты, и рамки, и всё было для оформления блога. Сейчас минимум. Конечно через HTML  можно всё сделать, но ведь это большинству не под силу.

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

Друзья, даю ещё раз вам ссылку на Cообщество BLOGGER , где ежедневно масса вопросов по теме новшеств. А советую просто периодически заходить на новый вариант и привыкать, что поделаешь. Вроде как всё и понятно, но то что Блоггер ещё сам играется с ним, и всё до конца не додумано, ясно как день.

Пост не запланированный. Просто обзор очередных новинок. Интересно, на что вы ещё обратили внимание.

Всем терпения и да встречи.

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

введите пожалуйста свой email :

Доброго времени суток, друзья. Хочу познакомить вас с очень простым и удобным генератором надписей красивым шрифтом. А именно, создадим вашу неповторимую и необычную подпись, которую потом с лёгкостью можно установить в сообщения блога.
Я раньше уже знакомила читателей с некоторыми подобными сервисами для создания подписей. Посмотрите здесь и здесь на случай если пропустили.

Сегодня об онлайн - генераторе текста OnLine-Letters.COM где буквально за считанные минуты вы создадите свой шедевр. Посмотрите в конце сообщения, что получилось у меня.

Заходим по ссылке выше и сразу весь набор стилей шрифта.

простой текстовый генератор

Слева видим категории шрифтов. Есть на кириллице и без.
На первом шаге вписываем свой текст или подпись и нажимаем кнопку далее. 
На странице выбираем понравившийся вариант. Их будет очень много, просмотрите все предложенные. Для примера, я выбрала в левой колонке плавные каллиграфические, ну и собственно стиль. Ставим галочку в окошке и переходим к шагу 3

генератор текста


На открывшейся странице выбираем  размер текста, цвет, и т.п. Палитра цветов предоставлена


Сейчас только остаётся нажать на кнопку Сгенерировать.


Упссс.. Вас поздравят с успешно созданной подписью и предложат на выбор несколько вариантов для установки её на веб - странице. Можно скачать готовую подпись на компьютер и потом вставить в нужное место блога или сообщения.
В нашем случае подойдёт даже просто ссылка на картинку или HTML код. Так как в итоге у нас получается просто картинка, то и вставляем обычным способом, как все картинки. Только в окне выбираем пункт вставить <<по URL>>.


Если кому удобнее , можно скопировать HTML код. При написании перейти в формат HTML и в нужном месте его установить.

Таким образом ведь можно не только подпись создать, но и заголовки, подзагаловки, просто красивый текст в сообщении или гаджете. Будет оригинально и, как говорится, ни как у всех.

Если это подпись, то лучше её вставить одной картинкой ко всем сообщениям. Прочитайте статью как просто оформить шаблон сообщения в блоге.

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


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

введите пожалуйста свой email :

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

карточки для списка

Я сделала все в виде списка меню. Но, как вариант, можно сделать список домашних заданий, список ярлыков или того же меню сайта. Для портфолио тоже подойдёт такое оформление. Ещё, как вариант, карточка профиль автора и ссылки на социальные сети.

Если вы публикуете свои произведения на других ресурсах или хотите поделиться работами других авторов, вполне уместно будет и оригинально.

Посмотреть их все можно на тестовом блоге


Общие стили CSS заданы ко всем карточкам. Коды DIV прописаны персонально для каждого варианта. Я их отделила разным цветом.

Код целиком для всех 3 - х.

<style>.pricing-tabs .tab-item {

  -webkit-transform: scale(0.9);

          transform: scale(0.9);

  vertical-align: top;

  float: left;

  position: relative;

  transition: -webkit-transform 0.3s ease-out, -webkit-filter 0.3s;

  transition: transform 0.3s ease-out, filter 0.3s;

  transition: transform 0.3s ease-out, filter 0.3s, -webkit-transform 0.3s ease-out, -webkit-filter 0.3s;

  border: 1px solid rgba(0,0,0,0.2); /*толщина и цвет рамки */

  border-radius: 10px 10px 0 0; /*закруглили углы карточки*/

  min-height: 500px !important; /*высота карточки*/

  min-width: 260px !important; /*ширина карточки*/

  padding: 0;

  display: -moz-flex;

  display: -ms-flex;

  display: -o-flex;

  display: flex;

  -moz-flex-direction: column;

  -o-flex-direction: column;

  flex-direction: column;

  justify-content: space-between;

  cursor: default;

}

.pricing-tabs .tab-item:after,

.pricing-tabs .tab-item:before {

  z-index: -1;

  content: ' ';

  position: absolute;=

  left: 10px;

  top: 80%;

  bottom: 18px;

  right: 10px;

  -webkit-transform-origin: bottom center;

          transform-origin: bottom center;

  box-shadow: 0px 25px 10px -8px rgba(0,0,0,0.4);

}

.pricing-tabs .tab-item:after {

  -webkit-transform: rotate(6deg) translate3d(15px, 0, 0);

          transform: rotate(6deg) translate3d(15px, 0, 0);

}

.pricing-tabs .tab-item:before {

  -webkit-transform: rotate(-6deg) translate3d(-15px, 0, 0);

          transform: rotate(-6deg) translate3d(-15px, 0, 0);

}

.pricing-tabs .tab-item:hover{

  -webkit-transform: scale(1);

          transform: scale(1);

}

.tab-item:not(:hover).flou {

  -webkit-filter: blur(3px);

          filter: blur(3px);

}

.tab-item h1{

  margin: 0;

  font-size: 2.4rem;

  line-height: 5rem;

  background: #fbcb0f; /*фон заголовка*/

  border-radius: inherit;

}

.tab-item .price{

  font-size: 1.5rem;

  line-height: 2rem;

}

.underline {

  position: relative;

}

.underline:after {

  position: absolute;

  content: ' ';

  right: 5%;

  left: 5%;

  bottom: 0;

  height: 2px;

  background-image: linear-gradient(90deg, transparent, #fbcb0f, transparent);

}

.underline.black{margin-bottom: 40px;}

.underline.black:after{

  background-image: linear-gradient(90deg, transparent, #fbcb0f, #000, #fbcb0f, transparent);

}

.tab-item ul li{

  height: 35px;

  font-size: 1.2rem;

}
.tab-item ul li i{

  color: #ffc400; /*цвет подпункта второй карточки*/
}

.tab-item:last-child ul li i{

  color: #64dd17;

}
.tab-item:last-child ul li em{

  text-shadow: 1px 0px 0px #fbcb0f;

  font-size: 1.3rem;

}
.tab-item .btn-profiter{font-size: 1.7rem; letter-spacing: 1px;}

.tab-item:hover .btn-profiter{background: #000 !important;}

</style>
<div class="row">
<div class="s12 m8 pricing-tabs center">
<div class="col s12 m4 tab-item">
<h1>
Первые блюда</h1>
<div class="price">
горячие и холодные супы</div>
<span class="underline"></span>

<ul>
<li>суп 1</li>
<li>суп 2</li>
<li>суп 3</li>
<li>суп 4</li>
<li>суп 5</li>
<li>суп 6</li>
</ul>
<button class="btn btn-profiter grey darken-1"><a href="http://hpargallka.blogspot.ru/">заказать</a></button>

      </div>

<div class="col s12 m4 tab-item">
<h1>
Вторые блюда</h1>
<div class="price">
горячие и холодные</div>
<span class="underline"></span>

        <br />
<ul>
<li>блюдо 1
            <i class="material-icons">диетическое</i>
          </li>
<li> блюдо 2
            <i class="material-icons">диетическое</i>
          </li>
<li>блюдо 3
            <i class="material-icons">диетическое</i>
          </li>
<li>блюдо 4</li>
<li>блюдо 5
          </li>
</ul>
<button class="btn btn-profiter grey darken-1"><a href="http://hpargallka.blogspot.ru/">заказать</a></button>

      </div>

<div class="col s12 m4 tab-item">
<h1>
Напитки</h1>
<div class="price">
холодные и горячие</div>
<span class="underline"></span>
<ul>
<li>Чай  <em>Мате</em>
            <i class="material-icons">цена</i>
          </li>
<li>Кофе <em>Капучино</em>
            <i class="material-icons">цена</i>
          </li>
<li>Квас  <em>домашний</em>
            <i class="material-icons">цена</i>
          </li>
<li>Компот<em>Вишнёвый</em>
            <i class="material-icons">цена</i>
          </li>
<li>Минеральная вода
            <i class="material-icons">без газа</i>
          </li>
<li>Ещё в ассортименте</li>
</ul>
<button class="btn btn-profiter grey darken-1"><a href="http://hpargallka.blogspot.ru/">заказать</a></button>
      </div>


Как вы обратили внимание

Первая карточка простой список
Вторая карточка список с подпунктами которые отмечены жёлтым цветом, как и заголовок карточки.
Третья карточка пункты, подпункты и ещё в тегах <i >дополнительная информация.

Другие пояснения в самом коде.

Уберите не нужные карточки при необходимости.

В примерах я сделала ссылки не кликабельные. Кроме кнопки Заказать( в моём примере). Но , чтобы пользователь перешёл на другую страницу, к каждому пункту (подпункту и тегу  i ) добавляем саму ссылку.

<a href="адрес страницы на которую ведёт ссылка">заказать</a>


Примерно вот так

<button class="btn btn-profiter grey darken-1"><a href="http://hpargallka.blogspot.ru/">заказать</a></button>

или так

<li><a href="http://hpargallka.blogspot.ru/">суп 1</a></li>

Принцип, думаю понять. Если где запутаетесь со стилями при применении у себя такой анимированной карточки или сразу всех, пишите в комментариях, разберёмся.

Пока писала пост попалось, как на подобии этого, оформлены интернет - магазины. Видела на сайтах для детей загадки с разгадками. Приложите фантазию к их применению.

Всем спасибо и до встречи.

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

введите пожалуйста свой email :


Приветствую, читателей и гостей блога. Предлагаю вашему вниманию 3 варианта оформления текста или заголовка. А именно, анимированный текст на чистом CSS. Думаю, что кому - нибудь и придётся по душе при оформлении сообщений или страниц.

эффект анимации текста

Чтобы просмотреть каждый из вариантов, скопируйте нужный код и установите его в этом редакторе.

Вариант 1. Самый простой способ . Переливающийся текст. Можно настроить интервал мигания и задать нужный цвет.

Код

<div class="tsanext-animation">шпаргалки блогерши</div>
<style>
.tsanext-animation {
  font-size: 79px;
  font-family: 'sonos-logoregular';
  text-align: center;
  background: -webkit-linear-gradient(left, #503a86, #de494f, #ea8d5b, #ca497a, #6148a0);
  background: linear-gradient(left, #33235B, #D62229, #E97639, #792042, #33235B);
  background-size: 3200px 200px;
  margin-top: 20vh;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-animation: animate-logo;
  -webkit-animation-delay: 0;
  -webkit-animation-duration: 7s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-fill-mode: forwards;
  transition: font-size 500ms ease-in-out;
}
}
@media only screen and (min-width: 40.063em) {
  .tsanext-animation {
  margin-top: 30vh;
  font-size: 80px;
  }
}
@media only screen and (min-width: 64.063em) {
  .tsanext-animation {
  margin-top: 25vh;
  font-size: 79px;
  }
}
@media only screen and (min-width: 90.063em) {
  .tsanext-animation {
  margin-top: 20vh;
  font-size: 80px;
  }
}
@media only screen and (min-width: 120.063em) {
  .tsanext-animation {
  margin-top: 15vh;
  font-size: 79px;
  }
}
@-webkit-keyframes animate-logo {
  0% {
  background-position: 0 3200px;
  }
  100% {
  background-position: 3200px 0;
  }
}</style>


Вариант 2. Прыгающие буковки. Используя свойство  CSS3 @keyframe создадим своеобразный 3D-эффект.

Код

<div class='is-animate'>

  <div class="l">П</div>

  <div class="l">Р</div>

  <div class="l">И</div>

  <div class="l">В</div>

  <div class="l">Е</div>

  <div class="l">Т</div>

  <div class="l">И</div>

  <div class="l">К</div>

</div>

<style>


.is-animate {

        background: #F08080;

    box-sizing: border-box;

    font-size: 66px;

    display: -webkit-inline-box;

    padding: 14px;

    border-radius: 7px;

}

.is-animate > div {

    animation-name: style;

    display: -webkit-inline-box;

    color: #fff;

    padding: 9px;

    background:#F08080;

    font-family: 'Indie Flower', cursive;

    box-shadow: 2px 2px 9px 2px;

}

.l{

  animation: letterspacing 1s infinite alternate cubic-bezier(.2, 0, 0, 1);

}
.is-animate > div {

  animation-duration: 1s;

  animation-fill-mode: both;

  animation-iteration-count: infinite;

}



.is-animate > div:nth-child(1) { animation-delay: 0.0s }

.is-animate > div:nth-child(2) { animation-delay: 0.1s }

.is-animate > div:nth-child(3) { animation-delay: 0.2s }

.is-animate > div:nth-child(4) { animation-delay: 0.3s }

.is-animate > div:nth-child(5) { animation-delay: 0.4s }

.is-animate > div:nth-child(6) { animation-delay: 0.5s }

.is-animate > div:nth-child(7) { animation-delay: 0.6s }

@keyframes style {

  from {

    transform: scale3d(1, 1, 1);

  }

  30% {

    box-shadow: 0px 0px 0px 0px;

    transform: scale3d(1.25, 0.75, 1);

  }

  40% {

    transform: scale3d(0.75, 1.25, 1);

  }

  50% {

    transform: scale3d(1.15, 0.85, 1);

  }

  65% {

    transform: scale3d(.95, 1.05, 1);

  }

  75% {

    transform: scale3d(1.05, .95, 1);

  }

  to {

    transform: scale3d(1, 1, 1);

  }

}
@keyframes letterspacing {

  0% {

    filter: blur(0.1rem);

  }
  100% {

    filter: blur(0.5rem);

  }

    to {

       letter-spacing: none;

        filter: blur(0rem);

  }

}

</style>


Вариант 3. При наведении курсора текст начинает "дёргаться".

Код

<p class="text animated rubberBand">НАВЕДИ НА МЕНЯ</p>

<style>

.text {
  text-align: center;
  margin-top: 20px;
  color: #F47C0A;
  font-size: 2.0em;
  font-family: sans-serif;
  text-transform: uppercase;
}

.animated:hover {
  animation-duration: 2.5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  cursor:pointer;
}
@keyframes rubberBand {
  0% {transform: scale(1);}
  30% {transform: scaleX(1.15) scaleY(0.75);}
  40% {transform: scaleX(0.75) scaleY(1.25);}
  60% {transform: scaleX(1.15) scaleY(0.85);}
  100% {transform: scale(1);}
}
p.rubberBand {
  animation-name: rubberBand;
}
</style>


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

Посмотрите ещё некоторые эффекты для текста

Текстовые эффекты на CSS
Мигающий текст

Всем добра и до встречи.

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

введите пожалуйста свой email :

Пользовательский поиск