Прикрашаємо зображення на сайті. Відступ від рамки, або подвійна рамка

Як таке зробити
Робимо (умовно) жовту рамку
Робимо зовнішню рамку сірого кольору
Як зробити це у себе на сайті
Вставляємо код вручну в кожну картинку
Автоматична підстановка стилів для зображення
Післямова

Наша взаимовыгодная связь https://banwar.org/

У даній статті я наочно покажу, як зробити зображення на сайті трішки гарнішим, за рахунок додавання відступу від рамки. Інформація для тих, хто хоче персоналізувати публічний шаблон, або модифікувати нинішній.

Робиться це за допомогою стилів CSS, тобто не потрібно буде змінювати фотографії і знову завантажувати на хостинг, або щось малювати в Photoshop. Все набагато простіше.

Для початку подивимося, про що йде мова. Ось наочний приклад:

Ось наочний приклад:

Що ми тут бачимо:

Саме зображення (чорний текст на сірому фоні). Оригінал, без CSS навколо, можна подивитися за цим посиланням https://mojwp.ru/wp-content/uploads/2013/02/konkurs2.jpg .
Жовта рамка навколо зображення. Вона має нерівномірні відступи зверху, знизу і з боків (аля Polaroid).
Тоненька рамка в 1px темно-сірого кольору навколо жовтої рамки.

Якщо зацікавилися конкурсом, який анонсований на зображенні, сельву пле http://wpnew.ru (Термін: з 30 січня 2013 по 28 лютого 2013).

зміст Показати

Як таке зробити

Отже, тепер ви зрозуміли про що буде вестися далі мова. Скажу відразу: ви можете вибирати будь-які кольори для рамок. Я постарався підібрати такі, які б відрізнялися і були помітні на будь-якому моніторі. Для цього навіть довелося трохи змінити стилі сайту Wpnew.ru (як завжди допомагає FireBug): зробити фон більш сірим, текст чорним, прибрати рекламу. Тому не дивуйтеся, хто читає Петра Александрова.

Робимо (умовно) жовту рамку

Щоб не вводити вас в оману, внесу ясність: насправді жовтий колір це не "рамка", а лише задній фон картинки. Щоб таке зробити, необхідно додати внутрішній відступ зображення. Фактично - ми відсунули картинку від краю конструкції, в якій задній фон жовтого кольору.

Ось так виглядає код картинки, коли я тільки її завантажив до статті звичайним способом на WordPress (вбудованим завантажувачем, яким користуєтеся і ви):

А ось так буде виглядати код картинки, якщо додати задній фон жовтого кольору з відступом:

І наочний результат:

Найбільш уважні з вас помітили, що додалося style = "background: # FFE296; padding: 15px 8px 25px 8px;" , Яке і задало необхідні нам параметри:

style = "" - конструкція, в якій ми описуємо необхідні нам властивості CSS.
background: # FFE296; - задаємо задній фон. Тут # FFE296 позначає жовтий відтінок. Ви можете вибрати будь-який інший (скористайтеся піпеткою FastStone Capture або такий же піпеткою в Photoshop).
padding: 15px 8px 25px 8px; - внутрішній відступ, де відступи задаються так padding: зверху справа знизу зліва;

Робимо зовнішню рамку сірого кольору

В даному випадку це буде дійсно рамкою. Здається вона так:

border: 1px solid #CCCCCC;

Тут у нас параметр border (рамка): 1px (товщина) solid (безперервна) #cccccc (колір).

Тепер залишилося поєднати рамку і задній фон, щоб отримати ефект, як показано на першій картинці до статті:

Як зробити це у себе на сайті

Є два способи як таке зробити для фотографій / зображень на ваших сайтах:

Вставляти певний код в кожну фотографію / картинку в статті (режим HTML в адмінці сайту, під час написання статті).
Прописати цей код один раз в файлі стилів шаблону (style.css або аналог) і забути назавжди про рутині.

Як у першого, так і другого способу є свої плюси і мінуси. Давайте по-порядку.

Вставляємо код вручну в кожну картинку

Як вже говорилося вище, необхідно завантажити картинку на сайт як ви це зазвичай робите і перейти на вкладку HTML в адмінці, щоб вставити код в зображення, як я це показував на прикладі.

Перевага подібного способу: можна міняти забарвлення фону і рамки для кожного зображення, виходячи з колірної гами самого зображення. Так само плюсом даного методу є відносна легкість виконання, тому що не потрібно лізти в файл стилів шаблону і щось там шукати, а потім правити.

Недолік: це рутина, яка може не сподобається більшості. Так само доведеться вручну пройтися по старих записів і додати потрібний код (щоб весь сайт виглядав гармонійно).

Автоматична підстановка стилів для зображення

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

За допомогою безкоштовного доповнення для браузерів FireBug (подивіться відео з, де наочно показані принципи роботи) знаходимо клас елемента, що відповідає за відображення контенту на сторінці, а потім прописуємо для нього зазначені вище в статті стилі.

Наприклад: у мене на сайті за зовнішній вигляд тіла статті (фон, рамка, шрифт, колір шрифту та інше) відповідає клас post. З цієї причини, в файлі style.css я у себе зроблю з нового рядка ось такий запис:

.post img {background: #fff; padding: 15px 8px 25px 8px; }

В результаті все картинки всередині статті автоматично отримають рамку сірого кольору і задній білий фон з відступом. Зверніть увагу, що я додав img в код: це для того, щоб зазначені стилі застосовувалися тільки для зображень.

Ви так само уважно пройдіться по файлу стилів, перш ніж створювати нове правило. Бути може вже є .post img (умовно кажучи) і вам залишиться лише підправити в ньому параметри.

Плюс даного способу: зробили один раз і забули.

Мінус: частина з вас зараз сидить і моргає в подиві очима - "нічого не зрозумів (а)".

Післямова

Сподіваюся, доступно пояснив принцип оформлення зображень. Якщо щось не зрозуміли, то ще раз уважно перечитайте статтю і тільки потім пишіть в коментарі з питаннями реалізації.

Пам'ятайте: "Хто захоче, той зрозуміє!". Удачі в Блогерство і конкурсах.

Давай, оціни статтю!

Разработка сайта для Вашего бизнеса. Веб дизайн. Дизайн логотипа, фирменного стиля, рекламная фотография . Комплексный рекламный креатив.