BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Рецепты CSS » Оформление ссылок с плавным эффектом для CSS

Оформление ссылок с плавным эффектом для CSS

2013-05-16 / Вр:20:06 / просмотров: 9976

Всем привет!!! Чем же вас удивить? Может, оформлением ссылок с плавным эффектом для CSS? Я вам расскажу и покажу на примере, как оформить ссылку в тесте, как оформить ссылку в картинке с эффектом затухания на стандартном  CSS без использования JavaScript. В общем, вы сейчас все увидите, если прочитаете статью до конца.

Оформление ссылки с фоном в тексте.

Вот такой должен получиться конечный итог. При наведении курсора мышки на ссылку, цвет фона плавно будет меняется .

 У ссылок плавно меняется цвет фона.

Создаем в HTML-документе ссылку с классом .linktext

<a href="#" class="linktext"  title="Класс linktext">Read more &raquo;</a>

Теперь пропишем к ссылке стиль:


/*Плавный переход*/

a {
-webkit-transition: all linear 0.3s; /*Устанавливаем плавный переход при наведении курсора мыши*/
 -moz-transition: all linear 0.3s;
 -ms-transition: all linear 0.3s;
 -o-transition: all linear 0.3s;
 transition: all linear 0.3s;
}

/*Текстовые ссылки*/
.linktext {
 padding: 1px 3px; /*Отступы внутри ссылки*/
 background-color: #f53799; /*Цвет фона ссылки*/
 text-decoration: none; /*Ссылка без подчеркивания*/
 font-size: 13px; /*Размер текста*/
 color: white; /*Цвет ссылки*/
 border-radius: 2px; /*Скругленные углы*/
 -webkit-border-radius: 2px; /*Скругленные углы*/
 -moz-border-radius: 2px;  /*Скругленные углы*/
}

.linktext:hover {
 background-color: #db0071; /*Цвет фона ссылки*/
}

А вот так будет выглядеть код полной готовности.

<html>
<head>
<meta charset="utf-8">
<title>Оформление ссылок</title>
<style>
/*Плавный переход*/

a {
-webkit-transition: all linear 0.3s; /*Устанавливаем плавный переход при наведении курсора мыши*/
 -moz-transition: all linear 0.3s;
 -ms-transition: all linear 0.3s;
 -o-transition: all linear 0.3s;
 transition: all linear 0.3s;
}

/*Текстовые ссылки*/
.linktext {
 padding: 1px 3px; /*Отступы внутри ссылки*/
 background-color: #f53799; /*Цвет фона ссылки*/
 text-decoration: none; /*Ссылка без подчеркивания*/
 font-size: 13px; /*Размер текста*/
 color: white; /*Цвет ссылки*/
 border-radius: 2px; /*Скругленные углы*/
 -webkit-border-radius: 2px; /*Скругленные углы*/
 -moz-border-radius: 2px; /*Скругленные углы*/
}

.linktext:hover {
 background-color: #db0071; /*Цвет фона ссылки*/
}

</style>
</head>
<body>
<p>Save a lot of work with CSS! In our CSS tutorial <a href="#" class="linktext" title="Класс link-text">you will</a> learn how to use CSS to control the style and layout of multiple Web pages all at once. <a href="http://bloggood.ru/" class="linktext" title="Класс link-text">bloggood.ru</a></p>
<p><a href="#" class="linktext" title="Класс link-text">Read more &raquo;</a></p>
</body>
</html>

Посмотреть на результат работы в примере:

Просмотреть пример.

Ссылка изображения с плавным переходом.

Изображение будет немного находиться в тумане и, когда пользователь наведет курсор мышки на изображение ссылки, тогда туман плавно исчезнет.
1 картинка - изображение находится в обычном состоянии.
2 картинка - картинка становится четче при наведении мышки.

Ссылка изображения с плавным переходом

В HTML-документе пропишем ссылку к картинке.

<a href="http://bloggood.ru/" title="Ссылка изображение"><img src="kartinka-dla-bloga-4.jpg"></a>

Теперь изображение стало ссылкой и ей можно прописать стиль "тумана".

*Ссылка изображение*/
a img{
 border: 10px solid #dddddd; /*Граница вокруг изображения*/
 margin: 0 15px 15px 0; /*Отступы от изображения*/
 -webkit-transition: all linear 0.3s; /*Устанавливаем плавный переход при наведении курсора мыши */
 -moz-transition: all linear 0.3s;
 -ms-transition: all linear 0.3s;
 -o-transition: all linear 0.3s;
 transition: all linear 0.3s;
 opacity: 0.5; /*Прозрачность изображения*/
}

a:hover img {
 opacity: 1; /*Делаем изображения непрозрачным*/
 border: 10px solid #afd3dc; /*Изменяем цвет границы*/
}

А вот так будет выглядеть код в полной готовности.

<html>
<head>
<meta charset="utf-8">
<title>Оформление ссылок</title>
<style>

/*Ссылка изображение*/
a img{
 border: 10px solid #dddddd; /*Граница вокруг изображения*/
 margin: 0 15px 15px 0; /*Отступы от изображения*/
 -webkit-transition: all linear 0.3s; /*Устанавливаем плавный переход при наведении курсора мыши */
 -moz-transition: all linear 0.3s;
 -ms-transition: all linear 0.3s;
 -o-transition: all linear 0.3s;
 transition: all linear 0.3s;
 opacity: 0.5; /*Прозрачность изображения*/
}

a:hover img {
 opacity: 1; /*Делаем изображения непрозрачным*/
 border: 10px solid #afd3dc; /*Изменяем цвет границы*/
}

</style>
</head>
<body>
<p><a href="http://bloggood.ru/" title="Ссылка изображение"><img src="kartinka-dla-bloga-4.jpg" alt="Image links"></a></p>
</body>
</html>

Посмотреть на результат работы в примере:

Просмотреть пример.

Кнопки меню с плавным переходом.

Все анологично. При наведении мышки на кнопку в меню, вы увидите плавный переход фона.

Перейдем сразу к готовому коду.

<html>
<head>
<meta charset="utf-8">
<title>Оформление ссылок</title>
<style>

/*Ссылка кнопки меню*/
.label {
 padding: 5px 7px; /*Отступы внутри ссылки*/
 font-size: 25px; /*Размер шрифта*/
 border-radius: 2px; /*Скругленные углы*/
 -webkit-border-radius: 2px;  /*Скругленные углы*/
 -moz-border-radius: 2px;  /*Скругленные углы*/
 background-color: black;  /*Цвет фона ссылки*/
 opacity: 0.6;
 color: white;  /*Цвет ссылки*/
 text-decoration: none; /*Ссылка без подчеркивания*/
 text-shadow: none;
 margin: 0 3px 3px 0;
 display: inline-block;
 -webkit-transition: all linear 0.3s;  /*Устанавливаем плавный переход при наведении курсора мыши */
 -moz-transition: all linear 0.3s;
 -ms-transition: all linear 0.3s;
 -o-transition: all linear 0.3s;
 transition: all linear 0.3s;
 opacity: 0.5; /*Прозрачность изображения*/
}

.label:hover {
 opacity: 1; /*Делаем изображения непрозрачным*/
}

</style>
</head>
<body>
<p><a href="#" class="label">Menu-1</a><a href="#" class="label">Menu-2</a><a href="#" class="label">Menu-3</a></p>
</body>
</html>

Посмотреть на результат работы в примере:

Просмотреть пример.

 

Пунктирная ссылка с плавным переходом.

Чтобы долго не объяснять как выглядит конечный результат, просто посмотрите готовый пример и вам станет все сразу понятно.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Оформление ссылок</title>
<style>

/*Плавный переход*/

a {
-webkit-transition: all linear 0.3s; /*Устанавливаем плавный переход при наведении курсора мыши*/
 -moz-transition: all linear 0.3s;
 -ms-transition: all linear 0.3s;
 -o-transition: all linear 0.3s;
 transition: all linear 0.3s;
}

.blockDashed {
 display: inline-block; /*Встроенный-блочный элемент*/
 font-family:verdana; /*Шрифт текста*/
 font-size: 16px; /*Размер текста*/
 width: 200px; /*Ширина блока*/
 padding: 10px; /*Отступы внутри блока*/
 text-decoration: none; /*Ссылка без подчеркивания*/
 color: #666666; /*Цвет текста ссылки*/
 background-color: white; /*Фон ссылки*/
 border: 1px dashed #cccccc; /*Пунктирная граница*/
 opacity: 0.5; /*Прозрачная ссылка*/
 border-radius: 4px; /*Скругленные углы у ссылки*/
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 margin: 0 15px 15px 0; /*Отступы от ссылки справа и снизу*/
}

.blockDashed:hover {
 border: 1px dashed #000000; /*Изменяем цвет границы ссылки при наведении на нее курсора мыши*/
 opacity: 1; /*Делаем ссылку непрозрачной*/
}
</style>
</head>
<body>
<a href="#" class="blockDashed">Save a lot of work with CSS!
In our CSS tutorial
you will learn how to use CSS to control the style and
layout of multiple Web pages all at once. bloggood.ru
Read more »</a>
</body>
</html>

Просмотреть пример.

Дорогие читатели, подписывайтесь на мою RSS-ленту новостейя всегда стараюсь добавлять новые интересные полезные статьи!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

2 Ответов на комментарий - Оформление ссылок с плавным эффектом для CSS

  1. Павел

    Попытался сделать ссылки изображений с плавным переходом только в теле html-документа, получилось что картинки в шапке тоже получили этот эффект. Степан, скажите, возможно ли оставить картинки в head-е без изменений (затуманивания) и применить эффект только к конкретным изображениям?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Сделайте вот так:

    <img src="avatar.jpg" class="bloggood">
    

    В CSS стилях:

    *Ссылка изображение*/
    .bloggood{
     border: 10px solid #dddddd; /*Граница вокруг изображения*/
     margin: 0 15px 15px 0; /*Отступы от изображения*/
     -webkit-transition: all linear 0.3s; /*Устанавливаем плавный переход при наведении курсора мыши */
     -moz-transition: all linear 0.3s;
     -ms-transition: all linear 0.3s;
     -o-transition: all linear 0.3s;
     transition: all linear 0.3s;
     opacity: 0.5; /*Прозрачность изображения*/
    }
     
    .bloggood:hover {
     opacity: 1; /*Делаем изображения непрозрачным*/
     border: 10px solid #afd3dc; /*Изменяем цвет границы*/
    }
    

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , ,

Мои цели на 2016 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 600

4). Добиться стабильной посещаемости 2500 человек/сутки

5). Закончить все статьи, которые находятся в черновиках

6). Создать портфолио и мини интернет-магазин шаблонов

7). Создать книгу

8). Добиться стабильной посещаемости 3000 человек/сутки

9). Довести количество статей до 700

10). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 669
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3663