Эффекты ссылок на сайте - Скрипты - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Скрипты


Возможности ссылок и примеры их применения
 
Применение ссылок на страницах сайтов является неотъемлемой частью формирования создаваемого контента.При этом ссылки могут иметь различные свойства и эффекты исполняемых сценариев.В этой небольшой статье кто то откроет для себя новые знания,тех кому не удастся найти что то новое прошу отнестись со снисхождением.В любом случае можете использовать форму комментариев для возникающих вопросов,имеющихся дополнений или предложений.
 
Открытие страниц атрибутом target

Варианты открытия новых страниц,то есть как будет открываться новая страница при нажатии на ссылку:
Code
<a href="http://kamorka.ucoz.com/" target="_blank">в новом окне</a>
<a href="http://kamorka.ucoz.com/" target="_self">в исходном окне</a>
<a href="http://kamorka.ucoz.com/" target="_parent">в исходном фрейме</a>
<a href="http://kamorka.ucoz.com/" target="_top">в полном окне</a>

Примеры эффектов при наведении курсора на ссылку

Одним из самых распространённых способов показать эффект ссылки,это изменить её свойства при наведении на неё применив псевдокласс :hover.Применяя различные классы будем устанавливать им различные свойства,для получения отдельного эффекта можете взять только интересующий class="имя" и стиль к нему .имя.Используйте Редактор HTML для экспериментов с примерами,так будет проще понять как всё это работает.
Code

<style>
a.dslink1:hover{
color:red;
}
a.dslink2:hover{
font-size:22px;
}
a.dslink3:hover{
font-weight:bold;
}
@font-face {
font-family:MarckScript-Regular;
src: local("MarckScript-Regular"),
url(http://delaisait.ucoz.ru/css/demo/file/shrift/MarckScript-Regular.ttf);
}
a.dslink4:hover{
font-family:MarckScript-Regular;
}
a.dslink5:hover{
background-color:red;
}
a.dslink6:hover{
background:url(http://delaisait.ucoz.ru/img/1/1/link/dsbgdemo.gif);
}
a.dslink7:hover{
direction:rtl;
unicode-bidi:bidi-override;
}
a.dslink8:hover{
display:none;
}
a.dslink9:hover{
text-transform:uppercase;
}
a.dslink10:hover{
text-decoration:blink;
}
a.dslink11:hover{
opacity:0.5;
}
a.dslink12:hover{
text-decoration:line-through;
}
a.dslink13:hover:after{
content:url(http://delaisait.ucoz.ru/favicon.ico);
}
a.dslink14:hover:before{
content:url(http://delaisait.ucoz.ru/favicon.ico);
}
a.dslink15:hover{
appearance:button;
-moz-appearance:button;
-webkit-appearance:button;
}
a.dslink16:hover{
border:1px solid red;
padding:5px;
}
a.dslink17:hover{
border-left:1px solid red;
border-right:1px solid red;
padding:5px;
}
a.dslink18:hover{
border-top:1px solid red;
border-bottom:1px solid red;
padding:5px;
}
</style>
<a href="#" class="dslink1">Меняем цвет текста</a><br><br>
<a href="#" class="dslink2">Меняем размер текста</a><br><br>
<a href="#" class="dslink3">Меняем толщину текста</a><br><br>
<a href="#" class="dslink4">Меняем шрифт текста</a><br><br>
<a href="#" class="dslink5">Добавляем цвет фона текста</a><br><br>
<a href="#" class="dslink6">Добавляем картинку фона текста</a><br><br>
<a href="#" class="dslink7">Меняем направление текста</a><br><br>
<a href="#" class="dslink8">Делаем текст невидимым</a><br><br>
<a href="#" class="dslink9">Весь текст в заглавные</a><br><br>
<a href="#" class="dslink10">Делаем текст мигающим</a><br><br>
<a href="#" class="dslink11">Устанавливаем прозрачность тексту</a><br><br>
<a href="#" class="dslink12">Зачёркивает текст</a><br><br>
<a href="#" class="dslink13">Добавляет после текста картинку</a><br><br>
<a href="#" class="dslink14">Добавляет перед текстом картинку</a><br><br>
<a href="#" class="dslink15">Превращаем текст в кнопку</a><br><br>
<a href="#" class="dslink16">Добавляем рамку вокруг текста</a><br><br>
<a href="#" class="dslink17">Добавляем рамку с лева и права</a><br><br>
<a href="#" class="dslink18">Добавляем рамку с верху и низу</a><br><br>


DEMO

Важно!

При копировании материала указывать ссылку на источник.

- 472
- 25-Ноября-2016
- 0
Материал разместил:

Похожий материал
Статьи сайта