Зверь-чародей
Я удалил картинку 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); }
Спасибо за внимание
З.Ы. Еще раз кто-то запостит новой темой вопрос про прозрачность - поубиваю ))
!СЛАВА РОБОТАМ!
-
-
22.04.2007 в 21:20-
-
22.04.2007 в 21:23#addCommentArea
-
-
22.04.2007 в 21:23-
-
23.04.2007 в 14:14-
-
24.04.2007 в 11:16body.left { padding-left: 10px !important; padding-left: 300px; background-repeat:no-repeat; background-position: 50% 100%; background-attachment:fixed}
.left #wrapper { margin:0 !important; margin-left:-290px; padding-left:290px; }
.left #side { width:280px; margin-left:-290px !important; margin-left:-145px; margin-right:-280px; }
.left #page-c {background: none;background: url('/userdir/4/6/3/4/46348/18625434.png') !important; repeat bottom right !important;background-image: none; filter:progid
#page-c A, #page-c input { position:relative; z-index: 2;}
#globalLinks {display:none}
#thisDiaryInfo {background: url('/userdir/4/6/3/4/46348/15919354.jpg')}
#commentsArea .postContent{background: #D0BD98 !important; border: 1px solid #C7E3F0; padding:0px 0px 0px 130px !important;}
#commentsArea{background-image: url('/userdir/4/6/3/4/46348/15931394.jpg');padding:0px 0px 0px 0px !important; }
.menuSection {background-image: url('/userdir/4/6/3/4/46348/17579226.png')}
.menuSection.lastSection{background-image:url('/userdir/4/6/3/4/46348/15879562.jpg');background-repeat: no-repeat;}
#lastComments ul li a{color:#ffffff}
#lastComments ul li a:hover{color:#000000; text-decoration:none;}
#lastComments ul li {color:#ffffff}
.postLinksBackg {background-image:url('/userdir/4/6/3/4/46348/15917798.jpg');!important;display:block !important; background:#border-top: 1px dotted #ddd; border-bottom: 1px dotted #ddd; margin-top: 10px !important; padding:10px 0 !important;}
.postLinksBackg a:link {color:#ffffff;}
; a:hover {color:#ffffff}
; a:visited {color:#ffffff}
#addCommentArea { padding-bottom:0;background-image:url('/userdir/4/6/3/4/46348/15919354.jpg')}
#addCommentArea a:link {color:#ffffff; position:relative; z-index: 2;}
; a:hover {color:#ffffff}
; a:visited {color:#00ff00}
.authorName { float:none;}
-
-
24.04.2007 в 14:06; a:hover {color:#ffffff}
; a:visited {color:#ffffff}
исправлять пробуем такими способами:
.left #page-c div {zoom:1;}
.left #page-c div {z-index:2;}
.left #page-c div {position:relative;}
или комбинациями из них
получиться - отпишитесь
не получиться - откройте дайрь я в онлайне поэкспериментирую.
-
-
24.04.2007 в 14:26увы, пока ничего не получилось с кодом.
с ним съезжается в правую сторону текст постов и комментариев.
я открыл вам дневник.
огромное спасибо за помощь.
-
-
24.04.2007 в 19:27решил больше не связываться с полупрозрачностью для шестого эксплорера.
те, кто не решается сменить 6 эксплорер - это их проблемы, а не мои
-
-
24.04.2007 в 19:33ЗЫ всё равно закрыто.
-
-
24.04.2007 в 19:46#page-c div {position:relative; z-index: 2;}
#page-c div div{ position: normal;}
-
-
27.04.2007 в 07:55-
-
27.04.2007 в 12:46что за дурацкая привычка просить о помощи и не показывать ЧТО ИМЕННО не работает. Я не дайри админ - как я должен увидеть код?
-
-
27.04.2007 в 21:25вот. открыла.
-
-
06.05.2007 в 19:38Пишу
#side .menuSection { background: none; background: url('/userdir/4/0/4/4/404484/19025822.png') repeat bottom right !important; background-image: none; filter: progid
#side .menuSection a, #side .menuSection input { position:relative; z-index: 2; }
и всё ОК.
тупо заменяю #side .menuSection на #page-t .bordered и ничего не выходит. За что?
-
-
07.05.2007 в 02:08я сделала полупрозрачное меню
у меня был шрифт - Arial
сейчас другое
поможете? )
заранее спасибо
-
-
08.05.2007 в 01:26ЭТО ОФИГЕННО ВАЖНЫЙ ПУНКТ! Забудете - не будут работать ссылки в Internet Explorer
*element* a, *element* input
{
position:relative; z-index: 2;
}
Вот про это не поняла. Значит, фон записей сделала картинкой полупрозрачной, добавила вот так:
#side .bordered a, #side .bordered input { position:relative; z-index: 2; }
#page-t .bordered a, #page-t .bordered input { position:relative; z-index: 2; }
ИЭ ничего не кажет.
-
-
08.05.2007 в 09:531. #page-t div.bordered
2. и дописать к полупрозрачности
.....sizingMethod='scale'); zoom:1;}
-
-
09.05.2007 в 18:13-
-
19.05.2007 в 22:05правда после всех коррекций днев стал страшно тормозить)
-
-
19.05.2007 в 23:53а как вы видите bulut?
-
-
20.05.2007 в 00:20Прочитайте отличие ПОЛУПРОЗРАЧНОСТИ и ПОЛУПРОЗРАЧНОГО ФОНА и выполните НУЖНЫЕ инструкции )
-
-
20.05.2007 в 01:31я очень вдумчиво читала) и перечитывала)
код прописала такой:
#side .bordered {-moz-opacity:.45 !important;opacity:.45 !important; filter:alpha(opacity=96);zoom:0;} - полупрозрачность меню
#page-t .bordered {-moz-opacity:.45 !important;opacity:.45 !important; filter:alpha(opacity=96);zoom:0;} - полупрозрачность блока текста
из эксплорера видят вот такое:
а барышня из Файрфокса видит вот такое:
подозреваю, что Опера видит так же прозрачно)
что же делать? в чем ошибка?
-
-
20.05.2007 в 02:46прошу подтверждения - видно текст на страничке или он тоже пролупрозрачный как и фон?)
код вставила такой:
#page-t .bordered{background: url('/userdir/1/0/0/8/100872/19950127.png') repeat bottom right !
-
-
20.05.2007 в 12:361.
#side .bordered {-moz-opacity:.45 !important;opacity:.45 !important; filter:alpha(opacity=96);zoom:0;}
#page-t .bordered {-moz-opacity:.45 !important;opacity:.45 !important; filter:alpha(opacity=96);zoom:0;}
этот код делает полупрозрачность ВСЕГО блока. вместе с текстом.
причем в IE на 4% а в Опере и Фоксе на 55% (сами вглядитеть - зачем у вас там разные значения?)
и почему zoom:0?
2.
#page-t .bordered{background: url('/userdir/1/0/0/8/100872/19950127.png') repeat bottom right !
чего-то тут не хватает.
-
-
20.05.2007 в 13:10а кто ж его знает зачем)) как нашла, так и написала)
а код:
#page-t .bordered{background: url('/userdir/1/0/0/8/100872/19950127.png') repeat bottom right !
работает)))
вот только у некоторых тянется название темы вместе с прокруткой.
у меня же всё отлично видно
-
-
20.05.2007 в 13:36как он работает если он синтаксически НЕВЕРЕН?
вы где его взяли вообще?
-
-
20.05.2007 в 14:10где - не помню. где-то на этом дневе.
а как правильно? у меня работает
-
-
20.05.2007 в 14:43но у меня не работает ни полупрозрачный фон, ни картинка комментариев.
эй! вы ВООБЩЕ мануал видите?
что там написано а что у вас?
если пишите не по мануалу, не жалуйтесь что не работает, не жалуйтесь что не работают ДРУГИЕ коды из-за синтаксических ошибок и не удивляейтесь вопросам ваших ПЧ о глюках.
я не буду коментировать ваши фантазии. делайте по мануалу, тогда поговорим.
-
-
20.05.2007 в 15:11-
-
30.05.2007 в 21:00сделать непрозрачными текст и аватарки на фоне записи. С аватаркой в меню я вроде справилась, а вот с блоком записей...
помогите, пожалуйста.