среда, 28 марта 2007
15:55

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

все записи пользователя в сообществе Трубчатый Кот
Зверь-чародей
Работает в 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: progid:DXImageTransform.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

URL
Комментарии
30.03.2007 в 21:11

fffaker
same shit different day
Рёцке

кстати, скачущие ссылки - это еще не все беды пользователей ИЕ! :lol:

у них отказывается выделяться текст, лежащий на этом фоне! :lol: :lol: :lol:
URL
30.03.2007 в 23:17

Трубчатый Кот
Зверь-чародей
The Root *устало* перебьются.
URL
31.03.2007 в 00:43

Чудеснов
молодой динамично развивающийся
Рёцке открой мой дневник в IE6 или младше :)
URL
31.03.2007 в 01:29

Wolfia
У меня в Опере на дайре фон не прозрачные, а в IE нормальный...

Это почему так? Объясните неродивой ))))



http://pay.diary.ru/~Tirgriffa/



URL
31.03.2007 в 08:16

Space.Cat
just do it
Рёцке хелп... попробовала я... не получилось)

Рамки вокруг постов вообще нет :( а на меню аки налепленная получилась... сдвинутая..



И... еще я не знаю как называются индефикаторы "Поиск по дневнику", "Календарь записей и иже с ним", "Ссылки", ну и "ПЧ" докучи... *шаркает хвостиком* Подскажешь?
URL
31.03.2007 в 10:24

Чудеснов
молодой динамично развивающийся
Wolfia что значит «не прозрачные» и «нормальный»?

1. Напиши что нужно.

2. Напиши что не так.
URL
31.03.2007 в 10:29

Чудеснов
молодой динамично развивающийся
Space.Cat насчет идентификаторов: открываешь исходный код дневника, находишь вот такой кусок:



<div id="side">

<div class="bordered">



потом выбираешь нужный тебе блок (Темы записей, Поиск по дневнику) и смотришь атрибут id у тега <div> или <li>, в котором лежит блок. id="вот_это_и_надо_писать_в_настройки_CSS"
URL
31.03.2007 в 10:55

Трубчатый Кот
Зверь-чародей
Wolfia

div.bordered { position:relative; z-index: 2; }

div.bordered A{ position:relative; z-index: 2; }





А фон будет именно такой как в опере ( http://static.diary.ru/userdir/3/6/...56/17726302.png ). потому что такая pngшка. И еще: смысла в таком коде нету, поскольку вы используете НЕПРОЗРАЧНЫЙ png.



если вам надо чтобы фон просто отсутствовал:



div.bordered { background: url('/userdir/3/6/4/6/364656/17726302.png') repeat bottom right !important; background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/3/6/4/6/364656/17726302.png', sizingMethod='scale'); }

div.bordered { position:relative; z-index: 2; }

div.bordered { background: transparent; }



URL
31.03.2007 в 13:14

Space.Cat
just do it
Alex.Chudd а как можно убрать цвет фона меню (чтобы вместо него фон видно было)? но оставив рамки вокруг составляющего его блоков?
URL
31.03.2007 в 20:41

Чудеснов
молодой динамично развивающийся
Space.Cat если я правильно вас понял, то

#side .bordered {background:transparent;}
URL
31.03.2007 в 20:41

Чудеснов
молодой динамично развивающийся
Space.Cat если я правильно вас понял, то

#side .bordered {background:transparent;}
URL
31.03.2007 в 20:42

Чудеснов
молодой динамично развивающийся
Space.Cat если я правильно вас понял, то

#side .bordered {background:transparent;}
URL
31.03.2007 в 20:48

Чудеснов
молодой динамично развивающийся
Space.Cat если я правильно вас понял, то

#side .bordered {background:transparent;}
URL
31.03.2007 в 20:54

Чудеснов
молодой динамично развивающийся
Space.Cat если я правильно вас понял, то

#side .bordered {background:transparent;}
URL
02.04.2007 в 08:56

Space.Cat
just do it
Alex.Chudd Отлично! Фон и рамки убрались, спасибо, мрррррр! :hash2:

Все получается как задуманно) .....А вот как вернуть рамку вокруг записей? ))
URL
04.04.2007 в 10:12

~Kolombina~
Without it, without love, without anger, without sorrow breath is just a clock ticking
У меня в опере все ок видно было, в ИЕ теперь тоже, но!!! Узор на фоне записей растянулся безобразно и почему-то не нажимаютмя ссылки - комментарии и тп. Чего делать?)
URL
04.04.2007 в 10:21

~Kolombina~
Without it, without love, without anger, without sorrow breath is just a clock ticking
Upd еще и комменты не оставляются теперь в ие)) приду посмотрю чего в опере будет)
URL
04.04.2007 в 10:30

Трубчатый Кот
Зверь-чародей
почему-то не нажимаютмя ссылки - комментарии и тп. Чего делать?)

выполнить мануаль ПОЛНОСТЬЮ. в частности третий пункт.





Узор на фоне записей растянулся безобразно

в IE не получиться "замостить" полупрозрачное изображение. никак.

кроме, разве что, создать достаточно буольшую полупрозрачную текстуру.



URL
04.04.2007 в 14:13

~Kolombina~
Without it, without love, without anger, without sorrow breath is just a clock ticking
Рёцке

Спасибо за пояснения, теперь ссылки вроде работают)

А комменты написать все так же не получается)



Я блондинка, мне тупить моно :shy:
URL
04.04.2007 в 14:21

Трубчатый Кот
Зверь-чародей
~Kolombina~ кстати чтобы в IE не было удодливо растянутой текстуры в AlphaImageLoader(src='//static.diary.ru/userdir/9/3/1/2/93120/17332882.png', sizingMethod='scale'); укажите ДРУГОЙ файл - например просто прозрачный - без узора. отсутствие узора лучше чем наличие, но криво растянутое )
URL
04.04.2007 в 14:47

~Kolombina~
Without it, without love, without anger, without sorrow breath is just a clock ticking
Рёцке

подскажите чего с комментариями делать, теперь в "добавить комментарий" ничего написать невозможно(
URL
04.04.2007 в 15:18

Трубчатый Кот
Зверь-чародей
~Kolombina~ да ну? ну что ж... ЕЩЕ раз перечитывайте мануал.



а где у вас вот это (третий пункт мануала)?

#side div.bordered a{position:relative; z-index: 2;}

#page-c a{position:relative; z-index: 2;}



правда я подозреваю что нужно будет еще вот это:

#side div.bordered input{position:relative; z-index: 2;}

#page-c input{position:relative; z-index: 2;}



но мой вам совет - лучше чтобы на форме отправки комментариев не было прозрачного фона.
URL
04.04.2007 в 15:25

~Kolombina~
Without it, without love, without anger, without sorrow breath is just a clock ticking
Рёцке

у меня этот самый пункт был поставлен несколько раз в разных видах) на конкретный момент времени он выглядит вот так

#postsArea, #commentsArea { position:relative; z-index: 2;}

как я сказала уже было этого кода несколько вариантов))) этот работал адекватней других)))



upd

теперь снова ссылки комментарии не работают.
URL
04.04.2007 в 15:29

Чудеснов
молодой динамично развивающийся
Легче написать сразу #side div.bordered *, #page-c *{position:relative; z-index: 2;}

хотя хз
URL
04.04.2007 в 17:54

~Kolombina~
Without it, without love, without anger, without sorrow breath is just a clock ticking
Короче сделала я такой код, теперь все на фоне выделяется в ИЕ, ссылки работают, комменты набирать моно, кнопки нажимать - тоже)))



#side div.bordered {background: url('/userdir/1/1/0/9/110949/17872579.png') repeat bottom right !important; background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/1/1/0/9/110949/17872579.png', sizingMethod='scale'); AlphaImageLoader}

#page-c div.bordered {background: url('/userdir/1/1/0/9/110949/17875767.png') repeat bottom right !important; background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/1/1/0/9/110949/17875767.png', sizingMethod='scale'); AlphaImageLoader}

#side div.bordered input{position:relative; z-index: 2;}

#page-c div.bordered input{position:relative; z-index: 2;}

.authorName { float:none;}



Но! В ИЕ прозрачный фон не отображается, вообще))) Зато у меня в любимой опере все красиво)))

И с "замостсчением" проблема тут же решилась)
URL
04.04.2007 в 18:05

Трубчатый Кот
Зверь-чародей
~Kolombina~ *с сарказмом* какое интересное решение проблемы.

Если не делать прозрачный фон в IE проблемы нет вообще.



Вместо того что вы понаписали достаточно:

#side div.bordered {background: url('/userdir/1/1/0/9/110949/17872579.png') repeat bottom right !important; background-image: none;}

#page-c div.bordered {background: url('/userdir/1/1/0/9/110949/17875767.png') repeat bottom right !important; background-image: none; }



и всё. в нормальных браузерах - полупрозрачность. в IE6 и ниже - просто отсутствие фона.



вся констркуция с filter: progidXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/1/1/0/9/110949/17875767.png', sizingMethod='scale'); c position:relative, c float:none нужна была только для IE
URL
04.04.2007 в 18:05

Трубчатый Кот
Зверь-чародей
прошу прощения что сегодня злое )
URL
04.04.2007 в 18:06

~Kolombina~
Without it, without love, without anger, without sorrow breath is just a clock ticking
Рёцке

Вот) спасибо огромное за то, что так помогли)))
URL
04.04.2007 в 18:13

~Kolombina~
Without it, without love, without anger, without sorrow breath is just a clock ticking
Рёцке

Вряд ли)



Я с Css начала заниматься позавчера) И стараюсь учиться) и помощи прошу только когда реально чего-то не знаю)) А поржать над новенькими я могу в других местах))
URL
10.04.2007 в 22:02

Naoki Touru
zwitter~ Star Fuckers INC ~Абсентовая фея~
А можно код для ПОЛУпрозрачного фона записи?
URL