понедельник, 26 марта 2007
17:37

Тень под аватарами.

все записи пользователя в сообществе Трубчатый Кот
Зверь-чародей
Делаем тень под аватарками как у меня



Не работает в IE.



1. Сохранить эту картинку себе в библиотеку изображений

http://static.diary.ru/userdir/9/3/...20/17429427.png



2. Добавить код

читать дальше

@темы: основные блоки

URL
Комментарии
26.03.2007 в 17:57

.сестра хаос.
Если хочешь сказать мне слово, попытайся использовать рот
не раздрожает бледность ав и можно ил её убрать?
URL
26.03.2007 в 18:07

Трубчатый Кот
Зверь-чародей
.сестра хаос. убрать выделенное жирным )





.avatar img,.avatarNew img { display: block; position: relative; background-color: #fff; border: 1px solid #a9a9a9; margin: -6px 6px 6px -6px; padding: 4px; filter:alpha(opacity=100) !important;-moz-opacity:.75 !important;opacity:.75 !important;}





.avatar img:hover,.avatarNew img:hover { display: block; position: relative; background-color: #fffff0; border: 1px solid #898989; margin: -6px 6px 6px -6px; padding: 4px; filter:alpha(opacity=100);-moz-opacity:1.0 !important;opacity:1.0 !important; }


URL
26.03.2007 в 18:08

.сестра хаос.
Если хочешь сказать мне слово, попытайся использовать рот
Рёцке, выделение жирным... мм... может я неправильно выразилась.. тень,к оторая на авах, а при наведении мыши она пропадает
URL
26.03.2007 в 18:19

Трубчатый Кот
Зверь-чародей
.сестра хаос. Выделение жирным делает эффект "подсвечивания" аватарок. По умолчанию аватарка на 25% прозрачная. При наведении мышью восстанавливается 100% непрозрачность аватарки. Если этот эффект надо убрать, то надо убрать соответствующие строчки.

т.е. вот так:



.singleComment .postContent { padding-left:140px; }

.singleComment .postInner { margin-left:-150px; padding-left:150px; }

.singleComment .commentAuthor { float:left; width:130px; overflow:visible; margin-left:-140px !important; margin-left:-65px; max-width: 130px; }

.commentAuthor .avatar { margin:0px 0 10px; width:auto; max-width: 140px; }





.avatar, .avatarNew{ float:left; background: url('/userdir/9/3/1/2/93120/17429427.png') no-repeat bottom right !important; background: no-repeat bottom right; margin: 10px 0 0px 10px !important; margin: 10px 0 0px 5px;}





.avatar img,.avatarNew img { display: block; position: relative; background-color: #fff; border: 1px solid #a9a9a9; margin: -6px 6px 6px -6px; padding: 4px;}





.avatar img:hover,.avatarNew img:hover { display: block; position: relative; background-color: #fffff0; border: 1px solid #898989; margin: -6px 6px 6px -6px; padding: 4px; }



URL
26.03.2007 в 18:21

.сестра хаос.
Если хочешь сказать мне слово, попытайся использовать рот
Рёцке, спасибо большое за толковое объяснение)
URL
27.03.2007 в 00:10

Sapphire Nymph
Я не злопамятная, я зло сделаю и забуду!
вставила код каторый без "подсвечивания" аватар и теперь текст из блока записи вылазит.

не подскажите как поченить?:-(
URL
27.03.2007 в 00:20

.сестра хаос.
Если хочешь сказать мне слово, попытайся использовать рот
посмотрела.

ничего не вылазит вроде)
URL
27.03.2007 в 00:34

Sapphire Nymph
Я не злопамятная, я зло сделаю и забуду!
.сестра хаос. ну это послетого как я удалила код, ибо читать невазможно было :gigi:
URL
27.03.2007 в 02:56

Mr. Smith
Sunshine
а как убрать белую рамку вокруг аватара при использовании этого трюка?
URL
27.03.2007 в 23:01

konviki
Your bunny wrote
Mr. Smith исправьте, в

padding: 4 на 0px;
URL
28.03.2007 в 00:22

Mr. Smith
Sunshine
konviki

ха, столько вариантов перепробовал, а до этой настройки не додумался)))

спасибо большое! получилось
URL
28.03.2007 в 00:24

konviki
Your bunny wrote
Mr. Smith =)
URL
09.04.2007 в 06:38

FriZa
Анимешнеги со стажем качают японское порно с субтитрами...
Вобщем, сделать тень под аватарами у меня вышло на ура, только блок с комментом выехал в обе стороны. :-(

Слева ещё смогла его подбить, а справа так и торчит.

Как можно его подправить?
URL
09.04.2007 в 14:25

FriZa
Анимешнеги со стажем качают японское порно с субтитрами...
Уже разобралась.

Надо было прописать границы справа.
URL
09.04.2007 в 14:29

Трубчатый Кот
Зверь-чародей
FriZa кстати для того, чтобы работало в IE, добавьте



FILTER: progid:DXImageTransform.Microsoft.Shadow(color='gray', Direction=150, Strength=4);



к .avatar img,.avatarNew img

URL
09.04.2007 в 14:35

FriZa
Анимешнеги со стажем качают японское порно с субтитрами...
Рёцке

У меня и без того в ИЕ оно нормально отображается, я бы сказала, даже лучше, чем в ФФ :upset:



Или у вас оно не нормально? Можете глянуть?
URL
09.04.2007 в 14:39

Трубчатый Кот
Зверь-чародей
FriZa если у вас седьмой IE - в нем будет всё хорошо

в IE6 теней нет )

URL
09.04.2007 в 14:52

FriZa
Анимешнеги со стажем качают японское порно с субтитрами...
Рёцке

У меня именно 7-ой :)



Прописала. Надеюсь теперь оно будет правильно отображаться =)



Спасибо за помощь.)
URL
09.04.2007 в 15:25

Fandi
Per Aspera ad Astra
Рамка появилась тени нет =( и так и эдак попробовала.

в чем проблема?

http://pay.diary.ru/~Fandi
URL
09.04.2007 в 15:26

Fandi
Per Aspera ad Astra
Рамка появилась тени нет =( и так и эдак попробовала.

в чем проблема?

http://pay.diary.ru/~Fandi
URL
09.04.2007 в 15:29

Трубчатый Кот
Зверь-чародей
Fandi вдумчиво перечитать первый пункт и последнюю строку инструкции
URL
09.04.2007 в 15:37

Fandi
Per Aspera ad Astra
поправила...эффект тот же.

Код:



.singleComment .postContent { padding-left:140px; }

.singleComment .postInner { margin-left:-150px; padding-left:150px; }

.singleComment .commentAuthor { float:left; width:130px; overflow:visible; margin-left:-140px !important; margin-left:-65px; max-width: 130px; }

.commentAuthor .avatar { margin:0px 0 10px; width:auto; max-width: 140px; }

.avatar, .avatarNew{ float:left; background: url('/userdir/8/2/3/4/82341/18103934.png') no-repeat bottom right !important; background: no-repeat bottom right; margin: 10px 0 0px 10px !important; margin: 10px 0 0px 5px;}

.avatar img,.avatarNew img { display: block; position: relative; background-color: #fff; border: 1px solid #a9a9a9; margin: -6px 6px 6px -6px; padding: 4px; filter:alpha(opacity=100) !important;-moz-opacity:.75 !important;opacity:.75 !important;}

.avatar img:hover,.avatarNew img:hover { display: block; position: relative; background-color: #fffff0; border: 1px solid #898989; margin: -6px 6px 6px -6px; padding: 4px; filter:alpha(opacity=100);-moz-opacity:1.0 !important;opacity:1.0 !important; }

URL
09.04.2007 в 15:42

Трубчатый Кот
Зверь-чародей
Fandi всё работает.



Если у вас - нет, то перечитываем вторую строчку и пытаемся делать как тут http://pay.diary.ru/~diaryCSS/?comm...postid=26469571

URL
22.04.2007 в 20:45

Melodiana
одеявол
В ФФ всё прекрасно получается, а в IE - вот такая фигня. У .сестра хаос., кстати, так же. Что делать? :apstenu:
URL
23.04.2007 в 14:07

Трубчатый Кот
Зверь-чародей
Melodiana регулировать отступы специально для IE. Конкретно сказать не могу - сильно от остального кода зависит.





URL
23.04.2007 в 15:21

.сестра хаос.
Если хочешь сказать мне слово, попытайся использовать рот
Melodiana, ие- ужасть

в нём не сижу

так что хрен с ним)
URL
23.04.2007 в 16:36

Melodiana
одеявол
Я попробовала поубирать-подобавлять строчки, получилось, что если добавить к указанному в посте коду



.commentAuthor .avatar, .commentAuthor .avatarNew{ width:auto !important;}



то всё перестаёт съежать)
URL
29.04.2007 в 16:26

Fandi
Per Aspera ad Astra
В ИЕ все отображается хорошо а в FF почему то тень уезжает куда-то влево и подписи под аватарами частично пишутся иногда сразу после аватара =(
URL
29.04.2007 в 17:08

Fandi
Per Aspera ad Astra
Со всем разобралась только почему-то на больших аватарах тень не доезжает до места назначения справа(только полоска внизу) и подпись под аватаром в FF поставить на место только с помощью .sign в ИЕ она из-за этого уезжает еще правее =(
URL
22.06.2007 в 22:24

Himai
Я римский император и я выше грамматиков
можно сделать тоже самое с главным авом, тем что находится в меню?



если вопрос был - извиняюсь.
URL