Зверь-чародей
Я удалил картинку http: //static.diary.ru/userdir/9/3/1/2/93120/17332882.png из своей БИ, чтобы больше никому в голову не пришло использовать инстукцию про полупрозрачный фон, не дочитав ее до конца!
1. Сначала уясним разницу.
Прозрачный фон - это когда на фоне нет ничего вообще. Ни цветовой заливки, ни картинки.
Полупрозрачный фон - это когда фон, не поверите, полупрозрачный ) например бледно-розовый, через который просвечивает фоновая картинка дневника.
Полупрозрачность - а вот это когда полупрозрачно все - фон, текст и картинки. У меня, например, полупрозрачное меню.
2. Как это всё делается.
Прозрачный фон делается проще всего. Достаточно просто отключить цвета фона в настройках оформления - там, где у вас указан цвет в виде #FFAA00, надо оставить только решетку # или просто пустое место. Это стоит сделать в любом случае, если вы собираетесь работать с полупрозрачностью.
Если этого мало - прозрачность можно форсировать так:
*element* {background: transparent;}
Про то, что такое *element* - в конце поста.
Полупрозрачность делается сложнее, но не сильно.
Вот так:
*element* {-moz-opacity:.45 !important;opacity:.45 !important; filter:alpha(opacity=45);}
Вместо 45 - нужный процент прозрачности )
100% соответствует полной непрозрачности и задается так:
*element* {-moz-opacity:1.0 !important;opacity:1.0 !important; filter:alpha(opacity=100);}
Если вдруг у вас не работает полупрозрачность в Internet Explorer.
Такое может быть, если вы пытаетесь назначить прозрачность элементу, для которого не указана высота или ширина.
В этом случает полупрозрачность прописывается так:
*element* {-moz-opacity:.45 !important;opacity:.45 !important; filter:alpha(opacity=45); zoom: 1;}
Если всё равно не работает
Ответ только один - меняйте то, что вы прописывали вместо *element* Много элементов можно использовать в качестве синонимов. Про то, что такое *element*, напоминаю - в конце поста.
Самое сложное. Увы. Включайте мозг )
Плюсы: Самая трушная полупрозрачность фона.
Минусы: Фон может быть только сплошным полупрозрачным цветом, без картинок.
1. Берём из фотошопа цвет и прозрачность. Для примера, пусть это будет #11AAFF / rgb(17,170,255) и 75% — скриншот, где смотреть в фотошопе.
2. Добавляем CSS:
*element*
{
background:rgba(17, 170, 255, 0.75);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BB11AAFF,endColorstr=#BB11AAFF);
zoom:1;
}
Первая строчка задаёт цвет в режиме rgba: (красный, зелёный, синий, прозрачность), цвета могут быть от 0 до 255, а прозрачность от 0 до 1.
Вторая строчка для IE, который не понимает rgba: дважды задаём цвет в специальном формате #AARRGGBB, где первые две цифры обозначают прозрачность от 00 до FF, а дальше обычная шестнадцатиричная запись цвета.
Плюсы: Трушная полупрозрачность фона.
Минусы: Бывают глюки с отступами, которые никак, кроме ручной правки не исправляются. Я в свое время справился.
1. Делаем полупрозрачный PNG в Фотопопе или другом редакторе, кладем себе в Библиотеку изображения.
В фотошопе так: создаем картинку 10 на 10 px c фоном Transparent, берем заливку, устанавливаем opacity в нужное количество процентов и заливаем нужным цветом. Сохранять в PNG (если просит уточнить - PNG-24)
2. Полупрозрачный фон нужным элементам прописывается так:
*element*
{
background: none;
background: url('/userdir/9/3/1/2/93120/17332882.png') repeat bottom right !important;
background-image: none;
filter: progid
ЭТО ОФИГЕННО ВАЖНЫЙ ПУНКТ! Забудете - не будут работать ссылки в Internet Explorer
*element* a, *element* input, textarea
{
position:relative; z-index: 2;
}
4. Если ники скачут, прибиваем их гвоздями:
.authorName { float:none;}
Плюсы: Никаких глюков, короткий и простой код, работает всегда и везде.
Минусы: Не катит на фиксированном фоне и в некоторых других случаях.
Это не столько способ, сколько чит.
На самом деле эффекта полупрозрачности фона можно добиться, просто назначив точно такой же фон элементу, но подредактированный в графическом редакторе.
*element* - это штука, которую надо заменить на то, к чему бы собираетесь применить эффект
например
#side .bordered - меню
#side .menuSection - отдельные блоки меню
#page-t .bordered - блок записей
Т.е. код для полупрозрачности всего блока меню будет выглядеть так:
#side div.bordered {-moz-opacity:.45 !important;opacity:.45 !important; filter:alpha(opacity=45); }
З.Ы. Еще раз кто-то запостит новой темой вопрос про прозрачность - поубиваю ))
!СЛАВА РОБОТАМ!
1. Сначала уясним разницу.
Прозрачный фон - это когда на фоне нет ничего вообще. Ни цветовой заливки, ни картинки.
Полупрозрачный фон - это когда фон, не поверите, полупрозрачный ) например бледно-розовый, через который просвечивает фоновая картинка дневника.
Полупрозрачность - а вот это когда полупрозрачно все - фон, текст и картинки. У меня, например, полупрозрачное меню.
2. Как это всё делается.
Прозрачный фон
Прозрачный фон делается проще всего. Достаточно просто отключить цвета фона в настройках оформления - там, где у вас указан цвет в виде #FFAA00, надо оставить только решетку # или просто пустое место. Это стоит сделать в любом случае, если вы собираетесь работать с полупрозрачностью.
Если этого мало - прозрачность можно форсировать так:
*element* {background: transparent;}
Про то, что такое *element* - в конце поста.
Полупрозрачность
Полупрозрачность делается сложнее, но не сильно.
Вот так:
*element* {-moz-opacity:.45 !important;opacity:.45 !important; filter:alpha(opacity=45);}
Вместо 45 - нужный процент прозрачности )
100% соответствует полной непрозрачности и задается так:
*element* {-moz-opacity:1.0 !important;opacity:1.0 !important; filter:alpha(opacity=100);}
Если вдруг у вас не работает полупрозрачность в Internet Explorer.
Такое может быть, если вы пытаетесь назначить прозрачность элементу, для которого не указана высота или ширина.
В этом случает полупрозрачность прописывается так:
*element* {-moz-opacity:.45 !important;opacity:.45 !important; filter:alpha(opacity=45); zoom: 1;}
Если всё равно не работает
Ответ только один - меняйте то, что вы прописывали вместо *element* Много элементов можно использовать в качестве синонимов. Про то, что такое *element*, напоминаю - в конце поста.
Полупрозрачный фон
Самое сложное. Увы. Включайте мозг )
СПОСОБ I
Плюсы: Самая трушная полупрозрачность фона.
Минусы: Фон может быть только сплошным полупрозрачным цветом, без картинок.
1. Берём из фотошопа цвет и прозрачность. Для примера, пусть это будет #11AAFF / rgb(17,170,255) и 75% — скриншот, где смотреть в фотошопе.
2. Добавляем CSS:
*element*
{
background:rgba(17, 170, 255, 0.75);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BB11AAFF,endColorstr=#BB11AAFF);
zoom:1;
}
Первая строчка задаёт цвет в режиме rgba: (красный, зелёный, синий, прозрачность), цвета могут быть от 0 до 255, а прозрачность от 0 до 1.
Вторая строчка для IE, который не понимает rgba: дважды задаём цвет в специальном формате #AARRGGBB, где первые две цифры обозначают прозрачность от 00 до FF, а дальше обычная шестнадцатиричная запись цвета.
СПОСОБ II
Плюсы: Трушная полупрозрачность фона.
Минусы: Бывают глюки с отступами, которые никак, кроме ручной правки не исправляются. Я в свое время справился.
1. Делаем полупрозрачный PNG в Фотопопе или другом редакторе, кладем себе в Библиотеку изображения.
В фотошопе так: создаем картинку 10 на 10 px c фоном Transparent, берем заливку, устанавливаем opacity в нужное количество процентов и заливаем нужным цветом. Сохранять в PNG (если просит уточнить - PNG-24)
2. Полупрозрачный фон нужным элементам прописывается так:
*element*
{
background: none;
background: url('/userdir/9/3/1/2/93120/17332882.png') repeat bottom right !important;
background-image: none;
filter: progid
ЭТО ОФИГЕННО ВАЖНЫЙ ПУНКТ! Забудете - не будут работать ссылки в Internet Explorer*element* a, *element* input, textarea
{
position:relative; z-index: 2;
}
4. Если ники скачут, прибиваем их гвоздями:
.authorName { float:none;}
СПОСОБ III
Плюсы: Никаких глюков, короткий и простой код, работает всегда и везде.
Минусы: Не катит на фиксированном фоне и в некоторых других случаях.
Это не столько способ, сколько чит.
На самом деле эффекта полупрозрачности фона можно добиться, просто назначив точно такой же фон элементу, но подредактированный в графическом редакторе.
Что такое *element*?
*element* - это штука, которую надо заменить на то, к чему бы собираетесь применить эффект
например
#side .bordered - меню
#side .menuSection - отдельные блоки меню
#page-t .bordered - блок записей
Т.е. код для полупрозрачности всего блока меню будет выглядеть так:
#side div.bordered {-moz-opacity:.45 !important;opacity:.45 !important; filter:alpha(opacity=45); }
Спасибо за внимание
З.Ы. Еще раз кто-то запостит новой темой вопрос про прозрачность - поубиваю ))
!СЛАВА РОБОТАМ!
-
-
09.07.2007 в 15:19#page-t .bordered { background: url('/userdir/1/9/2/6/19264/21412622.png') repeat bottom right !important; background-image: none; filter: progid
#page-t .bordered a, #page-t .bordered input { position:relative; z-index: 2; }
А в ИЕ всё равно не работает прозрачность. в Опере всё ог.
В чём беда?..)
-
-
09.07.2007 в 15:30zoom: 1; забыли
-
-
09.07.2007 в 15:34-
-
09.07.2007 в 15:49Это может быть погрешностью преобразований? И что делать?
+ ники пользователей, которые оставляют комменты смещены чуть ли не до центра экрана. что это всё?!...
-
-
09.07.2007 в 16:04в этот раз про
textarea
{
position:relative; z-index: 2;
}
кстати для IE гораздо лучше, хоть и сложнее, второй способ.
-
-
09.07.2007 в 16:22А второй вариант же не работает на фиксированном фоне. Так что лучше этот доработать).
-
-
09.07.2007 в 16:38про ники написано в инструкции.
в опере должно работать - гдегде а там полупрозрачный фон обычно проблем не вызывает. проблема может быть в остальном коде
-
-
09.07.2007 в 16:47textarea
{
position:relative; z-index: 2;
}
А Опера лагает.
Да, фиксация взята у Теха.
Попробую ещё поковырять. Спасибо большое ещё раз.
-
-
09.07.2007 в 16:47textarea
{
position:relative; z-index: 2;
}
А Опера лагает.
Да, фиксация взята у Теха.
Попробую ещё поковырять. Спасибо большое ещё раз.
-
-
26.07.2007 в 22:01возможно про это уже писали, но мои мозгики изъедены изучением CSS, поетому сорки )) искать уже нет сил-
-
27.07.2007 в 12:27решением тут будет не использовать полупрозрачность для _больших_ блоков типа #wrapper или #page-c
-
-
27.07.2007 в 15:20-
-
28.07.2007 в 14:29#page-t .bordered{background: none; background: url('/userdir/2/9/7/4/297497/22654387.png') repeat bottom right !important; background-image: none; filter: progid
-
-
28.07.2007 в 14:32#page-t .bordered{background: url('/userdir/2/9/7/4/297497/22654387.png') repeat bottom right !important; background-image: none; filter: progid
вы скобку после имени файла закройте, когда код вставляете.
и, кстати, не забудьте про остальные пункты инструкции
-
-
28.07.2007 в 14:38-
-
28.07.2007 в 15:00-
-
28.07.2007 в 15:07#page-t .bordered {
background: none;
background: url('/userdir/2/9/7/4/297497/22654663.png') repeat bottom right !important;
background-image: none;
filter: progid
zoom: 1;
}
после:
#page-t .bordered{background: url('/userdir/2/9/7/4/297497/22654387.png') repeat bottom right !important; background-image: none; filter: progid
-
-
28.07.2007 в 15:33попробуйте в обоих местах вставлять в виде
/userdir/2/9/7/4/297497/22654663.png
-
-
28.07.2007 в 15:38#page-t .bordered{background: url('/userdir/2/9/7/4/297497/22654663.png') repeat bottom right !important; background-image: none; filter: progidXImageTransform.Microsoft.AlphaImageLoader(src='//static.diarybackup.space/), sizingMethod='scale'); zoom: 1; }
и ничего
-
-
28.07.2007 в 15:45-
-
28.07.2007 в 15:52- все вообще чудным образом испарилось.
-
-
28.07.2007 в 15:59-
-
28.07.2007 в 16:05-
-
28.07.2007 в 16:08-
-
28.07.2007 в 19:57div.menuSection, div.pageBar, #epigraph, .postInner, .calnd A:hover { TEXT-DECORATION: none; text-transform: none; border-bottom: dotted; border-width:1px; border-bottom-color: #ffffff;}
body{filter:alpha(opacity=80);-moz-opacity:0.80;-khtml-opacity:0.80;opacity:0.80;}
.left #wrapper{width:700px;margin: 0 0 0 -435px !important;padding:0 !important;position:relative;left:50%;//left:49.5%;}
.left #side{width:190px !important;margin:0 !important;}
.left #page-c{width:670px !important;padding:0 !important;}
ul {text-align: center; }
.bordered { border-style:dashed; }
.bordered { border-width:1px; border-style:dashed; }
.singlePost{ background: #000000; border-width:1px; border-color:#ffffff; border-style:dotted; padding:7px;}
-
-
04.08.2007 в 20:38ничего не помогает...
код:
#page-t .bordered { background: none; background: url('/userdir/5/0/8/9/508969/22181730.png') repeat bottom right !important; background-image: none; filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diarybackup.space/userdir/5/0/8/9/5089...', sizingMethod='scale'); zoom: 1; }
#page-t .bordered a, page-t .bordered input, textarea { position:relative; z-index: 2; }
#side .bordered { background: none; background: url('/userdir/5/0/8/9/508969/22181730.png') repeat bottom right !important; background-image: none; filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diarybackup.space/userdir/5/0/8/9/5089...', sizingMethod='scale'); zoom: 1; }
#side .bordered a, side .bordered input, textarea { position:relative; z-index: 2; }
-
-
04.08.2007 в 21:24-
-
04.08.2007 в 21:45-
-
06.08.2007 в 15:10-
-
06.08.2007 в 15:14... A {position..
а еще и
...LI A {position...