ArtShok. Сайтостроение и немного SEO

Уроки и примеры по CSS, jQuery. Советы по монетизации и продвижению сайтов

3 сентября 2008

Рубрика:
CSS

Прозрачность для всех браузеров методами CSS

Как помним, прозрачность (transparency) - это одна из тех вещей, которая отображается во всех браузерах по-разному. К счастью, чтобы избавиться от данного бага, нам будет достаточно прописать пару строк в CSS (в примере используется прозрачность в 50%)

.transparency_class {
                    filter:alpha(opacity=50);
                    -moz-opacity:0.5;
                    opacity: 0.5;
                    }


О каждом параметре по порядку:

  • opacity: 0.5; - задает прозрачность для Firefox, Safari и Opera. Если бы все браузеры поддерживали стандарты, то мы вполне могли бы обойтись одной этой строкой, но увы… посему идем дальше
  • filter:alpha(opacity=50); - установка прозрачности в IE
  • -moz-opacity:0.5; - поддерживает прозрачность в старых версиях Mozilla

Вот пару идей по поводу того, для чего нам это может пригодиться:

  1. Использовать прозрачность для счетчиков в “подвале”, чтобы те не сильно привлекали внимание
  2. Использовать прозрачность для фотогалерей, прописав к картинкам-ссылкам параметр a:hover. Таким образом мы получим дополнительную “анимацию” без использования flash, а значит не возникнет каких-либо проблем с индексацией, и страница не будет перегружена.

Рекомендуемые статьи:

Обязательно к использованию:



Комментарии к этой записи


  1. # 1 Евгений (1)
    13 февраля 2010 в 8:02

    Как не странно но прозрачность в IE7 как оказалось не работает. Так что ваша статья не информативна

    [Ответить]


  2. # 2 X-WoL (1)
    18 февраля 2010 в 20:12

    Насколько я помню IE понимает прозрачность только для каких-то определённых контейнеров, которые имеют определённые размеры (т.е. им заданы width и height) и для img тегов.

    [Ответить]


  3. # 3 Scr1pt1k (1)
    13 апреля 2010 в 21:35

    А я обычно вот так прописываю, страхуюсь :)

    opacity: 0.5;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;

    [Ответить]

Оставить комментарий или два