Красивое подчеркивание. Способы подчеркивания в CSS
Представляю коротенькие фрагменты кода(сниппет) CSS, для реализации выделения анкоров ссылок с плавным подчёркиванием при наведении.
Зачем нужно выделять из общего месива текста, это и ежу понятно. Существует великое многообразие способов и видов оформления ссылок, всё ограничивается лишь фантазией мастера.
С помощью псевдо-класса:hover и магии , можно навесить на стандартные, скучно-оформленные синюшные ссылки, практически любой эффект.
Решения, о которых пойдёт речь сегодня, не представляют из себя, что-нибудь особо потрясающее или необычное. Всё по-простому, без особых наворотов, только лишь выделение ссылки цветом и лёгкая анимация линии подчёркивания.
Детально распишу только код CSS, так как на стороне Html менять и добавлять что-либо нет необходимости.
CSS
Во-первых, с помощью свойства line-height: установим межстрочный интервал в зависимости от базовой линии шрифта, у вас значение может быть другим. Сделаем ссылку блочно-строчной, встроенной в структуру текста, задав ей свойство display со значением inline-block . Избавимся от стандартного подчёркивания прописав text-decoration:none; и зальём ссылку нужным нам цветом.
a { line- height: 1 ; display: inline- block; color: #ffeb3b; text- decoration: none; cursor: pointer; } |
a { line-height: 1; display: inline-block; color:#ffeb3b; text-decoration:none; cursor: pointer; }
Затем используем псевдоэлемент:after , чтобы у нас появилась возможность добавить дополнительный элемент, в нашем случае это линия, и определим простенький эффект перехода в свойстве transition: . Ширину линии изначально выставим с нулевым значением width: 0%; , высоту определим в 2px
. Цвет линии может быть любым, в примере не стал особо фантазировать и выставил в соответствии цвета текста ссылки.
a: after { display: block; content: "" ; height: 2px; width: 0 %; background- color: #ffeb3b; transition: width . 3s ease- in- out; } |
a:after { display: block; content: ""; height: 2px; width: 0%; background-color: #ffeb3b; transition: width .3s ease-in-out; }
Остаётся дело за малым, добавить нашей ссылке немного движухи. Для этого используем парочку псевдоклассов:hover и:focus . Первый будет определяет стиль ссылки при наведении, второй сработает когда на ссылке «плотно» установится курсор. Здесь мы изменим значение ширины, определим его в 100%.
Теперь, при наведении или фокусе на ссылке, стилизованная линия подчеркивания явит себя взору пользователя, плавно с еле-заметной задержкой, время которой, мы предусмотрительно определили ранее в свойстве transition: .
a: hover: after, a: focus: after { width: 100 %; } |
a:hover:after, a:focus:after { width: 100%; }
В итоге мы получаем следующую картину:
Весь код в сборе будет выглядеть так:
a { display : inline-block ; color : #ffeb3b ; line-height : 1 ; text-decoration : none ; cursor : pointer ; } a: after { background-color : #ffeb3b ; display : block ; content : "" ; height : 2px ; width : 0% ; -webkit-transition: width .3s ease-in-out; -moz--transition : width .3s ease-in-out; transition : width .3s ease-in-out; } a: hover : after , a: focus : after { width : 100% ; } |
a { display: inline-block; color:#ffeb3b; line-height: 1; text-decoration:none; cursor: pointer; } a:after { background-color: #ffeb3b; display: block; content: ""; height: 2px; width: 0%; -webkit-transition: width .3s ease-in-out; -moz--transition: width .3s ease-in-out; transition: width .3s ease-in-out; } a:hover:after, a:focus:after { width: 100%; }
Конечно, это всего лишь один из самых простеньких и скромных вариантов оформления ссылок. Больше экспериментируйте, добавляйте красок, используйте анимацию, сдвигайте вправо или влево, делайте ссылки перевёртыши например, и т.д и т.п, главное не переусердствовать, всё должно быть с чувством, толком, и расстановкой.
Обновление и дополнения от 22.10.2017
В комментариях проскакивали вопросы о том, как сделать подчёркивание с центра текста ссылки, с плавным растягиванием в стороны. Если есть спрос, значит будет и предложение))).
Всё довольно просто, необходимо лишь добавить пару-тройку новых свойств, то есть, для основного элемента a определить позиционирование относительным position:relative; , а для псевдоэлемента a:after абсолютным position:absolute; с расстоянием от левого края родительского элемента left:50%; , а так же с помощью свойства transform определить сдвиг элемента по горизонтали на указанное значение transform:translateX(-50%) .
На выходе мы получаем вот такой результат:
В сборе весь код css, для плавного подчёркивания ссылки с центра, должен выглядеть примерно так:
a { display : inline-block ; color : #ffeb3b ; line-height : 1 ; text-decoration : none ; cursor : pointer ; position : relative ; } a: after { background-color : #ffeb3b ; display : block ; content : "" ; height : 2px ; width : 0% ; left : 50% ; position : absolute ; -webkit-transition: width .3s ease-in-out; -moz--transition : width .3s ease-in-out; transition : width .3s ease-in-out; -webkit-transform: translateX(-50% ) ; -moz-transform: translateX(-50% ) ; transform : translateX(-50% ) ; } a: hover : after , a: focus : after { width : 100% ; } |
a { display: inline-block; color:#ffeb3b; line-height: 1; text-decoration:none; cursor: pointer; position:relative; } a:after { background-color: #ffeb3b; display: block; content: ""; height: 2px; width: 0%; left:50%; position:absolute; -webkit-transition: width .3s ease-in-out; -moz--transition: width .3s ease-in-out; transition: width .3s ease-in-out; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); transform:translateX(-50%); } a:hover:after, a:focus:after { width: 100%; }
На сегодняшний день, учитывая то, что все современные браузеры всё более уверенно поддерживают свойства из обоймы CSS3, практически нет никаких ограничений для оригинального оформления ссылок, по-большому счёту, всё зависит от ваших фантазий, да и готовых решений в интернетах предостаточно, при желании отыщется, как говорится — на любой вкус и цвет.
С Уважением, Андрей
Подчеркивание для блочных элементов вроде тега
можно проводить двояко. Например, линию под текстом устанавливать на всю ширину блока, независимо от объема текста. А также подчеркивание делать только у текста. Далее рассмотрим оба варианта.
Линия под текстом на всю ширину блока
Чтобы создать линию под текстом, следует добавить к элементу стилевое свойство border-bottom , его значением выступает одновременно толщина линии, ее стиль и цвет (пример 1).
Пример 1. Линия на всю ширину
HTML5 CSS 2.1 IE Cr Op Sa Fx
Пример текста
Расстояние от линии до текста можно регулировать свойством padding-bottom , добавляя его к селектору H1 . Результат данного примера показан на рис. 1.
Подчеркивание текста
Чтобы подчеркнуть только текст, необходимо воспользоваться свойством text-decoration со значением underline , опять же, добавляя его к селектору H1 (пример 2).
Пример 2. Линия на ширину текста
HTML5 CSS 2.1 IE Cr Op Sa Fx
Пример текста
Черный заголовок привлекает к себе внимание, несмотря на то, что он черный, а не белый.
Результат данного примера показан на рис. 2.
В случае использования свойства text-decoration линия жестко привязана к тексту, поэтому определить ее положение и стиль не удастся.
На этой странице вы найдете примеры по изменению HTML-ссылок при помощи CSS, который позволяет их делать ссылками-блоками, ссылками-иконками, без подчеркивания, с закругленными углами, изменять между ними расстояние и многое другое. В дальнейшем на основе этих примеров можно создавать различные варианты навигационных меню для сайта.
Прежде чем вы начнете изучение примеров, хочу сделать небольшое пояснение. Во всех примерах, для большей наглядности, будет использован псевдокласс CSS , который применяется для изменения стилей ссылок при наведении на них курсора мыши. Надо сказать, что подобная практика является обычным явлением и в той или иной степени применяется практически на всех сайтах интернета.
В этом примере мы уберем подчеркивание у ссылок, а потом будем добавлять или убирать при наведении курсора мыши.
Пример HTML и CSS: как убрать и добавить подчеркивание у ссылок
Описание примера
- По умолчанию все популярные браузеры добавляют к ссылкам подчеркивание, которое регулируется свойством CSS . То есть по умолчанию это свойство, для ссылок, имеет значение underline . Используя эти знания, мы и изменяем подчеркивание у ссылок в их разных состояниях.
Изначально подчеркивание у ссылок - это сплошная тонкая линия, почти вплотную прижатая к тексту. И в большинстве случаев такого варианта вполне достаточно. Однако иногда дизайн требует, чтобы ссылки подчеркивались не сплошной, а, например, пунктирной линией, или чтобы расстояние от подчеркивания до ссылок было больше стандартного, или само подчеркивание было более жирным. А иногда нужно сделать вообще какое-нибудь экзотическое подчеркивание, например волнистой или разноцветной линией. Все эти варианты и будут рассмотрены в данном примере.
Пример HTML и CSS: пунктирное подчеркивание ссылок
Описание примера
- Сначала убираем стандартное подчеркивание у всех ссылок, так как будем использовать нестандартные методы. Затем первой ссылке добавляем нижнюю границу рамки с помощь свойства CSS , причем делаем ее пунктирной (dashed). Это и будет наше подчеркивание. Чтобы при наведении на ссылку подчеркивание убиралось - используем псевдокласс и делаем фон рамки таким же, как и фон страницы, то есть просто скрываем ее. По идее, здесь было бы лучше вообще сделать фон рамки прозрачным (transparent), но IE6 неправильно понимает это значение.
- Со второй ссылкой проделываем то же, что и с первой, но только рисуем сплошную линию. Чтобы увеличить расстояние от текста до подчеркивания - задаем ссылке небольшой нижний отступ с помощью свойства CSS .
- У нашей третьей ссылки подчеркивание разноцветное, поэтому его мы будем добавлять с помощью фонового изображения. Используем для этого небольшую картинку , которую подключаем через CSS . Позиционируем фон в нижнюю часть ссылки (0 100%) и разрешаем ему дублироваться только по горизонтали (repeat-x). Подчеркивание готово, но прилегает слишком близко к тексту, чтобы это исправить - добавляем ссылке маленький отступ снизу. Теперь все.
- В старичках IE6 и IE7 могут возникнуть проблемы с отображением подчеркивания у первой и второй ссылки. Для исправления добавляем свойство zoom :1, которое включает т.н. layout. Это свойство невалидно и его понимают только эти браузеры, поэтому лучше подключить его условными комментариями .
Очень часто для создания меню требуется сделать не просто текстовые ссылки, а ссылки-блоки, у которых активной областью будет как сам текст, так и определенная зона вокруг него.
Описание примера
- Для создания ссылок-блоков используем свойство CSS :block, которое превращает их в блочные элементы, создающие до и после себя перевод строки. Если переводы строк не нужны - можно заменить значение на inline-block .
- Так как ссылки теперь у нас являются блоками, то если необходимо, мы можем изменять у них ширину (CSS ) или высоту (CSS ).
- В этом примере высоту ссылок мы вообще не указываем, а просто задаем им внутренние отступы (CSS ), которые и расширяют блоки.
Описание примера
- Все очень просто - с помощью свойства CSS добавляем ссылкам под курсором нужную рамку. Однако, внимание, точно такую же рамку мы добавляем и обычным ссылкам, вот только цвет ее делаем такой же, как фон страницы. То есть попросту скрываем рамку до поры до времени. Это делается для того, чтобы при наведении курсора мыши, ссылки не начали «прыгать» из-за отрисовки рамки.
Вместо того чтобы делать цвет рамок под фон страницы, ему можно было бы присвоить значение transparent и сделать прозрачным, но, как я уже говорил, IE6 неправильно его обрабатывает.
Пример HTML и CSS: создание трехмерных ссылок
Описание примера
- С помощью свойства CSS добавляем ссылкам рамки, а с помощью - задаем им цвет. При этом для левой и верхней границы указываем светлый оттенок цвета, а для нижней и правой - темный. Именно благодаря такому распределению цветов мы и получаем ссылки, которые похожи на трехмерные кнопки.
- Чтобы при наведении курсора мыши казалось, что кнопки нажимаются - инвертируем у ссылок с псевдоклассом цвета рамок. Для дополнительного эффекта нажатия, задаем относительное позиционирование (CSS :relative) и делаем однопиксельное смещение вверх (CSS :-1px).
- Ну и чтобы все совсем было красиво - задаем ссылкам под курсором цвет текста и фона немного темнее, чем у обычных. Готово.
В этом примере мы сделаем ссылки с иконками, которые будут содержать не только изображения этих иконок, но и текст под ними. Однако в дальнейшем вы легко сможете их изменить и оставить, например, только иконки.
Перед началом работ подготовим несколько изображений иконок, причем в двух комплектах - для обычных ссылок и ссылок под курсором мыши. Второй комплект должен внешне отличаться от первого, у нас оно выражается в цветовой палитре.
классах справочника CSS.
IE6 придется немного «пролечить»:
- IE6 не понимает свойство для установки минимальной ширины, но зато он интерпретирует свойство CSS именно, как минимальную ширину. Поэтому применяем для него простой хак , который исправит данную проблему.
В данном примере мы закруглим углы у ссылок с помощь одного из способов закругления углов , описанном в соседнем подразделе. Вариант с применением CSS 3 рассматривать не будем, так как там все очень просто, а лучше сделаем закругления с использованием изображений.
Для этого сначала вырежем несколько заготовок картинок в двух комплектах - для обычных ссылок и ссылок под курсором. У нас оно будут отличаться наличием/отсутствием тени у изображений.
абсолютное позиционирование */ top: 0; /* нулевое смещение сверху */ } .links:before { content: url("images/left_bok.png"); /* изображение левого бока */ left: 0; /* нулевое смещение слева */ } .links:hover:before { content: url("images/left_bok_hover.png"); /* изображение левого бока под курсором мыши */ } .links:after { content: url("images/right_bok.png"); /* изображение правого бока */ right: 0; /* нулевое смещение справа */ } .links:hover:after { content: url("images/right_bok_hover.png"); /* изображение правого бока под курсором мыши */ }