Прочитайте, как обстоят дела у сайта Дневников и как вы можете помочь!
×
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-04-22 в 21:20 

а как называется блок, где вводится текст комментария?

2007-04-22 в 21:23 

BluGirl
#addCommentArea

2007-04-22 в 21:23 

Dark Rainfall спасибо!

2007-04-23 в 14:14 

Трубчатый Кот
Зверь-чародей
Dark Rainfall код в студию )

2007-04-24 в 11:16 

Рёцке

body.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:DXImageTransform.Microsoft.AlphaImageLoader(src='/userdir/4/6/3/4/46348/17576406.png', sizingMethod='scale'); font-size:90%}
#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;}

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

или комбинациями из них

получиться - отпишитесь
не получиться - откройте дайрь я в онлайне поэкспериментирую.

2007-04-24 в 14:26 

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

я открыл вам дневник.
огромное спасибо за помощь.




2007-04-24 в 19:27 

Portly Hobbit
вдогонку к комменту:
решил больше не связываться с полупрозрачностью для шестого эксплорера.
те, кто не решается сменить 6 эксплорер - это их проблемы, а не мои :)



2007-04-24 в 19:33 

Зверь-чародей
Dark Rainfall прозрачность для шестого IE лучше сделать вторым указанным в статье способом.
ЗЫ всё равно закрыто.

2007-04-24 в 19:46 

Зверь-чародей
Кстати вот так у меня работает
#page-c div {position:relative; z-index: 2;}
#page-c div div{ position: normal;}

2007-04-27 в 07:55 

Your Insomnia
Love the enemy, my love is thee enemy. They say they don't want fame, but they get famous when we fcuk
я извеняюсь, что опять поднимаю эту тему...но я делала полупрозрачность в опере и все нормально смотрелось. но когда я заглянула через эксплорер - просто ужаснулась. прозрачности нет, ссылки исчезли а когда захожу в избранные ни видно не одной записи. что можно сделать? я пыталась почитать тут и понять, но гм...что-то у меня не очень получилось)

2007-04-27 в 12:46 

Зверь-чародей
Your Sickness дневник закрыт -> не помогу.
что за дурацкая привычка просить о помощи и не показывать ЧТО ИМЕННО не работает. Я не дайри админ - как я должен увидеть код?

2007-04-27 в 21:25 

Your Insomnia
Love the enemy, my love is thee enemy. They say they don't want fame, but they get famous when we fcuk
Рёцке как-нибудь)) use your magic)

вот. открыла.

2007-05-06 в 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:DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/4/0/4/4/404484/19025822.png', sizingMethod='scale'); }
#side .menuSection a, #side .menuSection input { position:relative; z-index: 2; }
и всё ОК.
тупо заменяю #side .menuSection на #page-t .bordered и ничего не выходит. За что? :weep3:

2007-05-07 в 02:08 

а как шрифт поменять?
я сделала полупрозрачное меню
у меня был шрифт - Arial
сейчас другое

поможете? )

заранее спасибо

2007-05-08 в 01:26 

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

ИЭ ничего не кажет. :bat2:

2007-05-08 в 09:53 

Трубчатый Кот
Зверь-чародей
Эраэти Масаёши
1. #page-t div.bordered
2. и дописать к полупрозрачности
.....sizingMethod='scale'); zoom:1;}

2007-05-09 в 18:13 

Рёцке Спасибо вам большое)):white:

2007-05-19 в 22:05 

правды нет, есть мнения
спасибо огроменное!
правда после всех коррекций днев стал страшно тормозить)

2007-05-19 в 23:53 

правды нет, есть мнения
ребят, я понять не могу - многие не видят текст под полупрозрачным фоном. я подозреваю, что они его видят совсем прозрачным.
а как вы видите bulut?

2007-05-20 в 00:20 

Зверь-чародей
Наверное это оттого, что вы не читали мануал вдумчиво.
Прочитайте отличие ПОЛУПРОЗРАЧНОСТИ и ПОЛУПРОЗРАЧНОГО ФОНА и выполните НУЖНЫЕ инструкции )

2007-05-20 в 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;} - полупрозрачность блока текста

из эксплорера видят вот такое:

а барышня из Файрфокса видит вот такое:

подозреваю, что Опера видит так же прозрачно)

что же делать? в чем ошибка?

2007-05-20 в 02:46 

правды нет, есть мнения
вроде поняла)
прошу подтверждения - видно текст на страничке или он тоже пролупрозрачный как и фон?)
код вставила такой:
#page-t .bordered{background: url('/userdir/1/0/0/8/100872/19950127.png') repeat bottom right !

2007-05-20 в 12:36 

Зверь-чародей
bulut
1.
#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 !
чего-то тут не хватает.

2007-05-20 в 13:10 

правды нет, есть мнения
Рёцке
а кто ж его знает зачем)) как нашла, так и написала)
а код:
#page-t .bordered{background: url('/userdir/1/0/0/8/100872/19950127.png') repeat bottom right !
работает)))
вот только у некоторых тянется название темы вместе с прокруткой.
у меня же всё отлично видно

2007-05-20 в 13:36 

Трубчатый Кот
Зверь-чародей
*вшоке*
как он работает если он синтаксически НЕВЕРЕН?
вы где его взяли вообще?

2007-05-20 в 14:10 

правды нет, есть мнения
Рёцке
где - не помню. где-то на этом дневе.
а как правильно? у меня работает :D

2007-05-20 в 14:43 

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

эй! вы ВООБЩЕ мануал видите?
что там написано а что у вас?

если пишите не по мануалу, не жалуйтесь что не работает, не жалуйтесь что не работают ДРУГИЕ коды из-за синтаксических ошибок и не удивляейтесь вопросам ваших ПЧ о глюках.

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

2007-05-20 в 15:11 

правды нет, есть мнения
Рёцке спасибо, сама разберусь)

2007-05-30 в 21:00 

.snupko
Приходи играть, хозяйкин свитер обшерстить, Книжку растерзать, об кресло когти поточить. Приходи ко мне из мира странных, синих снов. Плюнь на предрасудки – разбуди своих котов..
я сделала полупрозрачный фон записи и меню, но тут же возникла проблема о том, как
сделать непрозрачными текст и аватарки на фоне записи. С аватаркой в меню я вроде справилась, а вот с блоком записей...
помогите, пожалуйста.

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

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

главная