Давно обещанное продолжение темы оформления картинок.
Краткое повторение пройденного:
Конструкция вида <img src="httр://adres_fotochki.com/ris-1.jpg"
вариант с активной ссылкой имеет дополнительные тэги:
<a href="httр://otsylka_kuda-nibudj/stranic
Продвинутые жуже-пользователи знают, что добавление атрибута border="0" убирает рамочку вокруг картинки-ссылки -
<a href="httр://otsylka_kuda-nibudj/stranic
еще более искушенные знакомы с атрибутом title="подсказка, всплывающая по наведению"
<img src="httр://adres_fotochki.com/ris-1.jpg"
Ее удобно использовать вместо открытой нумерации, которая в фото-рассказе не очень смотрится;
тех.параметрыт фот- 50мм,1/4,0.86сЯндексфоточки -туда же стоит задвинуть, чтоб не мельтешили.
Вставляя фото из галереи ЖЖ получаем запись
<img src="httр://ic.pics.livejournal.com/orig
включающую атрибут alt - письменное сообщение на случай если фото не отображается:
"Если вы не видите мою инстаграмочку/фликро-виджет, значит у вас Файрфокс или лютая баннерорезка"
Это далеко не всё, что можно сотворить с картинками.
Возможностей немеряно, всего не пересказать, рассмотрим несколько опциий.
Картинкам, так же как и прочим элементам, можно задать стили,
- сколь угодно развесистые, указать вид, цвет и толщину рамочек, подложку, отступы (для каждой из сторон),
скругление уголков и цвет тени
Подложка может быть не только цветной, но даже с собственным фоновым изображением!
Т.е. один тэг img может содержать сразу два изображения
(два и больше, тема обширная, но пока на этом остановимся)
Небольшое примечание о следствиях:
допустим ни с того, ни с сего браузер заругался на страницу,
вроде бы безобидные комменты с картинкой из ЖЖ-альбома, что это?
Оно самое. Изображение в бэкграунде, если нет отступов, вообще не заметно,
и может втихаря подкачиваться с сомнительного сайта.
Как выяснить? - ctrl-U и поиском ctrl-F "background: url"
Играем с границами, полями и тенью (подробнее о смещении и смешении теней - в главе "стили шрифтов")
тени можно задать такой размах, что она превратится во внешнее свечение:
Познакомтесь с новым параметром - opacity, он определяет прозрачность элемента. (Не только картинки, чего угодно;
надписи и фоны можно довести до полу- и полной розрачности. Плотность увеличивается от 0 до 1)
Само по себе - не очень, эффект интересен в динамике.
________________________________________
Подбираемся к поставленной цели -
как добится эффекта увеличения картинки по наведению
(а так же обрамления, затемнения, кручения и прочая трюки)
Выпишем в столбик стили для начального состояния и для активированной картинки:
блок 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;}
Картинка переменной плотности перекрывает фон, заданный блоку, совпадающему с ней по размерам.
________________________________________
Задачка заинтересованным бабушкам ⚓
- разобрать устройство виджета.
Приведенных в примерах сведений достаточно (в справочниках их еще больше,
но особенность ЖЖ в том, что нам доступно очень немногoе из возможностей HTML и CSS).
________________________________________
Прежние записи по тэгу "хтмл-ские хитрости"
На подступах к HTML (языку гипертекстовой разметки)
Оформление шрифтов: цвет, фон, тени, рамочки. CSS и стилевые свойства
Форматирование текста на странице: отступы, background, абзац, оформление границ блока
Обтекание картинок текстом
Блоки и внешние стили
Мануал по ресайзу и фоторедактору ФастСтоун
Рамочки и стильные подчеркивания
Коллаж, скругление уголков картинки
Краткое повторение пройденного:
Конструкция вида <img src="httр://adres_fotochki.com/ris-1.jpg"
вариант с активной ссылкой имеет дополнительные тэги:
<a href="httр://otsylka_kuda-nibudj/stranic
Продвинутые жуже-пользователи знают, что добавление атрибута border="0" убирает рамочку вокруг картинки-ссылки -
<a href="httр://otsylka_kuda-nibudj/stranic
еще более искушенные знакомы с атрибутом title="подсказка, всплывающая по наведению"
<img src="httр://adres_fotochki.com/ris-1.jpg"
Ее удобно использовать вместо открытой нумерации, которая в фото-рассказе не очень смотрится;
тех.параметрыт фот- 50мм,1/4,0.86сЯндексфоточки -туда же стоит задвинуть, чтоб не мельтешили.
Вставляя фото из галереи ЖЖ получаем запись
<img src="httр://ic.pics.livejournal.com/orig
включающую атрибут alt - письменное сообщение на случай если фото не отображается:
"Если вы не видите мою инстаграмочку/фликро-виджет, значит у вас Файрфокс или лютая баннерорезка"
Это далеко не всё, что можно сотворить с картинками.
Возможностей немеряно, всего не пересказать, рассмотрим несколько опциий.
Картинкам, так же как и прочим элементам, можно задать стили,
<img src="httр://adres-foty/ris-2.jpg" title="nomo" alt="opisanie" style="WIDTH:300px; BACKGROUND: #c6c9cc; PADDING: 50px 20px 15px 80px; border: 5px ridge #F0F8FF; border-radius: 9px; box-shadow: 2px 1px 4px #40310a" >
- сколь угодно развесистые, указать вид, цвет и толщину рамочек, подложку, отступы (для каждой из сторон),
скругление уголков и цвет тени
Подложка может быть не только цветной, но даже с собственным фоновым изображением!
<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"
Играем с границами, полями и тенью (подробнее о смещении и смешении теней - в главе "стили шрифтов")
тени можно задать такой размах, что она превратится во внешнее свечение:
<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:
Само по себе - не очень, эффект интересен в динамике.
________________________________________
Подбираемся к поставленной цели -
как добится эффекта увеличения картинки по наведению
(а так же обрамления, затемнения, кручения и прочая трюки)
Выпишем в столбик стили для начального состояния и для активированной картинки:
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;
}
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;}
Картинка переменной плотности перекрывает фон, заданный блоку, совпадающему с ней по размерам.
________________________________________
Задачка заинтересованным бабушкам ⚓
- разобрать устройство виджета.
Приведенных в примерах сведений достаточно (в справочниках их еще больше,
но особенность ЖЖ в том, что нам доступно очень немногoе из возможностей HTML и CSS).
________________________________________
Прежние записи по тэгу "хтмл-ские хитрости"
На подступах к HTML (языку гипертекстовой разметки)
Оформление шрифтов: цвет, фон, тени, рамочки. CSS и стилевые свойства
Форматирование текста на странице: отступы, background, абзац, оформление границ блока
Обтекание картинок текстом
Блоки и внешние стили
Мануал по ресайзу и фоторедактору ФастСтоун
Рамочки и стильные подчеркивания
Коллаж, скругление уголков картинки
