Rimon Lusi (fotovivo) wrote,
Rimon Lusi
fotovivo

Category:

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

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




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

Конструкция вида <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 - письменное сообщение на случай если фото не отображается:
"Тут у меня фликро-виджет/инстаграмочка, которую вы не видите, поскольку у вас Файрфокс или активная баннерорезка"


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





opisanie

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

<img   src="httр://adres-foty/ris-2.jpg" title="nomo" alt="opisanie" style="WIDTH:300px; BACKGROUND: #c6c9ccPADDING: 50px 20px 15px 80px;  border: 5px ridge #F0F8FF; border-radius: 9px; box-shadow: 2px 1px 4px #40310a" >

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




opisanie


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

<img   src="httр://adres-fot0/ris-3.jpg" title="nomo" alt="opisanie" style="WIDTH:600px; PADDING: 50px 50px 30px 50px;  background: url(httр://adres-fot0/ris-4.jpg);  border: 5px ridge #F0F8FF; border-radius: 9px; box-shadow: 2px 1px 4px #40310a;" >


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

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







opisanie


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

<img   src="httр://adres-fot0/ris-5.jpg" style="WIDTH:300px; BACKGROUND: #faf732;  PADDING: 20px 35px 25px 35px;  border: 10px solid #ff6600; border-radius: 90px; box-shadow: 2px 1px 40px #ffa600;" >









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


<img   src="httр://adres-fot0/ris-6.jpg" style="WIDTH:600px; PADDING: 50px 50px 30px 50px;  background: url(httр://adres-fot0/ris-6.jpg); border: 5px #F0F8FF; opacity: 0.7;" >

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


_________________________________________________________________________


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


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

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);
&nbsp;-o-transform: rotate(40deg);
&nbsp;transform: rotate(40deg);

}


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

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

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



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

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

И получаем:

opisanie


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

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

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

Аккуратно копируем вышеприведенный код и переносим его на страницу пользовательских 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 style="background: url(httр://adres_fotochki/ris_001/web.jpg); width: 600px; height: 400px;" title="Nomo8"></div>

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

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;
}




__________________________________________________________________________________________

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




- разобрать устройство виджета.
Приведенных в примерах сведений достаточно (в справочниках их еще больше,
но особенность ЖЖ в том, что нам доступно очень немногoе из возможностей HTML и CSS).

__________________________________________________________________________________________


Прежние записи по тэгу "хтмл-ские хитрости"

На подступах к HTML (языку гипертекстовой разметки)
Оформление шрифтов: цвет, фон, тени, рамочки. CSS и стилевые свойства
Форматирование текста на странице: отступы, background, абзац, оформление границ блока
Обтекание картинок текстом
Блоки и внешние стили
Мануал по ресайзу и фоторедактору ФастСтоун
Рамочки и стильные подчеркивания
Коллаж, скругление уголков картинки
Дрессируем marquee
Анимашки своими руками
Tags: HTMLство, блогоухищрения, веб-штучки
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 139 comments
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →