В обычном виде, прописанном в коде
прозрачностью "opacity: 0.5;" для селектора ".avatar img".
После наведения мыши на картинку аватара
Реализацию "вживую" можно посмотреть в моём избранном, перейдя по ссылке:
Да, тут ещё один "не секрет" открывается для неискушённых. Чтобы попасть в избранное платных дневников, в которых отсутствует ссылка на избранное авторов, можно просто добавить в адресную строку "/?favorite" и перейти.
Итак, последовательность:
1. Сначала определиться с тем, до какого размера нужно задать обрезку аватар, чтобы они вмещались в фиксированный размер внутренних границ рисованных рамок. Например, у меня задано 116х116, что означает, что все аватары большего размера будут автоматически обрезаны до указанного размера снизу и справа. Для селектора ".avatar img" свойство обрезки лучше не задавать, т.к. картинка аватары будет растягиваться и искажаться, как в кривом зеркале.
2. В фотошопе сделать рамку или воспользоваться желаемым шаблоном, предварительно вставив в центр листа аватар с параметрами 120х120, чтобы потом подогнать размеры рамки под её внутренние границы. Уменьшить размер изображения или холста до необходимых. Внутреннюю часть рамки можно очистить от заливки, сделав "место" прозрачным. Сохранить для веб-устройств в .png формате с сохранением прозрачности. Полученное изображение будет больше размеров аватары - багет ведь. После загружаем рамку в БИ и продолжим работать с кодом.
3. Код:
Разберём сам код:
Селектор ".commentAuthor":
1. Свойства "display: block; position: absolute;" - обязательны, т.к. отрывают весь блок (первое) и позволяют обтекать его так, как будто других элементов на странице нет (второе). Свойством "left: 710" задано позиционирование, которое выводит весь блок за пределы "wrapper".
2. В свойствах "min-width: 150 min-height:150" прописаны размеры самой картинки рамки. И сделано это для того, чтобы даже для тех постов в избранном, у авторов которых нет аватар, отображалась пустая рамка. Если не задавать, будет вылазить кусок картинки рамки.
3. Если остальное будет не понятно, с удовольствием растолкую "что к чему".
2. В свойствах "min-width: 150 min-height:150" прописаны размеры самой картинки рамки. И сделано это для того, чтобы даже для тех постов в избранном, у авторов которых нет аватар, отображалась пустая рамка. Если не задавать, будет вылазить кусок картинки рамки.
3. Если остальное будет не понятно, с удовольствием растолкую "что к чему".
Селектор ".avatar":
1. Свойство "position: relative;" - обязательно.
2. В первых двух свойствах "max-width: 116px !important; max-height:116px !important; height: 116px !important; " - прописана обрезка, в последнем - максимальная высота самого блока для аватары.
3. В свойстве "margin: 17px auto !important;" задан отступ от верхней границы блока аватары до рисунка самого аватара ровно на ширину багета. Т.е., его подбираем ручками или померяем линейкой в фотошопе.
4. Свойство "overflow:hidden;" - скроет обрезанное.
5. Мне захотелось, чтобы картинки маленьких аватар были не в зияющем пустотой проёме рамки, а на некотором "зачернённом стекле" что ли, потому в свойстве "background-color: rgba(0, 0, 0, 0.7);" прописан черный фон с прозрачностью в 0.7.
Решить задачу с центрированием аватара по вертикали мне не удалось. Во всяком случае, как это реализовать средствами CSS я не знаю.
2. В первых двух свойствах "max-width: 116px !important; max-height:116px !important; height: 116px !important; " - прописана обрезка, в последнем - максимальная высота самого блока для аватары.
3. В свойстве "margin: 17px auto !important;" задан отступ от верхней границы блока аватары до рисунка самого аватара ровно на ширину багета. Т.е., его подбираем ручками или померяем линейкой в фотошопе.
4. Свойство "overflow:hidden;" - скроет обрезанное.
5. Мне захотелось, чтобы картинки маленьких аватар были не в зияющем пустотой проёме рамки, а на некотором "зачернённом стекле" что ли, потому в свойстве "background-color: rgba(0, 0, 0, 0.7);" прописан черный фон с прозрачностью в 0.7.
Решить задачу с центрированием аватара по вертикали мне не удалось. Во всяком случае, как это реализовать средствами CSS я не знаю.
Селекторы ".avatar img" и ".avatar img:hover":
Свойства для них задают "поведение" в обычном состоянии и после наведения мышки на картинку аватара.
Селекторы ".sign" и ".sign:hover":
Форматируют подпись под аватарой до и после наведения мыши. О чём можно убедиться, ещё раз заглянув в моё избранное по ссылке выше.
Селекторы "#JournalComments .sign, #JournalDraft .commentAuthor":
Возникла проблема, когда на странице с комментариями моя тяжёлая рамка вместе с красивой, и всё же, довольно объёмной подписью под аватарой сильно растягивали страницу с комментариями работаю с ноута, почти всегда. Пришлось на этих страницах отключить отображение подписей. Как это смотрится, можно глянуть --- ТУТ ---
Тем кто знает более оптимальные варианты реализации багетных рамок для аватар (средствами CSS тоже умею, уж не подумайте, что совсем нуб), и любезно поделится своими изысканиями, буду премного благодарна за доброту и участие.
Простывшая авторица дневника сделала всё, что было в её силах,
и теперь пьёт чай с лимоном.