среда, 03 марта 2010
19:02

аватары

все записи пользователя в сообществе cerisestatic
your ego is not your amigo
1. diarycss.diary.ru/p76576577.htm - это видела, но интересует, как сделать, чтобы при наведении аватар возвращался к оригинальному размеру.
2. как сделать аватар полупрозрачным в обычном состоянии, а при наведении так, чтоб он отображался нормально, обычно, без полупрозрачности?

@темы: дневники, diaryCSS, платный сервис, Дизайн

URL
Комментарии
03.03.2010 в 19:27

Feleks
пусто.
mint king, про задание полупрозрачности есть в эпиграфе.
а изменение при наведение делается при помощи атрибута :hover
например, .avatar img:hover {свойства}
в свойствах задаете оригинальный размер и прозрачность 1.
URL
03.03.2010 в 19:58

cerisestatic
your ego is not your amigo
.avatar img:hover {свойства} в свойствах задаете оригинальный размер и прозрачность 1.
можете пример привести, я не знаю, как свойства прописывать (оригинальный размер, н-р), в css плохо разбираюсь, пожалуйста

про задание полупрозрачности есть в эпиграфе.
т.е.
#page-c .avatar {-moz-opacity:.50 !important;opacity:.50 !important; filter:alpha(opacity=50);} ?
URL
03.03.2010 в 20:12

Feleks
пусто.
только .avatar img {-moz-opacity:.50 !important;opacity:.50 !important; filter:alpha(opacity=50);}
при навидении будет так
.avatar img:hover {-moz-opacity:.1.0 !important;opacity:.1.0 !important; filter:alpha(opacity=100);}

ширина прописывается через width
например width:100px
URL
03.03.2010 в 20:37

cerisestatic
your ego is not your amigo
Feleks
спасибо
URL
05.03.2010 в 19:28

Orm-Dian
писатель атмосфер
а можно сделать так, чтобы это свойство относилось ко всем картинкам, а не только к аватарам?
заранее спасибо)
URL
05.03.2010 в 19:29

Aloria
Не сахар
Orm-Dian, пропишите для тега img.
URL
05.03.2010 в 19:29

cerisestatic
your ego is not your amigo
Orm-Dian, лично я не знаю, вам, наверное, лучше отдельным постом задать вопрос)
URL
05.03.2010 в 20:15

Orm-Dian
писатель атмосфер
спасибо, задам.
URL
05.03.2010 в 20:35

Orm-Dian
писатель атмосфер
Aloria - э, пардон. не заметила. а как прописать?
img:hover {opacity: 1.0} - так пробовала, но не работает. а по-другому я не знаю как.
URL
05.03.2010 в 20:38

Aloria
Не сахар
Orm-Dian, надо так же, как написали выше, только для тега img вообще, а не для тех картинок, которым прописан класс .avatar, т.е.:

img {-moz-opacity:.50 !important;opacity:.50 !important; filter:alpha(opacity=50);}
img:hover {-moz-opacity:.1.0 !important;opacity:.1.0 !important; filter:alpha(opacity=100);}
URL
05.03.2010 в 20:43

Orm-Dian
писатель атмосфер
Aloria - скопировала этот код, но почему-то не работает((
URL
05.03.2010 в 20:44

Aloria
Не сахар
Orm-Dian, нажмите Ctrl+F5.
Первая часть точно работает, картинки становятся полупрозрачными. Но вот при наведении ничего не меняется, почему - хз, пытаюсь понять.
URL
05.03.2010 в 20:47

Orm-Dian
писатель атмосфер
да, первая часть работает. а вот наведение ничего не дает.
может это вообще невозможно?
URL
05.03.2010 в 20:50

Aloria
Не сахар
Orm-Dian, скажем так: сделать при наведении картинку непрозрачной невозможно с помощью этого кода, судя по всему. Можно сделать наоборот: чтоб при наведении она становилась полупрозрачной, а в обычном состоянии - обычной.
URL
05.03.2010 в 20:53

Aloria
Не сахар
В ИЕ работает, к слову, и тот код, что выше. А вот в ФФ и Опере - нет.
URL
05.03.2010 в 20:58

Orm-Dian
писатель атмосфер
Aloria у меня как раз ФФ. просто у меня прозрачность задана всему содержанию поста, а хочется, чтобы картинки можно было просматривать в обычном виде.
ну ладно, буду еще искать варианты.
URL
05.03.2010 в 21:18

Aloria
Не сахар
Orm-Dian, ээээ... Задайте полупрозрачный фон своим постам (сделайте полупрозрачную картинку в фотошопе и сохраните в png), тогда полупрозрачность будет распространяться только на фон, но не затронет шрифты и фото.
URL
05.03.2010 в 21:29

Orm-Dian
писатель атмосфер
ну, как вариант. может попробую, спасибо)
URL
05.03.2010 в 21:56

Orm-Dian
писатель атмосфер
написала вот такой код, он работает. правда, прозрачность исчезает не до конца и затрагивает не только изображения, но и остальной пост, включая текст и аватары.

.singlePost {-moz-opacity:.80 !important;opacity:.80 !important; filter:alpha(opacity=80);}
.singlePost:hover {-moz-opacity:1.0 !important;opacity:1.0 !important; filter:alpha(opacity=100);}

меня пока устраивает. может кому еще пригодится.
URL
09.03.2010 в 23:45

извиниет ТТ а как все таки сделать "аватар полупрозрачным в обычном состоянии, а при наведении так, чтоб он отображался нормально, обычно, без полупрозрачности?"
еще не до конца разобрался - не могли бы вы помочь с кодом ?
URL
09.03.2010 в 23:49

Aloria
Не сахар
H.e.r.o.i.n, выше написан код несколько раз и указано, что он работает только в ИЕ.
URL
10.03.2010 в 00:01

я только что заходил к человеку через ФаерФокс - у него такая штука работает
URL
10.03.2010 в 02:47

Aloria
Не сахар
H.e.r.o.i.n, ссылку.
URL
17.04.2010 в 13:20

Min Young-nim
Don't try to be original, just try to be good.
2. как сделать аватар полупрозрачным в обычном состоянии, а при наведении так, чтоб он отображался нормально, обычно, без полупрозрачности?
лично у меня эта вещь прописана следующим образом:
.avatar img {opacity: 0.5;}
.avatar img:hover {opacity: 1.0;}
По этому же принципу прописывается полупрозрачность для всех картинок в посте:
img {opacity: 0.5; }
img:hover {opacity: 1.0}
URL