Бешеный конкурс!
8:00
Автор: Рубрика: CSS-рецепты Комментариев нет

Зачем нужен в css прозрачный border и как его сделать?

Приветствую всех. Сегодня я вам расскажу, для чего при верстке сайтов иногда делают в css прозрачный border, то есть невидимую рамку элемента.

Зачем нужна прозрачная рамка?

При верстке очередного из макетов стояла такая задача: при наведении на пункт меню у него должно появиться подчеркивание. Причем не у текста, а у всего блока со ссылкой. Для тех кто разбирается в верстке, все достаточно просто и понятно в данном случае. Нужно просто при наведении на ссылку добавлять ей свойство border-bottom. Но если просто сделать так, то будет не очеь красиво и здорово. Сейчас я вам покажу пример. Вот такой html код нужен для создания простого меню на 4 пункта:

<nav>
<ul class = "menu">
<li><a href = "#">Пункт 1</a></li>
<li><a href = "#">Пункт 2</a></li>
<li><a href = "#">Пункт 3</a></li>
<li><a href = "#">Пункт 4</a></li>
</ul>
</nav>

В общем, ему были прописаны некоторые стили, но все их я приводить не буду. Интересует нас именно эффект подчеркивания при наведении на пункт. Реализуется он так:

.menu li a:hover{
border-bottom: 5px solid brown;
}

Все достаточно просто, но получается вот что (наведите на любой пункт):

Согласитесь, не очень красиво. К тому же, ниже будет располагаться какой-то контент и он будет сдвигаться на 5 пикселей вниз каждый раз, когда происходит наведении. Как вы знаете, рамка увеличивает размеры элемента. А если не знаете, то читайте эту статью.

Собственно, чтобы решить проблему нужно просто изначально ссылке задать такую же рамку толщиной 5 пикселей, но прозрачного цвета. В таком случае при наведении будет изменяться лишь цвет рамки.

.menu li a{
border-bottom: 5px solid transparent;
}

Я привел только одно свойство, остальные стили нас не интересуют, вы можете их сами прописывать. Теперь при наведении никакого дергания происходить не будет, можете удостовериться в этом:

Отлично, надеюсь я ответил на вопрос, для чего нужна в css прозрачная рамка. Возможно, у нее есть еще какое-то применение. Вернее, не возможно, а точно. С ее помощью можно создавать треугольники. Как, смотрите здесь. Так что вот такие есть варианты применения прозрачной рамки. smile

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

Еще материалы по CSS

Бесплатный курс по CSS

Премиум уроки по CSS

Полный практический курс по HTML5&CSS3

Комментариев нет