Эффекты ссылок на сайте | uCoz - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Суббота, 10.12.2016
Скрипты для uCoz » Эффекты для сайта uCoz » Эффекты ссылок на сайте | uCoz

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Эффекты ссылок на сайте | uCoz

Возможности ссылок и примеры их применения




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







Открытие страниц атрибутом target

Варианты открытия новых страниц,то есть как будет открываться новая страница при нажатии на ссылку



<a href="http://delaisait.ucoz.ru/" target="_blank">в новом окне</a>
<a href="http://delaisait.ucoz.ru/" target="_self">в исходном окне</a>
<a href="http://delaisait.ucoz.ru/" target="_parent">в исходном фрейме</a>
<a href="http://delaisait.ucoz.ru/" target="_top">в полном окне</a>



Применение примера ▲ в действии

_blank

_self

_parent

_top


Применение якоря идентификатора

Это довольно полезное свойство ссылок,подвесив идентификатор на любой элемент страницы,заголовок или объект,ссылка будет прокручивать страницу до него.В примере я оставил идентификатор на таблице в которой находится форма комментариев материала добавив туда id="dscomment",а в ссылке вместо адреса указал идентификатор.
Выглядит ссылка с идентификатором так ▼



<a href="#dscomment">Посетить форму комментариев</a>


Элемент на который подвешен якорь ▼



<table border="0" style="width:100%;" id="dscomment">


Применение примера ▲ в действии

Посетить форму комментариев

Устанавливаем свойства псевдоклассов по очереди

Свойства устанавливают поэтапное отображение ссылок,то есть что с ними будет происходить при определённых условиях,в примере ниже показана последовательность установки свойств.Нельзя менять последовательность если вы используете применение всех свойств одновременно,если используете больше 1 очерёдность установки должна сохраняться.



<style>
a:link {
Стили ссылки при первой загрузке страницы
}
a:visited {
Стили ссылки если на неё уже нажимали
}
a:hover {
Стили ссылки при наведении на неё курсора мышки
}
a:focus {
Стили ссылки при получении фокуса ввода
}
a:active {
Стили ссылки в момент нажатия на неё
}
</style>



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

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



<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>



Применение примера ▲ в действии

Меняем цвет текста

Меняем размер текста

Меняем толщину текста

Меняем шрифт текста

Добавляем цвет фона текста

Добавляем картинку фона текста

Меняем направление текста

Делаем текст невидимым

Весь текст в заглавные

Делаем текст мигающим

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

Зачёркивает текст

Добавляет после текста картинку

Добавляет перед текстом картинку

Превращаем текст в кнопку

Добавляем рамку вокруг текста

Добавляем рамку с лева и права

Добавляем рамку с верху и низу



Делаем ссылкой изображение картинку

Картинка будет заменять текст ссылки,при нажатии на ссылку будет открываться установленный адрес.



<a href="http://delaisait.ucoz.ru/" target="_blank"><img src="http://delaisait.ucoz.ru/favicon.ico" alt="img-link" /></a>



Применение примера ▲ в действии

img-link

Делаем ссылкой нужный элемент

Создаём элемент свойствами и прикрепляем к нему ссылку на открытие.Сделаем простой квадрат и поместим его во внутрь ссылки.



<style>
#dskvadrat{
width: 200px;
height: 200px;
background-color:red;
border:2px solid #000;
}
</style>
<a href="/"><div id="dskvadrat"></div></a>



Применение примера ▲ в действии



Разумеется что вариантов использования может быть намного больше,в этом материале представлены стандартные возможности применения эффектов для ссылок.


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

Скопируйте код примера в HTML редактор и проверьте.








Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 3215 | Добавил: IZOTOP | Рейтинг: 4.0/4
    | Теги: LINK, ссылки, effect, uCoz, примеры, site, для ссылок, линки

    Вы будете первый кто оставит комментарий

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]