Время для прочтения: 0 мин. 8 сек.

CSS3PIE

PIE - .htc файл, позволяющий браузерам Internet Explorer 6-8 отрисовывать наиболее полезные CSS3 красивости: градиенты, тени, скругленные уголки.

Возможности

  • border-radius (скругленные уголки)
  • box-shadow (тени)
  • border-image (фоны для рамок)
  • -pie-background (несколько фонов для одного элемента)
  • RGBA color (цвета с альфа каналом)
  • linear-gradient (линейный градиент в качестве фона

Планируется поддержка других возможностей.

Ссылки

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

  • Денис

    Спасибо.

  • Денис

    Скажите, пожалуйста, css3pie поддерживает внутреннюю тень box-shadow: inset? У меня в IE8 только внешняя отображается.

  • Денис

    И ещё: как в комментах код обрамлять, чтобы был в тексте на сером фоне?

  • Денис

    Спасибо.
    Скажите, пожалуйста, а Вы применяете css3pie в своих проектах и как часто?

  • Денис

    И градиент исчез. background-image: linear-gradient(top, #cccccc 0%,#eeeeee 60%); теперь не действует. Как исправить?

  • Денис

    Отключил filter — заработало. Спасибо. На локальной машине делаю. Каким образом фильтр влияет на css3pie? Спасибо ещё раз.

  • Денис

    Путь проверил (через «средства разработчика») — всё в порядке
    behavior: url(PIE.htc);
    Zoom: 1 в CSS добавил, но пока без толку.

    • Денис

      И фильтр-фишинг отключен

      • Я имел ввиду filter: progid. Бордеры отваливаются после подключения HTC? Или без него тоже самое? На локальной машине смотрите или на сервере?

  • Денис

     

    [css]
    #inputJSCal {
    background-color: #fff;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
    background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%);
    background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%);
    background-image: -o-linear-gradient(top, #eeeeee 0%,#ffffff 50%);
    background-image: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 50%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#eeeeee’, endColorstr=’#ffffff’,GradientType=0 );
    background-image: linear-gradient(top, #eeeeee 0%,#ffffff 50%);
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius : 4px 0 0 4px;
    border-radius : 4px 0 0 4px;
    border: 1px solid #aaa;
    border-right: none;
    height: 26px;
    width: 200px;
    line-height: 26px;
    padding: 0 0 0 8px;
    color: #666;
    font-size: 13pt;
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
    font-weight: bold;
    behavior: url(Components/Components/CSS3PIE/PIE.js);
    }
    [/css]

    • Смущает строка url(Components/Components/CSS3PIE/PIE.js);. По идее там должен быть путь к htc файлу. Возможные неполадки смотрите тут.

      • Денис

        Строку подправил, js заменил на htc. Ничего не изменилось. Рядом с html файлом положил .htaccess со строкой «AddType text/x-component .htc», но всё равно ничего не изменилось, кроме того, что у поля исчезли бордюры.
        Подключать же файл PIE.htc в теге head не нужно?

        • Подключать ничего более не нужно. Путь в behavior проверили? Через консоль браузера смотрели? Бордеры отваливаются после подключения HTC? Если да, то попробуйте дать этим элементам hasLayout (например, zoom: 1). И попробуйте на время отключить фильтр для ИЕ.

  • Денис

    Использую IE8.

    • Желательно пример ваш увидеть — так трудно сказать.

      • Денис

        Что-то не получилось вставить весь код. Как вставить его нормально? В теги code можно оборачивать?

  • Денис

    Здравствуйте! У меня почему-то градиент применился, а тень и скруглённые уголки нет. В чём может быть причина? Спасибо.

  • Надежда

    Не совсем по теме вопрос (вопрос по свойству border-radius), может сталкивались с таким, нужно смотреть в опере или хроме, баг в картинках с серым бордером скруглённым, сами углы почти не видны. Свойство border-radius применено к img, у которых стоит border.

    • Видел подобную проблему. Совет: использовать border-radius не для тега img, а для — div, содержащий эту самую картинку.

      • Надежда

        Спасибо! Мне тоже такая идея приходила в голову, но эффект был тот же, но попробую ещё раз!

        • Можно положить картинку фоном на слой, у которого скруглены углы. Подробнее.

  • Айрат

    Интересно, а что Oper’у стороной обошли с градиентом, по-моему у нее есть свойства CSSградиета да и файл PIE.htc — это же javascript инструкции. Не проще ли jQery эффекты подключить?

    • На момент создания скрипта Опера не поддерживала CSS градиенты (исключение SVG).
      Зачем тянуть целый фреймворк jQuery для получения какого-либо эффекта?

  • Надежда

    ой, да, спасибо! Это я такая внимательная, точно, просто нужно сокращённую запись использовать, отлично, всё работает! Спасибо ещё раз!!

    • Собственно, не за что.

      • Надежда

        да, я так бы и мыкалась, что называется, смотрю в книгу, и не вижу ничего :)), так что помощь нужная, спасибо ещё раз! Если что можно удалить эту ветку.

  • Надежда

    Спасибо большое! Видимо всё таки не работает под разные углы, так как с табами у них просто перекрывается нижним блоком и закрываются уголки нижние, ну ладно, тоже тогда так сделаю, хотя жалко, хороший скриптик

    • См. коммент выше

  • Надежда

    У меня не работает для border-top-right-radius, border-bottom-right-radius, т.е. если делаю скруглённые углы для всех, то работает, как только задаю для двух углов не работает,так и есть, или что-то не так делаю?

    • Пример увидеть можно? Потому как у меня работает в любой вариации углов.

      • Надежда

        да, вот примерчик http://nadena.ru/kr/, меню на жёлтом фоне, должны быть скруглены только верхние углы

        • У вас в IE вообще хоть какие-то углы скругляются?

          • Надежда

            да, на ссылках выше как раз сделаны скруглённы уголки с помощью этого htc

          • Надежда

            а вы, кстати не покажете демо пример, именно не со всеми углами, а несколькими, я сравню, может пойму в чём дело?

            • Навскидку не скажу. Посмотрите здесь.
              UPD: извинюсь, там использую другое решение — DD_roundies.

            • У них на сайте есть пример с табами. Насколько я помню у них задание углов для скругление возможно только одной строкой, типа так:

              [css]
              -webkit-border-radius: 8px 8px 0 0;
              -moz-border-radius: 8px 8px 0 0;
              border-radius: 8px 8px 0 0;
              [/css]

              У вас же задано немного неверно:

              [css]
              -moz-border-radius-topleft: 4px;
              -moz-border-radius-topright: 4px;
              -webkit-border-top-left-radius: 4px;
              -webkit-border-top-right-radius: 4px;
              border-radius-topleft: 4px;
              border-radius-topright: 4px;
              border-radius-bottomeft: 0px;
              border-radius-bottomright:
              [/css]