17:37 

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

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

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

1. Сохранить эту картинку себе в библиотеку изображений
http://static.diary.ru/userdir/9/3/...20/17429427.png

2. Добавить код
читать дальше

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

Комментарии
2007-03-26 в 17:57 

My common sense is tingling
не раздрожает бледность ав и можно ил её убрать?

2007-03-26 в 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; }

2007-03-26 в 18:08 

My common sense is tingling
Рёцке, выделение жирным... мм... может я неправильно выразилась.. тень,к оторая на авах, а при наведении мыши она пропадает

2007-03-26 в 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; }



2007-03-26 в 18:21 

My common sense is tingling
Рёцке, спасибо большое за толковое объяснение)

2007-03-27 в 00:10 

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

2007-03-27 в 00:20 

My common sense is tingling
посмотрела.
ничего не вылазит вроде)

2007-03-27 в 00:34 

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

2007-03-27 в 02:56 

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

2007-03-27 в 23:01 

Your bunny wrote
Mr. Smith исправьте, в
padding: 4 на 0px;

2007-03-28 в 00:22 

Mr. Smith
Sunshine
konviki
ха, столько вариантов перепробовал, а до этой настройки не додумался)))
спасибо большое! получилось

2007-03-28 в 00:24 

Your bunny wrote
Mr. Smith =)

2007-04-09 в 06:38 

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

2007-04-09 в 14:25 

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

2007-04-09 в 14:29 

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

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

к .avatar img,.avatarNew img

2007-04-09 в 14:35 

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

Или у вас оно не нормально? Можете глянуть?

2007-04-09 в 14:39 

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

2007-04-09 в 14:52 

Анимешнеги со стажем качают японское порно с субтитрами...
Рёцке
У меня именно 7-ой :)

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

Спасибо за помощь.)

2007-04-09 в 15:25 

Fandi
Per Aspera ad Astra
Рамка появилась тени нет =( и так и эдак попробовала.
в чем проблема?
http://pay.diary.ru/~Fandi

2007-04-09 в 15:26 

Fandi
Per Aspera ad Astra
Рамка появилась тени нет =( и так и эдак попробовала.
в чем проблема?
http://pay.diary.ru/~Fandi

2007-04-09 в 15:29 

Зверь-чародей
Fandi вдумчиво перечитать первый пункт и последнюю строку инструкции

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

2007-04-09 в 15:42 

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

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

2007-04-22 в 20:45 

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

2007-04-23 в 14:07 

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



2007-04-23 в 15:21 

My common sense is tingling
Melodiana, ие- ужасть
в нём не сижу
так что хрен с ним)

2007-04-23 в 16:36 

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

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

то всё перестаёт съежать)

2007-04-29 в 16:26 

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

2007-04-29 в 17:08 

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

2007-06-22 в 22:24 

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

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

2007-06-28 в 17:32 

Вынес мозг себе - вынеси другому! ||| От ненависти до любви один шаг.
У меня тот же вопрос как у _Draco Malfoy_.
Помогите пожалуйста!

2007-06-28 в 17:43 

Зверь-чародей
_Draco Malfoy_ а что мешает поместить туда картинку с заранее нарисованной тенью?
Как поменять превью фото на свою картинку - писалось в сообществе. Пользуйтесь поиском.

2007-06-28 в 18:21 

Я римский император и я выше грамматиков
Рёцке, к сожалению, я не работаю с фотошопом, неужели это никак нельзя сделать кодом?

2007-06-28 в 18:23 

Зверь-чародей

2007-06-28 в 21:39 

Я римский император и я выше грамматиков
Рёцке, это вообще невозможно или вы не знаете?

2007-06-29 в 11:02 

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

2007-10-04 в 23:04 

утро\не\бодрит
в ie7 - работает!

2008-04-26 в 16:05 

Эльфийка, вампир, дракон... отаку, фанфикер, спойлерщик.. и просто кавайный идиот....
Рёцке Вопрос сильно не в тему, но как Вы сделали такую рамку вокруг записи и авы, как в избранном? А то видела уже, но всё сообщество облазила - не нашла(

2010-11-22 в 13:08 

Thomas [DELETED user]
а можно ли сделать тень ярче? а то у меня она еле видна(

2013-07-14 в 23:57 

Ксаксиксюльц
[Весь мир - большой толковый словарь, а я в нем - codex seraphinianus]
Трубчатый Кот, большое спасибо!!! :heart::heart::heart:

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

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

главная