Бороздя просторы интернета я как-то увидела блог, в котором фотографии смотрелись особенно эффектно, я решила с этим разобраться и вот что я выяснила. Оказывается эффект объемности во многом обусловлен рамкой для фотографии. Я знаю, что многие фотохудожники публикуют свои фотографии в рамке. Способ неплохой, а даже очень хороший, его единственный недостаток в том, что все мы люди креативные и время от времени чувствуем острую необходимость поменять что-то в дизайне блога, а проще говоря сменить темплейт, шаблон или макет. И вот фотографии в старых рамках, могут выглядеть уже не столь эффектно - не так сочетаться с новым цветом фона и т.д.
Итак, в прошлый раз (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="" описания нашей картинки
элемент padding (вот у меня было добавлено padding: 5px;) и элемент border (у меня было как вы помните border: 4px groove #6D5C4C; )
И наконец осталось решить хотим ли мы применять эти стили только для некоторых картинок (что равносильно примеру с фотохудожником, публикующим свои фотографии уже в рамке) или мы хотим применить эти стили для всех картинок в наших статьях, уже опубликованных и только задумывающихся... Как применить к одной фотографии, я уже рассказала. Чтобы заработало сразу для всех фотографий во всех статьях вашего блога, придется немного поменять макет/дизайн.
Итак, идем Панель инструментов, Дизайн, Изменить Html
1) Сохраняем текущее состояние нашего Шаблона (Blogger: Сохраняем и восстанавливаем шаблон на Blogger(е)!)
2) Теперь ищем в нашем шаблоне строчку: .post img
после этой строчки в фигурных скобках будет CSS описание как выглядят картинки в ваших статьях. Измените значения для padding и border, на те которые вам понравились в ходе предыдущего эксперимента. Нажмите ПРОСМОТР посмотреть как это будет выглядеть и СОХРАНИТЬ ШАБЛОН если вы довольны результатом. Нажмите УБРАТЬ ИЗМЕНЕНИЯ если что-то вам не понравилось.
Источник
0 коммент.:
Отправить комментарий
Комментировать...