оригинальная версия версия для слабовидящих контрастная версия выключить изображения включить изображения RSS FEED K2 NEWS
Воскресенье, 28 Июль 2019 00:00

CSS – делаем элемент меню

Когда только только «зарождалось» сайтостроение, и стилями в Интернете (в Рунете по крайней мере точно) почти не пользовались, большинство вопросов решалось путём «вставки» изображений.

Сегодняшним днём многие дизайны имея макеты в Photoshop’е на выходе могут вообще не иметь графики в своём составе. Всё благодаря таблице стилей CSS. Да, можно сослаться на то, что некоторые браузеры не поддерживают те или иные настройки стилей, однако большинство популярных настроек они всё-таки поддерживат и настройки границы элемента попадает в это большинство.

Для начала создадим элемент:

<style> .elem1{background: #e3ffa8;width:100px;}</style>
<div class="elem1">Элемент</div>

Элемент

Теперь добавим «общую» границу (border):

<style> .elem2{background: #e3ffa8;width:100px; border: 1px #56bd5e solid; }</style> <div class="elem2">Элемент</div>

Элемент

После добавляем нижнюю границу (border-bottom):

<style> .elem3{background: #e3ffa8;width:100px; border: 1px #56bd5e solid; border-bottom: 5px #599f61 solid;}</style> <div class="elem3">Элемент</div>

Элемент

На этой ноте я подчеркну, что если border-bottom написать вперёд border, то настройки последнего будут перекрывать настройки первого. Добавим «объёма» с помощью padding’а.

<style> .elem4{background: #e3ffa8;width:100px; border: 1px #56bd5e solid; border-bottom: 5px #599f61 solid; padding-top: 5px; padding-bottom: 8px; padding-left: 13px; padding-right: 13px;}</style> <div class="elem4">Элемент</div>

Элемент

Давайте добавим border-radius.

<style> .elem5{background: #e3ffa8;width:100px; border: 1px #56bd5e solid; border-bottom: 5px #599f61 solid; padding-top: 5px; padding-bottom: 8px; padding-left: 13px; padding-right: 13px; border-radius:15px;}</style> <div class="elem">Элемент</div>

Элемент

Я думаю, не будет лишним, добавить тени.

<style> .elem6{background: #e3ffa8;width:100px; border: 1px #56bd5e solid; border-bottom: 5px #599f61 solid; padding-top: 5px; padding-bottom: 8px; padding-left: 13px; padding-right: 13px; border-radius:15px;}
.shadow{box-shadow: inset 0 0 6px #388306; -webkit-box-shadow: inset 0 0 6px #388306; -moz-box-shadow: inset 0 0 6px #388306;} <div class="elem6 shadow">Элемент</div>

Элемент

И в завершении, укажем настройки текста. С шрифтами у меня всегда было не очень, поэтому выберите на свой вкус свойство font-family, а кроме того text-align, color и font-weight.

<style> .elem8{background: #e3ffa8;width:100px; border: 1px #56bd5e solid; border-bottom: 5px #599f61 solid; padding-top: 5px; padding-bottom: 8px; padding-left: 13px; padding-right: 13px; border-radius:15px;font-family:Georgia;text-align:center;font-weight:bold;color:#296f31;}
.shadow{box-shadow: inset 0 0 6px #388306; -webkit-box-shadow: inset 0 0 6px #388306; -moz-box-shadow: inset 0 0 6px #388306;} <div class="elem shadow">Элемент</div>

Элемент

Спонсоры: