16:02 

Меняем подчёркивание у гиперссылок

Diary HTML
Идеально для всех глаз не бывает, но бывает удобоваримо (с)
Пост для страждущих имени проб и ошибок. Периодически надо сделать так, чтобы подчёркивание гиперссылки было другого цвета, нежели сам текст гиперссылки. Или же чтобы подчёркивания вообще не было. Этим и занимаемся. Пост обновляется по мере нахождения новых путей.

Гиперссылка - вот так выглядит в обычном виде.
Код: <a href="http://www.diary.ru/">гиперссылка</a>

Гиперссылка - вот так выглядит в усложнённом виде, когда мы меняем ей цвет подчёркивания и самого текста.
Код: <a href="http://www.diary.ru/"><span style="text-decoration:underline; color: blue"><span style="color: red">Гиперссылка</span></span></a>

В чём сам принцип: текст гиперссылки мы оборачиваем в теги span дважды. Внешний span задаёт цвет подчёркиванию. Внутренний - самому тексту.
Важный момент: все span'ы должны быть внутри тега <a>. Иначе у вас ничего не получится.

Способ чуть короче, но по смыслу то же самое, вставка одного style внутрь <a>


Теперь к случаю вообще без подчёркивания.

Вариант 1, сложный и длинный, работает не везде, использует rgba (в Хроме и Опере работает, в Firefox - нет):
Гиперссылка - вот так она выглядит без подчёркивания.
Код: <a href="http://www.diary.ru/"><span style="text-decoration:underline; color: rgba(0,0,0,0)"><span style="color: red">Гиперссылка</span></span></a>

Как видно, единственное изменение - это смена цвета в первом span. В действительности мы не убираем подчёркивание, а просто делаем его полностью прозрачным. Ставим любой цвет с прозрачностью 0 (за прозрачность отвечает последнее значение rgba). В данном случае у нас чёрный с полной прозрачностью.
При использовании такого способа подчёркивание не будет видно на любом фоне, это не подделка под какой-то один цвет.

Вариант 2, проще и легче (понятия не имеем, где показывается, а где нет):
Гиперссылка - снова без подчёркивания.
Код: <a style="text-decoration: none; color: red;" href="www.diary.ru">Гиперссылка</a>

Суть в том, что style ставим внутрь самого тега <a>, не добавляя ничего лишнего. Подчёркивание в таком случае отключается, а не становится прозрачным. Color можно ставить, можно не ставить.



Дополнительное украшательство ссылок, если стандартная полосочка не нравится или не вписывается в дизайн.
читать дальше




Касательно изменения ссылки в MORE, в которую просто так стиль не допишешь.

Вариант 1 c rgba (в Хроме и Опере работает, в Firefox - нет):
Абсолютно тот же (первый) принцип работает с тегом MORE, который тоже по сути является гиперссылкой.
Тут на самом деле more - пример.
Код - [MORE=<span style="text-decoration:underline; color: rgba(0,0,0,0)"><span style="color: red">Тут на самом деле more<span></span>]А внутри что-то есть[/MORE]

Вариант 2 c использованием классов:
Тут на самом деле more
Код - [MORE=<span class="postInner" style="color: red">Тут на самом деле more</span>]А внутри что-то есть[/MORE]
Внимание! Использовать этот способ можно только в том случае, если MORE идёт на отдельной строке. В противном случае случится вот это:
Тут на самом деле more - текст после MORE начинает заползать.
Способ обойти заползание - обернуть тег span в дополнительный div, указав ему ширину.


Пробы и разбор полётов в комментариях.

@темы: мануалы

URL
Комментарии
2015-04-19 в 18:10 

Я понял, что это, но не понял, как и почему это работает. Что такого там прописано в postInner, что так получается?

URL
2015-04-19 в 18:24 

Diary HTML
Идеально для всех глаз не бывает, но бывает удобоваримо (с)
Можно еще добавить в пост всякое украшательство ссылок.
Добавлено, анон, ты котик.

Тут на самом деле more с postInner
А вот это добавил, и всплыл очень интересный косяк...

URL
2015-04-19 в 18:29 

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

URL
2015-04-19 в 18:42 

Проба в диве.

Обыкновенный море
Обыкновенный море

Код

Море с классом.
Тут на самом деле more

Код

Море с классом и отступом.
Тут на самом деле more

Код


Анончик с postInner, ты его когда применял, дополнительные условия какие-нибудь прописывал?

URL
2015-04-19 в 18:49 

как пост-то разросся с момента его создания

URL
2016-01-21 в 01:19 

Аноны, которые подчёркивание убирают с помощью rgba, у вас во всех браузерах альфа-канал работает? У меня в каком-то не сработал, но я не помню, где. Нет, я не про IE

URL
   

Верстка Фандомной Битвы

главная