Перейти к содержимому


Пользователь месяца
WGN WGN 1-й за Июль
Очков активности: 850 2 темы, 75 сообщений, 7 баллов репутации
Сайт: worldgamenews.com
ТОП самых активных за этот месяц
  • Фотография TimurR
    #1

    TimurR
    Очков активности: 273 3 темы, 17 сообщений, 7 баллов репутации

  • Фотография WGN
    #2

    WGN (worldgamenews.com)
    Очков активности: 64.5 Вне конкурса за определение пользователя месяца

  • Фотография ShowPrint
    #3

    ShowPrint (ShowPrint.ru)
    Очков активности: 52.5 0 тем, 7 сообщений, 5 баллов репутации

  • Фотография BlackLion
    #4

    BlackLion
    Очков активности: 36 0 тем, 24 сообщения, 1 балл репутации

  • Фотография Vmir
    #5

    Vmir
    Очков активности: 25.5 Вне конкурса за определение пользователя месяца

  • Фотография Napoleon-007
    #6

    Napoleon-007
    Очков активности: 21 0 тем, 14 сообщений, 1 балл репутации

  • Фотография Ixman
    #7

    Ixman (o5cat.ru)
    Очков активности: 21 0 тем, 7 сообщений, 2 балла репутации

  • Фотография alekswebart
    #8

    alekswebart
    Очков активности: 19.5 1 тема, 10 сообщений, 1 балл репутации

  • Фотография r0mZet
    #9

    r0mZet (rz-style.ru)
    Очков активности: 18 2 темы, 6 сообщений, 1 балл репутации

  • Фотография profi
    #10

    profi (1informer.com)
    Очков активности: 12 0 тем, 8 сообщений, 1 балл репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 17.08.2018
Топ 5 участников по репутации


Красивое подчёркивание ссылок

#1 myrka

myrka
  • Неактивные
  • 22 сообщений
  • Репутация: 10
0

Отправлено 15 April 2012 - 22:41

Здравствуйте
Подскажите, как реализовывается красивое подчёркивание ссылок?
Возможно ли каким то образом украшать text-decoration:underline; ?
Искала возможные варианты, и не нашла нигде((
Пробовала сдлеать с помощью border-bottom, но результат тоже далек от того что надо.
Вообщем, вырезала картинкой, и вставила. Но выходит так, что правый border вылазит за меры допустимого. И не ровное подчёркивание. Хотелось бы что бы подчёркивались буквы независимо от их количества .
Может быть кто то с этим сталкивался? Буду весьма благодрана.



Вот кусочки необходимого кода и картинка:

Изображение

div.icemegamenu ul#icemegamenu li {
  display:block;
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
  border-right:2px solid #5574af;
  float:left;
  }
div#subMenusContainer li.active a.iceMenuTitle,
div#subMenusContainer li.active span.separator,
div.icemegamenu ul#icemegamenu li:hover a.iceMenuTitle,
div.icemegamenu ul#icemegamenu li:hover span.separator {
display:block;
height:20px;
padding:5px 25px;
color:#ddf4ff;
font-size:22px;
text-shadow:2px 2px 2px #02aefa;
-webkit-transition:all .3s linear;
-moz-transition:all .3s linear;
-o-transition:all .3s linear;
transition:all .3s linear;
text-decoration:none;
background-image:url(../../../../../templates/bizglobal/images/pod.png);
background-repeat:no-repeat;
height: 50px;
}
div.icemegamenu ul#icemegamenu li.active a.iceMenuTitle,
div.icemegamenu ul#icemegamenu li.active span.separator {
color:#ddf4ff!important;
text-shadow:1px 1px 1px #000!important;
text-decoration:none;
text-decoration:none;
background-image:url(../../../../../templates/bizglobal/images/pod.png);
float:left;
background-repeat:no-repeat;
height: 50px;
}

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Ccылки
  2. Помогите убрать у ссылок подчеркивание и смену цвета
  3. Html верстка на конкретном примере
  4. Верстаем горизонтальное меню по мотивам MasterWEBS
  5. Как убрать подчеркивание и поменять цвет гиперссылки для CSS ?

#2 yury

yury
  • Пользователь
  • 642 сообщений
  • Репутация: 188

Отправлено 15 April 2012 - 23:41

На сколько я понял из картинки, ваше "красивое подчеркивание" заключается в толстой линии с ореолом снизу надписи.
Делается такое, примерно, так: блоку с ссылкой дается поле снизу для размещения подчеркивания, а само подчеркивание организуется в виде фонового рисунка:
background: url(line.png) 0 bottom repeat-x;
где line.png — это картинка шириной в 1 пиксель и высотой в толщину линии плюс ореол вверх и вниз. Если нужен ореол линии не только вверх-вниз, но и влево-вправо, то блок усложняется за счет внешней обертки, в которой будут жить эти боковые ореолы.

Что касается вашего упоминания про правый бордер, то на картинке "Должно быть так" ничего похожего на его необходимость не видно, но если речь идет о разделителе кнопок в виде вертикальной линии, то он верстается точно так же: с помощью блока-обертки и фона, соответствующим образом спозиционированного.
  • 0



Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru