Полупрозрачный фон записи

[Трубчатый Кот]

Работает в IE6(!)/IE7, Opera, Firefox



1. Делаем полупрозрачный PNG в Фотопопе или другом редакторе, кладем себе в Библиотеку изображения.



2. Полупрозрачный фон нужным элементам прописывается так:

.классБлока

{

background: url('/userdir/9/3/1/2/93120/17332882.png') repeat bottom right !important;

Опера и Фаерфокс увидят !important и больше этот параметр менять не будут

background-image: none;

IE что такое !important не знает, поэтому отменит фоновый png

filter: progidXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/9/3/1/2/93120/17332882.png', sizingMethod='scale');

Зато только в IE есть filter который и сделает нам полупрозрачный фон через AlphaImageLoader

}



3. Для классов которым прописали полупрозрачноть прописывам новое свойство ссылок:

.классБлока a

{

position:relative; z-index: 2;

}



4. Если ники скачут, прибиваем их гвоздями:

.authorName { float:none;}

5. Следите за корректностью отступов в остальном стиле ))



Ссылки на png вставляем по аналогии, со своей Библиотеки изображений.



Проверялось на: Opera 9, Firefox 1.5, Internet Explorer 6 и 7



Как это выглядит можно посмотреть у меня в дневнике

Уже нельзя )



UPD: пофикшена проблема с неработающими ссылками в IE6

@темы: фоновые картинки, diaryCSS

Comments

[Dr. Butler]

вот честно, не понял ничего.

можно полный код?

[Трубчатый Кот]

например для меню и всех записей:



div.bordered

{

background: url('/userdir/9/3/1/2/93120/картинка') repeat bottom right !important;

background-image: none;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/9/3/1/2/93120/картинка', sizingMethod='scale');

}



можно использовать для любых дивов.

[reine de chaos]

а в седьмом ИЕ и так пнг нормально видно. Но вообще - спасибо огромное, очень здорово, что вы решили эту проблему. Попробую).

Рёцке да, хорошее решение :)



в ИЕ7 - норма

[Dr. Butler]

Рёцке

благодарю х)

Рёцке я щас наверно ступлю но как делать прозрачный пнг?

то есть нужно создать в фотошопе маленькую картинку с прозрачным фоном и сохранить её в пнг формате?

а как сделать его полупрозрачным? я хочу чтобы был оттенок.

[Караидель]

Вот только есть мааааленькая проблема: в шестом ИЕ при экспериментах с альфа-каналом перестают работать все ссылки лежащие на этом фоне.

[Чудеснов]

Караидель Вот только есть мааааленькая проблема: ты уже сотню раз об этом сказала, а людям фсе равно .

Просто факты, ничего личного

[Караидель]

Alex.Chudd

А потом они приходят и нам предъявляют претензии, типа "ваши сраные дневники опять глючат!" (цитата, однако).

[Space.Cat]

Paparazzi Lightning Чтобы оттенок - создаете новый рисунок прозрачный, потом заливкой процентов на 30 заливаете его каким-нибудь цветом, получается оттенок) Сохраняете для веб, выбрав формат пнг )





Рёцке *посмотрела днев* мрр))

Мне знаете что заинтересовало... Как Вы разделили на блоки меню слева? Тоже хочу, и придать им разные оттенки)

Как это делается?

Space.Cat гениально) спасибо огромное)

[Space.Cat]

Paparazzi Lightning получилось чаво? или я не к месту умничаю?)

Space.Cat всё получилось)

[Трубчатый Кот]

Вот только есть мааааленькая проблема: в шестом ИЕ при экспериментах с альфа-каналом перестают работать все ссылки лежащие на этом фоне.

Ага.. и правда. Но у меня есть подозрение что это можно обойти - ведь ссылки "комментировать" "дневник" "профиль" - работают. Не работают только те, что лежат на div.paragraph



Есть пару соображений - если они подтвердяться - выложу апдэйт )

[Трубчатый Кот]

Нашел красивый и простой фикс для проблемы.



для дивов со ссылками надо добавить



.классБлока a

{

position:relative; z-index: 2;

}

[Трубчатый Кот]

Мне знаете что заинтересовало... Как Вы разделили на блоки меню слева? Тоже хочу, и придать им разные оттенки) Как это делается?

отменить границы у .bordered и прописать их #side .menuSection

Разные цвета блокам задаются через их идентификаторы

Например:

#myDiaryLinks { background-color: #FFE; }

#globalLinks { background-color: #FEF; }



Караидель Обращаюсь как к представителю администрации. Сделайте что-нибудь с hover и Internet Explorer В сети куча способов - как яваскриптовских так и нет. Что-то а нормальные hoverы для дивов хочется.

[Space.Cat]

Рёцке Придецца моск включать

спасибо)) эксперименты будут проводиться в выходные) хорошие выходные ^^

[Jesse Joyce]

а у этого кода прозрачность не настраивается?

и он легче /по времени загрузки страницы/, чем код с opacity?

[fffaker]

кстати, в шестом ИЕ ничего не бывает в шоколаде - на прозрачном фоне ссылки работают/ Рёцке, спасибо огромное за коды!/, а вот в комментариях не видно ников пользователей над аватарами. ) точнее, некоторые из них вылезают, но в самых неожиданных местах страницы и не кликабельны )



Рёцке, в вашем дневнике такая же проблема, из шестого ИЕ ники над комментариями скачут по всей странице (:

[Трубчатый Кот]

104 при желании можно сделать текстуру с переменной прозрачностью в разных ее частях.

Способ разумеется тяжелее чем через opacity. Но opacity делает прозрачным всё, а не только фон.

The Root Спасибо - пофиксил ) (Заодно пофиксил тень в первом комментарии)

Решение:

.authorName { float:none;}

[fffaker]

Рёцке

омг, что-то они у меня все равно скачут через раз...

не знаете, с чем это может быть связано? ))

[Capella]

Рёцке

Спасибо в лисе 2.0.0.3 всё рулит!

[Трубчатый Кот]

The Root

IE вообще непредсказуемая штука. Простое обновление страницы вполне может вернуть всё на свои места. Как с таким поведением бороться - я не знаю. Если я не могу полагаться на то, что одна и та же страница будет грузиться всё время одинаково, то и работать с этим невозможно.

[fffaker]

Рёцке

я вообще-то пользуюсь оперой, но у многих стоит ИЕ.



что касается скачущих через раз ссылок - х.зн., некоторые стоят где надо, некоторые расползлись по странице. но чтобы стояли все где надо - такого не было.



ладно, оставлю так, надеюсь, что шестым ИЕ пользуется не так много людей, заглядывающих на мой дневник)

[Jesse Joyce]

Рёцке

мерси за объяснение. )

[Трубчатый Кот]

The Root я уже склоняюсь к тому, чтобы сделать так, чтобы у пользователей IE вылазило мерзкое окошко на тему IE=зло )))

[Чудеснов]

Рёцке если в виде “alert”a — невозможно. можно сделать им персональное сообщение после заголовка дневника



Типа h1:after{content: "" !important;content:"IE — ОТСТОЙ!"}

[Трубчатый Кот]

Alex.Chudd Можно взять какой-нибудь неиспользуемый див(к примеру див для фотки, который я не пользую) и через important и position:absolute повесить его в центре страницы с жуткой фоновой картинкой )

и не закроешь )

[Чудеснов]

Рёцке

гыгыгыгыгы.



«Вы забыли про юзабилити»

[Трубчатый Кот]

Alex.Chudd А зачем пользователям IE юзабилити? Была б нужна - не пользовались бы ) Я злой - да )