Css ссылки
Как известно залог успеха любого сайта в интернете заключается в его уникальности. Каждому, кто создает свой сайт, хочется, чтоб его сайт был не похожим на другие сайты, чтоб в оформлении была изюминка. К сожалению, с помощью одного лишь css, без использования хаков очень сложно создать оригинальное оформление для сайта. Но тем не менее при желании и знании
уловок css это возможно. В этой статье я покажу как можно сделать разноцветные
css ссылки, то есть задать цвет, шрифт и прочие текстовые свойства для любого символа или части ссылки.
Вся сложность создания разноцветных ссылок заключается в том, что не все браузеры поддерживают свойство
:hover для других элементов кроме
<a>, что налаживает определенные ограничения. Но и этот недостаток можно обойти не нарушая правил описанных w3c, а точней почти не нарушая. Нужный нам эффект достигается использованием вложенности элементов внутри тега
<a>, но обо всем по порядку.
Рассмотрим по шагам создание красивых
css ссылкок:
С чего начать?
Весь путь создания красивых цветных
css ссылкок начинается с создания обычной ссылки средствами html и css.
a.example {
color:#00f;
text-decoration:none;
}
a.example:hover {
color:#00f;
text-decoration:underline;
}
<a href="#" class="example">css ссылка</a>
В результате мы получим самую обычную ссылку с обычным оформлением при наведении курсора:
Вложеные css элементы
Для создания уникального красивого оформления ссылок мы можем использовать вложенные элементы внутри тега
<a>.
<a href="#" class="example">css <span>ссылка</span></a>
Простое добавление инлайн элементов в тег
<a> фактически нам ничего не дает и оформление ссылки остается прежним. Чтоб, что то изменилось нам нужно описать стили для вложенного элемента
<span> a.example span{
color:#f00;
text-decoration:none;
}
a.example:hover span{
color:#00f;
text-decoration:underline;
}
После этого наша
css ссылка обретает уникальный стиль.
Продолжаем влаживать элементы...
Дальше давайте вложим еще один элемент
<span> в ранее созданный
<span>.
<a href="#" class="example">css <span><span>сс</span>ылка</span></a>
И добавим в стилях описание для него:
a.example span span{
color:#0c0;
text-decoration:none;
}
a.example:hover span span{
color:#f00;
text-decoration:underline;
}
Теперь разнообразие цветов в нашей ссылке становится еще больше:
Последнее вложение css элементов
<a href="#" class="example">css <span><span><span>с</span>с</span>ылка</span></a>
И соответсвенно добавляем стили для этого уровня вложенности:
a.example span span span{
color:#f90;
text-decoration:none;
}
a.example:hover span span span{
color:#0c0;
text-decoration:underline;
}
И теперь мы имеем разноцветную ссылку вида:
Вложение элементов друг в друга можно продолжать до бесконечности, но я думаю, что и этого должно хватить для наглядности создания оригинального оформления
css ссылки.
Выводы
Рассмотренный выше пример не претендует на то, чтоб назвать созданную ссылку очень красивой - это все лишь пример иллюстрирующий возможности вложения элементов в тег ссылки. К примеру можно добится очень симпатичного эффекта, если изменять размер шрифта для частей ссылки.
Плюсы данного метода:
- Позволяет создать оригинальный стиль для ссылок.
- Позволяет визуально разбить текст ссылки на логические части.
К минусам можно отнести:
- Бесполезность для SEO оптимизации сайта.
- Сложность использования для автоматической генерации ссылок.
- Большая нагруженность ссылки.
Добавить комментарий
