Украшаем изображения на сайте. Произвольный отступ от рамки, или двойная рамка
Опубликовано: 01.02.2013
1073
В данной статье я наглядно покажу, как сделать изображения на сайте чуточку красивее, за счет добавления отступа от рамки. Информация для тех, кто хочет персонализировать публичный шаблон, или модифицировать нынешний.
Делается это при помощи стилей 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 (посмотрите видео с моего канала YouTube, где наглядно показаны принципы работы) находим класс элемента, отвечающего за отображения контента на странице, а затем прописываем для него указанные выше в статье стили.
К примеру: у меня на сайте за внешний вид тела статьи (фон, рамка, шрифт, цвет шрифта и прочее) отвечает класс post. По этой причине, в файле style.css я у себя сделаю с новой строки вот такую запись:
.post img {background:#fff;padding:15px 8px 25px 8px;}В результате все картинки внутри статьи автоматически получат рамку серого цвета и задний белый фон с отступом. Обратите внимание, что я добавил img в код: это для того, чтобы указанные стили применялись только для изображений.
Вы так же внимательно пройдитесь по файлу стилей, прежде чем создавать новое правило. Быть может уже есть .post img (условно говоря) и вам останется лишь подправить в нем параметры.
Плюс данного способа: сделали один раз и забыли.
Минус: часть из вас сейчас сидит и моргает в недоумении глазами — «ничего не понял(а)».
Послесловие
Надеюсь, доступно объяснил принцип оформления изображений. Если что-то не поняли, то еще раз перечитайте статью и только затем пишите в комментарии с вопросами реализации.
Помните: «Кто захочет, тот поймет!». Удачи в блогерстве и конкурсах.
100+ Html изображений | Скачать бесплатные картинки на Unsplash
100+ Html картинки | Download Free Images on Unsplash- A framed photoPhotos 345
- A stack of photosCollections 4.1k
- A group of peopleUsers 23
javascript
programming
coding
source
html/css
the source
html код
случайный
HD обои для компьютеразнакомствасоединение
codeberlingermany
quarteiraportugalguitar
Workhrvatskaosijek
Книжные изображения и фотобук -фотобук.
–– – –––– –– – –– –––– – – –– ––– –– –––– – –.
кодированиеHd серые обоиhack
рендерингHd 3d обоиjavascript
front-endblenderWebsite backgrounds
Hd laptop wallpaperscomputer softwarehealthcare and medicine
csssite building
deskmachine learningoffice
design professionaltechnologyconstruction site
Texture backgroundsHd pattern wallpaperstx
śmiarypolandinternet
Related collections
HTML
18 photos · Curated by Mariana OrtegaHTML-фоны
72 фото · Куратор Na NoJuly HTML
38 photos · Curated by Tim Arnoldgroningennetherlandsfooddrop
collaborationprofessionalcollaborative
Hd computer wallpapersdatingconnection
renderHd 3d wallpapersjavascript
Hd laptop wallpaperscomputer softwarehealthcare and medicine
Book images & photosbook coverCover photos & images
design профессиональная техникастроительная площадка
deutschlanderlangenдомашняя страница
—-кодингхд серый обоиФоны фронт-эндблендеров
Workhrvatskaosijek
Afganistankankabulcomputer Engineer
Фоновая фон.
– – –––– –– – –– –––– – – –– ––– –– –––– – –.
codeberlingermany
quarteiraportugalгитара
csssite building
deskmachine learningoffice
Связанные коллекции
HTML
18 Фотографии · Куратор Mariana OrtegaHTML Faines
72 ФОТОГРАФИСотрудничествоПрофессиональныйСотрудничество
Логотип UnsplashUnsplash+
В сотрудничестве с Getty Images
Unsplash+
Разблокировать
Hd компьютерные обоизнакомствосоединение
Флориан Оливо
кодированиеHd серые обоиhack
–––– –––– –––– – –––– – –––– –– – –– –––– – – – – ––– –– –––– – –.
Pankaj Patel
Codeberlingermany
Jackson Sophat
renderhd 3D Wallpapersjavascript
Jackson Sophat
Front-EndblenderWebsite фоновые0011
In collaboration with Getty Images
Unsplash+
Unlock
Hd laptop wallpaperscomputer softwarehealthcare and medicine
Goran Ivos
workhrvatskaosijek
Valery Sysoev
csssite building
Greg Rakozy
Book images & photosbook coverCover photos & images
Агентство КОБУ
офис машинного обучения
Мохаммад Рахмани
афганистанкабул инженер-компьютерщик
Unsplash logoUnsplash+
In collaboration with Getty Images
Unsplash+
Unlock
design professionaltechnologyconstruction site
Niels Kehl
Hd starbucks wallpapersnederlandamsterdam
Michael Dziedzic
Texture backgroundsHd pattern wallpaperstx
Markus Spiske
deutschlanderlangenhomepage
Ник Карвунис
śmiarypolandinternet
Джантин Дорнбос
groningennetherlandsfooddrop
Unsplash logoUnsplash+
In collaboration with Getty Images
Unsplash+
Unlock
collaborationprofessionalcollaborative
Kevin Canlas
devglassesHd dark wallpapers
Логотип Unsplash
Сделайте что-нибудь потрясающее
Руководство по фоновым изображениям в электронных письмах — Email Uplers
Фоновые изображения поднимают визуальную привлекательность ваших электронных писем на новый уровень.
Вот как вы можете использовать это правильно….
[Этот блог был изначально опубликован
Фоновые изображения — это как вишенка на торте в маркетинговых электронных письмах. Вы много работали над содержанием письма; теперь, если вы подкрепите его пиксельным фоновым изображением электронной почты, которое тесно связано либо с вашим брендом, либо с содержанием вашего электронного письма, вы значительно увеличите свои шансы на повышение коэффициента конверсии.
Зачем отправлять фоновые изображения по электронной почте? Наш мозг может обрабатывать изображения с невероятной скоростью — 0,013 секунды. Другое исследование показывает, что 92,6% людей говорят, что визуальное измерение является основным фактором, влияющим на их решение о покупке. Таким образом, бренды часто полагаются на изображения и графику продуктов, чтобы вызвать интерес к маркетинговым электронным письмам; и добавление фоновых изображений является одним из таких мощных инструментов, используемых ими.
Проще говоря, фоновые изображения писем подчеркивают визуальную привлекательность вашего письма и стимулируют ваших читателей к взаимодействию с контентом.
Этот метод дизайна хорошо применяется в мире Интернета, но, к сожалению, что касается электронной почты, маркетологи все еще неохотно используют этот действительно привлекательный маркетинговый инструмент. Почему?
Основная проблема с добавлением фонового изображения в сообщение электронной почты заключается в том, что оно поддерживается не во всех почтовых клиентах (блокировка изображения). Например, рендеринг фонового изображения Outlook — это полторы задачи. Так что, если вы хотите создать вау-фактор с фоновыми изображениями в шаблоне электронной почты, вам нужно знать, какие ESP будут поддерживать ваши изображения, а какие потребуют от вас дополнительных усилий, чтобы убедиться, что ваш дизайн выглядит именно так, как вы этого хотите. к. Это означает ознакомление с правилами рендеринга, которые связаны с каждым клиентом.
Например, фоновое изображение Outlook отображается правильно, только если для всего письма используется один фон. Если вы попытаетесь использовать разные фоны для разных элементов электронной почты, ошибки начнут заявлять о себе.
Блокировка изображений электронной почты является результатом настроек по умолчанию многих провайдеров электронной почты или предоставленных ими личных предпочтений. Блокировка может помешать вашей маркетинговой кампании и даже не повлиять на потенциальных клиентов; в некоторых крайних случаях вы можете просто произвести неблагоприятное впечатление на своих читателей.
Неправильное соотношение текста и изображения (которое не равно 80:20) может иметь катастрофические последствия для вашей почтовой кампании, если почтовый клиент заблокирует ваши изображения. Рекомендации для идеального соотношения текста и изображения в электронных письмах >>
Итак, давайте сосредоточимся на инструменте, который поможет вашему фоновому шаблону электронной почты отображаться у всех поставщиков электронной почты — ну, почти у всех.
Главным виновником, похоже, является Outlook 07/10/13, который не поддерживает ни фоновые изображения электронной почты таблицы, ни стили фонового изображения. Метод пуленепробиваемого фонового изображения Campaign Monitor может стать хорошим решением этой проблемы. Убедитесь, что вы проверили, поддерживают ли ваши ESP кодирование VML (язык векторной разметки), если у вас есть одно целое фоновое изображение для вашего электронного письма. Но на всякий случай, если вы повторяете фоновое изображение шаблона электронной почты, вы можете применить его в теге body и top table со свойством повторения, и оно будет отображаться в Outlook 7, 10, 13 даже без кода VML.
Вы можете проверить это на backgrounds.cm
Здесь вы получаете возможность применить цветные фоны шаблона электронной почты ко всему письму, а также к ячейкам таблицы; и вы можете сгенерировать код для обоих сценариев.
Единственная проблема, которая может возникнуть, это размер изображения. Если Outlook 2000 и более поздние версии посчитают ваше изображение слишком большим (размер или размер), может произойти сбой. Поэтому, прежде чем перейти к фоновому изображению электронной почты в формате HTML, очень важно проверить правильность размера изображений. Кроме того, проверьте свою электронную почту в активной копии Outlook. Чтобы увидеть больше привлекательных шаблонов писем, нажмите здесь.
Чтобы быть в безопасности, всегда полезно иметь ALT-текст для ваших изображений. Включите размеры вашего изображения — ширина и высота вашего изображения электронной почты дают вашему тексту ALT контейнер отображения, когда изображения отключены. Если вы не укажете размеры, некоторые почтовые клиенты скроют эту область, и ваш ALT-текст тоже исчезнет.
Еще один вариант, который можно рассмотреть, если изображение не открывается в электронных письмах, — установить цвет фона в качестве запасного.
Это гарантирует, что даже если фоновое изображение не отображается, содержимое вашего электронного письма будет читаемым на фоне резервного цвета.
Давайте взглянем на несколько интересных писем с потрясающими фоновыми изображениями, которые привлекают внимание.
SALESFORCEРекламное электронное письмо Salesforce содержит иллюстративное фоновое изображение с текстом на переднем плане таким образом, что внимание распределяется поровну.
MINTELФоновое изображение электронной почты Mintel отличается от всего, что вы найдете в своем почтовом ящике. Этот красиво оформленный абстрактный коллаж не только мгновенно привлекает внимание, но и прекрасно дополняет тему их электронного письма.
Источник изображения NATIONAL GEOGRAPHIC National Geographic славится тем, что делает смелые заявления с помощью своих фотографий, и сообщение было аналогичным образом передано здесь, в этом электронном письме, где заголовок соответствует фоновому изображению для информационного бюллетеня.
Что может быть лучше, чем использование фонового изображения, которое идеально соответствует духу бренда? Это электронное письмо от Маммута является прекрасным доказательством этой философии. Несмотря на то, что это довольно простая техника, она творит чудеса, передавая идентичность вашего бренда вашим клиентам.
Источник изображения AMC STUBSЗатухание изображений для синхронизации с текстом, это фоновое изображение в электронной почте HTML от AMC Stubs заставило копию всплывать очень хорошо.
ACNEМодный бренд Acne не только добавляет потрясающее фоновое изображение в шаблон электронной почты (полное тело электронной почты), но также играет с цветными полосами, чтобы сделать фон еще более потрясающим.
BLANCA RESORT AND SPA
Это письмо от BLANCA Resort and Spa дает реальное представление о курорте благодаря фоновым изображениям в ячейках таблицы (а не всему тексту письма).
