» » Оформление ссылок в блоге

Оформление ссылок в блоге

Все ссылки в блоге можно оформить разными цветами. Цвет при наведении указателя, цвет посещённых ссылок. Сделать это можно в конструкторе тем:
ссылки в блоге можно оформить разными цветами
А так же, изначально ссылка подчёркнута линией — это сделано для того, что бы читатель знал, что перед ним ссылка. Но не всем нравится такой однообразный вариант. В блоге затрагивалась тема ссылок в статье https://inshabashka.blogspot.com/2019/05/ukrasheniya-na-blogger.html. Нашла несколько других вариантов оформления ссылок. Некоторые коды пришлось немного переделать под Блоггер. Проверяла на шаблоне Корпорация Чудеса.

Оформляем ссылки

Что бы убрать подчёркивание, добавьте в шаблон блога, чуть выше тега ]]></b:skin>, строку:
a { text-decoration: none; }
Если нужно убрать линию, появляющуюся при наведении курсора на ссылку и вставить другое оформление, можно добавить код:
a:hover {
text-decoration: none;
}
Все предложенные эффекты ниже, вставляются шаблон блога, чуть выше тега ]]></b:skin>
1. Выделим ссылку фоновым цветом, а при наведении указателя, ссылка поменяет цвет:
Выделим ссылку фоновым цветом
a{
    color:#fff;
                                                  background: #eef;   /* цвет фона ссылки */
    text-decoration:none;
    padding:0 3px;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}

a:hover {
                                                     background: #39f;  /* цвет фона ссылки */
}

Смотрится неплохо, но при этом все ссылки в блоге будут так выглядеть, что не очень красиво в некоторых гаджетах.
2. Размытая ссылка
 Довольно симпатичный эффект и он будет так же у всех ссылок в блоге.
Размытая ссылка
a{
color: #03c;
    -webkit-transition: 0.5s;
     -moz-transition: 0.5s;
     -o-transition: 0.5s;
     -ms-transition: 0.5s;
     transition: 0.5s;
}
a:hover {
    color: transparent;
                                             text-shadow: 0 0 5px #03c;  /* цвет размытия */
}
3. Подсвечивающаяся ссылка — эффект применяется на всех ссылках блога.
Подсвечивающаяся ссылка
a{
    color: #03c;
    -webkit-transition: 0.5s;
     -moz-transition: 0.5s;
     -o-transition: 0.5s;
     -ms-transition: 0.5s;
     transition: 0.5s;
}

a:hover {
    color: #fff;
    text-shadow: -1px 1px 5px #03c, 1px -1px 5px #03c;
}

Синим выделила цвет размытия.
4. Плавное подчёркивание ссылки
Плавное подчёркивание ссылки
a: hover {text-decoration: none}
a {
    display: inline-block;
    color:#ffeb3b; /* цвет подчёркивания */
    line-height: 1;
    text-decoration:none;
    cursor: pointer;
}
a:after {
    background-color: #ffeb3b; /* цвет подчёркивания */
    display: block;
    content: "";
    height: 3px; /* ширина линии */
    width: 0%;
    -webkit-transition: width .3s ease-in-out;
    -moz--transition: width .3s ease-in-out;
    transition: width .3s ease-in-out;
}
a:hover:after,
a:focus:after {
    width: 100%;
}

5. Анимированная волна
 Все ссылки на блоге будут подчёркнуты. Волна появляется при наведении указателя на ссылку.
Анимированная волна
:root {
                 --mainColor: #c9fc00;  /* цвет подчёркивания */
}
a {
  background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 100%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 2px 2px;
  color: #000;
  text-decoration: none;
}

a:hover {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23ff9800' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
  background-position: 0 100%;
  background-size: auto 6px;
  background-repeat: repeat-x;
  text-decoration: none;
}
6. Ссылка оформленная анимацией
 Ссылка подчёркнута и при наведении указателя заполняется фоном. Все ссылки на блоге будут такого вида. У меня из-за такого оформления на блоге стали некрасиво выглядеть гаджеты. 
Ссылка оформленная анимацией
:root {
  --mainColor: #b0e0e6;  /* цвет линии и фона */
}
a {
  background:
     linear-gradient(
       to bottom, var(--mainColor) 0%,
       var(--mainColor) 100%
     );
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 4px 4px;
  color: #000;
  text-decoration: none;
  transition: background-size .2s;
}

a:hover {
  background-size: 4px 50px;
}
  text-decoration: none;
}
a:hover {

text-decoration: none;
}

7. Следующий эффект ссылки — очерчивание контура букв.
Изменятся все ссылки на блоге, но внешне на блоге это не отразится.
очерчивание контура букв
:root {
  --mainColor: #1e4acd;  /* цвет окантовки букв */
}
a {
  color: var(--mainColor);
  text-decoration: none;
}

a:hover {
  color: transparent;
  -webkit-text-stroke: 2px var(--mainColor);
}

@supports not(-webkit-text-stroke: 2px red) {
  a:hover {
    text-shadow:
      3px 3px 0 var(--mainColor),
      -1px -1px 0 var(--mainColor),
      1px -1px 0 var(--mainColor),
      -1px 1px 0 var(--mainColor),
      1px 1px 0 var(--mainColor);
  }
}

8. Ссылки с радужным эффектом
 При наведении указателя, ссылки окрасятся разноцветными буквами. 
Ссылки с радужным эффектом
a{
    color: #03c;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}

a:hover {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
    background-image: -moz-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
    background-image: -o-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
    background-image: -ms-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
}

9. Изменение размера ссылки
Ссылки, при наведении курсора, увеличатся в размере. У всех ссылок в блоге будет такой эффект.
Изменение размера ссылки
a{
    display: inline-block;
    color: #03c;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}

a:hover {
    -webkit-transform: scale(1.5,1.5);
    -moz-transform: scale(1.5,1.5);
    -o-transform: scale(1.5,1.5);
    -ms-transform: scale(1.5,1.5);
    transform: scale(1.5,1.5);
}
10. Наклоняющийся эффект ссылки
 При наведении курсора ссылка делает небольшой наклон. Эффект будет во всём блоге на ссылках.
Наклоняющийся эффект ссылки
a{
    display: inline-block;
    color: #03c;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}

a:hover {
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
}


11. Вращающаяся ссылка
Вращающаяся ссылка
Этот стиль оформления не постоянный. Когда вам захочется его применить, вставьте в редакторе сообщений такой код:
<a href="адрес ссылки"><span data-title="текст">текст</span></a>
a{
    color: #03c;
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    -o-perspective: 600px;
    -ms-perspective: 600px;
    perspective: 600px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -o-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
}

a span{
    display: block;
    position: relative;
    padding: 0 2px;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    transition: all 400ms ease;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

a:hover span {
    background: #03c;
    -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
    -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
    -o-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
    -ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
    transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}

a span:after {
    content: attr(data-title);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 2px;
    color: #fff;
    background: #03c;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    -o-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}

Ваши комментарии:

Комментарии со спамом удаляются.