logo

Ссылки, события при наведении и клике

Стандартный вид ссылки это текст темно-фиолетового цвета, подчеркнутый снизу. При клике цвет изменяется на красный и подчеркивание остается. Первоначально верстальщики обходились малым: меняли цвет первоначального текста, убирали подчеркивание при наведении и клике, изменяя при этом и цвет ссылки.

С появлением CSS3 возможностей видоизменить поведение ссылки при наведении или клике стало намного больше. Несколько вариантов предложено ниже.

HTML- код самый обыкновенный.


<nav class="link__eff">
    <a href="#" class="link__effect">HTML & CSS</a>
    <a href="#" class="link__effect">Bootstrap</a>
    <a href="#" class="link__effect">Javascript</a>
    <a href="#" class="link__effect">Wordpress</a>
    <a href="#" class="link__effect">php </a>
 </nav>

Стилевое оформление также без «наворотов»


.link__eff {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-content: center;
    background: #16A085;
    padding: 15px 0;
    margin-bottom: 15px;
}

.link__eff a {
    position: relative;
    display: inline-block;
    margin: 15px 15px;
    padding: 5px 0;
    outline: none;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
    font-size: 1em;
}

.link__eff a:hover,
.link__eff a:focus {
    outline: none;
} 

Подчеркивание слева направо


.link__effect_1 {
    line-height: 1;
    display: inline-block;
    color: #fff;
    text-decoration: none;
    cursor: pointer
}

.link__effect_1:hover {
    color: #fff;
    text-decoration: none;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.link__effect_1:after {
    display: block;
    content: "";
    height: 1px;
    width: 0;
    background-color: #fff;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.link__effect_1:hover:after,
.link__effect_1:focus:after {
    width: 100%
}

Подчеркивание от центра


.link__effect_2 {
    position: relative;
    cursor: pointer;
    color: #fff;
    outline: 0;
    text-decoration: none
}

.link__effect_2:hover {
    color: #fff;
    text-decoration: none !important
}

.link__effect_2:hover:after {
    visibility: visible;
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1)
}

.link__effect_2:after {
    content: '\2588';
    line-height: 0;
    font-size: 999em;
    color: inherit;
    overflow: hidden;
    font-style: normal;
    display: block;
    position: absolute;
    height: 1px;
    width: 100%;
    left: 0;
    bottom: 0;
    visibility: hidden;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0)
}

Боковые скобки


.link__effect_3::before,
.link__effect_3::after {
    display: inline-block;
    opacity: 0;
    -webkit-transition: opacity 0.2s, -webkit-transform 0.3s;
    transition: opacity 0.2s, -webkit-transform 0.3s;
    transition: transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.2s, -webkit-transform 0.3s;
}

.link__effect_3::before {
    margin-right: 10px;
    content: '[';
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
}

.link__effect_3::after {
    margin-left: 10px;
    content: ']';
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
}

.link__effect_3:hover {
    color: rgba(0, 0, 0, 0.8)
}

.link__effect_3:hover::before,
.link__effect_3:hover::after,
.link__effect_3:focus::before,
.link__effect_3:focus::after {
    opacity: 1;
    color: rgba(0, 0, 0, 0.8);
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
}

Трансформация сверху вниз


.link__effect_4::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.5);
    content: '';
    opacity: 0;-webkit-transition: opacity 0.1s, -webkit-transform 0.5s;
    transition: opacity 0.1s, -webkit-transform 0.5s;
    transition: opacity 0.1s, transform 0.5s;
    transition: opacity 0.1s, transform 0.5s, -webkit-transform 0.5s;

}

.link__effect_4:hover {
    color: rgba(0, 0, 0, 0.8)
}

.link__effect_4:hover::after,
.link__effect_4:focus::after {
    opacity: 1;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
}

Верхнее подчеркивание в уголок


.link__eff a.link__effect_5 {
    margin: 0 10px;
    padding: 10px;
}

.link__effect_5::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    content: '';
    -webkit-transition: top 0.3s;
    transition: top 0.3s;
}

.link__effect_5::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    background: #fff;
    content: '';
    -webkit-transition: height 0.3s;
    transition: height 0.3s;
}

.link__effect_5:hover {
    color: #fff;
    text-shadow: 1px 1px 1px #111;
}

.link__effect_5:hover::before {
    top: 100%;
    opacity: 1;
}

.link__effect_5:hover::after {
    height: 100%;
}

Вторая граница скользит вверх


.link__eff a.link__effect_6 {
    padding: 12px 10px 10px;
    color: #594a96;
    text-shadow: none;
    font-weight: 700;
}

.link__effect_6::before,
.link__effect_6::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 3px;
    background: #594a96;
    content: '';
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    -webkit-transform: scale(0.85);
    transform: scale(0.85);
}

.link__effect_6::after {
    opacity: 0;
    -webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    transition: top 0.3s, opacity 0.3s, transform 0.3s;
    transition: top 0.3s, opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
}

.link__effect_6:hover::before,
.link__effect_6:hover::after,
.link__effect_6:focus::before,
.link__effect_6:focus::after {

    -webkit-transform: scale(1);
    transform: scale(1);
}

.link__effect_6:hover::after,
.link__effect_6:focus::after {
    top: 0%;
    opacity: 1;
}

Вертикальные границы в горизонтальные


.link__eff a.link__effect_7 {
    padding: 0 20px;
    height: 45px;
    line-height: 45px;
}

.link__effect_7::before,
.link__effect_7::after {
    position: absolute;
    width: 45px;
    height: 2px;
    background: #fff;
    content: '';
    opacity: 0.2;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    pointer-events: none;
}

.link__effect_7::before {
    top: 0;
    left: 0;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

.link__effect_7::after {
    right: 0;
    bottom: 0;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
}

.link__effect_7:hover {
    color: #fff;
    text-shadow: 1px 1px 1px #111;
}

.link__effect_7:hover::before,
.link__effect_7:hover::after,
.link__effect_7:focus::before,
.link__effect_7:focus::after {
    opacity: 1;
}

.link__effect_7:hover::before,
.link__effect_7:focus::before {
    left: 50%;
    -webkit-transform: rotate(0deg) translateX(-50%);
    transform: rotate(0deg) translateX(-50%);
}

.link__effect_7:hover::after,
.link__effect_7:focus::after {
    right: 50%;
    -webkit-transform: rotate(0deg) translateX(50%);
    transform: rotate(0deg) translateX(50%);
}

Горизонтальные границы в крест


.link__eff a.link__effect_8 {
    position: relative;
    z-index: 1;
    padding: 30px 0;
}

.link__effect_8 {
    padding: 0 5px;
    color: #594a96;
    font-weight: 700;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}

.link__effect_8::before,
.link__effect_8::after {
    position: absolute;
    width: 100%;
    left: 0;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: #594a96;
    content: '';
    z-index: -1;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    pointer-events: none;
}

.link__effect_8::before {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
}

.link__effect_8::after {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
}

.link__effect_8:hover,
.link__effect_8:focus {
    color: #fff;
    text-shadow: 1px 1px 1px #111;
}

.link__effect_8:hover::before,
.link__effect_8:hover::after,
.link__effect_8:focus::before,
.link__effect_8:focus::after {
    opacity: 0.7;
}

.link__effect_8:hover::before,
.link__effect_8:focus::before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.link__effect_8:hover::after,
.link__effect_8:focus::after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

Появление горизонтальных границ


.link__eff a.link__effect_9 {
    padding: 10px;
    color: #fff;
    font-weight: 700;
}

.link__effect_9::before,
.link__effect_9::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
}

.link__effect_9::before {
    top: 0;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
}

.link__effect_9::after {
    bottom: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
}

.link__effect_9:hover,
.link__effect_9:focus {
    text-shadow: 1px 1px 1px #111;
}

.link__effect_9:hover::before,
.link__effect_9:focus::before,
.link__effect_9:hover::after,
.link__effect_9:focus::after {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
}

Границы и дополнительный текст

Для этого варианта немного изменим HTML-код.


<nav class="link__eff">
    <a href="#" class="link__effect_10"><span>HTML & CSS</span><span>Верстка сайта</span></a>
    <a href="#" class="link__effect_10"><span>Bootstrap</span><span>Фреймворк</span></a>
    <a href="#" class="link__effect_10"><span>Javascript</span><span>Библиотека</span></a>
    <a href="#" class="link__effect_10"><span>Wordpress</span><span>Управление сайта</span></a>
    <a href="#" class="link__effect_10"><span>php</span><span>Основы    </span> </a>
</nav>

.link_eff a.link__effect_10 {
    margin: 0 20px;
    padding: 18px 20px;
}

.link__effect_10::before,
.link__effect_10::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    content: '';
    opacity: 0.2;
    -webkit-transition: opacity 0.3s, height 0.3s;
    transition: opacity 0.3s, height 0.3s;
}

.link__effect_10::after {
    top: 100%;
    opacity: 0;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    ;
    -webkit-transform: translateY(-10px);
    ;
    transform: translateY(-10px);
}

.link__effect_10 span:first-child {
    z-index: 2;
    display: block;
    font-weight: 300;
}

.link__effect_10 span:last-child {
    z-index: 1;
    display: block;
    padding: 8px 0 0 0;
    color: rgba(0, 0, 0, 0.5);
    text-align: center;
    text-shadow: none;
    text-transform: none;
    font-style: italic;
    font-size: 0.7em;
    font-family: Palatino, Georgia, serif;
    opacity: 0;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}

.link__effect_10:hover,
.link__effect_10:focus {
    color: #fff;
    text-shadow: 1px 1px 1px #111;
}

.link__effect_10:hover::before,
.link__effect_10:focus::before {
    height: 6px;
}

.link__effect_10:hover::before,
.link__effect_10:hover::after,
.link__effect_10:focus::before,
.link__effect_10:focus::after {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
}

.link__effect_10:hover span:last-child,
.link__effect_10:focus span:last-child {
    opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
}

Практические примеры, Элементы CSS, Эффекты для текста 0

Рекомендую прочитать...

Свойство box-shadow
Свойство box-shadow

Раньше, для того, чтобы какому нибудь объекту на сайте добавить тень приходилось прибегать к помощи Photoshop-а или другого графического редактора. Тень добавляли в изображение или использовали как фоновый слой.
Потом эти картинки вырезались и вставлялись на страницу сайта. Но чем больше различных картинок содержалось на сайте, тем медленный сайт работал.

Читать полностью
Эффекты при оформлении текста
Свойство -webkit-text-stroke

Мы запросто можем задать границу блоку, рисунку, таблице, тексту. Именно тексту, но не каждой букве этого текста. Хотя стоит попробовать.

В спецификации CSS3 есть свойство -webkit-text-stroke, которое позволяет это сделать.

Читать полностью
Как изменить цвет изображения
как изменить цвет изображения

Как! Во многих интернет магазинах присутствует такая штука: цвет товара меняет свой цвет. Т.е. при клике на один из представленных цветов товар, как правило, это одежда, автомашина, чехлы для телефона или сам телефон меняет свою цветовую окраску. Со стороны кажется, что товар как бы заливается выбранным цветом, или приобретает тот орнамент ( часто представлены при […]

Читать полностью

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.