Зверь-чародей
Я удалил картинку 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); }
Спасибо за внимание
З.Ы. Еще раз кто-то запостит новой темой вопрос про прозрачность - поубиваю ))
!СЛАВА РОБОТАМ!
-
-
30.05.2007 в 23:30div.bordered { background: repeat bottom right !important; background-image: none; filter: progid
ЭТО ЧТО!?!?
а вот это делает полупрозрачные блоки:
#page-t .bordered {-moz-opacity:.45 !important;opacity:.45 !important; filter:alpha(opacity=45); zoom: 1;}
бегом сначала учиться(http://htmlbook.ru) потом вдумчиво читать инструкции.
-
-
31.05.2007 в 13:38клик
-
-
31.05.2007 в 13:51а) принципиальную разность вашего способа и моего, указанного вторым
б) преимущества способа, работающего на одном браузере, перед кроссбраузерным.
кстати спасибо, я теперь знаю, кому надо отрывать руки за распространиение синтакически неправильных кодов в сообществе
#page-t .bordered{background: url('/userdir/1/0/0/8/100872/19950127.png') repeat bottom right !
любой код написанный после этой дурацкой строчки работать НЕ БУДЕТ, поскольку вы даже скобку не закрыли. Я уже не говорю о таинственном восклицательном знаке в конце строки.
вам даже написали в комментах, что у людей из-за этого кода пробелемы, а вы всё равно его распространяете.
-
-
31.05.2007 в 14:03ну я-то код, как вы выразились, хотя бы распространяю..собственно, я пишу что работает у меня.
а вы кроме "всё не правильно, иди учись" ничего не пишите...а нет, пишите, строчке "иди учись" предшевствует страница восклицаний какие все придурки.
собственно и всё)
-
-
31.05.2007 в 14:06просмотрела.
строки #page-t .bordered{background: url('/userdir/1/0/0/8/100872/19950127.png') repeat bottom right ! у меня нет и впомине.
как-то криво вы смотрите
-
-
31.05.2007 в 14:15по поводу "иди учись"
я не буду повторять то, что написано в инструкции и не буду писать за других код.
если способ сложный, то новичку с ним делать нечего. я обычно указываю, где надо не просто копировать код, а еще и мозг включать.
-
-
31.05.2007 в 15:05нет у меня такой строки в окне оформления)))
вы со мной спорить будете?)
-
-
31.05.2007 в 15:12http://pay.diary.ru/~diaryCSS/?comm...78490#121654551
-
-
31.05.2007 в 15:49смотрите внимательно, от этого кода я давно отказалась и никому его не советую))
-
-
31.05.2007 в 16:14Если человек не догадывается что картинка должна быть из БИ, хотя в инструкции про это ясно написано, вы думаете он осилит все комментарии и сделает умные выводы, а не банально скопирует первый попавшийся код?
Кстати неужели это так сложно - пост поправить?
-
-
31.05.2007 в 16:24вот подождем человечка и посмотрим, осилит или нет)
не нужно много расписывать и возмущаться - дайте правильный код и вам спасибо скажут)
чем могла, помогла, удаляюсь)
-
-
15.06.2007 в 14:20а как убрать непрозрачность полос между постами? не знаю, как объяснить, глянь днев, не очень ведь смотрится((
-
-
15.06.2007 в 14:24Annahita
-
-
15.06.2007 в 14:36пасиба огромезное!
-
-
15.06.2007 в 18:29и посмотрела в нескольких версиях оперы, нигде не видно этой полупрозрачности..
-
-
15.06.2007 в 18:42а выделяться и не будет. это баг Internet Explorerа шестой версии. кстати уже полгода как 7й вышел.
-
-
15.06.2007 в 18:53-
-
20.06.2007 в 23:00#side .bordered {-moz-opacity:.45 !important;opacity:.45 !important; filter:alpha(opacity=45); }
у меня не идет! хелп!
-
-
20.06.2007 в 23:21-
-
21.06.2007 в 11:25-
-
21.06.2007 в 12:26-
-
21.06.2007 в 12:28а теперь читайте первый пункт инструкции про полупрозрачный фон:
1. Делаем полупрозрачный PNG в Фотопопе или другом редакторе, кладем себе в Библиотеку изображения.
В фотошопе так: создаем картинку 10 на 10 px c фоном Transparent, берем заливку, устанавливаем opacity в нужное количество процентов и заливаем нужным цветом. Сохранять в PNG (если просит уточнить - PNG-24)
-
-
21.06.2007 в 22:30-
-
08.07.2007 в 19:28где в фотошопе найти волшебное слово Transparent?
-
-
08.07.2007 в 19:48-
-
08.07.2007 в 20:40фон не полу-прозрачный,а прозрачный...
#side.bordered, #page-t .bordered { background: none; background: url('/userdir/2/1/7/8/217897/21390838.png) repeat bottom right !important; background-image: none; filter: progid
#side .bordered a, #side .bordered input, textarea { position:relative; z-index: 2; }
#page-t .bordered a, #page-t .bordered input, textarea { position:relative; z-index: 2; }
-
-
08.07.2007 в 22:03-
-
08.07.2007 в 22:31это съело мой моск...
поправила кавычки...проверила картинку...
поставила...
белым мне делает фон...
фон же записи черный и непрозрачный...
-
-
09.07.2007 в 05:57скрин
Может быть можно сделать фон записи и меню полупрозрачными,а все остальное (текст,фотографии,аватары...) чтобы было обычным? (Фотошопа,чтобы сделать полупрозрачный фон у меня нет.)
Помогите,пожалуйста.
-
-
09.07.2007 в 12:04никто не говорил что будет легко.
ESD увы в больнице я с мобильника и посмотреть не могу