суббота, 22 ноября 2014
21:13

Картинка/вензель/чтоугодно поверх аватара

UDFj
Продолжим? )
Есть ещё одна забавная вещица - картинка поверх аватара. Что на ней будет, зависит только от вашей фантазии: готишная паутина с пауком или без, штрих-код, цветочный угловой орнамент, новогодний шарик с веткой сосны или ели, etc. Как увидите, далее приведён ещё один вариант рамки, настройки которого можно менять как заблагорассудится. Итак, выглядеть это может приблизительно так, как на следующем скрине:

Вынуждена предупредить, что этого "милого баловства" я в своём дневнике не оставлю. Так что, придётся довольствоваться скрином.
Отличия от -- предыдущего поста -- :
1. В коде для селекторов ".avatar" и ".avatar img" прописываем следующее:



В этом коде:
а) всё те же параметры обрезки картинок аватар в свойствах "max-width: 116px !important; max-height:120px !important; ";
б) цвет фона - прозрачный: "background-color: rgba(0, 0, 0, 0);";
в) картинка поверх аватара в свойстве "background-image: url('/userdir/2/5/0/5/2505934/77712739.png');";
г) отключение заполнения картинкой блока под аватар (повторяемость картинки) в свойстве: "background-repeat: no-repeat; ";
д) свойство "opacity:1;" не обязательно, хотя его можно поменять, чтобы слишком светлые аватары не пестрели в тёмном дизайне, соответственно, тёмные станут ещё темнее.
е) свойство "position:relative;" - обязательно!;
ё) в свойстве прописан "z-index: -10;", чтобы картинка самого аватара была под картинкой в селекторе родителя ".avatar". По-сути, картинка аватара "ляжет" под "#wrapper". Так что, будьте осторожны с этим свойством. Или заранее пропишите "z-index" для родителя такого значения, чтобы он с вписанным в него "background-image:" располагался под потомка ".avatar img".

2. От селектора ".avatar img:hover" пришлось отказаться, поскольку задачу с ":hover" для объекта с "z-index: -10;" я пока не решила.

А в следующем посте расскажу, как сделать twitter/статусы, оторвав пост от ленты.

@настроение: Оставить что-то, надеюсь, полезное.

@темы: без подтекста, CSS, деперсонализировано!, CSS-примеры

URL
Комментарии
15.03.2013 в 20:43

Кареглазый Демон
Ко мне на "вы", шёпотом и с придыханием.
Вот это кстати очень нужная вещь... Спасибо что делитесь.
URL
15.03.2013 в 21:05

UDFj
Кареглазый демон, приятно, когда работу могут оценить )) И вам спасибо за отзыв )
URL
15.03.2013 в 21:12

Кареглазый Демон
Ко мне на "вы", шёпотом и с придыханием.
Я честно говоря весь день у вас тут прогуливаюсь с чувством уважения и глубокого морального удовлетворения. Перерыть и усвоить такой объем информации да еще так доступно изложить дорогого стоит...
URL
15.03.2013 в 21:38

UDFj
Кареглазый демон,
Вы не представляете, этими словами вы вдохновили меня и придали решимости сделать сегодня же обещанный ранее пост ) Спасибо вам )) Мало того, есть у меня реализация одной идеи меню, ссылку на пример которого, к сожалению, не добавлю. Но, скрины сделаю. Нечто подобное есть на дневниках. Только этот проект полностью отличается кодом и сложнее в свойствах. Так что, в ближайшее время постараюсь описать и этот "обвес".
URL
15.03.2013 в 21:45

Кареглазый Демон
Ко мне на "вы", шёпотом и с придыханием.
Ну можно и музом побыть для разнообразия) А правду говорить легко и приятно. Делитесь, с удовольствием приобщусь.
URL
16.03.2013 в 13:23

UDFj
Кареглазый демон,
музом побыть для разнообразия)
Побудьте, пожалуйста )) Просто будьте, хорошо? ) Думаю, важно сразу поставить вас в известность - Музы - священные и потому духовно неприкосновенные для меня ) Это я для того, чтобы не стать причиной для ревности со стороны кого-либо из ваших близких. Чтобы успокоить их )
URL
16.03.2013 в 14:59

Кареглазый Демон
Ко мне на "вы", шёпотом и с придыханием.
Как вам будет угодно. Не волнуйтесь, для близких Я куда большее чем просто муз) И чтобы вызвать их ревность вам придется сделать нечто более существенное.
URL
17.03.2013 в 02:16

UDFj
Кареглазый демон,
для близких Я куда большее чем просто муз)
Так это вообще замечательно! ))
Да, вот. Подправила подсветку букв в опере. Вроде бы ничего получилось. А вот хром, всё-таки, плохо отображает шрифты. Во многих отношениях Firefox пока лучше. Особенно в части отображения шрифтов и теней. Может, я чего-то не знаю, где что подстроить в хроме? У меня с ним всего два дня знакомства.

И ещё. Вы не представляете, мне сегодня удалось-таки настроить переключение с ноута на свой внешний монитор - 20', и я наконец разобралась, какие свойства подключить в настройках, чтобы работать с внешнего без сохранения масштабирования экрана ноута. Правда, при этом приходится отключать монитор ноута. А в таких условиях набирать с клавиатуры текст, сидя за маленьким столом, очень не удобно. Т.к. экран ноута нужно наклонять и света на клавиатуру падает мало. Извините, просто очень хотелось поделиться своей маленькой радостью )
URL