Всем привет!!! Чем же вас удивить? Может, оформлением ссылок с плавным эффектом для CSS? Я вам расскажу и покажу на примере, как оформить ссылку в тесте, как оформить ссылку в картинке с эффектом затухания на стандартном CSS без использования JavaScript. В общем, вы сейчас все увидите, если прочитаете статью до конца.
Оформление ссылки с фоном в тексте.
Вот такой должен получиться конечный итог. При наведении курсора мышки на ссылку, цвет фона плавно будет меняется .
Создаем в HTML-документе ссылку с классом .linktext
<a href="#" class="linktext" title="Класс linktext">Read more »</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="/" class="linktext" title="Класс link-text">bloggood.ru</a></p>
<p><a href="#" class="linktext" title="Класс link-text">Read more »</a></p>
</body>
</html>
Посмотреть на результат работы в примере:
Ссылка изображения с плавным переходом.
Изображение будет немного находиться в тумане и, когда пользователь наведет курсор мышки на изображение ссылки, тогда туман плавно исчезнет.
1 картинка - изображение находится в обычном состоянии.
2 картинка - картинка становится четче при наведении мышки.
В HTML-документе пропишем ссылку к картинке.
<a href="/" 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="/" 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-ленту новостей, я всегда стараюсь добавлять новые интересные полезные статьи!
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Как растянуть блок на всю высоту экрана с помощью CSS
Анимация (покачивание-swing) текста или изображения при наведении мыши
CSS стили для горизонтальных линий «HR»
Как сделать простой эффект Lightbox на CSS3Похожие статьи
Полезные плагины для wordpress. Описание
Что такое ошибка 404 и как интересно оформить эту страницу?
Обратный отсчет времени на PHP
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330379 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274711 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222615 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187975 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186569
2 Ответов на комментарий - Оформление ссылок с плавным эффектом для CSS
Добавить комментарий
Метки: css, для сайта, эффекты для сайта
Попытался сделать ссылки изображений с плавным переходом только в теле html-документа, получилось что картинки в шапке тоже получили этот эффект. Степан, скажите, возможно ли оставить картинки в head-е без изменений (затуманивания) и применить эффект только к конкретным изображениям?
Сделайте вот так:
В 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; /*Изменяем цвет границы*/ }