Зверь-чародей
Я удалил картинку 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 div.bordered { background: none; background: url('/userdir/9/5/9/3/95937/22962703.png') repeat bottom right !important; background-image: none; filter: progid
#page-t div.bordered a, #page-t div.bordered, textarea { position:relative; z-index: 2; }
а это
#page-t div.bordered a, #page-t div.bordered, textarea { position:relative; z-index: 2; }
что?
и для меню прописано:
#side .bordered a, #side .bordered input, textarea { position:relative; z-index: 2; }
а это LI A куда пиать нужно?
#page-t div.bordered li a, #page-t div.bordered, textarea { position:relative; z-index: 2; } ?
и..для себя чтобы знать "А" - это ссылки, да? или я что-то путаю?
A - ссылки
LI - пункт списка
LI A - ссылки внутри элемента списка )
А вот это например означает, что на основной странице(#page-t) есть блоки постов(div.bordered) на которых есть списки с пунктами(LI) в которых есть ссылки(A)
а "подписаться" и есть ссылка в элементе списка.
page-t div.bordered li a, #page-t div.bordered, textarea { position:relative; z-index: 2; }
должно работать?
или все не так просто?)
а ели не будет, то наверное надо непосредственно ссылкам, которые не работают прописать то же самое.
а отдельно Комментарии Подписаться и Цитатник это с помощью
#comments , #subscribe и #addToQuote lastLink ?
а вообще спасибо большое за помощь)
Я удалил картинку http: //static.diary.ru/userdir/9/3/1/2/93120/17332882.png из своей БИа как теперь делать полупрозрачный без такой картинки?
Я удалил картинку http: //static.diary.ru/userdir/9/3/1/2/93120/17332882.png из своей БИ, чтобы больше никому в голову не пришло использовать инстукцию про полупрозрачный фон, не дочитав ее до конца!
а можно полюбопытствовать: что было на картинке?
а по вашей замечательной инструкции у меня получился отличный полупрозрачный фон
извеняюсь, что не совсем в тему.
Это можно как-то исправить?
Полупрозрачность - вот это когда полупрозрачно все - фон, текст и картинки.
Полупрозрачный фон - это когда фон, не поверите, полупрозрачный )
Это можно как-то исправить?
да. не путать полупрозрачность и полупрозрачный фон. в инструкции расписанно.
Код теперешний (он же был до того, как попробовала ввести новый):
body { background-attachment:fixed; }
#side .bordered {border: none;}
#side .menuSection {border: 3px double #336633;}
#page-c .countFirstDate,.countSecondDate {border: 3px double #336633;}
#page-c .bordered {border: none;}
#page-c .singlePost {border: none;}
#page-c .singlePost { background: none; border: 3px double #336633;}
#side {-moz-opacity:.60 !important;opacity:.60 !important; filter:alpha(opacity=60);}
#page-t .bordered {-moz-opacity:.60 !important;opacity:.60 !important; filter:alpha(opacity=60);}
Пыталась ввести такой:
body { background-attachment:fixed; }
#side .bordered {border: none;}
#side .menuSection {border: 3px double #336633;}
#page-c .countFirstDate,.countSecondDate {border: 3px double #336633;}
#page-c .bordered {border: none;}
#page-c .singlePost {border: none;}
#page-c .singlePost { background: none; border: 3px double #336633;}
#side, #page-c
{
background: none;
background: url('/userdir/8/1/6/4/81646/24083094.png') repeat bottom right !important;
background-image: none;
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/8/1/6/4/81646/24083094.png', sizingMethod='scale');
zoom: 1;
}
.paragraph
{
background: none;
background: url('/userdir/8/1/6/4/81646/24083230.png') repeat bottom right !important;
background-image: none;
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/8/1/6/4/81646/24083230.png', sizingMethod='scale');
zoom: 1;
}
Моря стали местами пропадать (то есть, жмешь на "читать дальше", и иногда открывается пустое место, текста нет, а иногда - все нормально).
У меня Мозилла Файрфокс 2.0.0.8
Прописала новые свойства ссылок для указанных элементов - та же картина. Затерла все нафик) Но хочется узнать, в чем моя ошибка) Заранее спасибо)
Если этого мало - прозрачность можно форсировать так:
*element* {background: transparent;}
лучше так:
*element* {background: inherit;}
кстати opacity будет единственным правильным свойством css3. его уже сейчас подхватывает опера и фф.
Спасибо за пост!
textarea
{
position:relative; z-index: 2;
}
то ники появляются, но перестают работать ссылки.
помогите, пожалуйста))
привожу в пример картинку, потому что дайры в код смайлы впихивают в посте.
когда я его вставляю, в опере и мозиле фон записей и меню становится прозрачным, вместо полупрозрачного. в эксплорере оно как положенно полупрозрачное, но в меню ни одна ссылка не работает. можно как-то это исправить?
#page-t.bordered{ background: none; background: url('/userdir/1/4/8/8/148850/25569062.png') repeat bottom right !important; background-image: none; filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/1/4/8/8/148850/25569062.png', sizingMethod='scale'); zoom: 1; }
#page-t.bordered a, #page-t.bordered input, textarea { .position:relative; z-index: 2; }
????
но тогда идёт полная прозрачность..
#page-t.bordered { background: none; background: url('/userdir/1/4/8/8/148850/25569062.png') repeat bottom right !important; background-image: none; filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/1/4/8/8/148850/25569062.png', sizingMethod='scale'); zoom: 1; }
#page-t.bordered a, #page-t.bordered input, textarea { .position:relative; z-index: 2; }
между бордерд и { бэкграунд я поставила пробел. вообще часто такое... пробуй ставить и убирать пробелы между текстом и скобочками, помогает) например, ещё можно изменить zoom: 1; } на zoom: 1;}