11.1.09

Blogger: Делаем картинку объемнее!

30 comments




Это песенка Александра Суханова
"Уезжаю в Ленинград", а вот по этой ссылке вы найдете еще много песенок этого замечательного барда:
Александр Суханов(Зеленая карета, 1996)
Уезжаю в Ленинград...

На самом деле не в Ленинград, а в Киев.... на неделю и очень неожиданно. Уезжаем завтра вот с этого самого вокзала, который на картинке, взятой мной из статьи в Википедии "Киевский вокзал".

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

Бороздя просторы интернета я как-то увидела блог, в котором фотографии смотрелись особенно эффектно, я решила с этим разобраться и вот что я выяснила. Оказывается эффект объемности во многом обусловлен рамкой для фотографии. Я знаю, что многие фотохудожники публикуют свои фотографии в рамке. Способ неплохой, а даже очень хороший, его единственный недостаток в том, что все мы люди креативные и время от времени чувствуем острую необходимость поменять что-то в дизайне блога, а проще говоря сменить темплейт, шаблон или макет. И вот фотографии в старых рамках, могут выглядеть уже не столь эффектно - не так сочетаться с новым цветом фона и т.д.

Итак, в прошлый раз (Blogger: Картинка с подписью!), мы вспомнили немного о стилях CSS. Сегодня я покажу еще пару свойств которые можно добавить к стилю, описывающему вашу картинку или что угодно еще.

1) padding - отступ
2) border - рамка

назначая для padding полжительное значение в пикселях или процентах, мы заставляем наш объект в данном случае картинку немного сжаться - отодвинуться внутрь от её границ. Граница же останется на месте и мы её даже покрасивее выделим, назначая какие-нибудь красивые значения для параметра border.

В этой статье я назначила параметру padding значение 5px.
А рамку (border) описала следующими параметрами: 4px groove #6D5C4C что значит толщина рамки 3px стиль рамки groove (гравированный), а это #6D5C4C номер цвета или он может записываться так же как rgb(197, 166, 137) - я без лишних затей взяла цвет, который уже используется в этом шаблоне. Вы, конечно подберете свой цвет для рамочки.

Кстати, оба параметра (padding и border) могут задаваться как для всех сторон сразу, так и для каждой стороны по-отдельности. Тогда они будут записываться так padding-top, padding-bottom, padding-left, padding-right для padding и тоже самое для border border-top, border-bottom, border-left, border-right.

Если с padding почти все понятно, смотрим на картинку и чисто визуально решаем стоит ли нам еще чуть чуть увеличить или уменьшить отступ, то для border есть очень хорошая страничка показывающая возможности этого параметра CSS Border. А внизу странички там есть даже HTML-описание c рамочками, с которым можно поиграться и посмотреть на результат.

Кому читать на английском не интересно я быстренько нарисую какие бывают рамочки. Везде рамочки будут синего цвета и шириной 5px, чтобы лучше было видно.

style="border: 5px solid blue;"


style="border: 5px double blue;"


style="border: 5px groove blue;"


style="border: 5px dotted blue;"


style="border: 5px dashed blue;"


style="border: 5px inset blue;"


style="border: 5px outset blue;"


style="border: 5px ridged blue;"


style="border: 5px hidden blue;" (рамочку видите? и правильно, что нет - она ведь спрятанная!



Теперь у вас уж точно есть то над чем можно поэкспериментировать.

Экспериментировать можно над любой картинкой в вашем блоге. Добавляем в параметр style="" описания нашей картинки <img ... > элемент padding (вот у меня было добавлено padding: 5px;) и элемент border (у меня было как вы помните border: 4px groove #6D5C4C; )

И наконец осталось решить хотим ли мы применять эти стили только для некоторых картинок (что равносильно примеру с фотохудожником, публикующим свои фотографии уже в рамке) или мы хотим применить эти стили для всех картинок в наших статьях, уже опубликованных и только задумывающихся... Как применить к одной фотографии, я уже рассказала. Чтобы заработало сразу для всех фотографий во всех статьях вашего блога, придется немного поменять макет/дизайн.

Итак, идем Панель инструментов, Дизайн, Изменить Html
1) Сохраняем текущее состояние нашего Шаблона (Blogger: Сохраняем и восстанавливаем шаблон на Blogger(е)!)
2) Теперь ищем в нашем шаблоне строчку: .post img
после этой строчки в фигурных скобках будет CSS описание как выглядят картинки в ваших статьях. Измените значения для padding и border, на те которые вам понравились в ходе предыдущего эксперимента. Нажмите ПРОСМОТР посмотреть как это будет выглядеть и СОХРАНИТЬ ШАБЛОН если вы довольны результатом. Нажмите УБРАТЬ ИЗМЕНЕНИЯ если что-то вам не понравилось.

Всем Любви и Удачи!

А я через 18 часов сажусь на поезд...

Света


Комментарии и вопросы более чем приветствуются,
нужна помощь - поможем! Читать дальше...

30 комментариев:

  1. О! А я недавно как раз искала инфу именно о рамках к картинкам! Супер! Большое спасибо.:)

    ОтветитьУдалить
  2. У меня не получилось... :(
    Ввела такой код для картинки:

    <img style="border: 4px groove #6D5C4C; padding: 5px;" src="http://lh4.ggpht.com/_DM2EEkZHUE4/SWyxNg45uII/AAAAAAAAAJI/l4XZ2lEb6hs/15.jpg">

    а рамочка не появляется... :( Мне кажется, я всё сделала правильно - в чём же дело?

    ОтветитьУдалить
  3. Ах ты ё-моё! Это моя Опера косячит - не отображает в "Предварительном просмотре" рамку! Вот я и думала, что не срабатывает! А когда отправляешь сообщение в блог - всё прекрасно отображается. :)
    Простите, что напрасно побеспокоила Вас. И огромное спасибо за инструкцию - ссылку на Ваш блог с полезнейшими фичами для блоггеров обязательно выложу у себя. :)

    ОтветитьУдалить
  4. А зачем спрятанная рамка? Просто так?

    ОтветитьУдалить
  5. Спасибо, YarRus!

    Удача нам действительно нужна!

    Всем остальным отвечу когда вернусь.

    Света.

    ОтветитьУдалить
  6. >> ищем в нашем шаблоне строчку: .post img <<

    У меня такой строчки не было вообще - пришлось создавать самой. :)
    Рамка появилась. Но текст вокруг картинки, стоило появиться рамке, оказался плотно прижат к ней - нет отступа, хотя в свойствах картинки параметры отступа указаны.
    Убрала общий параметр рамки для всех картинок, сделала для отдельных картинок рамки - и в этом случае текст оказывается прижатым к рамке.
    Вот, посмотрите: в этом посте ( http://allpa-allpa.blogspot.com/2009/01/5_12.html ) там, где прямоугольная картинка - есть отступ. А здесь ( http://allpa-allpa.blogspot.com/2009/01/6.html ) в свойствах картинки сделана рамка по Вашему рецепту - видите? текст прижат к рамке...

    Да, и если картинка находится внутри списка (как тут, например: http://allpa-allpa.blogspot.com/2009/01/7.html - это именно список, просто я сделала такое офрмление), то рамка вокруг не появляется вообще. На всех остальных да, но не внутри списка.

    Что здесь можно сделать, не подскажете?

    Спасибо. :)

    ОтветитьУдалить
  7. > А зачем спрятанная рамка? Просто так? - В случае с картинками - просто так, Alex. А в случае описания рамок для таблиц разница между border: none и border: hidden в разнице приоритетов при разрешении конфликтов границ ячеек. Как я поняла none имеет наименьший приоритет, а hidden наибольший... - В общем, все это сложно, я лично сама с такими конфликтами ни разу не сталкивалась. Так что - просто так!

    Удачи и спасибо за комментарий!
    Света

    ОтветитьУдалить
  8. Allpa, спасибо за комментарий!

    Это похоже я слишком торопилась перед отъездом! На самом деле я предпологала, что картинка будет загружаться через Blogger и в style мы просто добавим padding и border.

    За отступы текста от картинки отвечает параметр margin. И когда мы загружаем картинку через Blogger, он нам этот параметр (margin) в style включает и дает размеры в зависимости от того хотим ли мы чтобы картинка была по левому краю, по правому краю или по центру.

    В общем случае записываем margin следующим образом margin: tpx rpx bpx lpx; где px значит пикселей, а t, r, b, l число этих пикселей которые надо соответственно отступить:

    t(op) - сверху
    r(ight) - справа
    b(ottom) - снизу
    l(eft) - слева

    а порядок, в котором следуют эти отступы запоминается очень просто с помощью слова TROUBLE.

    Вам Удачи и Cпасибо!

    А я буду думать, как теперь прилепить этот margin к этой статье ;).

    Света

    ОтветитьУдалить
  9. Светлана, огромнющее Вам спасибо за подробное пояснение - это просто находка, Ваш блог и Вы! :)
    Я скопирую к себе Ваш ответ со ссылкой на эту тему, ОК?

    Да, я почему-то пугаюсь этих стандартных кодов БлогСпота... Мне легче констролить стандартные коды-html...
    Поэтому я и не смогла осилить вставку текста под картинку, описанную Вами - посмотрела на этот сумбур кодов и испугалась... :(
    Не могли бы Вы написать мануал о том, как это сделать с помощью html-кодов?

    ОтветитьУдалить
  10. Хорошо, Allpa, напишу в блоге или на email ;).

    Кстати, у вас классная статья получилась - все очень понятно!

    Спасибо и удачи!
    Света

    ОтветитьУдалить
  11. Свет, а может быть что у меня в шаблоне нет этой строчки .post img ? Ищу ни найду...

    ОтветитьУдалить
  12. Точно, Лиза, нету!

    Значит добавляем всю секцию целиком:

    .post img {
    padding: 5px;
    border: 5px ridged blue;
    }

    вставим это ну, например, после этого фрагмента

    .post-footer a {
    margin-$endSide: 6px;
    }

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

    Удачи во всем!
    Света

    ОтветитьУдалить
  13. Свет, спасибо огромное! Заработалоооо!!!

    ОтветитьУдалить
  14. Спасибо большое! Даже не думала что я на это способна :)

    ОтветитьУдалить
  15. Очень красиво получилось, Вика-Ежевика!
    :)))

    Удачи во всем!
    Света

    ОтветитьУдалить
  16. wow,klass! Ya teper smogu svoi sketches stavit v ramku, ya vam strashno blagodarna!
    Mojno tupoy vopros? Kak mne znat, otkuda to est, kakie est ramki? otkuda eti nomera, kodi ili chto eto....Ya prosto vzyala kak vash zdes, i poluchilos. No kak mne znat kakoy vibrat, esli ya ne znayu voobshe otkuda eto beretsya? spasibo!!!!

    ОтветитьУдалить
  17. "Ya teper smogu svoi sketches stavit v ramku" - и выглядят они у вас совершенно классно! :)))

    Теперь про рамки по-подробнее.

    У рамок бывает три характеристики:
    1) Толщина (border-width) - измеряется в пикселях;
    2) Стиль рамки (border-style) - все вот эти английские слова: solid, double, groove, dotted, dashed, inset, outset, ridge; (как разные стили рамок выглядят можно посмотреть выше на синие рамочки, а еще лучше поэкспериментировать самостоятельно);
    3) Цвет (border-color) его можно указывать испотльзуя 6-циферный шестнадцатиричный код цвета, а можно цвет называть по имени, а можно его совсем не указывать, тогда он будет таким же как буквы в блоке.

    В описателе border параметры идут именно в такой последовательности: толщина, стиль, цвет.

    Кстати, рамку можно задавать только с каждой стороны, тогда вместо border будут border-top, border-right... и так далее. Я этим приемом иногда пользуюсь, чтобы подчеркнуть иногда текст (просто описываю border-top). Еще иногда красиво получается, когда люди определяют рамки со всех сторон отдельно.. но это явно не для ленивых!

    Ну, про отступы (padding) я вроде и в статье написала.

    Будут еще вопросы пишите!
    Удачи во всем!
    Света

    ОтветитьУдалить
  18. Spasibo ogromnoe. Voobshe, vam nado nachinat charge for membership, nastolko u vas tut horoshiy proekt! I polezniy. :)))

    Nikak ne rezberus vse -taki kak je mne pomestit okoshko s tekstom. :) Kogda ya dobavlyau v bloggere kak text on vilezyet na vsyu stranitsu, ogromniy kak slon! a ya hochu melkiy text v uglu naverhu...razmerom kak moy photobucket kak bi. Hot ubey, ne pridumayu kak.

    ОтветитьУдалить
  19. Я создал блог уже на новой версии Blogger с новыми шаблонами. Разобраться с css следуя вашей инструкции не получ. Хотя бы в самом сообщении удалось эту рамку сделать - но нет, не получается...:((

    ОтветитьУдалить
  20. PeeKaBoo, спасибо за комментарий!

    Да, css и сам шаблон намного сложнее в шаблоне полученном из Дизайнера... Похоже, когда будет время надо будет начать писать о том что и как можно изменить в коде полученном после Дизайнера шаблонов.

    А что не получается вставить рамку внутри поста, тоже закономерно настройки зашитые в шаблоне похоже сильнее того что вы меняете в постах.

    Буду экспериментировать!

    Спасибо еще раз,
    Света

    ОтветитьУдалить
  21. вставила секцию в шаблон,все сделала по инструкции,но рамки так и не появились

    ОтветитьУдалить
  22. спасибо огромнейшее за ваш блог! очень полезен!!!!

    ОтветитьУдалить
  23. Светлана, здравствуйте.

    Уже не первый раз захожу на ваш блог и с каждым разом все лучше блог и все больше интересной информации!

    Подскажите мне пожалуйста: у меня выставлен по умолчанию padding и border для картинок моего блога - мне подходит и нравится как выглядят картинки, но при попытке установить галерею pikachoose на свой блог, оказалось необходимым убрать padding и border на отдельной станице галереи (а то картинки при анимации "залазят на padding и border") Подскажите пожалуйста, как средствами SCC сказать блоггеру что на этой (сделанной под галлерею) странице НЕ НАДО использовать свойства padding и border, а на всех остальных - пожалуйста..

    Заранее благодарна за ответ. Людмила.

    ОтветитьУдалить
  24. У меня ничего не получается, что я делаю не так???
    Это ж надо такой глупой быть!?! У всех получается, а у меня нет!

    ОтветитьУдалить
  25. Светик спасибо за полезную инфу!

    ОтветитьУдалить
  26. Класс! Спасибо! То что нужно! Правда, ridget не сработало, но outset меня вполне устроил :)

    ОтветитьУдалить
  27. Света, спасибо. Со всем справилась, все работает, красота!Текст ".post img {padding: ***; border: ***;}" тоже пришлось вставлять целиком самой. От чего зависит наличие тех или иных "частей" в шаблонах различных пользователей? Очень часто сталкиваюсь с такой ситуацией, что чего-то, что "найдите строчку в своем шаблоне и добавьте то и то" не получается. Нет такого текста и все тут.

    ОтветитьУдалить

Популярные сообщения