Зверь-чародей
Я удалил картинку 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
;<br>zoom: 1; <br>}</i><br>Ссылка должна быть на СВОЮ картинку - ту, которую вы положили в БИ.<br>Она будет выглядеть приблизительно так: http: //static.diary.ru/userdir/9/3/1/2/93120/17332882.png<br>Посмотрите на код, посмотрите на вашу ссылку и вставьте по аналогии )<br><br><br><b>3. Для элементов, которым прописали полупрозрачноть, прописывам новое свойство ссылок</b><br>(не потеряйте <b>a</b> и <b>input</b>!):<br><font color=)
*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); }
Спасибо за внимание
З.Ы. Еще раз кто-то запостит новой темой вопрос про прозрачность - поубиваю ))
!СЛАВА РОБОТАМ!
#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; }
А в ИЕ всё равно не работает прозрачность. в Опере всё ог.
В чём беда?..)
zoom: 1; забыли
Это может быть погрешностью преобразований? И что делать?
+ ники пользователей, которые оставляют комменты смещены чуть ли не до центра экрана. что это всё?!...
в этот раз про
textarea
{
position:relative; z-index: 2;
}
кстати для IE гораздо лучше, хоть и сложнее, второй способ.
А второй вариант же не работает на фиксированном фоне. Так что лучше этот доработать).
про ники написано в инструкции.
в опере должно работать - гдегде а там полупрозрачный фон обычно проблем не вызывает. проблема может быть в остальном коде
textarea
{
position:relative; z-index: 2;
}
А Опера лагает.
Да, фиксация взята у Теха.
Попробую ещё поковырять. Спасибо большое ещё раз.
textarea
{
position:relative; z-index: 2;
}
А Опера лагает.
Да, фиксация взята у Теха.
Попробую ещё поковырять. Спасибо большое ещё раз.
возможно про это уже писали, но мои мозгики изъедены изучением CSS, поетому сорки )) искать уже нет силрешением тут будет не использовать полупрозрачность для _больших_ блоков типа #wrapper или #page-c
#page-t .bordered{background: none; background: url('/userdir/2/9/7/4/297497/22654387.png') repeat bottom right !important; background-image: none; filter: progid
#page-t .bordered{background: url('/userdir/2/9/7/4/297497/22654387.png') repeat bottom right !important; background-image: none; filter: progid
вы скобку после имени файла закройте, когда код вставляете.
и, кстати, не забудьте про остальные пункты инструкции
#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
попробуйте в обоих местах вставлять в виде
/userdir/2/9/7/4/297497/22654663.png
#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.diary.ru/), sizingMethod='scale'); zoom: 1; }
и ничего
- все вообще чудным образом испарилось.
div.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;}
ничего не помогает...
код:
#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.diary.ru/userdir/5/0/8/9/508969/22181730.png', 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.diary.ru/userdir/5/0/8/9/508969/22180750.png', sizingMethod='scale'); zoom: 1; }
#side .bordered a, side .bordered input, textarea { position:relative; z-index: 2; }
... A {position..
а еще и
...LI A {position...