Красивый виджет для Blogger
Использовать его можно, например, установив в круг фотографию, сделав виджет Об авторе.
Или оформить как название статьи.
Надеюсь вы сами что-нибудь придумаете, а виджет довольно необычный.
Круг можно поставить в боковую панель или в подвал блога, в виде гаджета. Или в статью, в редакторе в режиме ХТМЛ.
Надеюсь вы сами что-нибудь придумаете, а виджет довольно необычный.
Круг можно поставить в боковую панель или в подвал блога, в виде гаджета. Или в статью, в редакторе в режиме ХТМЛ.
Код и изменения
Выглядит гаджет так:
И его код:
В коде можно сделать несколько изменений и получится новый вид этого гаджета.
Посмотреть гаджет вживую можно в визуальном редакторе.
Если в коде изменить значение радиуса 100% (отмечено место синим) на, к примеру, 5%, то виджет будет выглядеть так:
Если в коде уменьшить сразу два радиуса со 100% до 5%, то получится вот такой вид. Вторую цифру в коде выделила салатовым цветом.
Если поменять то, что описывала в первых вариантах и плюс удалить hidden;transform:, выделила в коде розовым цветом, то получится:
<style>
.circle{background:#fff;border-radius:100%;cursor:pointer;position:relative;width:15em;height:15em;overflow:hidden;transform:
translateZ(0);margin:0 auto}
.circle h1{color:rgba(189,185,199,0);font-family:Lato, sans-serif;font-weight:900;font-size:1.6em;line-height:8.2em;text-align:center;text-transform:uppercase;-webkit-font-smoothing:antialiased;user-select:none;transition:color .8s ease-in-out}
.circle h1 a{color:rgba(189,185,199,0);text-decoration:none}
.circle:before,.circle:after{border-radius:100%;content:"";position:absolute;top:0;left:0;width:inherit;height:inherit;box-shadow:inset 10.6em 0 0 rgba(30,140,209,0.2), inset 0 10.6em 0 rgba(30,140,209,0.2), inset -10.6em 0 0 rgba(30,140,209,0.2), inset 0 -10.6em 0 rgba(30,140,209,0.2);transition:box-shadow .75s}
.circle:after{transform:rotate(45deg)}
.circle:hover:before,.circle:hover:after{box-shadow:inset .86em 0 0 rgba(255,0,0,0.5), inset 0 .86em 0 rgba(252,150,0,0.5), inset -.86em 0 0 rgba(0,255,0,0.5), inset 0 -.86em 0 rgba(0,150,255,0.5)}
.circle:hover > h1 a,.circle:hover > h1{color:rgba(185,185,185,1)}
</style>
<div class="circle">
<h1><a href="Ваша ссылка">Ваш текст</a></h1>
</div>
Красным выделила место, где нужно вставить вашу ссылку и текст..circle{background:#fff;border-radius:100%;cursor:pointer;position:relative;width:15em;height:15em;overflow:hidden;transform:
translateZ(0);margin:0 auto}
.circle h1{color:rgba(189,185,199,0);font-family:Lato, sans-serif;font-weight:900;font-size:1.6em;line-height:8.2em;text-align:center;text-transform:uppercase;-webkit-font-smoothing:antialiased;user-select:none;transition:color .8s ease-in-out}
.circle h1 a{color:rgba(189,185,199,0);text-decoration:none}
.circle:before,.circle:after{border-radius:100%;content:"";position:absolute;top:0;left:0;width:inherit;height:inherit;box-shadow:inset 10.6em 0 0 rgba(30,140,209,0.2), inset 0 10.6em 0 rgba(30,140,209,0.2), inset -10.6em 0 0 rgba(30,140,209,0.2), inset 0 -10.6em 0 rgba(30,140,209,0.2);transition:box-shadow .75s}
.circle:after{transform:rotate(45deg)}
.circle:hover:before,.circle:hover:after{box-shadow:inset .86em 0 0 rgba(255,0,0,0.5), inset 0 .86em 0 rgba(252,150,0,0.5), inset -.86em 0 0 rgba(0,255,0,0.5), inset 0 -.86em 0 rgba(0,150,255,0.5)}
.circle:hover > h1 a,.circle:hover > h1{color:rgba(185,185,185,1)}
</style>
<div class="circle">
<h1><a href="Ваша ссылка">Ваш текст</a></h1>
</div>
В коде можно сделать несколько изменений и получится новый вид этого гаджета.
Посмотреть гаджет вживую можно в визуальном редакторе.
Если в коде изменить значение радиуса 100% (отмечено место синим) на, к примеру, 5%, то виджет будет выглядеть так:
Комментарии со спамом удаляются.