Андрей Головачук
49 сообщений
#11 лет назад
Господа верстальщики, как можно и можно ли сверстать активный пункт меню средствами CSS?
Приложения:
  • 21 КБ
Владислав Р.
175 сообщений
#11 лет назад
Как-то не видно активного пункта меню на картинке. Или его надо самому придумать?
Андрей Головачук
49 сообщений
#11 лет назад
Vlad03, откройте картинку.
Владислав Р.
175 сообщений
#11 лет назад
Аааа, а по одному месту дизайнеру дать нельзя?
Елена Б.
6863 сообщения
#11 лет назад
[quote=jedybeavis]можно ли сверстать активный пункт меню средствами CSS[/quote]
Можно. 
Андрей Головачук
49 сообщений
#11 лет назад
Vlad03, это скриншот. Вот и вопрос можно ли сверстать 
Если кто видел пример можно сылочку, я дальше попробую разобраться
Елена Б.
6863 сообщения
#11 лет назад
Вот это поможет? [code]h3:before {
[list=1]
  • content: '';
  • border-left: 8px solid #f7dc6f;
  • display: block;
  • height: 0;
  • float: left;
  • width: 0;
  • margin: 0 0 0 -16px;
  • border-top: 13px solid transparent;
  • border-bottom: 13px solid transparent;[/list]}[/code]
    на уголке градиента нет. У прямоугольника делать стандартными средствами. 
    на уголке градиента нет. У прямоугольника делать стандартными средствами. 
  • Приложения:
    • 653 Б
    • 0 Б
    Владислав Р.
    175 сообщений
    #11 лет назад
    floppox, а с градиентом как?
    Андрей Головачук
    49 сообщений
    #11 лет назад
    да, уголок получилось. Но градиент и тень у уголка не получается.
    Михайло Копча
    330 сообщений
    #11 лет назад
    уголок конечно хорошо, но пункты меню разной длинны, а уголок будет одним видом. 
    jedybeavis, зачем так изгаляться, не проще картинку внизу вставить?
    Виталий Бохин
    953 сообщения
    #11 лет назад
    • 15 КБ
    Виталий Бохин
    953 сообщения
    #11 лет назад
    а можете и вовсе картинку вырезать целиком и растягивать фоном в li теге, она много не будет весить и отпадет необходимость в дополнительном блоке p
    Андрей Головачук
    49 сообщений
    #11 лет назад
    lufter, тогда прийдется для каждого элемента вырезать картинку свою. Так как уголок у каждого пункта разный.
    Всем огромное спасибо за помощь и консультацию. Я думал что может можно сделать средствами CSS.
    Михайло Копча
    330 сообщений
    #11 лет назад
    [offtopic]lufter, тогда прийдется для каждого элемента вырезать картинку свою. Так как уголок у каждого пункта разный.[/offtopic]
    не придется. просто картинку тянуть на всю ширину. вам же  написал два варианта. с width:100% и и background-size
    Виталий Бохин
    953 сообщения
    #11 лет назад
    jedybeavis, не нужно под каждый пункт, пункты разные по длине не извнстной заведомо, делаете одну картинку и растягиваете свойством backgroun-size. или 100% или background-size:cover; это свойство в css3 но сейчас кажется уже нет таких браузеров что не поддерживают это свойстово, а есди есть то это меньше 1% таких консерваторов кто до сих пор пользуются всякими там эксплорерами 6-8 можно послать
    Виталий Я.
    659 сообщений
    #11 лет назад
    jedybeavis, Быстро же вы сдались, картинку, картинку...
    Вот вам примет того, что CSS - всесилен:
    Приложения:
    • 15 КБ
    Михайло Копча
    330 сообщений
    #11 лет назад
    Xazzzi, а где же тень?
    Виталий Бохин
    953 сообщения
    #11 лет назад
    Xazzzi, уголок ребрами пошол. каринка весить будет 1-2 килобайта, это мелочь, css весит (на хорошем сайте) 10-30 Кб. картинка верное решение
    FLAKE_MDM, box-shadow не прописан, не факт что он на углах сработает
    Виталий Я.
    659 сообщений
    #11 лет назад
    FLAKE_MDM, во-первых, я ж не исполнитель проекта. Был разговор о стрелке с градиентом, я показал, что можно.
    А во-вторых - гляньте ссылку, добавил тень и трюк чтобы стрелка была чуть более гладкой.
    lufter, весь css блока с тенями - 730 знаков(читай - байт). С учётом того, что этим же цсс позиционируется и задается размер-фон основному блоку.
    В любьом возможном случае, это меньше чем любая картинка, и быстрее, т.к. стили обычно идут одним файлом, тоесть не нужно делат доп запрос на сервер за картинкой.
    Кстати, вспомнил ещё один хороший метод сделать блок произвольной формы, заключается в использовании inline-svg, много примеров есть на css-tricks.com
    Виталий Бохин
    953 сообщения
    #11 лет назад
    Xazzzi, 2 кб + не порешают картину в весе, а картинка одинаково отобразится любыми бразерами. цсс3 не так плотно вошол в интернет. эти извращения никчему, есть гарантированный набор свойств цсс. вот в цсс более сотни свойств, чтоб заверстать качественную кроусбраузерную страничку я использую до 30 свойств
    ито малость, набор, с которым мона любую страницу с любым дизом заверстать
    width
    height
    margin
    padding
    font-size
    font-family
    font-weight
    display
    float
    bacground
    border
    border-radius
    box-shadow
    line-height
    position
    color
    z-index
    text-align
    top
    left
    right
    bottom