Блого-фишки. Картинка, увеличивающаяся по клику
Давно обещанное продолжение темы оформления картинок.
Краткое повторение пройденного:
Конструкция вида
служит для вставки фото в запись,
вариант с активной ссылкой имеет дополнительные тэги:
Продвинутые жуже-пользователи знают, что добавление атрибута border="0" убирает рамочку вокруг картинки-ссылки -
еще более искушенные знакомы с атрибутом title="подсказка, всплывающая по наведению"
Ее удобно использовать вместо открытой нумерации, которая в фото-рассказе не очень смотрится;
тех.параметры- 50мм,1/4,0.86сЯндексфоточки -туда же стоит задвинуть, чтоб не мельтешили.
Вставляя фото из галереи ЖЖ получаем запись
включающую атрибут alt - письменное сообщение на случай если фото не отображается:
"Тут у меня фликро-виджет/инстаграмочка, которую вы не видите, поскольку у вас Файрфокс или активная баннерорезка"
Это далеко не всё, что можно сотворить с картинками.
Возможностей немеряно, всего не пересказать, рассмотрим несколько опций.
Картинкам, так же как и прочим элементам, можно задать стили,
style="WIDTH:300px; BACKGROUND: #c6c9cc; PADDING: 50px 20px 15px 80px; border: 5px ridge #F0F8FF; border-radius: 9px; box-shadow: 2px 1px 4px #40310a" >
- сколь угодно развесистые, указать вид, цвет и толщину рамочек, подложку, отступы (для каждой из сторон),
скругление уголков и цвет тени
Подложка может быть не только цветной, но даже с собственным фоновым изображением!
Т.е. один тэг 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="", - ага, тем самым, который подсказка.
Он и будет мирной безобидной подсказкой, до тех пор, пока не появится кодовое слово -
имя, которое мы использовали при задании эффекта - 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 и в дальнейшем пользоваться, не нагромождая коды около каждой картинки.
"background: url(httр://adres_fotochki/ris_001/web.jpg); width: 600px; height: 400px;" title="Nomo8">
Мы уже поняли, что вставлять изображение можно и как фон блочного элемента
(бывает нужно для некоторых эффектов)
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
Анимашки своими руками
Краткое повторение пройденного:
Конструкция вида
служит для вставки фото в запись,
вариант с активной ссылкой имеет дополнительные тэги:
Продвинутые жуже-пользователи знают, что добавление атрибута border="0" убирает рамочку вокруг картинки-ссылки -
еще более искушенные знакомы с атрибутом title="подсказка, всплывающая по наведению"
Ее удобно использовать вместо открытой нумерации, которая в фото-рассказе не очень смотрится;
тех.параметры- 50мм,1/4,0.86сЯндексфоточки -туда же стоит задвинуть, чтоб не мельтешили.
Вставляя фото из галереи ЖЖ получаем запись
включающую атрибут alt - письменное сообщение на случай если фото не отображается:
"Тут у меня фликро-виджет/инстаграмочка, которую вы не видите, поскольку у вас Файрфокс или активная баннерорезка"
Это далеко не всё, что можно сотворить с картинками.
Возможностей немеряно, всего не пересказать, рассмотрим несколько опций.
Картинкам, так же как и прочим элементам, можно задать стили,
style="WIDTH:300px; BACKGROUND: #c6c9cc; PADDING: 50px 20px 15px 80px; border: 5px ridge #F0F8FF; border-radius: 9px; box-shadow: 2px 1px 4px #40310a" >
- сколь угодно развесистые, указать вид, цвет и толщину рамочек, подложку, отступы (для каждой из сторон),
скругление уголков и цвет тени
Подложка может быть не только цветной, но даже с собственным фоновым изображением!
Т.е. один тэг 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="", - ага, тем самым, который подсказка.
Он и будет мирной безобидной подсказкой, до тех пор, пока не появится кодовое слово -
имя, которое мы использовали при задании эффекта - 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 и в дальнейшем пользоваться, не нагромождая коды около каждой картинки.
"background: url(httр://adres_fotochki/ris_001/web.jpg); width: 600px; height: 400px;" title="Nomo8">
Мы уже поняли, что вставлять изображение можно и как фон блочного элемента
(бывает нужно для некоторых эффектов)
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
Анимашки своими руками