Як відредагувати точкове виділення в браузері

Відео: Уроки Adobe Illustrator / # 3 | Виділення, Редагування

Напевно ви помічали при виборі елемента на сайті, навколо нього з`являється таке пунктирне виділення. Як на зображенні вище. Іноді навіть такі дрібниці хочуть бути змінені веб-дизайнерами, а головне це можливо. Також дане виділення з`являється коли ми подорожуємо по сайту за допомогою кнопки Tab на клавіатурі. Перевірте! У цьому уроці ми виправимо цю виділення на своє власне.

Відео: Як просто виділяти текст в браузері Safari на iPhone і iPad

Фінальний результат можна побачити тут:

Подивитися прімерСкачать

HTML частина

В HTML сторінці у нас буде лише меню, на прикладі якого ми розглянемо це виділення. Структура меню наступна:

1234567891011

lt;h4gt; Менюlt;/h4gt;="Nav-outline"gt;lt;ulgt;lt;ligt; lt;a href="#"gt; Головнаlt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; FAQlt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; Категоріїlt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; Дизайнlt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; Портфоліоlt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; Сервісиlt;/agt; lt;/ligt;lt;/ulgt;lt;/navgt;

CSS частина

Щоб задати довільний стиль при виділенні елемента необхідно використовувати властивість outline в CSS. Робиться це в такий спосіб:

1234

.nav-outline a: focus {outline: 0-background-color: # e9841d-}

Звичайно можна задати лише перша властивість, але для повноти ефекту, так і візуально краще сприйматиметься, якщо ми виділимо весь обраний елемент.

висновок

Здавалося б дрібниця, але завжди прагнеш щоб на сайті все було ідеально :). Більше звичайно це зміна помітять користувачі, які використовують клавіатуру для переміщення по сайту.

Відео: Виділення волосся і інших складних об`єктів (Hard selections in Photoshop)

Успіхів!

джерело: hongkiat.com