создать кнопку на CSS в виде патрона

Тема в разделе "Верстка", создана пользователем redzhet, 29 сен 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. redzhet

    redzhet Создатель

    Регистр.:
    28 июл 2011
    Сообщения:
    14
    Симпатии:
    0
    всем привет можно такое замутить чтобы вкладки в профиле на моем сайте были в виде патрона а не обычным прямоугольником Screenshot_3.png
    Если возможно конечно)))
     
  2. funnywheel

    funnywheel WordPress developer

    Регистр.:
    6 авг 2010
    Сообщения:
    217
    Симпатии:
    147
    нарисуй патроны, установи их бэкграундом
     
  3. NikroVir

    NikroVir Извращённый отшельник

    Регистр.:
    27 апр 2008
    Сообщения:
    325
    Симпатии:
    108
    возможно всё. вот старый проверенный способ: Перейти по ссылке (урок из нескольких частей). можно делать всё точно так же, только использовать порезанное изображение патрона. преимущества перед обычным бэкграундом очевидны: ссылки будут динамическими по ширине.
     
  4. VLDM

    VLDM Постоялец

    Регистр.:
    15 июн 2006
    Сообщения:
    50
    Симпатии:
    6
    так будет только рисунок
    <input type='image' src="1.gif">

    так будет рисунок на кнопке
    <style>
    .aaa { background-image: url(1.gif); }
    </style>
    <input type="button" class="aaa" value="кнопкаа" />
     
  5. Siverus

    Siverus Создатель

    Регистр.:
    27 сен 2014
    Сообщения:
    10
    Симпатии:
    4
    Легко делается при табличной верстке - самая левая ячейка это капсул, сами кнопки - тело патрона, а правая ячейка - изображение горлышка и пули. Если надо - накидаю рабочий вариант
     
  6. NikroVir

    NikroVir Извращённый отшельник

    Регистр.:
    27 апр 2008
    Сообщения:
    325
    Симпатии:
    108
    вы описали именно то, что сбросил я ТСу, но этот вариант не табличный
     
    Siverus нравится это.
  7. Siverus

    Siverus Создатель

    Регистр.:
    27 сен 2014
    Сообщения:
    10
    Симпатии:
    4
    можно и слоями, но я люблю табличную верстку. Кидаю в паблик, может еще кому-то пригодиться.
    Перейти по ссылке
     
    Hannibal86 нравится это.
  8. Smooch

    Smooch Создатель

    Регистр.:
    7 фев 2014
    Сообщения:
    10
    Симпатии:
    7
    Я за дивы, посему можно вооружится псевдоэлементами before и after, а если побаловаться с градиентами и треугольниками, можно даже нарисовать на чистом css, будет примитивнненько, зато без картинок, это конечно уже прям совсем для гиков)
    Чистый css: Перейти по ссылке
     
    Hannibal86 нравится это.
  9. Hannibal86

    Hannibal86 Создатель

    Регистр.:
    17 сен 2014
    Сообщения:
    37
    Симпатии:
    17
    Вариант на дивах с before и after может дать сбой при использовании старых браузеров, особенно на Apple платформе. Предложенный табличный вариант более древний, но он более кроссбаузерный