Как добавить классный эффект ссылке, используя CSS3
Каждый веб-сайт имеет текстовые ссылки. Обычно используется очень простой эффект, селектор при наведении и изменение цвета текста. Все эффекты в этой статье используют свойство “transition“. Все эффекты разные,без использования Flash-анимации или JavaScripts.
В примерах вы увидите повторяющиеся свойства, с добавлением –webkit– или –moz-префиксов. Они называются Vendor префиксы. Производители браузеров с их помощью добавляют поддержку новых и экспериментальных возможностей CSS в период тестирования.
–webkit– → Google Chrome, Safari
–moz– → Firefox
–о– → Опера
–ms– → Internet Explorer
Есть некоторые свойства, такие, как например “border-radius“, которым не нужны префиксы. Вы можете проверить какие свойства CSS поддерживаются в данный момент.
1. Изменение цвета текстовой ссылки с использованием переходов
Demo
CSS
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: #39f;
}
2. Изменение фонового цвета текстовой ссылки
Demo
CSS
a{
color:#fff;
background: #03c;
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;
}
4. Размытая текстовая ссылка
Вы можете создать размытый текст используя “text-shadow".
Demo
CSS
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;
}
5. Светящаяся ссылка
В этом случае, как и с размытым текстом, используется “text-shadow" и шрифт белого цвета.
Demo
CSS
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;
}
6. Ссылка с закруглёнными углами
Demo
CSS
a{
color:#fff;
background: #03c;
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 {
border-radius:30px;
}
7. Ссылка с радужным текстом
Используем “-webkit-background-clip: text;", так как поддеживается только webkit браузерами.
Demo
CSS
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);
}
8. Изменение размера текста
Добавьте “display: inline-block;" к тегу, потому что это встроенный элемент.
Demo
CSS
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);
}
9. Ссылка с вращающимся текстом
Demo
CSS
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);
}
10. Ссылка с переворачивающимся текстом
Этот эффект использует Webdesigner Depot. Это выглядит сложно, но это того стоит!
Demo
HTML
<a href="#"><span data-title="Text Link">Text Link</span></a>
CSS
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 );
}
Вот так легко добавлять классные эффекты с помощью CSS3!
