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

Ralex. We do the work.
На рынке с 1999го года. Средняя ценовая категория. Ориентация на эффективность решений.
Ознакомтесь с нашим портфолио
Узнайте больше о услугах
Свяжитесь с нами:
E-mail: [email protected]
Tel: (044) 587 - 84 - 78
Custom web design & дизайн и разработка сайта "под ключ"
Креативный, эффективный дизайн. Система управления сайтом (СУС).
Custom flexible разработка систем электронной коммерции
Система e-commerce разрабатывается под индивидуальные потребности. Гибкая функциональность.
Search Engine Optimzation & оптимизация под поисковые системы (SEO)
Постоянная оптимизация и мониторинг сайта в поисковых системах. Достигаем результата быстро и эффективно
Custom logo design & дизайн логотипа и фирменного стиля
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.
профессиональная рекламная фотография
креативно, смело, качественно
Custom logo design & рекламный креатив. дизайн рекламы
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.

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

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

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

Робиться це за допомогою стилів 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 (вбудованим завантажувачем, яким користуєтеся і ви):

<Img class = "aligncenter size-full wp-image-2437" title = "картинка" src = "https://mojwp.ru/wp-content/uploads/2013/02/konkurs2.jpg" alt = "картинка" width = "512" height = "210" />

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

<Img style = "background: # FFE296; padding: 15px 8px 25px 8px;" class = "aligncenter size-full wp-image-2437" title = "картинка" src = "https://mojwp.ru/wp-content/uploads/2013/02/konkurs2.jpg" alt = "картинка" width = "512" height = "210" />

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

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

Найбільш уважні з вас помітили, що додалося 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 (колір).

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

<Img style = "background: #fff; padding: 15px 8px 25px 8px; border: 1px solid #CCCCCC;" class = "aligncenter size-full wp-image-2437" title = "картинка" src = "https://mojwp.ru/wp-content/uploads/2013/02/konkurs2.jpg" alt = "картинка" width = "512" height = "210" />

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Післямова

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

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


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

Категории
  • Биология
  • Математика
  • Краеведению
  • Лечебная
  • Наука
  • Физике
  • Природоведение
  • Информатика
  • Новости

  • Новости
    Подготовка к ЕГЭ по математике
    Статьи Опубликовано: 05.10.2017 Подготовка к ЕГЭ по МАТЕМАТИКЕ. 1 часть. Эффективный курс подготовки. Вы находитесь на сайте www.ege-ok.ru - Подготовка к ЕГЭ по математике. Меня зовут Инна Владимировна

    Куда поступить с обществознанием, русским и математикой
    Статьи Опубликовано: 06.10.2017 Сдача ЕГЭ. Куда поступать? Обществознание считается одним из самых популярных предметов, которые выпускники сдают на ЕГЭ. Ввиду высокого рейтинга дисциплины Рособрнадзор

    Сайт Майер Елены - ЕГЭ по математике
    Планируется проведение двух отдельных экзаменов – базового и профильного. Кому сдавать базовый ЕГЭ по математике? Базовый ЕГЭ организуется для выпускников, изучающих математику для общего развития

    ГДЗ решебник по математике 4 класс
    Извините, тут пока ничего нет ((( Решебник по математике 4 класс (Истомина Н.Б.) – не просто возможность быстро выполнить домашнее задание для учащегося, но и способ разобраться в труднорешаемых задачах.

    ГДЗ по математике 1 класс Самсонова самостоятельные работы
    Решебник по математике за 1 класс автора Самсоновой Л.Ю. 2012 года издания. Данное пособие предлагает готовые решения на разнообразные упражнения, направленные на активизацию всего учебного процесса. Здесь

    Для этой работы нужна математика
    Слотов: 956 Рулеток: 7 Лицензия: Pragmatic Play, Microgaming, ELK, Yggdrasil, Habanero, Amatic, Isoftbet, Netent, Rival, Igrosoft, Quickspin. Игры: Автоматы, Покер, Рулетки. Всего 963 Отдача: 98% Бонус

    Веселые задачи по математике 2 класс
    Во время занятий для того, чтобы немного переключить внимание школьников, но при этом не уйти от предмета, можно давать шутливые задачи на сообразительность. Буду пополнять коллекцию таких задач. Дополнительная

    Функция экспонента в Excel
    Одной из самых известных показательных функций в математике является экспонента. Она представляет собой число Эйлера, возведенное в указанную степень. В Экселе существует отдельный оператор, позволяющий

    ЕГЭ по математике 2018
    ЕГЭ по математике, наравне с русским языком , – обязательный экзамен для сдачи выпускниками 11-х классов. По статистике он самый сложный. Мы предлагаем ознакомиться с общей информацией об экзамене и

    Секреты эффективной и быстрой подготовки ко второй части ОГЭ по математике.
    Уважаемые девятиклассники, настоящие или будущие! Часто от вас приходится слышать следующие вопросы. Легко ли подготовиться к заданиям второй части ОГЭ по математике? Сколько для этого понадобится


    Наши клиенты
    Клиенты

    Быстрая связь

    Тел.: (044) 587-84-78
    E-mail: [email protected]

    Имя:
    E-mail:
    Телефон:
    Вопрос\Комментарий: