Штрих-пунктирная обводка! HELP

Тема в разделе "Веб-дизайн", создана пользователем Wmtransfer, 15 мар 2010.

Статус темы:
Закрыта.
Модераторы: zek24
  1. Wmtransfer

    Wmtransfer Создатель

    Регистр.:
    15 янв 2010
    Сообщения:
    15
    Симпатии:
    1
    Здравствуйте уважаемые пользователи nulled!

    Нуждаюсь в вашей помощи!
    Интересует вопрос, как можно сделать штрих-пунктирную обводку объекта в фотошопе или с помощью css как на прикрепленной картинке?!

    Заранее спасибо за ответ и помощь
     

    Вложения:

  2. int++

    int++ Писатель

    Регистр.:
    26 янв 2010
    Сообщения:
    6
    Симпатии:
    2
    Ну с помощью css это border
    У него есть border-style:dashed; - вот тебе и обводка ;)
     
    Wmtransfer нравится это.
  3. Wmtransfer

    Wmtransfer Создатель

    Регистр.:
    15 янв 2010
    Сообщения:
    15
    Симпатии:
    1
    Как можно реализовать блок с закругленными усглами на css + эта обводка?!
    P/S: мозги вообще не варят =(
     
  4. lifediz

    lifediz Yii Framework developer

    Регистр.:
    7 июн 2008
    Сообщения:
    385
    Симпатии:
    507
    Просто сохраняем углы 4 штуки в .png формате с прозрачным фоном, потом это дело верстаем и всё, либо целостный блок сохраняй с прозрачным фоном опять же...
     
  5. Wmtransfer

    Wmtransfer Создатель

    Регистр.:
    15 янв 2010
    Сообщения:
    15
    Симпатии:
    1
    Всё, раздуплился как сделать :)
    Может кому-то пригодится...
    CSS:
    HTML:
    
    .banner {
    background-color:#c2bbb5;
    border:dashed 1px #a59f9a;
    -moz-border-radius-topright:6px;
    -moz-border-radius-topleft:6px;
    -moz-border-radius-bottomright:6px;
    -moz-border-radius-bottomleft:6px;
    margin-bottom:10px;
    padding:5px 10px;
    }
    
    DIV:
    HTML:
    
    <div class="banner">
    <!--Banner-->
    </div>
    
    Токо не могу понять почему в опере и ие не работает :(
     
  6. Ins1ne

    Ins1ne Постоялец

    Регистр.:
    26 авг 2009
    Сообщения:
    89
    Симпатии:
    25
    по всей видимости этот код надо продублировать, только заменить moz на webkit + еще раз продублировать только уже без moz и webkit.
    т.е
     
  7. ercalote

    ercalote Постоялец

    Регистр.:
    27 мар 2008
    Сообщения:
    86
    Симпатии:
    21
    Не поможет. Указанные правила относятся к спецификации CSS3, "релиза" которой еще не было, поэтому многие браузеры ее не поддерживают. Правила с -moz буду работать в фаерфоксе и других бразуерах, основанных на движке мазиллы, а правила -webkit в хроме и сафари. Как итог: ИЕ и опера пролетают.

    Чтобы добиться кроссбраузерности, используйте js.
    http://habrahabr.ru/blogs/webdev/30019/
     
  8. General Fizz

    General Fizz Боевой Генерал :)

    Регистр.:
    11 апр 2007
    Сообщения:
    753
    Симпатии:
    396
  9. ercalote

    ercalote Постоялец

    Регистр.:
    27 мар 2008
    Сообщения:
    86
    Симпатии:
    21
    Голым css наплодите много лишних тегов (b, например). Кому нужна такая семантика?
     
  10. General Fizz

    General Fizz Боевой Генерал :)

    Регистр.:
    11 апр 2007
    Сообщения:
    753
    Симпатии:
    396
    Делается без всяких "b" только 3-4 span сверху и снизу.

    Если посчитать размеры картинок уголков (мин 100х4 байт) и голый CSS, то выигрыш однозначно в пользу CSS. Кроме того, браузеру чтобы загрузить 4 картинки с уголками дополнительно надо сделать несколько запросов в сеть и вытянуть эти картинки с сервера.


    Если уж очень хочется сделать картинки с уголками, то лучше использовать одну картинку, в которой сразу все четыре варианта уголков. По углам позиционируется ее соответствующая часть. Подробности в книге Мержевича Рецепты HTML и CSS - есть на форуме.
     
Статус темы:
Закрыта.