Прочитайте, как обстоят дела у сайта Дневников и как вы можете помочь!
×
21:35 

Прозрачность, полупрозрачность - вся правда о них.

Зверь-чародей
Я удалил картинку 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*, напоминаю - в конце поста.


Полупрозрачный фон



Самое сложное. Увы. Включайте мозг )

СПОСОБ 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:DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/9/3/1/2/93120/17332882.png', sizingMethod='scale');
zoom: 1;
}

Ссылка должна быть на СВОЮ картинку - ту, которую вы положили в БИ.
Она будет выглядеть приблизительно так: http: //static.diary.ru/userdir/9/3/1/2/93120/17332882.png
Посмотрите на код, посмотрите на вашу ссылку и вставьте по аналогии )


3. Для элементов, которым прописали полупрозрачноть, прописывам новое свойство ссылок
(не потеряйте a и input!):
ЭТО ОФИГЕННО ВАЖНЫЙ ПУНКТ! Забудете - не будут работать ссылки в 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); }

Спасибо за внимание



З.Ы. Еще раз кто-то запостит новой темой вопрос про прозрачность - поубиваю ))
!СЛАВА РОБОТАМ!

@темы: фоновые картинки, основные блоки

Комментарии
2007-07-09 в 15:19 

Чайники приехали (:
#page-t .bordered {background: none;}
#page-t .bordered { background: url('/userdir/1/9/2/6/19264/21412622.png') repeat bottom right !important; background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/1/9/2/6/19264/21412622.png', sizingMethod='scale'); }
#page-t .bordered a, #page-t .bordered input { position:relative; z-index: 2; }

А в ИЕ всё равно не работает прозрачность. в Опере всё ог.
В чём беда?..)

2007-07-09 в 15:30 

Зверь-чародей
oice. код полностью напишите.
zoom: 1; забыли

2007-07-09 в 15:34 

oice.
Чайники приехали (:
Точно.Благодарю.!).

2007-07-09 в 15:49 

oice.
Чайники приехали (:
А сейчас У меня, когда пишу новый пост или редактиирую старый,в окне ничего не печатается. текст как есть, так его и не ищменить. МОжно тольо выделять.
Это может быть погрешностью преобразований? И что делать?

+ ники пользователей, которые оставляют комменты смещены чуть ли не до центра экрана. что это всё?!...

2007-07-09 в 16:04 

Трубчатый Кот
Зверь-чародей
oice. снова забилы
в этот раз про
textarea
{
position:relative; z-index: 2;
}

кстати для IE гораздо лучше, хоть и сложнее, второй способ.

2007-07-09 в 16:22 

oice.
Чайники приехали (:
В ИЕ всё отл. а Опере - не работает. Ничё не вписывается).

А второй вариант же не работает на фиксированном фоне. Так что лучше этот доработать).

2007-07-09 в 16:38 

Зверь-чародей
oice. кстати если вы пользуетесь кодом для дизайна фиксированной ширины от Tex то до конца вы код не выправите.
про ники написано в инструкции.
в опере должно работать - гдегде а там полупрозрачный фон обычно проблем не вызывает. проблема может быть в остальном коде

2007-07-09 в 16:47 

oice.
Чайники приехали (:
С никами всё стало нормально после
textarea
{
position:relative; z-index: 2;
}

А Опера лагает.
Да, фиксация взята у Теха.

Попробую ещё поковырять. Спасибо большое ещё раз.

2007-07-09 в 16:47 

oice.
Чайники приехали (:
С никами всё стало нормально после
textarea
{
position:relative; z-index: 2;
}

А Опера лагает.
Да, фиксация взята у Теха.

Попробую ещё поковырять. Спасибо большое ещё раз.

2007-07-26 в 22:01 

Хм. вопрос )) у меня все вышло замечательно, но теперь страница очень медленно прокручивается вверх/вниз. Можно как то избавится от этого косяка? возможно про это уже писали, но мои мозгики изъедены изучением CSS, поетому сорки )) искать уже нет сил

2007-07-27 в 12:27 

Трубчатый Кот
Зверь-чародей
gygyli нет. тормоза зависят от компа.
решением тут будет не использовать полупрозрачность для _больших_ блоков типа #wrapper или #page-c

2007-07-27 в 15:20 

Рёцке спс я уже это поняла, ибо глучит только в опере (на дневах я работаю в ней) а в мазиле все супер ))) но все равно спс )))

2007-07-28 в 14:29 

Ahh, look at all the lonely people
делала полупрозрачный фон по вашим наставлениям. вставила картинку в БИ и т.д. и т.п. но код не работает. фон исчезает вообще. помогите пожалуйста. мой код:

#page-t .bordered{background: none; background: url('/userdir/2/9/7/4/297497/22654387.png') repeat bottom right !important; background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/, sizingMethod='scale'); zoom: 1; }

2007-07-28 в 14:32 

Зверь-чародей
девочка=дурочка смотрите что у вас в коде написано:

#page-t .bordered{background: url('/userdir/2/9/7/4/297497/22654387.png') repeat bottom right !important; background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/, sizingMethod='scale'); zoom: 1; }

вы скобку после имени файла закройте, когда код вставляете.
и, кстати, не забудьте про остальные пункты инструкции

2007-07-28 в 14:38 

Ahh, look at all the lonely people
все равно не выходит... умоляю помогите... я уже два часа сижу и пытаюсь сделать... мозги уже расплавились...

2007-07-28 в 15:00 

Трубчатый Кот
Зверь-чародей
скопируйте _мой_ код заново, аккуратно замените названия файлов не удаляя кавычек, вставте сюда то, что собираетесь вставлять в дневник, втавьте в дневник и напишите сюда код, который вставился (после обновления странички настроек)

2007-07-28 в 15:07 

Ahh, look at all the lonely people
до:
#page-t .bordered {
background: none;
background: url('/userdir/2/9/7/4/297497/22654663.png') repeat bottom right !important;
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/2/9/7/4/297497/22654663.png', sizingMethod='scale');
zoom: 1;
}

после:
#page-t .bordered{background: url('/userdir/2/9/7/4/297497/22654387.png') repeat bottom right !important; background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/), sizingMethod='scale'); zoom: 1; }


2007-07-28 в 15:33 

Зверь-чародей
гм...
попробуйте в обоих местах вставлять в виде
/userdir/2/9/7/4/297497/22654663.png

2007-07-28 в 15:38 

Ahh, look at all the lonely people
я сделала так:
#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; }

и ничего

2007-07-28 в 15:45 

Трубчатый Кот
Зверь-чародей
девочка=дурочка я имел ввиду без //static.diary.ru/

2007-07-28 в 15:52 

Ahh, look at all the lonely people
#page-t .bordered{background: url('/userdir/2/9/7/4/297497/22654663.png') repeat bottom right !important; background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/userdir/2/9/7/4/297497/22654663.png'), sizingMethod='scale'); zoom: 1; }

- все вообще чудным образом испарилось.

2007-07-28 в 15:59 

Ahh, look at all the lonely people
сделала то же самое с главным меню и все получилось, а вот с основным блоком произошло нечто странное...

2007-07-28 в 16:05 

Зверь-чародей
девочка=дурочка уберите цвета записей из настроек оформления

2007-07-28 в 16:08 

Ahh, look at all the lonely people
фон записи становится прозрачным...

2007-07-28 в 19:57 

You're my new Achilles heel
люди, у меня вопрос. у меня полупрозрачный фон зеленоватого цвета. как сделать его голубоватым?.. в кодах мало что шарю, вот все мои:
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;}

2007-08-04 в 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.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; }

2007-08-04 в 21:24 

Зверь-чародей
ku_liss такое может быть если в ИЕ отключено активное содержимое. Попросите еще кого-нибудь посмотреть на их компе.

2007-08-04 в 21:45 

... чтобы потом не было мучительно больно за бесцельно прожитую боль
Рёцке: ничего не понимаю: я ничего не изменяла в коде, но в ие теперь стал блок записей полупрозрачным! а ссылки на "комментарии", "подписаться" и "добавить в цитатник" исчезли!

:-(

2007-08-06 в 15:10 

udara
а почему перестают работать ссылки Комментарии и Подписаться?

2007-08-06 в 15:14 

Трубчатый Кот
Зверь-чародей
чего?. возможно для меню стоит прописать не только
... A {position..
а еще и
...LI A {position...

Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:
 
РегистрацияЗабыли пароль?

@CSS — стилизация дневников

главная