Оформление ссылок с плавным эффектом для CSS
06.09.2018
Всем привет!!! Чем же вас удивить? Может, оформлением ссылок с плавным эффектом для 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="https://bloggood.ru/" 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="https://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="https://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-ленту новостей , я всегда стараюсь добавлять новые интересные полезные статьи!
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
Добавить комментарий
Метки: css , для сайта , эффекты для сайта