Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

ΠžΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ссылок с использованиСм стиля.Для оформлСния ссылок ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ псСвдоклассы

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ ΠΎ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π΅

Β 

Β 

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ всС ссылки Π² сайтС Π²Ρ‹Π΄Π΅Π»ΡΡŽΡ‚ΡΡ синим Ρ†Π²Π΅Ρ‚ΠΎΠΌ ΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ стандартный Π²ΠΈΠ΄.

ΠŸΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Β CSS ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π²ΠΈΠ΄Ρ‹ ссылок:

  • — a:link — ссылки Π½Π΅ посСщСнныС;
  • — a:visited — ссылки послС посСщСния Β ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ;
  • — a:hover — Β ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΏΡ€ΠΎΠ²Π΅Π» Π½Π°Π΄;
  • — a:active — ссылки Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅.Β 

Для оформлСния ссылок ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ псСвдоклассы. Для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ссылки ΠΌΠΎΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Β ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹:Β 

{font-size; text-decoration; color; font-weight; Β font –family; }Β 

ΠŸΡ€ΠΈ этом создаСтся Π½ΠΎΠ²Ρ‹ΠΉ ΡΡ‚ΠΈΠ»ΡŒ, Π° ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π²Ρ‹ΡˆΠ΅ ΠΎΠΏΠΈΡΠ°Π½Π½ΡƒΡŽ — Β Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠ±Π»ΡŽΠ΄Π°Ρ‚ΡŒ.

БущСствуСт Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ оформлСния ссылки Π² любом тэгС, Ρ‚Π°ΠΊ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹ΠΉ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ способ.

Π”Π°Π»Π΅Π΅ приводится нСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ²  оформлСния ссылок.Β 

ИзмСнСниС Ρ†Π²Π΅Ρ‚Π° подчСркивания

Π‘ΠΎ ссылками, ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ CSS, ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΠ½ΡƒΡŽ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ. Π¦Π²Π΅Ρ‚ ссылки, ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π΅ курсора ΠΌΡ‹ΡˆΠΈ, остаСтся Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½Ρ‹ΠΌ, Π½ΠΎ Π·Π°Ρ‚ΠΎ Ρƒ Π½Π΅Π΅ появляСтся ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π°, Π½Π΅ΠΆΠ΅Π»ΠΈ сама ссылка. Π”Π°Π½Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠ΅ΠΌ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… Netscape 4.x ΠΈ Internet Explorer 5.Β 

ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ИзмСнСниС Ρ†Π²Π΅Ρ‚Π° подчСркивания Ρƒ ссылок

<html>
<head>Β 

<style>
a:link { color: blue; text-decoration: none }
Β a:hover { color: red; text-decoration: underline }
.link { color: blue }
</style>Β 

<body>
<a href=link1.html><span class=link>Бсылка</span></a>

</body>

</head>

</html>Β 

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ подчСркивания

ΠŸΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ тСкста Ρƒ ссылок Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ ΡƒΡΡ‚ΠΎΡΠ»ΠΎΡΡŒ, Ρ‡Ρ‚ΠΎ любоС Π΄Ρ€ΡƒΠ³ΠΎΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ‚Π°ΠΊΠΎΠ³ΠΎ оформлСния Π±ΡƒΠ΄Π΅Ρ‚ с Π½ΠΈΠΌΠΈ Π°ΡΡΠΎΡ†ΠΈΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ. Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ Π²Π²ΠΎΠ΄ΠΈΡ‚ΡŒ посСтитСлСй сайта Π² Π·Π°Π±Π»ΡƒΠΆΠ΄Π΅Π½ΠΈΠ΅, Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ для ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ тСкста, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ссылок. Но ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π½ΠΎΠ΅, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² Π²ΠΈΠ΄Π΅ ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ. Для этого создадим Π½ΠΎΠ²Ρ‹ΠΉ ΡΡ‚ΠΈΠ»ΡŒ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ border-bottom, ΠΎΠ½ создаСт линию ΠΏΠΎΠ΄ тСкстом;Β 

ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Β Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠ³ΠΎ подчСркивания для ссылок

<html>
<head>

<style>
A {color: #FF0000;}
A:visited {color: #666666;}
A:hover { text-decoration: none; border-bottom: 1px dashed blue; }</style>

</head>Β 

<body>
<a href=1.html>ΠŸΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠ½ΡƒΡ‚Π°Ρ ссылка</a>
</body>

</html> Β 

Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ создаСтся ΡΡ‚ΠΈΠ»ΡŒ для ссылки, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π΅ Π½Π΅Π΅ курсором ΠΌΡ‹ΡˆΠΈ создаСт Ρƒ тСкста ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ синСго Ρ†Π²Π΅Ρ‚Π°.Β 

Β 

Π‘Π°ΠΉΡ‚ Π½Π° HTML

Π’Π°Π±Π»ΠΈΡ†Ρ‹ стилСй — CSS

ВСбмастСру Π² ΠΏΠΎΠΌΠΎΡ‰ΡŒ

Γ—

Π’Π°ΡˆΠ΅ имя

Π’Π΅Π»Π΅Ρ„ΠΎΠ½

Π‘ΠΎΠΎΠ±Ρ‰Π΅Π½ΠΈΠ΅

Мои услуги

Β Β Β 

Π”ΠžΠ ΠΠ‘ΠžΠ’ΠšΠ ΠœΠžΠ”Π•Π ΠΠ˜Π—ΠΠ¦Π˜Π―
Π£Π‘ΠžΠ’Π•Π Π¨Π•ΠΠ‘Π’Π’ΠžΠ’ΠΠΠ˜Π•
Π’Π•Π₯ΠΠ˜Π§Π•Π‘ΠšΠΠ― ΠŸΠžΠ”Π”Π•Π Π–ΠšΠ
ΠžΠ‘Π‘Π›Π£Π–Π˜Π’ΠΠΠ˜Π• Π‘ΠΠ™Π’ΠžΠ’
НА JOOMLA.

html — Π˜Π½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΡΡ‚ΠΈΠ»ΡŒ для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ссылки

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° эти ссылки каТдая ΠΈΠ· ссылок ΠΈΠΌΠ΅Π»Π° свой собствСнный Ρ„ΠΎΠ½ Π·Π°Π»ΠΈΠ²ΠΊΠΈ background-color Π±Π΅Π· написания ΠΏΠ΅Ρ€ΡΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… стилСй ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ссылки?

<nav>
    <a href="#">Photo</a>
    <a href="#">Video</a>
    <a href="#">Press</a>
    <a href="#">Staff</a>
    <a href="#">Alumnus</a>
    <a href="#">Contact Us</a>
</nav>
  • html
  • css
  • javascript

Π‘Π΅Π· написания ΠΏΠ΅Ρ€ΡΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… стилСй для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ссылки Π½Π΅ ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ яваскриптом Π½Π°Π²Π΅ΡˆΠ°Ρ‚ΡŒ индСкс ΠΈΠ»ΠΈ просто Π² Ρ†ΠΈΠΊΠ»Π΅ Π½Π° ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ элСмСнт ΠΏΠΎΠ²Π΅ΡΠΈΡ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ события Π½Π° Ρ…ΡƒΠ²Π΅Ρ€ с ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ стиля, Π½ΠΎ Π·Π°Ρ‡Π΅ΠΌ лишний яваскрипт. МоТно Π½Π°Π²Π΅ΡˆΠ°Ρ‚ΡŒ стили ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ ссылкС Π½Π΅ навСшивая Π½Π° Π½Π΅Π΅ Π½ΠΎΠ²Ρ‹ΠΉ класс:

nav a {background:red}
nav a +a{background:green}
nav a +a +a{background:blue}
nav a +a +a +a{background:yellow}
nav a +a +a +a +a{background:orange}
nav a +a +a +a +a +a{background:black}

Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² ΠΈΠ΅7 (Π² ΠΈΠ΅6 Π½Π΅ смотрСл)

  1. ΠŸΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ‹ :nth-child. (Чистый CSS.)
  2. jQuery. ΠŸΡ€ΠΎΠ²Π΅Ρ€ΡΡ‚ΡŒ индСкс .index().
  3. Π—Π°ΠΊΡ€Π°ΡΠΈΡ‚ΡŒ ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ ΠΈΠΌ Ρ„ΠΎΠ½ ΠΊΠ°ΠΊΠΈΠΌ-Ρ‚ΠΎ (прямо ΠΈΠ½Π»Π°ΠΉΠ½ Ρ‡Π΅Ρ€Π΅Π·), Π½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π² качСствС бэкграунд-ΠΈΠΌΠΈΠ΄ΠΆ Ρ„Π°ΠΉΠ» с Ρ†Π²Π΅Ρ‚ΠΎΠΌ Ρ„ΠΎΠ½Π° страницы. Π’ CSS ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ: a:hover{background-image: none}, Ρ‚ΠΎΠ³Π΄Π° рисунок Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠΏΠ°Π΄Π°Ρ‚ΡŒ, обнаТая Ρ„ΠΎΠ½.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ onmouseover хотя всС ΠΆΠ΅ с CSS Π±ΡƒΠ΄Π΅Ρ‚ эстСтичнСС Ρ‚Π°ΠΊ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ.

     <nav>
       < a href="#">Photo</a>
       <a href="#">Video</a>
       < a href="#">Press</a>
       < a href="#">Staff</a>
       < a href="#">Alumnus</a>
       < a href="#">Contact  Us</a>
</nav>

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Ρ†Π²Π΅Ρ‚ ссылки поставил #FF0000, мСняйтС Π΅Π³ΠΎ ΠΏΠΎ своСму ΡƒΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΈΡŽ )))

P.S. лишниС ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹ ΡƒΠ±Π΅Ρ€ΠΈΡ‚Π΅

2

Π—Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΡƒΠΉΡ‚Π΅ΡΡŒ ΠΈΠ»ΠΈ Π²ΠΎΠΉΠ΄ΠΈΡ‚Π΅

РСгистрация Ρ‡Π΅Ρ€Π΅Π· Google

РСгистрация Ρ‡Π΅Ρ€Π΅Π· Facebook

РСгистрация Ρ‡Π΅Ρ€Π΅Π· ΠΏΠΎΡ‡Ρ‚Ρƒ

ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π±Π΅Π· рСгистрации

ΠŸΠΎΡ‡Ρ‚Π°

НСобходима, Π½ΠΎ Π½ΠΈΠΊΠΎΠΌΡƒ Π½Π΅ показываСтся

ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π±Π΅Π· рСгистрации

ΠŸΠΎΡ‡Ρ‚Π°

НСобходима, Π½ΠΎ Π½ΠΈΠΊΠΎΠΌΡƒ Π½Π΅ показываСтся

By clicking β€œΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ отвСт”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

56 CSS Link Hover Effects

ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π½Π½Ρ‹Ρ… бСсплатных ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΊΠΎΠ΄Π° HTML ΠΈ CSS link effect ΠΈΠ· Codepen, GitHub ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… рСсурсов с состояниСм :hover ΠΈ :active . ОбновлСниС майской ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ 2021 Π³ΠΎΠ΄Π°. Π”Π²Π΅Π½Π°Π΄Ρ†Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹Ρ… ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚ΠΎΠ².

  1. ΠŸΠ°Π½ΠΈΡ€ΠΎΠ²ΠΎΡ‡Π½Ρ‹Π΅ сухари CSS
  2. Π‘Ρ‚Ρ€Π΅Π»ΠΊΠΈ CSS
О кодС

ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ссылки с псСвдоэлСмСнтами

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: —

О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния #4

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: —

О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния #5

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: —

О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния #6

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: —

О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния #7

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: —

О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния #1

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: —

О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния #2

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: —

О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡ‹ΡˆΠΈ

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: —

О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ раздСлСния ссылок ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

ВСкст дублируСтся, маскируСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ clip-path , Π·Π°Ρ‚Π΅ΠΌ псСвдоэлСмСнты ΠΈ двиТСния Π°Π½ΠΈΠΌΠΈΡ€ΡƒΡŽΡ‚ΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS-ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ². ΠŸΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ сдСлано с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния с Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΌ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ, Π½ΠΎ Ссли Π²Ρ‹ Π½Π΅ ΠΏΠ»Π°Π½ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΡƒΡŽ ​​ссылку Π² Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… строках тСкста, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ просто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠΉ псСвдоэлСмСнт.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: —

О кодС

Π˜Π·ΡƒΡ‡Π΅Π½ΠΈΠ΅ эффСктов ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ссылки Creative Link

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: —

О кодС

Π˜ΡΡ‡Π΅Π·Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ссылки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: —

О кодС

ЛазСрная видимая ссылка Π½Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: —

О кодС

ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ URL-адрСсов ссылок

Как ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ href ссылки рядом с тСкстом ссылки.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

АккуратныС эффСкты навСдСния

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: —

О кодС

ΠŸΡ€ΠΎΡΡ‚Π°Ρ CSS-анимация ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° строку для ссылок

ΠŸΠ°Ρ€Π° простых ΠΈ Ρ‚ΠΎΠ½ΠΊΠΈΡ… CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ навСдСния Π»ΠΈΠ½ΠΈΠΈ для ссылок.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

CSS анимация ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ссылки

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

АнимированныС ссылки SVG

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

Анимация ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ссылки

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ с ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ с ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ ΠΌΠΎΡ‰Π½ΠΎΡΡ‚ΡŒΡŽ

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: —

О кодС

ΠŸΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ β€” ссылка

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

ВзаимодСйствиС ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ссылки

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

Бсылка Hover Flash

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

ΠŸΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

Π—Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ссылки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ навСдСния Π½Π° ссылку, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π°ΠΏΠΎΠ»Π½ΡΡŽΡ‚ ссылку ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈΠ»ΠΈ ΠΏΠ΅Ρ€Π΅Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ ΠΈ свойство clip-path .

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ подчСркивания ссылки

Анимированный эффСкт подчСркивания/Π³Ρ€Π°Π½ΠΈΡ†Ρ‹. ΠžΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ transform-origin , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π½Π°Ρ‡Π°Π»ΠΎ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π’ настоящСС врСмя ΠΎΠ½ установлСн Π½Π°Π»Π΅Π²ΠΎ.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

ΠŸΠΎΠ»ΡƒΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ссылки CurrentColor

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ парСния Spring/Bounce

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

Π‘Ρ‚ΠΈΠ»ΡŒ ссылок

ИсслСдованиС стилСй ссылок Π±Π΅Π· классов.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Firefox, Opera, Safari

Зависимости: —

О кодС

ΠŸΠΎΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ # ссылки!

ΠΠ΅Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰ΠΈΠ΅ стили ссылок. Π€Π»Π°Π³ # ссылки с CSS! Никогда Π½Π΅ Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅ a href="#" снова Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒ!

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ связи

Π­Ρ„Ρ„Π΅ΠΊΡ‚ Π·Π°ΠΊΠΎΡ€ΡŽΡ‡ΠΊΠΈ ссылок HTML ΠΈ CSS.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О кодС

Бсылка с Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹ΠΌ Ρ„ΠΎΠ½ΠΎΠΌ

Бсылка с Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹ΠΌ Ρ„ΠΎΠ½ΠΎΠΌ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О кодС

Анимированный вСс ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора

Вонкая ссылка выдСляСтся ΠΆΠΈΡ€Π½Ρ‹ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ.

О кодС

Многоканальная ссылка

ΠœΠ½ΠΎΠ³ΠΎΡΡ‚Ρ€ΠΎΡ‡Π½Ρ‹ΠΉ эффСкт навСдСния Π½Π° ссылку.

О кодС

Π‘Ρ‚Ρ€Π΅Π»ΠΊΠ° связи

ИдСя со стрСлкой ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ссылку.

О кодС

ГрадиСнтная анимация с ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ

ИспользованиС Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° css ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ css позволяСт Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ подчСркивания ссылки ΠΏΠ΅Ρ€Π΅Π½ΠΎΡΠΈΡ‚ΡŒΡΡ Π½Π° нСсколько строк. РаньшС этого ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ элСмСнтов :pseudo . Однако ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… строках оказалось нСпросто.

О кодС

Cool Hover Effect с Ρ€Π΅ΠΆΠΈΠΌΠΎΠΌ смСшивания ΠΈ налоТСния

Π­Ρ‚ΠΎ ΠΊΡ€ΡƒΡ‚ΠΎ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ссылки Π½Π° :hover . Mix-blend-mode Π² ::after ΠΈΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ Π΅Π³ΠΎ для вас.

Π”Π΅ΠΌΠΎ GIF: Underline Hover

Underline Hover

HTML ΠΈ CSS эффСкт подчСркивания ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π­Π»Π²ΠΈΠ½ΠΎΠΌ Π²Π°Π½ Π΄Π΅Π½ Π₯Π΅ΠΉΠ·Π΅Π»ΠΎΠΌ
12 июля 2017 г.

ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄

ДСмонстрационноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: Animate Underline Wavy

Animate Underline Wavy

Π­Ρ‚ΠΎ классноС волнистоС ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ нравится людям.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Дэвидом Дарнсом
10 июля 2017 г.

ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄

ДСмонстрационноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: НСобычноС ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ссылки Text-Shadow

НСобычноС ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ссылки Text-Shadow

HTML ΠΈ CSS ΠΏΡ€ΠΈΡ‡ΡƒΠ΄Π»ΠΈΠ²ΠΎΠ΅ text-shadow ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ссылки.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π Π°ΠΉΠ°Π½ΠΎΠΌ
1 июля 2017 г.

ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄

ДСмонстрационный GIF: Π‘Π»Π΅Π΄ΡƒΠΉΡ‚Π΅ ΠΏΠΎ ссылкам

Π‘Π»Π΅Π΄ΡƒΠΉΡ‚Π΅ ΠΏΠΎ ссылкам

НавСдитС курсор Π½Π° ссылку, ΠΈ ΠΎΠ½Π° слСдуСт Π·Π° курсором, выдСляя ссылки ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ продвиТСния!
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠšΡΡ‚Ρ€ΠΈΠ½ ΠšΠ°Ρ‚ΠΎ
23 июня 2017 г.

ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄

Π”Π΅ΠΌΠΎ GIF: стили ссылок Π½Π° ΠΎΠ΄ΠΈΠ½ элСмСнт Π½Π° чистом CSS

стили ссылок Π½Π° ΠΎΠ΄ΠΈΠ½ элСмСнт Π½Π° чистом CSS

Π’Π΄ΠΎΡ…Π½ΠΎΠ²Π»Π΅Π½ Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Π²ΠΈΠ΄Π΅Π» Π² Medium ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΠ΅Ρ€ΡŒΡΡ…, Π½ΠΎ с Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½ΠΎΠΉ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠΎΠΉ привнСсти Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ. Π’ настоящСС врСмя ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΎ ссылкой ΠΎΠ±Ρ‰Π΅ΠΉ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 10000 пиксСлСй ΠΏΠΎ всСм строкам.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠœΡΡ‚ΡŒΡŽ Шилдсом
24 июня 2017 г.

ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄

ДСмонстрационноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: эффСкт ΠΏΠ΅Ρ€Π΅Ρ‡Π΅Ρ€ΠΊΠ½ΡƒΡ‚ΠΎΠ³ΠΎ навСдСния

Π­Ρ„Ρ„Π΅ΠΊΡ‚ ΠΏΠ΅Ρ€Π΅Ρ‡Π΅Ρ€ΠΊΠ½ΡƒΡ‚ΠΎΠ³ΠΎ навСдСния

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния для ссылок. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ псСвдоэлСмСнт Π² ссылкС.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Артёмом
23 июня 2017 г.

ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄

Π”Π΅ΠΌΠΎ-GIF: Jumping Link Hovers

Jumping Link Hovers

Jumping Link Hovers с HTML и CSS.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π‘Π΅Π½Π½Π΅Ρ‚ΠΎΠΌ Π€ΠΈΠ»ΠΈ
19 июня 2017 г.

ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄

Π”Π΅ΠΌΠΎ GIF: Бсылка со стрСлкой

Бсылка со стрСлкой

Бсылка со стрСлкой β€” ΠΊΡ€ΡƒΠΆΠΎΠΊ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ (см. домашний Π²Π΅Π±-сайт Google).
Π‘Π΄Π΅Π»Π°Π½ΠΎ АлСксандром Π”ΠΆΠΎΠ»Π»ΠΈ
21 мая 2017 г.

ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄

О кодС

ΠšΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹ CSS3 Π‘Ρ‚ΠΈΠ»ΡŒ ссылки Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

Анимация ссылок

Анимация ссылки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.

О кодС

Бсылки с примСчаниями Π½Π° полях

Вторая ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠ° ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΡƒΡŽ ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ»Π½ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ стиля ссылок, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ³ΠΎ Π² https://thecorrespondent. com

ДСмонстрация GIF: Anchor Hover Effects

Anchor Hover Effects

ВСстированиС Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… эффСктов навСдСния для Ρ‚Π΅Π³ΠΎΠ² привязки Π² Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠ΅ Ρ‚Π΅Π»Π° с использованиСм псСвдоэлСмСнтов CSS.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π‘Π°ΠΉΠΌΠΎΠ½ΠΎΠΌ Π“ΡƒΠ΄Π΅Ρ€ΠΎΠΌ
29 мая 2016 г.

ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄

О кодС

ΠŸΠΎΠ΄ΡΠ²Π΅Ρ‚ΠΊΠ° ссылки Hover/Click Effect

Π€ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ CSS для добавлСния эффСкта выдСлСния ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ/Ρ‰Π΅Π»Ρ‡ΠΊΠ΅ ссылки.

О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ подчСркивания тСкста ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

БыстрыС экспСримСнты с :Π΄ΠΎ ΠΈ :послС эффСкты навСдСния Π½Π° однострочных элСмСнтах.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О кодС

Бсылка со стрСлкой

Бсылка со стрСлкой :hover эффСкт.

О кодС

Анимация ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ссылки SCSS

ГипСрссылка :hover Анимация CSS.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

ДСмонстрация GIF: Anchor Click Canvas Animation

Anchor Click Canvas Animation

Π₯олст позиционируСтся Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ свойство svg css pointer-events, поэтому Ρƒ вас Π½Π΅Ρ‚ холста, Π±Π»ΠΎΠΊΠΈΡ€ΡƒΡŽΡ‰Π΅Π³ΠΎ ваши ΠΊΠ»ΠΈΠΊΠΈ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ником Π¨Π΅Ρ„Ρ„ΠΈΠ»Π΄ΠΎΠΌ
3 мая 2016 г.

ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄

О кодС

ИдСи ссылок (Π΄ΠΎΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒΡΡ‚Π²ΠΎ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ)

ΠšΠ»Π°ΡΡΠ½Ρ‹Π΅ ΠΈΠ΄Π΅ΠΈ ссылок CSS3.

ДСмонстрационная GIF-анимация: Subtle Link Animations

Subtle Link Animations

НичСго ΡΠ΅Ρ€ΡŒΠ΅Π·Π½ΠΎΠ³ΠΎ, Π½ΠΈΡ‡Π΅Π³ΠΎ ΡΠ²Π΅Ρ€Ρ…ΡŠΠ΅ΡΡ‚Π΅ΡΡ‚Π²Π΅Π½Π½ΠΎΠ³ΠΎ. ВсСго нСсколько Ρ‚ΠΎΠ½ΠΊΠΈΡ…, Π½ΠΎ ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½Ρ‹Ρ… CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ тСкстовых ссылок. Π‘ΠΊΠΎΡ€Π΅Π΅ ссылка, Ρ‡Π΅ΠΌ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ новаторскоС.
Автор Йосип ΠŸΡΠΈΡ…ΠΈΡΡ‚Π°Π»
21 октября 2014 Π³.

ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄

ДСмонстрация GIF: Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ссылки

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ссылки

8 CSS эффСктов ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ссылки.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ПСйвСн Π›Ρƒ
4 апрСля 2014 Π³.

ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄

37 Π‘Ρ‚ΠΈΠ»ΡŒ ссылок Π›ΡƒΡ‡ΡˆΠΈΠ΅ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΈ CSS для соврСмСнных Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ²

ΠšΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ ΡΡ‚ΠΈΠ»ΡŒ ссылок ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π° CSS, ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‰ΠΈΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ стили ссылок.

Π‘ самого Π½Π°Ρ‡Π°Π»Π° истории Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ², Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΏΠΎΡ‡Ρ‚ΠΈ с сСрСдины 1990-Ρ… Π³ΠΎΠ΄ΠΎΠ², ΡΡ‚ΠΈΠ»ΡŒ ссылок остаСтся практичСски Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½Ρ‹ΠΌ. CSS-стили ссылок ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ:

  • Бсылки ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠ½ΡƒΡ‚Ρ‹
  • ΠŸΡ€ΠΈ посСщСнии ссылки ΠΎΠ½Π° становится Ρ„ΠΈΠΎΠ»Π΅Ρ‚ΠΎΠ²ΠΎΠΉ
  • НСпосСщСнныС ссылки Π±ΡƒΠ΄ΡƒΡ‚ Π²Ρ‹Π΄Π΅Π»Π΅Π½Ρ‹ синим Ρ†Π²Π΅Ρ‚ΠΎΠΌ
  • Π’Π°ΠΆΠ½Ρ‹Π΅ ссылки, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡ€ΠΈΠ·Ρ‹Π²Π° ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ, ΠΈΠΌΠ΅ΡŽΡ‚ ΠΊΠΎΠ½Ρ‚ΡƒΡ€ Π²ΠΎΠΊΡ€ΡƒΠ³ Π½ΠΈΡ…

Π›ΡŽΠ΄ΠΈ ΠΏΡ€ΠΈΠ²Ρ‹ΠΊΠ»ΠΈ ΠΊ этому Π±Π°Π·ΠΎΠ²ΠΎΠΌΡƒ ΡΡ‚ΠΈΠ»ΡŽ ссылок. Когда ΠΌΡ‹ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅ΠΌ ΡΡ‚ΠΈΠ»ΡŒ ссылки, ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ остороТны, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ ΠΎΡ‚ΠΎΠΉΡ‚ΠΈ Π΄Π°Π»Π΅ΠΊΠΎ ΠΎΡ‚ этой характСристики. НапримСр, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΈΠ³Ρ€Π°Ρ‚ΡŒ с Ρ†Π²Π΅Ρ‚Π°ΠΌΠΈ ссылок, ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ подчСркивания, Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ссылку ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡ€ΠΈΠ·Ρ‹Π²Π° ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ. Π’ этом спискС ΠΌΡ‹ собрали Π»ΡƒΡ‡ΡˆΠΈΠ΅ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΈ CSS стилСй ссылок, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ подходят соврСмСнным ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌ.

Colorlib Bootstrap Buttons & Links

Π­Ρ‚ΠΎΡ‚ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΎΡ‚ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ Colorlib содСрТит всС Ρ‚ΠΈΠΏΡ‹ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ стили ссылок CSS, ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹Π΅ для вас. Π’ этом ΠΏΠ°ΠΊΠ΅Ρ‚Π΅ прСдставлСны Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ стили, Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°.

ВсС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, это Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ²ΡˆΠΈΠΉΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² соотвСтствии с трСбованиями. Π‘ΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŒ максимально упростил Ρ„Π°ΠΉΠ» ΠΊΠΎΠ΄Π° ΠΈ структуру ΠΊΠΎΠ΄Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ΠΌΠΎΠ³ Π»Π΅Π³ΠΊΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½ΡƒΠΆΠ½Ρ‹ΠΉ ΡΡ‚ΠΈΠ»ΡŒ элСмСнта ΠΈ быстро ΠΏΠΎΠ½ΡΡ‚ΡŒ ΠΊΠΎΠ΄.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π΄Π΅ΠΌΠΎ-Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ°

ΠšΠΎΠΌΠΏΠΈΠ»ΡΡ†ΠΈΡ стилСй ссылок CSS

Π­Ρ‚Π° компиляция стилСй ссылок CSS Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ Π΄Π΅ΡΡΡ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… стилСй ссылок CSS. Π₯ΠΎΡ‚ΠΈΡ‚Π΅ Π»ΠΈ Π²Ρ‹ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ Ρ‚Π΅ΠΊΡΡ‚ΠΎΠ²ΡƒΡŽ ссылку ΠΈΠ»ΠΈ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠ½ΠΎΠΏΠΊΠ° со ссылками выглядСла ΡΡ‚ΠΈΠ»ΡŒΠ½ΠΎ, эта ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΠ° даст Π²Π°ΠΌ нСсколько свСТих ΠΈΠ΄Π΅ΠΉ. Π•Ρ‰Π΅ ΠΎΠ΄Π½ΠΈΠΌ прСимущСством компиляции CSS Π² стилС ссылок являСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ всС Π΄ΠΈΠ·Π°ΠΉΠ½Ρ‹ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ с использованиСм скриптов HTML5 ΠΈ CSS3. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ собствСнный Π΄ΠΈΠ·Π°ΠΉΠ½ Π·Π° считанныС сСкунды. Π‘ΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŒ максимально упростил Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΡ‚ΠΈΠ»ΡŒ ссылок Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΠ» для любой части Π²Π΅Π±-сайта ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Π­Ρ„Ρ„Π΅ΠΊΡ‚ ссылки мСню для WordPress

Как слСдуСт ΠΈΠ· названия, этот ΡΡ‚ΠΈΠ»ΡŒ ссылок CSS создан для мСню. Π‘ΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŒ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ упомянул, Ρ‡Ρ‚ΠΎ этот ΡΡ‚ΠΈΠ»ΡŒ ссылок ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для WordPress, ΠΈ это ΠΏΡ€Π°Π²Π΄Π°. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ вся концСпция Π΄ΠΈΠ·Π°ΠΉΠ½Π° сдСлана ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ с использованиСм скрипта CSS, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ этот ΠΊΠΎΠ΄ Π΄Π°ΠΆΠ΅ Π½Π° ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΌ Π²Π΅Π±-сайтС WordPress. Π”ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½Ρ‹ΠΉ, Π° анимация плавная, поэтому Π½Π΅Ρ‚ нСобходимости Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄, Ссли Ρƒ вас Π½Π΅Ρ‚ особых Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ.

Π’ Ρ†Π΅Π»ΠΎΠΌ, этот ΡΡ‚ΠΈΠ»ΡŒ ссылок CSS прСдставляСт собой простой ΠΈ Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° всСх Ρ‚ΠΈΠΏΠ°Ρ… Π²Π΅Π±-сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π΄Π΅ΠΌΠΎ-вСрсия для Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ

Π­Ρ„Ρ„Π΅ΠΊΡ‚ ΠΌΠΈΠ³Π°ΡŽΡ‰Π΅ΠΉ ссылки

Π­Ρ‚ΠΎΡ‚ ΡΡ‚ΠΈΠ»ΡŒ ссылок CSS Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΠΈΡ‚ Π»ΡŽΠ±ΠΈΡ‚Π΅Π»Π΅ΠΉ Ρ€Π΅Ρ‚Ρ€ΠΎ-стиля. Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ курсор Π½Π° ссылку, строка ΠΏΠ»Π°Π²Π½ΠΎ пСрСмСщаСтся ΠΊ ΠΊΠΎΠ½Ρ†Ρƒ ΠΈ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅Ρ‚ ΠΌΠΎΠ»Ρ‡Π° ΠΌΠΈΠ³Π°Ρ‚ΡŒ. Π—Π΅Π»Π΅Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ ΠΈ эффСкт мСрцания Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ аутСнтичности Ρ€Π΅Ρ‚Ρ€ΠΎ-ΡΡ‚ΠΈΠ»ΡŽ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ этот ΡΡ‚ΠΈΠ»ΡŒ ссылки Π½Π° любом Π²Π΅Π±-сайтС ΠΈΠ·-Π·Π° Π΅Π³ΠΎ простого Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π‘ΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŒ сохранил сцСнарий ΠΊΠΎΠ΄Π° достаточно простым, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ сцСнарии CSS ΠΈ HTML. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ внСшний Π²ΠΈΠ΄ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ ссылки Π² своСм Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π΄Π΅ΠΌΠΎ-Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ°

Link Hover

Π’ этом Π½Π°Π±ΠΎΡ€Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ прСдоставил Π½Π°ΠΌ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ оформлСния ссылок. Π’Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚Π΅ ΠΎΠΊΠΎΠ»ΠΎ пятнадцати Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ² стилСй ссылок, ΠΈ всС ΠΎΠ½ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Ρ‹ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ с использованиСм скрипта CSS3. БущСствуСт эффСкт навСдСния ΠΊΠ°ΠΊ для тСкстовых ссылок, Ρ‚Π°ΠΊ ΠΈ для ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS. ΠŸΡ€ΠΎΡΡ‚ΠΎ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ‚ΠΎΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Π°ΠΌ нравится, ΠΈ ΠΏΠΎΡ€Π°Π±ΠΎΡ‚Π°ΠΉΡ‚Π΅ Π½Π°Π΄ Π½ΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ идСально вписался Π² ваш Π΄ΠΈΠ·Π°ΠΉΠ½. ВсС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ эффСкты Ρ‚ΠΎΠ½ΠΊΠΈΠ΅ ΠΈ чистыС, поэтому ΠΎΠ½ΠΈ Π½Π΅ Π·Π°ΠΉΠΌΡƒΡ‚ ΠΌΠ½ΠΎΠ³ΠΎ мСста Π½Π° экранС ΠΈ Π½Π΅ Π·Π°ΠΉΠΌΡƒΡ‚ ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ для Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ использовал сцСнарий CSS3, Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚Π΅ мноТСство Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² настройки. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ эти эффСкты Π½Π° Π»ΡŽΠ±Ρ‹Π΅ соврСмСнныС Π²Π΅Π±-сайты, внСся нСсколько ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² ΠΊΠΎΠ΄.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π΄Π΅ΠΌΠΎ-Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ°

Spring Bounce Hover Effect

Π­Ρ‚ΠΎΡ‚ эффСкт ссылки Π±ΡƒΠ΄Π΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌ Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ для Π±Π»ΠΎΠ³ΠΎΠ² ΠΈ тСкстовых ссылок Π²Π½ΡƒΡ‚Ρ€ΠΈ Π°Π±Π·Π°Ρ†Π΅Π². Для тСкстовых ссылок ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ элСмСнт стиля выдСлСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄ΠΏΡ€Ρ‹Π³ΠΈΠ²Π°Π΅Ρ‚, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ курсор Π½Π° ссылку. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ вся анимация тонкая ΠΈ аккуратная, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π½Π΅ Π½Π°ΠΉΠ΄ΡƒΡ‚ Ρ€Π°Π·Π΄Ρ€Π°ΠΆΠ°ΡŽΡ‰ΠΈΠΌ эффСкт ΠΏΡ€Ρ‹Π³Π°ΡŽΡ‰Π΅Π³ΠΎ тСкста. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, вся концСпция Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π° с использованиСм новСйшСго скрипта CSS. Π‘Π»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ этот Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° Π½Π° своСм Π²Π΅Π±-сайтС ΠΈΠ»ΠΈ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Π­Ρ„Ρ„Π΅ΠΊΡ‚ подчСркивания ссылки

ΠŸΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ β€” ΠΎΠ΄ΠΈΠ½ ΠΈΠ· самых простых ΠΈ понятных Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ² ссылок. Π‘ΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŒ Π΄ΠΎΠ±Π°Π²ΠΈΠ» Π½Π΅Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΊ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΡŽ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ Π΅Ρ‰Π΅ Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ. Π₯отя эффСкт подчСркивания ссылки ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Ρ‚Π΅Π³ΠΎΠ² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ², Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ для ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… тСкстов ΠΈ тСкстов Π² Π°Π±Π·Π°Ρ†Π°Ρ…. Π”ΠΈΠ·Π°ΠΉΠ½ подчСркивания ΠΈ эффСкты сдСланы ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ с использованиСм скрипта CSS. Π‘Π»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, вСсь ΠΎΠΏΡ‹Ρ‚ Π³Π»Π°Π΄ΠΊΠΈΠΉ ΠΈ Π³Π»Π°Π΄ΠΊΠΈΠΉ. ВсС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, это Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ Π² соотвСтствии с вашими трСбованиями ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² своСм ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Π­Ρ„Ρ„Π΅ΠΊΡ‚ ссылки Π½Π° мСню

Π­Ρ„Ρ„Π΅ΠΊΡ‚ ссылки Π½Π° мСню β€” это распространСнный эффСкт ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ тСкста, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ Π½Π° ΠΌΠ½ΠΎΠ³ΠΈΡ… ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… Π²Π΅Π±-сайтах. ИспользованиС свСтлых ΠΈ Ρ‚Π΅ΠΌΠ½Ρ‹Ρ… контрастных Ρ†Π²Π΅Ρ‚ΠΎΠ² ΠΈ эффСктов ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° Π΄Π΅Π»Π°Π΅Ρ‚ этот эффСкт ссылки Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ. Π‘Ρ†Π΅Π½Π°Ρ€ΠΈΠΉ ΠΊΠΎΠ΄Π° этого ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° стиля ссылки ΠΎΡ‡Π΅Π½ΡŒ прост, ΠΊΠ°ΠΊ ΠΈ Π΅Π³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π½Π° своСм Π²Π΅Π±-сайтС. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ вСсь сцСнарий ΠΊΠΎΠ΄Π° доступСн Π²Π°ΠΌ Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ CodePen, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ Π² самом Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ ΠΊΠΎΠ΄Π°.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π΄Π΅ΠΌΠΎ-Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ°

Бсылка Π½Π° чистом CSS с эффСктом подчСркивания Ρ€Π°Π΄ΡƒΠ³ΠΈ

Π­Ρ‚ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для тСкстовых ссылок Π² области основного содСрТимого. По ΠΌΠ΅Ρ€Π΅ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ соврСмСнныС типографскиС Π΄ΠΈΠ·Π°ΠΉΠ½Ρ‹ становятся всС Π±ΠΎΠ»Π΅Π΅ ΠΈ Π±ΠΎΠ»Π΅Π΅ популярными, становится Π²Π°ΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ тСкстовыС ссылки выглядСли ΠΌΠΎΠ΄Π½ΠΎ. Π’ самом Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ красиво ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ тСкста ссылки Ρ†Π²Π΅Ρ‚Π° Ρ€Π°Π΄ΡƒΠ³ΠΈ выглядит Π½Π° Ρ‚Π΅ΠΌΠ½ΠΎΠΌ ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½ΠΎΠΌ Ρ„ΠΎΠ½Π΅. Π’Π΅ΡΡŒ ΡΡ‚ΠΈΠ»ΡŒ ссылки Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ с использованиСм ΠΊΠΎΠ΄Π° CSS3. Π‘Π»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π½Π° своСм Π²Π΅Π±-сайтС / Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π² ΠΊΡ€Π°Ρ‚Ρ‡Π°ΠΉΡˆΠΈΠ΅ сроки. Говоря ΠΎΠ± ΡƒΠ·ΠΎΡ€Π°Ρ…, взглянитС Π½Π° Π½Π°ΡˆΡƒ ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΡƒΠ·ΠΎΡ€ΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΉΡ‚ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΊΡ€ΡƒΡ‚Ρ‹Π΅ ΡƒΠ·ΠΎΡ€Ρ‹, ΠΊΠ°ΠΊ Π² этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ ссылок CSS

Π‘ΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŒ Бэм прСдоставил нСсколько эффСктов ссылок CSS, запускаСмых ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. ВсС Π΄ΠΈΠ·Π°ΠΉΠ½Ρ‹ просты ΠΈ Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½Ρ‹, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эти эффСкты ссылок Π² любой части вашСго сайта. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, всС Π΄ΠΈΠ·Π°ΠΉΠ½Ρ‹ сдСланы с использованиСм скрипта CSS3. Π‘Π»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΊΠΎΠ΄Π° Π±ΡƒΠ΄ΡƒΡ‚ Π±ΠΎΠ»Π΅Π΅ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌΠΈ. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ просто Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ²ΡˆΠΈΠΉΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ Π½Π°Π΄ ΠΊΠΎΠ΄ΠΎΠΌ. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΡΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŒ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΠ» всС эффСкты Π½Π° ΠΎΠ΄Π½ΠΎΠΉ страницС, ΠΊΠΎΠ΄ выглядит Π΄Π»ΠΈΠ½Π½Ρ‹ΠΌ. Когда Π²Ρ‹ Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ эффСкт, ΠΊΠΎΠ΄ Π±ΡƒΠ΄Π΅Ρ‚ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠΌ ΠΈ приятным.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Π’Π΄ΠΎΡ…Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ для эффСктов навСдСния Π½Π° ссылку Π² мСню

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚Π΅ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ‚ΠΈΠΏΡ‹ стилСй стилСй ссылок, запускаСмых ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π₯отя этот ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для ссылок мСню, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ эффСкты ΠΈ для Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ‚ΠΈΠΏΠΎΠ² ссылок. Π­Ρ‚ΠΎΡ‚ ΠΏΠ°ΠΊΠ΅Ρ‚ ΠΈΠΌΠ΅Π΅Ρ‚ восСмь Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ² Π½Π° ΠΌΠΎΠΌΠ΅Π½Ρ‚ написания этого поста. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡƒΠ½ΠΈΠΊΠ°Π»Π΅Π½ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Ρ€Π°Π·Π½Ρ‹Π΅ эффСкты. НСкоторыС эффСкты ΠΎΡ‡Π΅Π½ΡŒ ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹, Π° Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ просты. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΠ»ΠΈ ΠΈΡ… всС, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½. Π’Π΅ΡΡŒ сцСнарий ΠΊΠΎΠ΄Π° прСдоставляСтся Π² Π²ΠΈΠ΄Π΅ Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅ΠΌΠΎΠ³ΠΎ Ρ„Π°ΠΉΠ»Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ эффСктивно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ Π½Π° своСм Π²Π΅Π±-сайтС ΠΈΠ»ΠΈ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

CSS Link Effects By uNick

Если Π²Ρ‹ ΠΈΡ‰Π΅Ρ‚Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°ΡŽΡ‰ΠΈΠΉ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΡ‚ΠΈΠ»ΡŒ оформлСния ссылок, этот ΠΌΠΎΠΆΠ΅Ρ‚ вас Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΠΈΡ‚ΡŒ. Π‘ΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŒ Π΄Π°Π» ΠΏΠΎΡ‡Ρ‚ΠΈ Π²ΠΎΡΠ΅ΠΌΠ½Π°Π΄Ρ†Π°Ρ‚ΡŒ эффСктов навСдСния Π² стилС ссылок. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Π½ΠΈΡ… Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ отличаСтся ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΡ…, поэтому Π² этом Π½Π°Π±ΠΎΡ€Π΅ Ρƒ вас Π΅ΡΡ‚ΡŒ ΠΈΠ· Ρ‡Π΅Π³ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ. ВсС эффСкты просты ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π»Π΅Π³ΠΊΠΎ установлСны Π΄Π°ΠΆΠ΅ Π½Π° ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½Π½ΠΎΠΉ страницС. Одно ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… прСимущСств использования Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ² с простыми эффСктами Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты Π½Π° страницС.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

НавСдСниС Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ

Π₯отя этот ΡΡ‚ΠΈΠ»ΡŒ ссылок ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ создан для ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΈ для Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ‚ΠΈΠΏΠΎΠ² ссылок. ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° ссылку стрСлка Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅Ρ‚ΡΡ ΠΈ ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ всю ΠΎΠ±Π»Π°ΡΡ‚ΡŒ тСкстовой ссылки. Π’Π°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚ΠΎΡ‡Π½ΠΎ Π·Π½Π°Ρ‚ΡŒ тСксты, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΡΡ‹Π»Π°ΡŽΡ‚ΡΡ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, эффСкт Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΠ»Π°Π²Π½Ρ‹ΠΉ ΠΈ быстрый, поэтому Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π½Π΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ½Π΅Ρ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ с взаимодСйствиСм. Как ΠΈ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΡ… Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ² CSS Π² стилС ссылок, этот Ρ‚Π°ΠΊΠΆΠ΅ создан с использованиСм скрипта CSS3. Если Π²Ρ‹ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ этот ΠΊΠΎΠ΄ Π΄Π°ΠΆΠ΅ Π½Π° своСм ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΌ Π²Π΅Π±-сайтС ΠΈΠ»ΠΈ Ρ†Π΅Π»Π΅Π²ΠΎΠΉ страницС.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Π‘Ρ‚ΠΈΠ»ΡŒ ΠΌΠ°Π³Π½ΠΈΡ‚Π½ΠΎΠΉ ссылки CSS Π­Ρ„Ρ„Π΅ΠΊΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ссылки ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ ΠΈ ΠΎΡ‚Π»ΠΈΡ‡Π°Ρ‚ΡŒ Π²Π°ΠΆΠ½Ρ‹Π΅ ссылки ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΡ… ссылок, Ρ‚Π°ΠΊΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π²Π°ΠΌ пригодится. Π’ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΡΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŒ использовал CSS-эффСкт Π² стилС ΠΌΠ°Π³Π½ΠΈΡ‚Π½ΠΎΠΉ ссылки для ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ. Бсылка пСрСмСщаСтся синхронно Π² соотвСтствии с Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ΠΌ вашСго курсора. Π­Ρ„Ρ„Π΅ΠΊΡ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ сдСлан ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ эффСкт происходил Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ радиусС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ ΠΌΠ΅ΡˆΠ°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠΌ элСмСнтам Π½Π° Π²Π΅Π±-страницС. Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ этот ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ CSS Π² стилС Link, ΡΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŒ использовал структуру CSS3 ΠΈ Javascript. Π’Π΅ΡΡŒ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ для создания этого Π΄ΠΈΠ·Π°ΠΉΠ½Π°, прСдоставляСтся Π²Π°ΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΄Π΅ΠΌΠΎΠ²Π΅Ρ€ΡΠΈΡŽ

Π€Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ тСкста ссылки

Π‘ΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŒ Mattia Astorino прСдоставил Π½Π°ΠΌ простой, Π½ΠΎ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΡΡ‚ΠΈΠ»ΡŒ CSS для ссылок. ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° ссылку тСкст пСрСворачиваСтся, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π²Π°ΠΌ ΠΎΡΡ‚Π°Π²ΡˆΠ΅Π΅ΡΡ сообщСниС. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ‚Π°ΠΊΠΈΠ΅ CSS-Π΄ΠΈΠ·Π°ΠΉΠ½Ρ‹ Π² стилС ссылок, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΊΡƒΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свою Π°ΡƒΠ΄ΠΈΡ‚ΠΎΡ€ΠΈΡŽ, Π° Ρ‚Π°ΠΊΠΆΠ΅ Ρ‡Π΅Ρ‚ΠΊΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ†Π΅Π»ΡŒ ссылки. Для ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… Ρ†Π΅Π»Π΅ΠΉ ΡΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŒ использовал эффСкт ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ Ρ†Π²Π΅Ρ‚Π° Π½Π° Ρ„ΠΎΠ½Π΅. Но Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ эффСкт Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² стилС ссылки. Π‘Π°ΠΌΠΎΠ΅ приятноС Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ сдСлан ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ с использованиСм сцСнария CSS3 ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΡƒΡŽ структуру. Π‘Π»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π»Π΅Π³ΠΊΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с ΠΊΠΎΠ΄ΠΎΠΌ.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ навСдСния Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ с Ρ‚Π΅Π½ΡŒΡŽ Π±Π»ΠΎΠΊΠ°

Из самого названия ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Ρ‹Π²ΠΎΠ΄, Ρ‡Ρ‚ΠΎ ΡΡ‚ΠΈΠ»ΡŒ ссылок CSS Π² этом Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ создан для ΠΊΠ½ΠΎΠΏΠΎΠΊ. Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ сСмь Ρ‚ΠΈΠΏΠΎΠ² эффСктов Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. ВсС сСмь ΠΈΠ· Π½ΠΈΡ… Π³Π»Π°Π΄ΠΊΠΈΠ΅ ΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ соврСмСнный Π²ΠΈΠ΄. Π‘Π»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эти эффСкты Π½Π° любом ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½ΠΎΠΌ ΠΈ ΠΌΠΎΠ΄Π½ΠΎΠΌ Π²Π΅Π±-сайтС. Π‘ΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ структурировал ΠΊΠΎΠ΄, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π΄Π°Π» примСчания, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ ΠΊΠΎΠ΄. Если Π²Ρ‹ Π½ΠΎΠ²ΠΈΡ‡ΠΎΠΊ, Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹ ΠΊΠΎΠ΄Π°, ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ этому, ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Бсылка со стрСлкой

Π‘Ρ‚ΠΈΠ»ΡŒ ссылки со стрСлкой Π”ΠΈΠ·Π°ΠΉΠ½ CSS ΠΏΠΎΡ‡Ρ‚ΠΈ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π΅Π½ эффСкту Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ, упомянутому Π²Ρ‹ΡˆΠ΅. ВмСсто Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ всСй тСкстовой ссылки ΡΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŒ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π» Ρ‚ΠΎΠ»ΡŒΠΊΠΎ стрСлку Π² ссылкС. Если Π²Ρ‹ создаСтС Π΄ΠΈΠ·Π°ΠΉΠ½ ссылок для Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈΠ»ΠΈ мастСра, CSS-ΡΡ‚ΠΈΠ»ΡŒ ссылок, ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹ΠΉ этому, Π±ΡƒΠ΄Π΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌ Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ. Π­Ρ„Ρ„Π΅ΠΊΡ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ прост ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π»Π΅Π³ΠΊΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ Π² любой части Π²Π΅Π±-сайта ΠΈΠ»ΠΈ прилоТСния. ВнСся Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ измСнСния Π² ΠΊΠΎΠ΄, Π²Ρ‹ смоТСтС Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² своСм Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. Если вас ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΡƒΡŽΡ‚ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ‹ стрСлок ΠΈ анимация стрСлок, взглянитС Π½Π° Π½Π°ΡˆΡƒ ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ² стрСлок CSS.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / дСмонстрация Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ

Бтилизация ссылок с ΠΎΠ΄Π½ΠΈΠΌ элСмСнтом

Бтилизация ссылок с ΠΎΠ΄Π½ΠΈΠΌ элСмСнтом Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Π²Π°ΠΆΠ½Ρ‹Ρ… ссылок. Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ тСкстовыС ссылки для направлСния Ρ‚Ρ€Π°Ρ„ΠΈΠΊΠ° с ΠΎΠ΄Π½ΠΎΠΉ Π²Π΅Π±-страницы Π½Π° Π΄Ρ€ΡƒΠ³ΡƒΡŽ, этот Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡Π΅Ρ‚ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. Π­Ρ„Ρ„Π΅ΠΊΡ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ смСлый ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ Π½Π° ярко-красной Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ Π³Π°ΠΌΠΌΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ‚ ΠΊ Π½Π΅ΠΌΡƒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅. Π‘ΠΌΠ΅Π»Ρ‹Π΅ ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ элСмСнты всСгда Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠ΅ Π½Π° Ρ†Π΅Π»Π΅Π²ΠΎΠΉ страницС; ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ вСсь ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΈ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠ° Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, подобная крутая анимация сдСлаСт своС Π΄Π΅Π»ΠΎ. Π•Ρ‰Π΅ ΠΎΠ΄Π½ΠΈΠΌ прСимущСством этого Π΄ΠΈΠ·Π°ΠΉΠ½Π° являСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ с использованиСм скрипта CSS3. Для Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Ρ†Π΅Π»Π΅Π²ΠΎΠΉ страницы взглянитС Π½Π° Π½Π°ΡˆΡƒ Π±Π΅ΡΠΏΠ»Π°Ρ‚Π½ΡƒΡŽ ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ шаблонов Ρ†Π΅Π»Π΅Π²Ρ‹Ρ… страниц с Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ, ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ Π½Π° ΠΊΠΎΠ½Π²Π΅Ρ€ΡΠΈΡŽ.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π΄Π΅ΠΌΠΎ-Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ°

Анимация Ρ‚ΠΎΠ½ΠΊΠΎΠΉ связи

Π’ этом Π½Π°Π±ΠΎΡ€Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Ρ‚ΠΎΠ½ΠΊΠΎΠΉ связи Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚Π΅ сСмь Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… эффСктов. ВсС сСмь Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… эффСктов просты ΠΈ Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½Ρ‹, поэтому анимация ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ смотрится Π½Π° всСх Ρ‚ΠΈΠΏΠ°Ρ… Π²Π΅Π±-сайтов. Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ тСкстовыС ссылки Π² своСм Π±Π»ΠΎΠ³Π΅, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ подчСркивания, ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΉ Π² этом Π½Π°Π±ΠΎΡ€Π΅. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ всС тСкстовыС ссылки Π² этом Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½Ρ‹ ΠΈ Π²Ρ‹Π΄Π΅Π»Π΅Π½Ρ‹ ΠΆΠΈΡ€Π½Ρ‹ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ для облСгчСния взаимодСйствия. Π’ насыщСнной ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ срСдС Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΆΠΈΡ€Π½Ρ‹ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ ссылок сдСлаСт ΠΈΡ… Π±ΠΎΠ»Π΅Π΅ Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹ΠΌΠΈ. ВсС сСмь Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… эффСктов сдСланы с использованиСм скриптов CSS3 ΠΈ HTML5. Благодаря простой структурС ΠΊΠΎΠ΄Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ эффСкты Π·Π°Π³Ρ€ΡƒΠΆΠ°Π»ΠΈΡΡŒ быстрСС. Π’ этом Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π΅ΡΡ‚ΡŒ Π΄Π°ΠΆΠ΅ красочныС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ эффСкты, Π² зависимости ΠΎΡ‚ Π²Π°ΡˆΠΈΡ… Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ‚ΠΎΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Π°ΠΌ нравится. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎ творчСских Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… эффСктах, ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с нашСй ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠ΅ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½ΠΎΠΉ ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΄Π΅ΠΌΠΎΠ²Π΅Ρ€ΡΠΈΡŽ

ΠŸΡ€ΠΎΡ…Π»Π°Π΄Π½Ρ‹Π΅ ΠΈΠ΄Π΅ΠΈ ссылок CSS3

ΠŸΡ€ΠΎΡ…Π»Π°Π΄Π½Ρ‹Π΅ ΠΈΠ΄Π΅ΠΈ ссылок CSS3 Π΄Π°ΡŽΡ‚ Π²Π°ΠΌ Π²Π΄ΠΎΡ…Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ для ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ссылок. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эти ΠΈΠ΄Π΅ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊΠ°ΠΊ для тСкстовых ссылок, Ρ‚Π°ΠΊ ΠΈ для ΠΊΠ½ΠΎΠΏΠΎΠΊ. ВсС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹Π΅ Π² этом Π½Π°Π±ΠΎΡ€Π΅, происходят Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста, поэтому ΠΎΠ½ΠΈ Π½Π΅ Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‚ ΠΌΠ½ΠΎΠ³ΠΎ мСста Π½Π° экранС. Π’ этом Π½Π°Π±ΠΎΡ€Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ прСдоставил Π²Π°ΠΌ Π΄Π΅ΡΡΡ‚ΡŒ ΠΏΠ»Π°Π²Π½Ρ‹Ρ… Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… эффСктов. Π­Ρ‚ΠΎΡ‚ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ выглядящий Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ эффСкт идСально Π²ΠΏΠΈΡˆΠ΅Ρ‚ΡΡ Π² Π»ΡŽΠ±ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ Π²Π΅Π±-сайта. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это дСмонстрационный Π΄ΠΈΠ·Π°ΠΉΠ½, всС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ сдСланы ΠΊΡ€ΡƒΠΏΠ½Π΅Π΅ ΠΈ ΠΆΠΈΡ€Π½Π΅Π΅. Но Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π² зависимости ΠΎΡ‚ Π²Π°ΡˆΠΈΡ… потрСбностСй Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π‘Π΄Π΅Π»Π°Π² нСсколько ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΉ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ этот Π΄ΠΈΠ·Π°ΠΉΠ½ Π΄Π°ΠΆΠ΅ Π½Π° своСм ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΌ Π²Π΅Π±-сайтС.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΄Π΅ΠΌΠΎΠ²Π΅Ρ€ΡΠΈΡŽ

My Link Styles By Tricia Rodriguez

Π‘ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ эффСкты Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹, Π½ΠΎ ΠΈ логичСски Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ Π»ΡƒΡ‡ΡˆΠΈΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΎΠΏΡ‹Ρ‚. Если Π²Ρ‹ ΠΈΡ‰Π΅Ρ‚Π΅ Ρ‚Π°ΠΊΠΎΠΉ Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΉ ΡΡ‚ΠΈΠ»ΡŒ оформлСния ссылок для своСго Π²Π΅Π±-сайта ΠΈΠ»ΠΈ прилоТСния, Ρ‚ΠΎ это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ прСдоставил Π²Π°ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΊΠ°ΠΊ для тСкстовых ссылок, Ρ‚Π°ΠΊ ΠΈ для ссылок мСню. Для Π±ΠΎΠ»Π΅Π΅ ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ эффСкта Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ использовал HTML5, CSS3 ΠΈ Javascript. Π’Π΅ΡΡŒ сцСнарий ΠΊΠΎΠ΄Π°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ Π² этом Π΄ΠΈΠ·Π°ΠΉΠ½Π΅, прСдоставляСтся Π²Π°ΠΌ нСпосрСдствСнно Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ CodePen. ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ этот Π΄ΠΈΠ·Π°ΠΉΠ½ Π² своСм ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π² самом Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ CodePen. Если Π²Ρ‹ ΠΈΡ‰Π΅Ρ‚Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½ мСню ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ ΠΏΠΎ мСню, наша коллСкция Π΄ΠΈΠ·Π°ΠΉΠ½Π° мСню CSS даст Π²Π°ΠΌ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Π΄ΠΎΡ…Π½ΠΎΠ²Π΅Π½ΠΈΠ΅.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π΄Π΅ΠΌΠΎ

Π‘Ρ‚ΠΈΠ»ΠΈ ссылок Автор J2

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ прСдоставил Π²Π°ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ ссылок для ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈΠ·Ρ‹Π²Π° ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ. Π’ этом Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² основном плоский Π΄ΠΈΠ·Π°ΠΉΠ½, поэтому ΠΎΠ½ идСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для всСх Ρ‚ΠΈΠΏΠΎΠ² Π²Π΅Π±-сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΎ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ для всСх ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈΠ·Ρ‹Π²Π° ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ, всС эффСкты Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ происходят Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ; Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ этот Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π΅ Π»ΡƒΡ‡ΡˆΠΈΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ для тСкстовых ссылок. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ использовал CSS3 ΠΈ Javascript для создания Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… эффСктов. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ этих Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… эффСктов ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS3, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΊΠΎΠ΄, Ссли Ρ…ΠΎΡ‚ΠΈΡ‚Π΅. ΠŸΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΡƒΡŽ ссылку Π½ΠΈΠΆΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ практичСский ΠΎΠΏΡ‹Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с ΠΊΠΎΠ΄ΠΎΠΌ.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π΄Π΅ΠΌΠΎ-Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ°

Анимация ссылки Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°

Π’ этом Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ссылки Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ двухцвСтная анимация. Как понятно ΠΈΠ· названия, этот Π΄ΠΈΠ·Π°ΠΉΠ½ сдСлан для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ². Если Π²Ρ‹ создаСтС Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π° основС Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ эффСкты заставят тСкстовыС ссылки Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ‚ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… Π²Π΅Π±-элСмСнтов. Π’Ρ‹ Π΄Π°ΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ этот эффСкт для ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… тСкстов, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΈΡ…. НапримСр, Π½Π° Π²Π΅Π±-сайтС фрилансСра Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ этот Π΄ΠΈΠ·Π°ΠΉΠ½, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ имя фрилансСра. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ использовал ΠΊΠΎΡ€Π°Π»Π»ΠΎΠ²ΠΎ-Π³ΠΎΠ»ΡƒΠ±ΡƒΡŽ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΡƒΡŽ схСму Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, Π½ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свои собствСнныС Ρ†Π²Π΅Ρ‚Π°, внСся нСбольшиС измСнСния Π² ΠΊΠΎΠ΄.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Анимированный вСс ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора

Π­Ρ„Ρ„Π΅ΠΊΡ‚ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ являСтся Π»ΡƒΡ‡ΡˆΠΈΠΌ эффСктом ΠΊΠ°ΠΊ для ссылок мСню, Ρ‚Π°ΠΊ ΠΈ для ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… тСкстовых ссылок. Π’ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ тСкстовыС ссылки становятся ΠΆΠΈΡ€Π½Ρ‹ΠΌΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ курсор Π½Π° тСкст. Анимация постСпСнно ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΎΡ‚ пСрсонаТа ΠΊ пСрсонаТу, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ‚. Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ этот Π΄ΠΈΠ·Π°ΠΉΠ½ для ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… тСкстовых ссылок, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ вся анимация выдСлСния ΠΆΠΈΡ€Π½Ρ‹ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ происходила Π½Π° всСм словС. Π§Ρ‚ΠΎΠ±Ρ‹ Π΄Π°Ρ‚ΡŒ Π²Π°ΠΌ Ρ‡Π΅Ρ‚ΠΊΠΈΠΉ эффСкт Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ использовал Π² этом Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ скрипт SCSS ΠΈ HTML5. Анимация ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ нСсколько ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ² ΠΏΠΎ Π±ΠΎΠΊΠ°ΠΌ, поэтому ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°ΠΉΡ‚Π΅ это, ΠΊΠΎΠ³Π΄Π° оставляСтС ΠΏΡ€ΠΎΠ±Π΅Π».

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π΄Π΅ΠΌΠΎ

Анимации CSS для ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… элСмСнтов

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Бтас МСльников прСдоставил Π½Π°ΠΌ Π΄Π΅Π²ΡΡ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ для ссылок. Π’ этом Π½Π°Π±ΠΎΡ€Π΅ Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚Π΅ ΡΡ‚ΠΈΠ»ΡŒ ссылок ΠΊΠ°ΠΊ для ссылок, Ρ‚Π°ΠΊ ΠΈ для ΠΊΠ½ΠΎΠΏΠΎΠΊ. ВсС Π΄Π΅Π²ΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… эффСктов ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠ΅ ΠΈ приятныС, поэтому ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π½Π΅ придСтся Π΄ΠΎΠ»Π³ΠΎ ΠΆΠ΄Π°Ρ‚ΡŒ. Π­Ρ‚ΠΈ Ρ‚ΠΎΠ½ΠΊΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ эффСкты ΡƒΠΊΠ°ΠΆΡƒΡ‚ Π½Π° Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ ссылки Π½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ вСсти ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π² Π½ΡƒΠΆΠ½ΠΎΠ΅ мСсто. ВсС эти эффСкты Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Ρ‹ с использованиСм скрипта CSS3, поэтому ΠΎΠ½ΠΈ Π³Π»Π°Π΄ΠΊΠΈΠ΅ ΠΈ Π³Π»Π°Π΄ΠΊΠΈΠ΅. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅ ΠΏΠ»Π°Π²Π½ΠΎΠΉ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΈ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах. Если Π²Ρ‹ ΠΈΡ‰Π΅Ρ‚Π΅ ΡΡ‚ΠΈΠ»ΡŒ ссылок для Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π²Π΅Π±-сайта, этот Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ‚ идСально.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π΄Π΅ΠΌΠΎΠ²Π΅Ρ€ΡΠΈΡŽ

Бсылка Β«ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅Β»

Π”ΠΈΠ·Π°ΠΉΠ½ ссылки Β«ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅Β» β€” ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ для шаблонов Π²Π΅Π±-сайтов ΠΈ Π²Π΅Π±-сайтов Π² минималистичном стилС. Благодаря простым Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΌ эффСктам ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚Π°ΠΌ этот Π΄ΠΈΠ·Π°ΠΉΠ½ ссылок ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡Π΅Ρ‚ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π΄Π°ΠΆΠ΅ Π½Π° Π²Π΅Π±-страницах с большим количСством тСкста. Если Π²Ρ‹ Π²Π΅Π΄Π΅Ρ‚Π΅ Π±Π»ΠΎΠ³ с простой минимальной Ρ‚Π΅ΠΌΠΎΠΉ ΠΈΠ»ΠΈ шаблоном, ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ сдСлаСт ваш Π±Π»ΠΎΠ³ Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ для Π²Π°ΡˆΠΈΡ… Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»Π΅ΠΉ. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ этот Π΄ΠΈΠ·Π°ΠΉΠ½ создан ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ с использованиСм сцСнария CSS3, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π΄Π°ΠΆΠ΅ Π½Π° своСм ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΌ Π²Π΅Π±-сайтС. ВнСся нСсколько ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² ΠΊΠΎΠ΄, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² соотвСтствии с вашСй Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ схСмой.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

ИдСя со стрСлкой ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ссылки

ИдСя со стрСлкой ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ссылки β€” это практичСски ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌΡ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ссылок, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… тСкстовых ссылок Π² вашСм ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π΅. ВСксты со ссылкой Π²Ρ‹Π΄Π΅Π»ΡΡŽΡ‚ΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ синСго Ρ†Π²Π΅Ρ‚Π°. ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° тСкст Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° мСняСтся Π½Π° стрСлку, ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ Π½Π° ΠΏΠ΅Ρ€Π΅Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π½Π° Π΄Ρ€ΡƒΠ³ΡƒΡŽ страницу. ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ ΠΏΠ»Π°Π²Π½Ρ‹Π΅ ΠΈ чистыС, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π»Π΅Π³ΠΊΠΎ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ. Как ΠΈ упомянутый Π²Ρ‹ΡˆΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½ ссылки Β«ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅Β», этот Ρ‚Π°ΠΊΠΆΠ΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ с использованиСм скрипта CSS3. ВсС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, это ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² своСм Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½ CSS, Ρ‡Π°ΡΡ‚ΡŒ настройки Π½Π΅ Π·Π°ΠΉΠΌΠ΅Ρ‚ ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ подчСркивания тСкста ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

Π­Ρ‚ΠΎΡ‚ ΡΡ‚ΠΈΠ»ΡŒ тСкстовой ссылки ΠΏΠΎΡ‡Ρ‚ΠΈ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π΅Π½ упомянутой Π²Ρ‹ΡˆΠ΅ ΠΈΠ΄Π΅Π΅ со стрСлкой ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ссылки. Но Π² этом Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚Π΅ Π΄Ρ€ΡƒΠ³ΠΎΠΉ эффСкт Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ прСдоставил Π²Π°ΠΌ Π΄Π²Π° Ρ‚ΠΈΠΏΠ° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… эффСктов. Один прСдставляСт собой ΠΏΠΎΠ»Π½ΠΎΡ†Π²Π΅Ρ‚Π½ΡƒΡŽ Π½Π°Π»ΠΎΠΆΠ΅Π½Π½ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ β€” Π±Ρ‹ΡΡ‚Ρ€ΡƒΡŽ Π³Π»Π°Π΄ΠΊΡƒΡŽ Π»ΠΈΠ½Π΅ΠΉΠ½ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ. НС Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½, Π½ΠΎ ΠΈ структура ΠΊΠΎΠ΄Π° ΠΎΡ‡Π΅Π½ΡŒ проста. Оба Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… эффСкта Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Ρ‹ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ с использованиСм скрипта CSS3. Π‘Π΄Π΅Π»Π°Π² нСсколько ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΉ, этот Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ Π²ΠΏΠΈΡΠ°Ρ‚ΡŒ Π² ваш Π²Π΅Π±-сайт ΠΈΠ»ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π° основС CSS3, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π±Π΅Π· ΠΊΠΎΠ»Π΅Π±Π°Π½ΠΈΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π»ΡŽΠ±Ρ‹Π΅ соврСмСнныС Ρ†Π²Π΅Ρ‚Π°.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΄Π΅ΠΌΠΎΠ²Π΅Ρ€ΡΠΈΡŽ

ΠŸΠΎΠ΄ΡΠ²Π΅Ρ‚ΠΊΠ° ссылки Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния/Ρ‰Π΅Π»Ρ‡ΠΊΠ°

Π’ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠ° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΊΠ°ΠΊ Ρ‡Π°ΡΡ‚ΡŒ соврСмСнного Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Ρ‡Ρ‚ΠΎ позволяСт Ρ‡Π΅Ρ‚ΠΊΠΎ Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ своими мыслями с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌΠΈ. Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Π»ΠΎΠΌΠ°Π½ΡƒΡŽ сСтку ΠΈΠ»ΠΈ асиммСтричный Π΄ΠΈΠ·Π°ΠΉΠ½ Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ своСго Π²Π΅Π±-сайта, этот ΡΡ‚ΠΈΠ»ΡŒ ссылок Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ Π²Π°ΡˆΠ΅ΠΌΡƒ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ богатство. Π­Ρ„Ρ„Π΅ΠΊΡ‚ ΠΎΡ‡Π΅Π½ΡŒ простой, поэтому ΠΎΠ½ Π»Π΅Π³ΠΊΠΎ вписываСтся Π² Π»ΡŽΠ±ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ Π²Π΅Π±-сайта. ΠŸΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ остаСтся большС ΠΈ Ρ‚ΠΎΠ»Ρ‰Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠ³ Ρ‡Π΅Ρ‚ΠΊΠΎ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ Π²Π°ΠΆΠ½ΠΎΡΡ‚ΡŒ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ тСкста. Умная ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° сцСнария ΠΊΠΎΠ΄Π° CSS3 Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ простой, Π½ΠΎ эффСктивный ΡΡ‚ΠΈΠ»ΡŒ ссылки. ΠžΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с нашими бСсплатными соврСмСнными шаблонами Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ бСсплатно ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ новСйший шаблон Π²Π΅Π±-сайта ΠΏΡ€Π΅ΠΌΠΈΡƒΠΌ-качСства.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π΄Π΅ΠΌΠΎ-Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ°

Anchor Click Canvas Animation

Π’ этом Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚Π΅ ΠΏΡ€ΠΈΡ‡ΡƒΠ΄Π»ΠΈΠ²Ρ‹ΠΉ эффСкт Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ для тСкстовых ссылок. НаТав Π½Π° ссылку, Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚Π½ΠΎΠΉ всплСск. Π­Ρ‚ΠΎΡ‚ Π·Π°ΠΌΠ°Π½Ρ‡ΠΈΠ²Ρ‹ΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ эффСкт ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ Π΅Π³ΠΎ использованиС Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° случайных ΠΈ творчСских Π²Π΅Π±-сайтах. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это слоТный красочный Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ эффСкт, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ использовал Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ HTML5, CSS3 ΠΈ Javascript. Если Π²Ρ‹ ΡΠΎΠ±ΠΈΡ€Π°Π΅Ρ‚Π΅ΡΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ этот Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π° своСм Π²Π΅Π±-сайтС, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ нСсколько ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ идСально Ρ€Π°Π±ΠΎΡ‚Π°Π» Π½Π° вашСм Π²Π΅Π±-сайтС. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ подСлился с Π²Π°ΠΌΠΈ всСй структурой ΠΊΠΎΠ΄Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π»Π΅Π³ΠΊΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с этим Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Squiggle Link Effectz

Π‘Π°ΠΌΠΎ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ пояснСний, линия, ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°ΡŽΡ‰Π°Ρ Ρ‚Π΅ΠΊΡΡ‚ΠΎΠ²ΡƒΡŽ ссылку, изгибаСтся ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° ссылку. Волнистая анимация плавная ΠΈ чистая, поэтому ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ‡Π΅Ρ‚ΠΊΠΎ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ ΡΠΈΠ½ΡƒΡΠΎΠΈΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ Π²ΠΎΠ»Π½Ρ‹ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° тСкст. Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ этот эффСкт Π½Π° ΠΌΡƒΠ·Ρ‹ΠΊΠ°Π»ΡŒΠ½ΠΎΠΌ Π²Π΅Π±-сайтС, ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ идСально ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ основной Ρ‚Π΅ΠΌΠ΅ шаблона. Как ΠΈ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΡ… стилСй ссылок Π² этом спискС, этот Ρ‚Π°ΠΊΠΆΠ΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ с использованиСм скрипта CSS3. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ это Π½Π° свой ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ Π²Π΅Π±-сайт. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ эффСкт ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ прост ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»Π΅Π½, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π΄Π°ΠΆΠ΅ для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Π½Π° своих Π²Π΅Π±-страницах.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Π­Ρ„Ρ„Π΅ΠΊΡ‚ Π»ΠΈΠ½ΠΈΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° мСню

Π₯отя этот Π΄ΠΈΠ·Π°ΠΉΠ½ создан для мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΈ для Π΄Ρ€ΡƒΠ³ΠΈΡ… тСкстовых ссылок. ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ эффСкт Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ этого Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π΄Π΅Π»Π°Π΅Ρ‚ Π΅Π³ΠΎ ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΌ для всСх Ρ‚ΠΈΠΏΠΎΠ² Π²Π΅Π±-сайтов. Π’ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ CSS стилС ссылки ΠΌΡ‹ Π²ΠΈΠ΄Π΅Π»ΠΈ эффСкт волнистой Π»ΠΈΠ½ΠΈΠΈ. Π’ этом Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ использовал ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΡŽ синусоиды. Π’Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ показания Π΄Π°Ρ‚Ρ‡ΠΈΠΊΠ° сСрдСчного Ρ€ΠΈΡ‚ΠΌΠ°, линия двиТСтся Π² Π²ΠΎΠ»Π½ΠΎΠΎΠ±Ρ€Π°Π·Π½ΠΎΠΌ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅. Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ этого стиля ссылок Π±ΡƒΠ΄Π΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ для Π²Π΅Π±-сайтов ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΉ здравоохранСния. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ этот Π΄ΠΈΠ·Π°ΠΉΠ½ создан ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ с использованиСм сцСнария CSS3, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΡƒ Π±ΡƒΠ΄Π΅Ρ‚ Π»Π΅Π³ΠΊΠΎ ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΏΠΎ ссылкС ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΏΠΎ ссылкС ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ β€” это Π΄ΠΈΠ·Π°ΠΉΠ½ ссылок Π² стилС Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. Если Π²Ρ‹ добавляСтС ΠΊΡƒΡ‡Ρƒ ссылок Π² ΠΎΠ΄Π½ΠΎΠΌ мСстС, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² Ρ„ΡƒΡ‚Π΅Ρ€Π΅, Ρ‚Π°ΠΊΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ. Π‘ΠΈΠ½ΠΈΠΉ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹ΠΉ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ ΠΏΠ»Π°Π²Π½ΠΎ пСрСмСщаСтся Π² соотвСтствии с Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ΠΌ курсора. Π‘ΠΈΠ½ΠΈΠΉ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ ΠΏΠ»Π°Π²Π½ΠΎ Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅Ρ‚ΡΡ Π² зависимости ΠΎΡ‚ Π΄Π»ΠΈΠ½Ρ‹ тСкстов. Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ этот ΡΡ‚ΠΈΠ»ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ ссылки, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ использовал HTML, CSS3 ΠΈ Javascript. Π Π°Π±ΠΎΡ‚Π° с этим Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°Π½ΡΡ‚ΡŒ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ большС Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Ρ‚Ρ€ΠΈ сцСнария ΠΈ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… для вашСго Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Но этот Π΄ΠΈΠ·Π°ΠΉΠ½ стоит Π·Π°Ρ‚Ρ€Π°Ρ‡Π΅Π½Π½Ρ‹Ρ… усилий.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Другая концСпция мСню

Π­Ρ‚ΠΎ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ссылок, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ для мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, Ρ‚Π°ΠΊ ΠΈ для тСкстовых ссылок. Π₯отя эффСкт прост, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ использовал для этого HTML, CSS ΠΈ Javascript. Но Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ Π² соотвСтствии со структурой ΠΊΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°Π΅Ρ‚Π΅. ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ссылку строка Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½ΠΎ Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅Ρ‚ΡΡ Π΄ΠΎ ΠΊΠΎΠ½Ρ†Π° тСкста. Π­Ρ„Ρ„Π΅ΠΊΡ‚ простой ΠΈ элСгантный, поэтому Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π² любом мСстС ΠΈ Π² любой части Π²Π΅Π±-сайта. ВсС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, это ΠΏΠΎΡ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π°Π΄ ΠΊΠΎΠ΄ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ соотвСтствовал вашим потрСбностям, ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π½Π° своСм Π²Π΅Π±-сайтС ΠΈΠ»ΠΈ Π² своСм ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния слСва Π½Π°ΠΏΡ€Π°Π²ΠΎ Π½Π° Ρ†Π²Π΅Ρ‚Π΅ тСкста

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния слСва Π½Π°ΠΏΡ€Π°Π²ΠΎ Π½Π° Ρ†Π²Π΅Ρ‚Π΅ тСкста ΠΏΠΎΡ‡Ρ‚ΠΈ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π΅Π½ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ мСню, упомянутому Π²Ρ‹ΡˆΠ΅. Π’ этом Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ анимированная линия ΠΈΠΌΠ΅Π΅Ρ‚ красочный эффСкт. Помимо Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π² этом Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚Π΅ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ слово. Π­Ρ‚ΠΎΡ‚ Π΄ΠΈΠ·Π°ΠΉΠ½ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ с использованиСм скрипта CSS3, поэтому Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² Π½Π΅ΠΌ свою ΡΠΎΠ±ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ ΡΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΡƒΡŽ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΡƒΡŽ схСму ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ эффСкты. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ подСлился сцСнариСм ΠΊΠΎΠ΄Π° нСпосрСдствСнно с Π²Π°ΠΌΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π»Π΅Π³ΠΊΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с этим Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² своСм Π΄ΠΈΠ·Π°ΠΉΠ½Π΅.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΄Π΅ΠΌΠΎΠ²Π΅Ρ€ΡΠΈΡŽ

ΠšΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ эффСкты ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ мСню

ΠšΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ эффСкты ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ мСню β€” это творчСская Ρ„ΠΎΡ€ΠΌΠ° ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ мСню, упомянутой Π²Ρ‹ΡˆΠ΅. Π‘Π΄Π΅Π»Π°Π² нСсколько настроСк, этот Π΄ΠΈΠ·Π°ΠΉΠ½ стиля ссылок ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ для ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… тСкстовых ссылок. Вся анимация появляСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ курсор Π½Π° ссылку. Для обозначСния ссылки ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈ эффСкт Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ эффСктивнСС ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π­Ρ‚ΠΎΡ‚ Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ‚Π°ΠΊΠΆΠ΅ сдСлан ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ с использованиСм скрипта CSS3, поэтому Ρƒ вас Π΅ΡΡ‚ΡŒ мноТСство Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² настройки.