Css активная ссылка: варианты оформления — учебник CSS

:hover

:active

:target

:first-letter

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

Начинаем

Первое, что следует сделать – назначить основные стили своему списку ссылок. Я ограничился простым синим текстом на светло-сером фоне. Также я удалил пока текстовые украшения, но позже мы добавим их обратно. Чтобы ссылки смотрелись похожими именно на кнопки, я изменил display на block и добавил сплошную рамку.

a { color: #1c8dc7; padding: 10px; text-decoration: none; font-size: 20px; background-color: #c2c2c2; border: 1px solid #ffffff; display: block; }

Взаимодействие

a:hover { color: #7cc9f0; background-color: #cccccc; }

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Теперь, когда ясно, что мы находимся над элементом, можно применить класс :active для изменения цвета color, фонового цвета background-color и текстового украшения text-decoration при действительном щелчке или нажатии на элемент

a:active { color: #7cc9f0; background-color: #555555; text-decoration: underline; }

В представленном мною примере HTML у каждой гиперссылки есть атрибут ID. Он дает возможность применить класс :target для добавления дополнительных стилей к выбранному в данный момент элементу.

a:target { color: #f59805; background-color: #555555; text-decoration: underline; }

Помимо того, для получения дополнительного эффекта мы добавим редко используемый класс :first-letter. Он работает только с блочными элементами (которые мы применили ранее), и дает нам возможность назначить стили первой букве элемента. Здесь я применяю черный цвет, но вы можете взять другой шрифт.

a:first-letter { color: #333333; } a:active:first-letter, a:target:first-letter { color: #eeeeee; }

Как видите, еще я скомбинировал классы :first-letter и :active для применения другого цвета при активном состоянии элемента или наведении на него мыши.

Выложимся на все сто

Чтобы все эти изменения действительно совпали, нужно сделать их плавне и аккуратнее. Для этого мы применим свойство перехода transition, чтобы в течении какого-то времени цветовые изменения постепенно проявлялись. Я определил их длительность в 0,5 сек., потому что переход не должен быть слишком быстрым, но и если он будет слишком медленным, то тоже не станет смотреться настолько эффектно.

a { color: #1c8dc7; padding: 10px; text-decoration: none; font-size: 20px; background-color: #c2c2c2; border: 1px solid #ffffff; display: block; line-height: 105%; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }

Автор: Jonny Schnittger

Источник: //www.developerdrive.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

CSS | Свяжите активный CSS — узнайте за 30 секунд от Microsoft MVP, награжден

Переключить боковую панель

• Учебники
• ТЕХНОЛОГИИ
  • ВСЕ ТЕХНОЛОГИИ
  • СТАТЬИ
• ПОЛНАЯ ФОРМА ^НОВАЯ
• ВЕБИНАРЫ
• ОШИБКИ И ИСПРАВЛЕНИЯ
• ИНТЕРВЬЮ
• ФОРУМЫ
• ВИДЕО
  • КОЛИЧЕСТВЕННАЯ СПОСОБНОСТЬ
  • НЕ ГЛАВНЫЙ
  • ГРУППОВОЕ ОБСУЖДЕНИЕ
  • СТРАНА ВОПРОСОВ ДЛЯ ИНТЕРВЬЮ
  • ИНЖИНИРИНГ
• КАРЬЕРА
  • Программное обеспечение Интервью
  • HR Интервью
  • GD Интервью
  • Примеры резюме
  • Инженерное дело
  • Искусство / наука
  • Мастера
  • Медицинский
  • Способность
  • Рассуждения
  • Вопросы компании
  • Загородная виза
  • Дресс-код для визы
  • Вступительный экзамен
  • Колледжи
  • Оповещения о приеме
  • ScholarShip
  • Образовательные ссуды
  • Письма
  • Изучайте языки

Использование тени текста CSS3 для состояний активных ссылок

Недавно Крис Спунер из Line25 написал руководство, описывающее, как создать эффект высокой печати с помощью свойства text-shadow CSS3.

В другой статье Крис Койер из CSS-Tricks показал, как он с помощью простого позиционирования CSS делает все текстовые ссылки на своем веб-сайте более похожими на кнопки.

Во время недавнего проекта, над которым я работал, пока возился со свойством CSS3 text-shadow , я по счастливой случайности объединил два разных эффекта из этих двух статей, чтобы создать эффект высокой печати на активных состояниях ссылок.

Просмотрите демонстрационную страницу, чтобы увидеть четыре примера ссылок, в активном состоянии которых используется свойство CSS3 text-shadow (наряду с позиционированием) для создания ссылок, которые, как говорит Койер, «напоминают кнопки».

CSS

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

a: link, a: посещено {
  цвет: #aaa;
  текстовое оформление: нет;
  размер шрифта: 36 пикселей;
  тень текста: 1px 1px 1px # 555;
  семейство шрифтов: Arial, Helvetica, sans-serif;
  font-weight: жирный;
}

a: hover {
  цвет: #bbb;
}

a: active {
  тень текста: -1px -1px 1px # 555;
  положение: относительное;
  верх: 1px;
  слева: 1px;
}
 

Пример кода выше взят из второй большой ссылки на демонстрационной странице. После установки цвета ссылки и размера шрифта свойство text-shadow смещается на 1 пиксель по осям x и y, затем тень изменяется на смещение -1 пиксель в «активном» состоянии или когда ссылка находится в процессе нажатия.

Третий пример в демонстрации имеет похожий код, но не использует метод позиционирования, в результате чего эффект нажатия появляется с использованием только тени. Между ними есть небольшая разница, и я уверен, что некоторые эксперименты приведут вас к тому эффекту, который вам больше всего нравится, если вы хотите создать такой эффект «прижимания» ссылок.

Здесь нет ничего необычайно нового, просто другой поворот уже существующих методов CSS, который может дать нам еще несколько вариантов при попытке создать красивые и интуитивно понятные кнопки.

: active — CSS: каскадные таблицы стилей

Псевдокласс CSS : active представляет элемент (например, кнопку), который активируется пользователем. При использовании мыши «активация» обычно начинается, когда пользователь нажимает основную кнопку мыши.

 
a: active {
  красный цвет;
}  

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

Стили, определенные псевдоклассом : активный , будут переопределены любым последующим псевдоклассом, связанным со ссылками (: ссылка , : наведите курсор на или : посещенный ), который имеет как минимум такую ​​же специфичность.Чтобы правильно оформить ссылки, поместите правило : active после всех других правил, связанных со ссылками, как определено в LVHA-порядке : : ссылка — : посещенная — : hover — : активная .

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

Активные ссылки

HTML

  
 В этом абзаце есть ссылка:
   Эта ссылка становится красной, когда вы нажимаете на нее.
  Когда вы нажимаете на него или ссылку, абзац приобретает серый фон.
  

CSS

  a: ссылка {цвет: синий; }
а: посетил {цвет: фиолетовый; }
a: hover {фон: желтый; }
а: активный {цвет: красный; }

p: active {background: #eee; }  

Результат

Активные элементы формы

HTML

  <форма>
   Моя кнопка: 
  

Попробуйте нажать на меня или на мой ярлык!

CSS

  форма: активная {
  красный цвет;
}

кнопка формы {
  фон: белый;
}  

Результат

Таблицы BCD загружаются только в браузере

.