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

Вы наверняка это видели на некоторых сайта, попробуйте и у себя создать иллюзию подъёма текста с тенью.

Наведите на участок абзац ниже, чтобы посмотреть результат.


Вот так выглядит эффект подъёма с отбрасываемой тенью. Вы можете изменить цвет фона при наведении, цвет текста, цвет тени. Рамку так же можно убрать совсем или изменить её свойства. Всё это я отметила непосредственно в самом коде.

Код

<style>
.bv-text-effect {
display: inline-block;
padding: 3px; /* Внутренний отступ до наведения */
border: 1px solid transparent; /* Рамка до наведения */
outline: 0;
/* Округление рамки */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-transition: box-shadow 0.7s ease,
background 0.7s ease,
border 0.7s ease;
-moz-transition: box-shadow 0.7s ease,
background 0.7s ease,
border 0.7s ease;
transition: box-shadow 0.7s ease,
background 0.7s ease,
border 0.7s ease;
}
.bv-text-effect:hover {
background: #DCDCDC; /* Фон при наведении */
border: 1px solid #A9A9A9; /* Цвет рамки при наведении */
color:#FA8072; /* Цвет шрифта при наведении */
text-decoration: none;
text-shadow: none; /* Тени текста (отключены) */
/* Тени блока при наведении */
-moz-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
-webkid-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
}
</style>

<div class="bv-text-effect">
Здесь ваш текст
</div>


Можно применить это и к отдельному слову, предложению. А можно таким образом оформить и ссылки в блоге, чтобы были более привлекательными. Давайте смотреть пример со ссылками.

Спасибо что читаете шпаргалки блогерши

Код

<style> a.bv-text-effect {
display: inline-block;
padding: 3px; /* Внутренний отступ до наведения */
border: 1px solid transparent; /* Рамка до наведения */
outline: 0;
/* Округление рамки */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
/* Свойства перехода */
-webkit-transition: box-shadow 0.7s ease,
background 0.7s ease,
border 0.7s ease;
-moz-transition: box-shadow 0.7s ease,
background 0.7s ease,
border 0.7s ease;
transition: box-shadow 0.7s ease,
background 0.7s ease,
border 0.7s ease;
}
a.bv-text-effect:hover {
background:  #8FBC8F; /* Фон при наведении */
border: 1px solid #DCDCDC; /* Цвет рамки при наведении */
color:#2F4F4F; /* Цвет текста при наведении */
text-decoration: none;
text-shadow: none; /* Тени текста (отключены) */
/* цвет тени при наведении */
-moz-box-shadow: 1em 1em 1em -0.5em rgba(142, 213, 87, 0.6);
-webkid-box-shadow: 1em 1em 1em -0.5em rgba(142, 213, 87, 0.6);
box-shadow: 1em 1em 1em -0.5em rgba(142, 213, 87, 0.6);
}
</style>

Спасибо что читаете <a class="bv-text-effect" href="http://www.shpargalochki.ru/">шпаргалки блогерши</a>


В Блоггере код устанавливается в тело сообщения в режиме HTML. Сам эффект появится только после публикации поста. Потренируйтесь на тестовом блоге или в этом редакторе. Хотя сложного в этом ничего нет. Коды уже готовые к применению. Только замените на свой текст нужные строчки.

В самом коде я сделала комментарии, где можно поменять все свойства CSS.

Если захотите часто  использовать эффект подъёма текста, разумнее будет установить код CSS непосредственно в шаблоне (теме) блога, перед строкой ]]></b:skin>, но только без тегов  <style> тут весь код </style>.  И останется только, когда есть необходимость, добавить в сообщение, при оформлении участка текста или выделении ссылки, код HTML

<div class="bv-text-effect">
Здесь ваш текст
</div>

или

<a class="bv-text-effect" href="http://www.shpargalochki.ru/">шпаргалки блогерши</a>

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

текстовые эффекты


В этом случае эффект применяется не к определённому классу, а ко всем тегам <a> которые есть на странице.

Код

<style>
a {
display: inline-block;
/* Внутренний отступ до наведения */
padding: 3px;
/* Рамка до наведения */
border: 1px solid transparent;
outline: 0;
/* Округление углов рамки */
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
/* Свойства перехода */
-webkit-transition: box-shadow 0.7s ease,
background 0.7s ease,
border 0.7s ease;
-moz-transition: box-shadow 0.7s ease,
background 0.7s ease,
border 0.7s ease;
transition: box-shadow 0.7s ease,
background 0.7s ease,
border 0.7s ease;
}
a {
/* Фон при наведении */
background: #BEBEBE;
/* Рамка при наведении */
border: 1px solid #666;
/* Цвет текста при наведении */
color:#444;
text-decoration: none;
/* Тени текста (отключены) */
text-shadow: none;
/* Тени при наведении */
-moz-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
-webkid-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
}
</style>
<a href="адрес куда ведёт ссылка">Текст ссылки</a>


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

Получайте новые сообщения с блога прямо на почту

Введите Ваш email


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

Хочу в очередной раз поделиться с вами вариантом сдвига картинки при наведении на неё курсора. После чего открывается блок с описанием или другим нужным текстом.

Использовать будем свойство CSS transitions, которое задаст этот самый сдвиг. В статье выпадающее описание у картинки мы его уже опробовали.

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

<ul class="izo effect">

  <h2>
Самый большой лайнер</h2><br />
Самый большой в мире круизный корабль под названием «Очарование морей» (Allure of the Seas) присоединился к Королевскому Карибскому флоту. «Очарование морей» словно небольшой город — на нем 16 палуб и 2700 комнат<br />
 
  <img alt="" class="top" src="http://www.fresher.ru/manager_content/images/samyj-bolshoj-kruiznyj-lajner/big/1.jpg" />
  </ul>
<style>
.izo{
  position:relative;
  width:280px;
  height:220px;
  overflow:hidden;
  float:left;
  margin-right:20px;
  background-color:rgba(26,76,110,0.5)
}

.izo p,.izo h2 {
  color:#fff;
  padding:10px;
  left:-20px;
  top:20px;
  position:relative
}

.izo p {
  font-family:'Lato';
  font-size:12px;
  line-height:18px;
  margin:0
}

.izo h2 {
  font-family:'Lato';
  font-size:20px;
  line-height:24px;
  margin:0;
}

.effect img {
  position:absolute;
 width:338px;
  height:222px;
  margin:-3px 0;
  right:0;
  top:0;
  cursor:pointer;
  -webkit-transition:top .4s ease-in-out,right .4s ease-in-out;
  -moz-transition:top .4s ease-in-out,right .4s ease-in-out;
  -o-transition:top .4s ease-in-out,right .4s ease-in-out;
  transition:top .4s ease-in-out,right .4s ease-in-out
}

.effect img.top:hover {
  top:-200px;
  right:-300px;
  padding-bottom:200px;
  padding-left:300px
}</style>


Зелёный цвет - заголовок к картинке.
Синий - описание.
Розовый - (URL) адрес изображения.

Вот и всё, что нужно заменить вам в этом коде. Устанавливается он в теле поста в режиме HTML в нужном месте. Или в гаджет HTML/JavaScript.

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

Всем добра, благодарю вас за внимание и до встречи.

Получайте новые сообщения с блога прямо на почту

Введите Ваш email


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

 Для удобства пользователей и для лучшей навигации меню является одним из основных элементов любого сайта.

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

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

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

Простое вертикальное меню со стрелочками

меню
Код

<ul class="block_menu">
<a href="http://www.shpargalochki.ru" title="Главная страница">Главная</a>
<a href="http://www.shpargalochki.ru/p/blog-page.html" title="Карта ">Карта блога</a>
<a href="http://www.shpargalochki.ru/p/blog-page_84.html" title="Вопросы">Вопрос - ответ</a>
<a href="http://www.shpargalochki.ru/p/blog-page_84.html" title="Вопросы">Вопрос - ответ</a>
<a href="http://www.shpargalochki.ru/p/blog-page_34.html" title="Связь">Форма связи</a>

</ul>
<style>
.block_menu {margin:0; padding:0; list-style:none;}
.block_menu a:link,
.block_menu a:active,
.block_menu a:visited {width:169px; height:18px; padding:2px 0 0 21px; display:block; margin:0 0 1px 0; color:#747475; text-decoration:none; overflow:hidden; background:url(https://gdeposylka.ru/img/shiptor.png) no-repeat 0 0;}
.block_menu a:hover {color:#ea7609; background-position:0 -20px;}
</style>


Синее вертикальное меню с красивым эффектом


меню


Код

<ul class="HBru">
<li><br /></li>
<li><br /></li>
<li><a href="http://www.shpargalochki.ru" title="Главная страница">Главная</a>  </li>
<li><a href="http://www.shpargalochki.ru/p/blog-page.html" title="Карта ">Карта блога</a>  </li>
<li><a href="http://www.shpargalochki.ru/p/blog-page_84.html" title="Вопросы">Вопрос - ответ</a> </li>
<li><a href="http://www.shpargalochki.ru/p/blog-page_84.html" title="Вопросы">Вопрос - ответ</a> </li>
<li><a href="http://www.shpargalochki.ru/p/blog-page_34.html" title="Связь">Форма связи</a>
</li>

</ul>
<style>
ul.HBru{-webkit-margin-before: 0;-webkit-margin-after: 0;-webkit-padding-start: 0;padding: 0px;}
ul.HBru li {list-style: none;}
ul.HBru li a {text-decoration: none;background-color: #fff;display: block;font-size: 15px;margin-bottom: 3px;border-left: solid 5px #4766b9;padding: 12px 0 12px 15px;color: #ffffff;background-size: 200.22% auto;-webkit-background-size: 200.22% auto;-moz-background-size: 200.22% auto;background-position: -0 0;background-image: linear-gradient(to right,rgb(1, 1, 8) 20%,rgb(69, 142, 195) 50%);transition: background-position .5s ease-out;-webkit-transition: background-position .5s ease-out;width: 250px;}
ul.HBru li a:hover {background-position: -99.99% 0;color: #fff;text-shadow: 0 1px 0 #171616;}
</style>


Светлое вертикальное меню с иконкой

меню

Код


<div class="block-cont">
<ul class="bnav">

<li><a class="mgreen" href="http://www.shpargalochki.ru/"><span><i class="ico ico_green"></i> Главная страница</span></a></li>
<li><a class="mgreen" href="http://www.shpargalochki.ru/p/blog-page.html"><span><i class="ico ico_green"></i>Карта блога</span></a></li>
<li><a class="mgreen" href="http://www.shpargalochki.ru/p/blog-page_84.html"><span><i class="ico ico_green"></i>Вопросы - ответы</span></a></li>
<li><a class="mgreen" href="http://www.shpargalochki.ru/p/blog-page_29.html"><span><i class="ico ico_green"></i>Об авторе</span></a></li>
<li><a class="mgreen" href="http://www.shpargalochki.ru/p/blog-page_34.html"><span><i class="ico ico_green"></i>Форма связи</span></a></li>

</ul>

<style>
.bnav {
  margin: 0;
  padding: 0;
  width: 238px;
  margin: auto;
  display: block;
  list-style: none;
}

.bnav li {
  margin: 0;
  border-bottom: 1px solid #e4e2e0;
}

.bnav li:last-child {
  border-bottom: 0;
}

.bnav li a {
  display: block;
  color: #747474;
  text-decoration: none;
}

.bnav li a span {
  height: 36px;
  line-height: 36px;
  display: block;
  color: #747474;
  padding: 0 0 0 36px;
  position: relative;
}

.bnav li a.mgreen:hover span {
  color: #ffffff;
  text-shadow: 0 1px 1px #3d9510;
  background: #6eb521;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}


.ico {
  display: inline-block;
  vertical-align: middle;
  background-position: 0 0;
  width: 16px;
  height: 16px;
}

.ico_green {
  background: url(http://www.knclub.ru/f/images/buttons/folder_user.png) no-repeat 0 0;
  position: absolute;
  left: 12px;
  top: 10px;
}

</style>


Разместите код вертикального меню в гаджет HTML и установите в нужном месте боковой панели макета блога. Оно всегда будет перед взором читателя.

Получайте новые сообщения с блога прямо на почту

Введите Ваш email



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


информация:
А вот и сам фокус

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

Готовый код устанавливайте в режиме HTML в нужном месте сообщения.

<style>.spoiler .spoiler_title {
  display: inline;
  float: left;
  margin: 3px 10px 0 0;
  padding: 4px 0;
  font-size: 16px;
  line-height: 1;
}
.spoiler label {
  cursor: pointer;
  background: #4682B4;
  margin: 0;
  padding: 4px 18px 4px 22px;
  outline: none;
  border-radius: 3px;
  color: #efefef;
  transition: all .3s ease-in-out;
  display: inline;
  font-size: 12px;
  font-family: arial, san-serif;
  line-height: 1;
  position: relative;
}
.spoiler input[type=checkbox] ~ label:before {
  content: "";
  height: 0;
  width: 0;
  border-width: 4px 4px 4px 7px;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 7px;
  left: 8px;
}
.spoiler input[type=checkbox]:checked ~ label:before {
  content: "";
  height: 0;
  width: 0;
  border-width: 7px 4px 4px 4px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  top: 8px;
  left: 8px;
}
.spoiler input {
  position: absolute;
  left: -999em;
  opacity: 0;
}
.spoiler .content_box {
  width: 100%;
  border: 1px solid #ddd;
  background: #efefef;
  height: auto;
  padding: 6px 10px;
  margin: 8px 0 0;
  overflow: hidden;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.spoiler .content_box .content {
  display: none;
}
.spoiler .content p {
  padding: 0;
  margin: 0
}
.spoiler .content p img {
  margin: 4px 0 0;
  max-width: 100%;
  height: auto;
}
.spoiler input[type=checkbox]:checked ~ .content_box .content {
  display: block;
  -webkit-animation: slide-down .3s ease-out;
  -moz-animation: slide-down .3s ease-out;
}
@-webkit-keyframes slide-down {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0)
  }
}
@-moz-keyframes slide-down {
  0% {
    opacity: 0;
    -moz-transform: translateY(-100%)
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0)
  }
}</style>

<br />
<div class="spoiler">
<span class="spoiler_title"> информация: </span>
  <input id="item-1" type="checkbox" />
  <label for="item-1">здесь</label><br />
<div class="content_box">
<div class="content">
А вот и сам фокус<br />
<br />
Здесь всё что  откроется при нажатии на кнопку</div>
</div>
</div>

Всё, что я отметила всяким разноцветием меняйте под ваш дизайн. Соответственно, и надписи, и то что скрыли от глаз.

Хороших всем выходных и с Наступившим 2018 годом.

Получайте новые сообщения с блога прямо на почту

Введите Ваш email



панель навигации
Привет, друзья. Стандартный вид навигации в Блоггере отображён ссылками: Следующее, Главная страница, Предыдущее. Как - то совсем тоскливо. У меня уже были сообщения как изменить навигацию в блоге и как сделать плавающие кнопки навигации. Ещё один более интересный вариант вам на заметку. Так сказать простенько, но со вкусом. С красивой картинкой - домиком и кнопками со стрелочками. hover эффект при наведении курсора добавит им ещё привлекательности.

И чтобы не ходить "вокруг да около", давайте сразу смотреть о чём идёт речь на тестовом блоге в самом низу страницы.



1. Чтобы такое реализовать заходим во вкладку <<Тема>>. Сделайте на всякий случай резервную копию. С помощью клавиш Ctrl + F найдите вот такую строку

 <b:includable id='nextprev'>

Справа от неё нажмите на чёрный маркер (стрелочку, чтобы раскрыть весь код полностью. Посмотрите скриншот.


Всё что находится между

<b:includable id='nextprev'>

тут весь код

</b:includable>

Нужно удалить весь код между строками <b:includable id='nextprev'> и </b:includable> и вставить следующий код. Чтобы было вот так.

 <b:includable id='nextprev'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
  </div>
  <div class='clear'/>
    </b:if>
<b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>
      <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <div id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><svg viewBox='0 0 24 24'>
    <path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' fill='#000000'/>
</svg></a>
      </div>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <div id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><svg viewBox='0 0 24 24'>
    <path d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z' fill='#000000'/>
</svg></a>
      </div>
    </b:if>
     <div class='mobile-link-button' id='blog-pager-home-link'>
    <a class='home-link' expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><svg viewBox='0 0 24 24'>
    <path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000000'/>
</svg></a>
    </div>
<div class='home-box' title='предыдущий пост '><svg viewBox='0 0 24 24'>
    <path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' fill='#000000'/>
</svg>
</div>
<div class='lasthome-box' title='следующий пост'><svg viewBox='0 0 24 24'>
    <path d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z' fill='#000000'/>
</svg>
</div>
</div>
    </b:if>
      <div class='clear'/>
</b:includable>


Замените отмеченное розовым на свои названия.

2. Там же в шаблоне ищем закрывающийся тег </head>. Обычно он в начале шаблона. И над ним вставляем этот код

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
#Blog1{padding-bottom:55px;position:relative}
.home-box,.lasthome-box,a.blog-pager-newer-link,a.blog-pager-older-link,a.home-link{padding:0;line-height:45px;position:absolute;width:43px;height:43px;text-align:center}
#blog-pager-newer-link{float:left}
#blog-pager-older-link{float:right}
#blog-pager-newer-link a,#blog-pager-older-link a,a.home-link{color:#141924;transition:all .4s ease-in-out}
#blog-pager-newer-link a:hover,#blog-pager-older-link a:hover,a.home-link:hover{color:#e8554e}
.blog-pager svg{width:24px;height:24px;vertical-align:-5px}
#blog-pager,.blog-pager{clear:both;text-align:center;position:absolute;width:200px;height:45px;line-height:45px;bottom:0;left:50%;margin:0 0 0 -100px;overflow:visible}
#blog-pager-home-link a.home-link,a.blog-pager-newer-link,a.blog-pager-older-link{background:#fff;border:1px solid #dedede;color:#141924;transition:all .4s ease-in-out;bottom:0}
a.blog-pager-older-link{border-radius:3px;right:0;z-index:2}
a.blog-pager-newer-link{border-radius:3px;left:0;z-index:2}
#blog-pager-home-link a.home-link{border-radius:3px;left:50%;margin-left:-22.5px}
#blog-pager-home-link a.home-link:hover,#blog-pager-newer-link a:hover,#blog-pager-older-link a:hover{color:#e8554e;border:1px solid rgba(232,85,78,1)}
.home-box,.lasthome-box{background:#fff;color:#888;border:1px solid #dedede;border-radius:3px;bottom:0;z-index:1}
.home-box{left:0}
.lasthome-box{right:0}
.home-box svg path,.lasthome-box svg path{fill:#888}
.clear{clear:both}
/*]]>*/
</style>
</b:if>


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

Нажмите на просмотр и увидите обновлённую и красивую панельку навигации. Всем спасибо и  с наступающим 2018 годом. Здоровья вам, успехов и всяческих благ в новом году.



Получайте новые сообщения с блога прямо на почту

Введите Ваш email



Пользовательский поиск
Foto Saya
My Photo