Это песенка Александра Суханова
"Уезжаю в Ленинград", а вот по этой ссылке вы найдете еще много песенок этого замечательного барда:
Александр Суханов(Зеленая карета, 1996)
На самом деле не в Ленинград, а в Киев.... на неделю и очень неожиданно. Уезжаем завтра вот с этого самого вокзала, который на картинке, взятой мной из статьи в Википедии "Киевский вокзал".
Но мой рассказ будет не о стиле неоклассицизма с элементами ампира, в котором был построен этот вокзал более 90 лет назад и даже не о том как мне не хочется от вас всех уеэжать, хотя к некоторым читателям мы будем и ближе по крайней мере географически.... А расскажу я вам, как можно придать картинке в блоге некий 3D эффект.
Бороздя просторы интернета я как-то увидела блог, в котором фотографии смотрелись особенно эффектно, я решила с этим разобраться и вот что я выяснила. Оказывается эффект объемности во многом обусловлен рамкой для фотографии. Я знаю, что многие фотохудожники публикуют свои фотографии в рамке. Способ неплохой, а даже очень хороший, его единственный недостаток в том, что все мы люди креативные и время от времени чувствуем острую необходимость поменять что-то в дизайне блога, а проще говоря сменить темплейт, шаблон или макет. И вот фотографии в старых рамках, могут выглядеть уже не столь эффектно - не так сочетаться с новым цветом фона и т.д.
Итак, в прошлый раз (Blogger: Картинка с подписью!), мы вспомнили немного о стилях CSS. Сегодня я покажу еще пару свойств которые можно добавить к стилю, описывающему вашу картинку или что угодно еще.
1) padding - отступ
2) border - рамка
назначая для padding полжительное значение в пикселях или процентах, мы заставляем наш объект в данном случае картинку немного сжаться - отодвинуться внутрь от её границ. Граница же останется на месте и мы её даже покрасивее выделим, назначая какие-нибудь красивые значения для параметра border.
В этой статье я назначила параметру padding значение 5px.
А рамку (border) описала следующими параметрами: 4px groove #6D5C4C что значит толщина рамки 3px стиль рамки groove (гравированный), а это #6D5C4C номер цвета или он может записываться так же как rgb(197, 166, 137) - я без лишних затей взяла цвет, который уже используется в этом шаблоне. Вы, конечно подберете свой цвет для рамочки.
А рамку (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="" описания нашей картинки <img ... > элемент padding (вот у меня было добавлено padding: 5px;) и элемент border (у меня было как вы помните border: 4px groove #6D5C4C; )
И наконец осталось решить хотим ли мы применять эти стили только для некоторых картинок (что равносильно примеру с фотохудожником, публикующим свои фотографии уже в рамке) или мы хотим применить эти стили для всех картинок в наших статьях, уже опубликованных и только задумывающихся... Как применить к одной фотографии, я уже рассказала. Чтобы заработало сразу для всех фотографий во всех статьях вашего блога, придется немного поменять макет/дизайн.
Итак, идем Панель инструментов, Дизайн, Изменить Html
1) Сохраняем текущее состояние нашего Шаблона (Blogger: Сохраняем и восстанавливаем шаблон на Blogger(е)!)
2) Теперь ищем в нашем шаблоне строчку: .post img
после этой строчки в фигурных скобках будет CSS описание как выглядят картинки в ваших статьях. Измените значения для padding и border, на те которые вам понравились в ходе предыдущего эксперимента. Нажмите ПРОСМОТР посмотреть как это будет выглядеть и СОХРАНИТЬ ШАБЛОН если вы довольны результатом. Нажмите УБРАТЬ ИЗМЕНЕНИЯ если что-то вам не понравилось.
Всем Любви и Удачи!
А я через 18 часов сажусь на поезд...
Света
Комментарии и вопросы более чем приветствуются,
нужна помощь - поможем! Читать дальше...
О! А я недавно как раз искала инфу именно о рамках к картинкам! Супер! Большое спасибо.:)
ОтветитьУдалитьУ меня не получилось... :(
ОтветитьУдалитьВвела такой код для картинки:
<img style="border: 4px groove #6D5C4C; padding: 5px;" src="http://lh4.ggpht.com/_DM2EEkZHUE4/SWyxNg45uII/AAAAAAAAAJI/l4XZ2lEb6hs/15.jpg">
а рамочка не появляется... :( Мне кажется, я всё сделала правильно - в чём же дело?
Ах ты ё-моё! Это моя Опера косячит - не отображает в "Предварительном просмотре" рамку! Вот я и думала, что не срабатывает! А когда отправляешь сообщение в блог - всё прекрасно отображается. :)
ОтветитьУдалитьПростите, что напрасно побеспокоила Вас. И огромное спасибо за инструкцию - ссылку на Ваш блог с полезнейшими фичами для блоггеров обязательно выложу у себя. :)
Удачи Света=)
ОтветитьУдалитьА зачем спрятанная рамка? Просто так?
ОтветитьУдалитьСпасибо, YarRus!
ОтветитьУдалитьУдача нам действительно нужна!
Всем остальным отвечу когда вернусь.
Света.
>> ищем в нашем шаблоне строчку: .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 - это именно список, просто я сделала такое офрмление), то рамка вокруг не появляется вообще. На всех остальных да, но не внутри списка.
Что здесь можно сделать, не подскажете?
Спасибо. :)
> А зачем спрятанная рамка? Просто так? - В случае с картинками - просто так, Alex. А в случае описания рамок для таблиц разница между border: none и border: hidden в разнице приоритетов при разрешении конфликтов границ ячеек. Как я поняла none имеет наименьший приоритет, а hidden наибольший... - В общем, все это сложно, я лично сама с такими конфликтами ни разу не сталкивалась. Так что - просто так!
ОтветитьУдалитьУдачи и спасибо за комментарий!
Света
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 к этой статье ;).
Света
Светлана, огромнющее Вам спасибо за подробное пояснение - это просто находка, Ваш блог и Вы! :)
ОтветитьУдалитьЯ скопирую к себе Ваш ответ со ссылкой на эту тему, ОК?
Да, я почему-то пугаюсь этих стандартных кодов БлогСпота... Мне легче констролить стандартные коды-html...
Поэтому я и не смогла осилить вставку текста под картинку, описанную Вами - посмотрела на этот сумбур кодов и испугалась... :(
Не могли бы Вы написать мануал о том, как это сделать с помощью html-кодов?
Вот, мои потуги разобраться с картинками :) со ссылками на Ваш блог.
ОтветитьУдалитьХорошо, Allpa, напишу в блоге или на email ;).
ОтветитьУдалитьКстати, у вас классная статья получилась - все очень понятно!
Спасибо и удачи!
Света
Свет, а может быть что у меня в шаблоне нет этой строчки .post img ? Ищу ни найду...
ОтветитьУдалитьТочно, Лиза, нету!
ОтветитьУдалитьЗначит добавляем всю секцию целиком:
.post img {
padding: 5px;
border: 5px ridged blue;
}
вставим это ну, например, после этого фрагмента
.post-footer a {
margin-$endSide: 6px;
}
И, естественно, как я говорила выше (т.е. в статье) меняем с вид границы, её цвет и толщину на те которые подойдут к твоему шаблону и также можно поменять значение отступа в padding.
Удачи во всем!
Света
Свет, спасибо огромное! Заработалоооо!!!
ОтветитьУдалитьОтлично!!!!
ОтветитьУдалить:)))
Спасибо большое! Даже не думала что я на это способна :)
ОтветитьУдалитьОчень красиво получилось, Вика-Ежевика!
ОтветитьУдалить:)))
Удачи во всем!
Света
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!!!!
"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) я вроде и в статье написала.
Будут еще вопросы пишите!
Удачи во всем!
Света
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.
Я создал блог уже на новой версии Blogger с новыми шаблонами. Разобраться с css следуя вашей инструкции не получ. Хотя бы в самом сообщении удалось эту рамку сделать - но нет, не получается...:((
ОтветитьУдалитьPeeKaBoo, спасибо за комментарий!
ОтветитьУдалитьДа, css и сам шаблон намного сложнее в шаблоне полученном из Дизайнера... Похоже, когда будет время надо будет начать писать о том что и как можно изменить в коде полученном после Дизайнера шаблонов.
А что не получается вставить рамку внутри поста, тоже закономерно настройки зашитые в шаблоне похоже сильнее того что вы меняете в постах.
Буду экспериментировать!
Спасибо еще раз,
Света
вставила секцию в шаблон,все сделала по инструкции,но рамки так и не появились
ОтветитьУдалитьспасибо огромнейшее за ваш блог! очень полезен!!!!
ОтветитьУдалитьСветлана, здравствуйте.
ОтветитьУдалитьУже не первый раз захожу на ваш блог и с каждым разом все лучше блог и все больше интересной информации!
Подскажите мне пожалуйста: у меня выставлен по умолчанию padding и border для картинок моего блога - мне подходит и нравится как выглядят картинки, но при попытке установить галерею pikachoose на свой блог, оказалось необходимым убрать padding и border на отдельной станице галереи (а то картинки при анимации "залазят на padding и border") Подскажите пожалуйста, как средствами SCC сказать блоггеру что на этой (сделанной под галлерею) странице НЕ НАДО использовать свойства padding и border, а на всех остальных - пожалуйста..
Заранее благодарна за ответ. Людмила.
У меня ничего не получается, что я делаю не так???
ОтветитьУдалитьЭто ж надо такой глупой быть!?! У всех получается, а у меня нет!
Светик спасибо за полезную инфу!
ОтветитьУдалитьКласс! Спасибо! То что нужно! Правда, ridget не сработало, но outset меня вполне устроил :)
ОтветитьУдалитьСвета, спасибо. Со всем справилась, все работает, красота!Текст ".post img {padding: ***; border: ***;}" тоже пришлось вставлять целиком самой. От чего зависит наличие тех или иных "частей" в шаблонах различных пользователей? Очень часто сталкиваюсь с такой ситуацией, что чего-то, что "найдите строчку в своем шаблоне и добавьте то и то" не получается. Нет такого текста и все тут.
ОтветитьУдалить