Comments 80
спасибо, здорово.
хороший пример использования rgba с graceful degradation можно увидеть на 24ways.org/
только, наверное, не «внуки», а «дети» или «потомки»?
хороший пример использования rgba с graceful degradation можно увидеть на 24ways.org/
только, наверное, не «внуки», а «дети» или «потомки»?
Взял на заметку.
FF 3.0.5 (Win)
черный кирпич, никакой прозрачности
черный кирпич, никакой прозрачности
Отличный пример, большое спасибо!
Думаю, «ниже IE6» уже как таковым недостатком-то не является.
UFO just landed and posted this here
немного офтопа. может в каскадные таблицы перенести? как-то точнее получится.
UFO just landed and posted this here
В смысле? position:relative обязательное условие, но внутри элемента с positon:relative могут быть также любые другие элементы, например с position:absolute, и они тоже будут непрозрачными. И hasLayout если будет глючить можно дать.
UFO just landed and posted this here
Ну вот пример: http://markup.xtreemhost.com/opacity/opacity_example.html. Вроде все нормально.
UFO just landed and posted this here
ИЕ5.5 арбайтен гут :) в 5.0 fail ;)
UFO just landed and posted this here
>Для этого можно использовать свойство opacity, но все знают, что оно применяется не только к самому элементу, но и к его детям
Не помню точно, но я внутрь полупрозрачного блока ставил еще один блок с непрозрачным опасити (то бишь = 1 или 100) и всё было тип-топ =)
Не помню точно, но я внутрь полупрозрачного блока ставил еще один блок с непрозрачным опасити (то бишь = 1 или 100) и всё было тип-топ =)
А можно полупрозрачный блок, сделать округлённым? А точнее, закруглить уголочки?
А зачем этот кусок?
html {
font-size:100.01%;
}
Чтобы с размером шрифта во всех браузерах было все нормально.
кстати, в opera 10 RGBA работает (-;
для IE тогда можно еще через mhtml сделать :)
webo.in/articles/habrahabr/46-cross-browser-data-url/
webo.in/articles/habrahabr/46-cross-browser-data-url/
Вот все бы извращаться ;)
Четырехпиксельный гиф у которого 2 пикселя прозрачны, а 2 черные работает везде без проблем.
А если зерно мониторов таки будет уменьшаться, то будет работать все лучше и лучше
Четырехпиксельный гиф у которого 2 пикселя прозрачны, а 2 черные работает везде без проблем.
А если зерно мониторов таки будет уменьшаться, то будет работать все лучше и лучше
За интересные идеи спасибо.
Только не следует забывать, что можно простую png-картинку фоном ставить. Поддержка сразу везде, кроме IE6, а вот для него уже изврат с alfa и relative
Это я просто напоминаю чтобы не зацикливались читающие эту тему)
Только не следует забывать, что можно простую png-картинку фоном ставить. Поддержка сразу везде, кроме IE6, а вот для него уже изврат с alfa и relative
Это я просто напоминаю чтобы не зацикливались читающие эту тему)
Я это знаю, но хотелось как раз избавиться от лишнего запроса на такую маленькую картинку.
от лишнего запроса к картинке избавляемся, зато добавляем кучу кода и 3 костыля вместо одного…
Мне кажется лучше использовать 1 общее, универсальное решение…
По крайней мере до стадии оптимизации проекта
хотя за способы большое спасибо, про (Data:URI) не знал
Мне кажется лучше использовать 1 общее, универсальное решение…
По крайней мере до стадии оптимизации проекта
хотя за способы большое спасибо, про (Data:URI) не знал
Где 3? Я насчитал только один (position: relative для потомков).
ну как где?
1. background:url(data:image/png;base64,iVBORw0KG...);
2. background:rgba(0, 0, 0, 0.5);
3. filter:alpha(opacity=50);
1. background:url(data:image/png;base64,iVBORw0KG...);
2. background:rgba(0, 0, 0, 0.5);
3. filter:alpha(opacity=50);
Какие же это костыли? Dara:URI это стандарт. В том случае, когда все браузеры будут поддерживать RGBA (что тоже стандарт), можно будет убрать эту строчку. Пока же, те браузеры, которые уже поддерживают RGBA получают бекграунд через rgba. Progressive enhancement на лицо. 3 согласен, костыль, но если вы будете делать через полупрозрачную загружаемую картинку, то вам тоже придется использовать фильтр, только не Alpha а AlphaImageLoader. Поэтому в данном случае, по костылям получается один (AlphaImageLoader) против двух (Alpha + position:relative у потомков).
Костыль, действительно, только один для IE6:
filter:alpha(opacity=50) и position:relative для потомков.
Остальное всё стандартно совешенно — используются приемущества прекрасной деградируемости CSS.
filter:alpha(opacity=50) и position:relative для потомков.
Остальное всё стандартно совешенно — используются приемущества прекрасной деградируемости CSS.
Делаю точно так же, только какртинки подгружаю :)
Только, вот, с Opera 10 и таблицами засада — она не поддерживает нормально RGBA для ячеек таблицы (цвета COL за ячейками не видно).
Я отправил эту ошибку уже.
Только, вот, с Opera 10 и таблицами засада — она не поддерживает нормально RGBA для ячеек таблицы (цвета COL за ячейками не видно).
Я отправил эту ошибку уже.
Для IE есть такой трюк:
HEX-цвет + прозрачность
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000050,endColorstr=#00000050);HEX-цвет + прозрачность
Кстати, как вариант борьбы с IE6, можно оставить его без прозрачности, использовав PNG8, если это позволяет дизайн.
Можно в .opacity положить контейнер (например div class='opacity-content') и назначить position:relative только ему вместо пугающего
.opacity * {position:relative;}
.opacity * {position:relative;}
Еще одна хорошая статья про прозрачность была у Чернева chernev.ru/pravilnaya-prozrachnost.html, демо: chernev.ru/css-opacity/
До кучи The data: URI kitchen
Весьма интересно, кроме IE, в котором происходит непонятный кирдык сглаживанию шрифтов в блоке.
Чудеса в решете — установленный в системе IE7 не сглаживает текст, IE6 через IETester — сглаживает…
Чудеса в решете — установленный в системе IE7 не сглаживает текст, IE6 через IETester — сглаживает…
UFO just landed and posted this here
Да, это проблема всех фильтров: http://blogs.msdn.com/ie/archive/2006/08/31/730887.aspx. Там в комментах советуют давать background-color, но он у нас уже установлен.
В примере автора статьи картинка является полноцветной, что увеличивает время загрузки. Возможно лучше работать с таблицей и вставить бегграундом в блоке оптимизированный и полупрозрачний рисунок png
У меня почему-то при абсолютном позиционировании прозрачного блока в IE6, IE7 дочерние элементы тоже становятся прозрачными, это никак нельзя исправить?
Можно сделать, через фильтр Gradient, как предлагают тут: habrahabr.ru/blogs/webdev/50996/#comment_1345139 (только в комментарии неточность, значение прозрачности надо писать перед RGB: #50000000), но прозрачность будет не совсем такая, нужно экспериментировать. Либо, можно обернуть то, что внутри элемента с position:absolute в какой-нибудь другой элемент (с position:static) и перевесить фильтр Alpha на него. Вообще, не рекомендую давать фильтры элементам, значение свойства position которых отлично от static. Могут возникнуть проблемы связанные с обрезанием контента, который выходит за границы блока, или полным исчезновением элемента.
У меня возникла проблема с этим методом, если внутри прозрачного блока располагать, скажем, список или таблицу, то в IE ничего не отображается.
Причем с инлайновыми элементами и c div'ом все показывает.
Кто-то еще сталкивался с подобным?
Причем с инлайновыми элементами и c div'ом все показывает.
Кто-то еще сталкивался с подобным?
Вы не могли бы переложить картинки на хаброэффект.ру например?
markup.xtreemhost.com/opacity/ie.html — в FF 3.6 блок имет непрозрачный черный фон. в других примерах все хорошо.
или это у меня с браузером что-то не так?
или это у меня с браузером что-то не так?
громадное спасибо! Сэкономили кучу нервов! и спасибо за data!
Sign up to leave a comment.
Кроссбраузерная одноцветная полупрозрачность