Ознакомьтесь с нашей политикой обработки персональных данных
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 в 16:04 

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


А что мешает взять text-decoration:none?

2015-04-19 в 16:05 

Но...
Но...
Но через rgba подчеркивание не убирается! Firefox 37.0.1.

URL
2015-04-19 в 16:08 

А что мешает взять text-decoration:none?
Не-а, дайри это просто не воспринимают.
Проба - Гиперссылка
Код - <a href="http://www.diary.ru/"><span style="text-decoration: none; color: red">Гиперссылка</span></a>

Если ставить text-decoration: none; отдельным спаном, тоже ничего не выходит.

URL
2015-04-19 в 16:09 

Но через rgba подчеркивание не убирается! Firefox 37.0.1.
Анончик, а у тебя ещё где-то не убирается? Можешь в другом браузере посмотреть? И что у тебя вместо прозрачного подчёркивания выскакивает?

URL
2015-04-19 в 16:11 

Для ссылки достаточно задать text-decoration: none, сработает.

Дайри




А вот с морями проблематично. Как я понимаю, мы не делаем подчеркивание у море прозрачным, мы накладываем подчеркивание нужного цвета сверху. Вот например, море с прозрачностью 1.

Это кат


А вот 0.5. Сквозь полупрозрачный underline просвечивает подчеркивание. Если задать 0, то подчеркивание будет видно полностью.
Это кат

URL
2015-04-19 в 16:12 

Анончик, а у тебя ещё где-то не убирается? Можешь в другом браузере посмотреть?
Сейчас открою хром, интересно же! У меня ссылка видна.

URL
2015-04-19 в 16:13 

Вот например, море с прозрачностью 1.Если задать 0, то подчеркивание будет видно полностью.
Вообще никакой разницы не видно, честно говоря. Подчёркивания просто нет. Хром 42.0.2311.90

URL
2015-04-19 в 16:18 

Итицкая сила! В хроме и правда нет подчеркивания.

URL
2015-04-19 в 16:24 

Пост выше обновили, на подчёркивание теперь два варианта.

URL
2015-04-19 в 16:25 

всегда убирал подчёркивание как предложил Гость в 16:09
и таки да, при помощи text-decoration:underline; color: rgba(0,0,0,0) в опере подчёркивания я не вижу, но в огнелисе оно есть
так что незачем городить огород, когда есть то, что гарантированно работает везде. а именно - писать text-decoration: none в стиль самой ссылки
с морями никогда не заморачивалася - просто картинку-кнопку лепил и всё

URL
2015-04-19 в 16:30 

с морями я обычно поступаю так:
море
да, с подчёркиванием, но! если море никак не выделено будет, как читателю понять, что это море? а так туда пихали в шапках спойлеры и т.п.

URL
2015-04-19 в 16:31 

простите, поторопился, код забыл :facepalm:
[MORE=<span style="text-decoration: underline; color: #ff0000">море</span>]текст под морем[/MORE]

URL
2015-04-19 в 16:32 

[MORE=<span style="text-decoration: underline; color: #ff0000">море</span>]текст под морем[/MORE]
А нахрена тогда лишнее "text-decoration: underline;", если это просто перекраска?

URL
2015-04-19 в 16:34 

А нахрена тогда лишнее "text-decoration: underline;", если это просто перекраска?
Если не будешь ставить text-decoration: underline; - перекрасится только текст, без подчёркивания.

URL
2015-04-19 в 16:36 

если это просто перекраска? чтоб подчёркивание нужного цвета было, а не дефолтное, из настроек оформления соо или днева

URL
2015-04-19 в 16:38 

А ежели попробуем так...
море
<a href="#more" class="LinkMore" onclick="var e=event; if (swapMore(&quot;c687639352m1&quot;, e.ctrlKey || e.altKey)) document.location = this.href; return false;" id="linkmorec687639352m1"><span style="text-decoration: underline; color: #ff0000">море</span></a>

URL
2015-04-19 в 16:38 

1. Для того, чтобы изменить цвет подчеркивания, тоже можно задать прямо тегу а параметры. Работает везде.
Гиперссылка

2. Для моря способ с rgba не работает в FF, к сожалению(( Хром, ЯБ, Сафари, Опера (короче, -webkit-браузеры) воспринимают и убирают подчеркивание.
Для FF остается способ задавать цвет подчеркивания в цвет фона:

Это more без ссылки


Мое мнение: если фон задан просто цветом, лучше делать подчеркивание в цвет, чтобы гарантированно везде было без него. Если фон - картинка, тогда через rgba, но с пониманием, что в FF будет видно.


Админчик, поправь здесь, плз) Все-таки закрывающих спанов должно быть два.

MORE=<span style="text-decoration:underline; color: rgba(0,0,0,0)"><span style="color: red">Тут на самом деле more</span>]А внутри что-то есть[/MORE]

URL
2015-04-19 в 16:39 

Код гиперссылки с разными цветами:


URL
2015-04-19 в 16:44 

Админчик, поправь здесь, плз) Все-таки закрывающих спанов должно быть два.
Сделано, анон.)

URL
2015-04-19 в 16:51 

оффтоп

URL
2015-04-19 в 16:55 

Гость, ты возьмёшься?

URL
2015-04-19 в 16:57 

Поправил у себя моря в деаноне, ура! :vict:

URL
2015-04-19 в 16:57 

Гость, ты возьмёшься?
Возьмусь.

URL
2015-04-19 в 16:59 

Поправил у себя моря в деаноне, ура!
Поздравляю :laugh:

URL
2015-04-19 в 17:00 

Гость, так а чего ты сам мануалы не пишешь? Админ мешает, что ли?
Кто может - тот делает. Оперативно реагирует на запросы общественности, между прочим.

URL
2015-04-19 в 17:01 

Узбагойтесь. Мы тут все любители, ищем методом проб и ошибок правильные варианты.
Я вот никак не могла понять, почему у меня с rgba не получается, кто ж знал, что Мозилла мне такую подлянку выдаст :laugh:

URL
2015-04-19 в 17:47 

Можно еще добавить в пост всякое украшательство ссылок.
Нужно брать дефолтное подчеркивание и добавить нижнюю границу.

Гиперссылка | Гиперссылка | Гиперссылка | Гиперссылка | Гиперссылка

Инсет и аутсет видны, если задать границу со всех сторон, одним подчеркиванием не понятно будет)
Гиперссылка | Гиперссылка



Полупрозрачность подчеркиванию тоже можно задать (на обычном фоне не видно, конечно, на картинке будет видно).

Гиперссылка | Гиперссылка

a>

URL
2015-04-19 в 17:48 

*Нужно убрать

URL
2015-04-19 в 17:55 

MORE без подчёркивания:

Тут на самом деле more



А вообще советую изучить позиционирование элементов и стандартные стили diary, отпадёт множество вопросов, откроются новые горизонты :)

URL
2015-04-19 в 18:04 

MORE без подчёркивания:

Шампанского анону! :wine:

А вообще советую изучить позиционирование элементов и стандартные стили diary, отпадёт множество вопросов, откроются новые горизонты
Анон, да их умрешь все изучить...

Каждый пост как матрешка, столько селекторов вложено...

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
   

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

главная