rimonfotovivo | Блого-фишки. Картинка, увеличивающаяся по клику (Reply)

Давно обещанное продолжение темы оформления картинок.

Краткое повторение пройденного:

Конструкция вида <img src="httр://adres_fotochki.com/ris-1.jpg"> служит для вставки фото в запись,

вариант с активной ссылкой имеет дополнительные тэги:
<a href="httр://otsylka_kuda-nibudj/stranica.html"><img src="htth://adres_fotochki.com/ris-1.jpg"></a>

Продвинутые жуже-пользователи знают, что добавление атрибута border="0" убирает рамочку вокруг картинки-ссылки -
<a href="httр://otsylka_kuda-nibudj/stranica.html"><img src="httр://adres_fotochki.com/ris-1.jpg" border="0"></a>

еще более искушенные знакомы с атрибутом title="подсказка, всплывающая по наведению"
<img src="httр://adres_fotochki.com/ris-1.jpg" border="0" title="подсказка">
Ее удобно использовать вместо открытой нумерации, которая в фото-рассказе не очень смотрится;
тех.параметры- 50мм,1/4,0.86сЯндексфоточки -туда же стоит задвинуть, чтоб не мельтешили.

Вставляя фото из галереи ЖЖ получаем запись
<img src="httр://ic.pics.livejournal.com/original.gif" alt="" title="">
включающую атрибут alt - письменное сообщение на случай если фото не отображается:
"Тут у меня фликро-виджет/инстаграмочка, которую вы не видите, поскольку у вас Файрфокс или активная баннерорезка"

Это далеко не всё, что можно сотворить с картинками.
Возможностей немеряно, всего не пересказать, рассмотрим несколько опций.

Картинкам, так же как и прочим элементам, можно задать стили,

- сколь угодно развесистые, указать вид, цвет и толщину рамочек, подложку, отступы (для каждой из сторон),
скругление уголков и цвет тени

Подложка может быть не только цветной, но даже с собственным фоновым изображением!

Т.е. один тэг img может содержать сразу два изображения
(два и больше, тема обширная, но пока на этом остановимся)

Небольшое примечание о следствиях:
допустим ни с того, ни с сего браузер заругался на страницу,
вроде бы безобидные комменты с картинкой из ЖЖ-альбома, что это?
Оно самое. Изображение в бэкграунде, если нет отступов, вообще не заметно,
и может втихаря подкачиваться с сомнительного сайта.
Как выяснить? - ctrl-U и поиском ctrl-F "background: url"

Играем с границами, полями и тенью (подробнее о смещении и смешении теней - в главе "стили шрифтов")
тени можно задать такой размах, что она превратится во внешнее свечение:

Познакомьтесь с новым параметром - opacity, он определяет прозрачность элемента. (Не только картинки, чего угодно;
надписи и фоны можно довести до полу- и полной прозрачности. Плотность увеличивается от 0 до 1)

Само по себе - не очень, эффект интересен в динамике.

_________________________________________________________________________

Подбираемся к поставленной цели -
как добиться эффекта увеличения картинки по наведению
(а так же обрамления, затемнения, кручения и прочая трюки)

Выпишем в столбик стили для начального состояния и для активированной картинки:

img[title="nomo1"]{
WIDTH:300px;
BACKGROUND: #8f8e72;
PADDING: 5px 5px 3px 5px;
border: 3px ridge #FFF;
border-radius: 9px;
box-shadow: 2px 1px 4px #40310a;
opacity: 0.7;
}

img[title="nomo1"]:hover{
WIDTH:600px;
BACKGROUND: #faf732;
PADDING: 20px 35px 25px 35px;
border: 10px solid #ff6600;
border-radius: 90px;
box-shadow: 2px 1px 40px #ffa600;
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
 -o-transform: rotate(40deg);
 transform: rotate(40deg);
}

Только увеличение, без прочего декора:

img[title="nomo_0"]{
WIDTH:300px;
}

img[title="nomo_0"]:hover{
WIDTH:600px;
}

блок rotate - задает вращение.

Обращаем внимание на указанные размеры -
- это и есть механизм эффекта, прописываем явным образом WIDTH для активной и неактивной картинки.
(увеличение по ширине, высота подстроится. Можно и наоборот, определять размер по высоте - HEIGHT)

И получаем:

Получилось :)

Теперь что с этим делать, куда вписывать.

Инструкция к пользованию:

Аккуратно копируем вышеприведенный код и переносим его на страницу пользовательских CSS
http://www.livejournal.com/customize/options.bml?group=customcss
со всеми предосторожностями, чтоб ненароком какая-нибудь запятая не потерялась по дороге.
Если вам не впервой и в окошке уже есть коды, то новый просто вклеиваем ниже, они не подерутся.

Смотрим в свой журнал и видим, что ничего не произошло.
- Эффект нужно вызвать, чтоб он проявился.
А вызваем его - атрибутом title="", - ага, тем самым, который подсказка.

<img src="httр://adres_fotochki.com/ris-1.jpg" title="подсказка">

Он и будет мирной безобидной подсказкой, до тех пор, пока не появится кодовое слово -
имя, которое мы использовали при задании эффекта - nomo1,
(имя выбираем произвольно, записываем латиницей и цифрами, без пробелов)
вот тут-то title встрепенется и заработает по предписанной программе,
растянет изображение, повернет вверх ногами ...

Эффект будет проявляться всякий раз, для любой картинки, если в формуле img присутствует
нужное заклинание: title="nomo1"

В кодах можно менять численные значения, убирать не задействованные атрибуты -
следите при этом за точкой с запятой - не оставляя лишних и не стерев нужные.
(И особенно чтоб не потерялись селекторы title, не то весь дизайн страницы встанет на уши.)

Стили действенны только на собственной странице,
в ленте фокус не показывается и в комментах к чужому журналу этого не проделать.

(Примечание для тех, кто в теме
- почему такой странный способ, на селекторах?
- единственный, который жж ~~прозевало~~ допускает; обращение к классам не разрешено в записи, так же как фреймы и скрипты на джава. Задавать относительные размеры, в процентах, тоже, увы не получится, как и много чего еще. )

________________________________________________________________________

Аналогично устроен механизм сменяющихся изображений
Даже проще:

img[title="nom02"] {opacity:0;}
img[title="nom02"]:hover{opacity:1;}

Картинка переменной плотности перекрывает фон, заданный блоку, совпадающему с ней по размерам.

____________________________________________________________________

Ядреные эффекты - это для открыток, утренних приветов,
ясно, что повседневное обрамление если и делать, то попроще, тонкое-неброское

style="box-shadow: 2px 2px 4px #000; border: outset darkgrey; border-width: 1px 2px 2px 1px;"

style="height: 300px; background: #dedbd3; border: 2px ridge grey; padding: 60px;"

Стили придуманы для того, чтоб их легко было "вынести за скобки": один раз сконструировать оформление,
прописать на странице custom css и в дальнейшем пользоваться, не нагромождая коды около каждой картинки.

Мы уже поняли, что вставлять изображение можно и как фон блочного элемента
(бывает нужно для некоторых эффектов)

div[title="Nomo8"] {
display:inline-block;
border:1.1em solid;
border-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1) rgba(255, 255, 255, 0.1) rgba(255, 255, 255, 0.3);
background-clip: border-box;
box-shadow:1px 1px 0 rgba(0,0,0,.2), 2px 2px 4px rgba(0,0,0,.6);
outline:1px ridge rgba(255,255,255,0.93); outline-offset:-1.1em;
}

__________________________________________________________________________________________

Задачка заинтересованным бабушкам ⚓