Стандартный стиль для ссылок не часто подходит под дизайны сайтов. И появляется необходимость поменять стиль так, чтобы в текущий дизайн и при этом красиво выделялась. Противоречивая задача, не правда ли? =)
В этой статье я хочу поделиться различными способами и технологиями, которые позволят сделать ссылки красивыми и выделяющимися.
В первую очередь стоит коснуться псевдоклассов. Вы наверняка замечали, что ссылки изменяются, когда на них наводят курсор или в момент нажатия на нее. Именно псевдоклассы помогают создать такой эффект. Если вы не знаете, что такое псевдоклассы, то советую вам пройти Курс по CSS.
Вот те псевдоклассы, которые нам понадобятся:
:hover - указывает, как должна выглядеть ссылка при наведении на нее курсора
:active - указывает, как должна выглядеть ссылка в момент нажатия на нее
ну и стоит учесть, что просто селектор ссылки без псевдоклассов будет определять, как выглядит ссылка в обычном состоянии.
Например, вот так выглядит общий стиль для всех ссылок на этом сайте:
После того, как мы разобрались с псевдоквасами, которые позволяют сделать ссылки более живыми и заметными, я хочу уделить внимание свойствам CSS, которые помогают отформатировать текст.
Например, можно использовать способ задания цвета, при помощи rgba. Составляющая alpha в этом случае может помочь подобрать нужный оттенок цвета на странице. Пример:
На самом деле это мало чем отличается от обычного задания цвета, но, возможно, поможет вам сделать ссылку более привлекательной.
Довольно интересное свойство transition, которое принимает в качестве значения время(кол-во секунд). Это свойство определяет скорость изменения ссылки. Это означает, что при изменении ссылки от обычного стиля к псевдоклассу :hover будет происходить плавно и более красиво. Пример использования этого свойства вы можете видеть на это сайте: ссылка.
Очень любят добавлять или убирать подчеркивание ссылки при наведении. Стандартно то подчеркивание есть у обычной ссылки и исчезает при наведении на нее(:hover). За это действие отвечает свойство text-decoration и его значение underline. Также можно при помощи значения overline помещать черту над ссылкой или заставлять их мигать - blink.
Проблема в том, что такое подчеркивание не позволяет настроить тип линии и его цвет совпадает с цветом текста. Не всегда такое удобно. Если вы хотите изменить тип линии на пунктирный или еще какой-то, и задать свой цвет подчеркиванию, то используйте свойство border-bottom. При этом стоит следить за значением и наличием свойства display, которое может сделать тэг <a> дивным и тогда подчеркивание выйдет из-под контроля, за границы самого текста и выглядеть это будет не так, как вам бы хотелось.
Последнее свойство, на которое я бы хотел обратить внимание - text-shadow, это довольно новое свойство и многие о нем даже не слышали. Оно позволяет задать тень тексту. Но, немного схитрив эту тень можно превратить во внешнее свечение. В качестве значений text-shadow принимает такой шаблон:
Вот пример стиля для ссылки с тенью:
вот как это выглядит: ссылка тенью.
При этом можно задавать в одном свойства через запятую, и за счет этого сделать эффект свечения, пример:
вот как это выглядит: ссылка с голубым свечением.
Добавить комментарий
Авторизоваться с помощью: