Рамка вокруг картинок


Содержание

Как убрать рамку вокруг картинки в html

Когда мы вставляем картинку в html, то на странице она может отобразиться с рамкой:

Это связано с тем, что по умолчанию в свойствах CSS стоит значение border:

Чтобы рамки больше не было достаточно исправить значения на 0.

Есть еще один вариант почему картинка может быть с рамкой. Возможно, в атрибутах тега указан border:

В этом случае нам также надо поправить его на ноль.

Если картинка является ссылкой (такое часто бывает), то в этом случае надо прописать в стилях к вашему сайту:

Рамка вокруг картинок

В этом уроке будет показано, как выводить картинку на страницу и задавать значения некоторых параметров: длина, ширина, «название», толщина и цвет рамки.

Создайте папку «images» в той же директории (общей папке), в которой у вас находятся html-страницы. После этого в папку «images» загрузите какую-нибудь картинку, например эту:

Для вывода изображения применяется тег » » . Внутри него пишется путь к изображению и задаются нужные параметры.

Для начала просто напишем путь к изображению — оно будет выведено в оригинальном размере:

Теперь зададим картинке параметры длины, ширины и название.

Рамка вокруг изображения HTML

Рассмотрим, как сделать рамку вокруг изображения и задать ей цвет и ширину. Это делается с помощью простого атрибута CSS — style=»border: « в котором задаётся ширина и цвет рамки.

В следующем уроке будет рассмотрен вывод изображения относительно текста.

Размытая рамка по бокам или вокруг фото онлайн

Главное нужно указать файл картинки на вашем компьютере или телефоне, нажать кнопку ОК, подождать пару секунд и скачать готовый результат. Остальные настройки уже выставлены по умолчанию. На этом сайте ещё есть похожий онлайн инструмент для добавления зеркальной фоторамки.

Несколько примеров размытых рамок, которые можно добавить на этом сайте к любой фотографии:

Первый пример размытой рамки по бокам (жёлтый огуречный цветок) был сделан с такими настройками:
Ширина рамки слева-справа — 48 %
Ширина рамки сверху-снизу — 0 %
Повысить насыщенность размытой рамки — включено (поставить галку)

Второй пример, с размытой рамкой вокруг фотографии розы, сделан при помощи настроек по умолчанию, кроме:
Добавить тень под фотографией — включено (поставить галку)

Третий пример, с белой окантовкой и размытой рамкой вокруг фото розы, сделан с такими настройками:
Ширина окантовки фотографии — 4 %
Добавить тень под фотографией — включено (поставить галку)

Исходное изображение никак не изменяется. Вам будет предоставлена другая обработанная картинка.

Как сделать рамку в Adobe Photoshop?

Довольно часто возникает необходимость визуально отделить изображение от окружающего его текста на сайте, украсить свадебные фотографии.

На просторах интернета есть множество приложений для создания рамок, однако сделать её можно и в практически любом графическом редакторе. Как сделать рамку в фотошопе?

Рассмотрим несколько простейших способов.

Способы создания рамки в Photoshop

Способ №1: обводка

Откройте в фотошопе фотографию и выделите изображение с помощью комбинации клавиш ctrl+a или инструментами выделения, перейдя в меню « Редактирование » и кликнув по пункту « Выполнить обводку »:

Выберите цвет, толщину и расположение обводки:

Если выбрано наружное расположение обводки, размер картинки можно уменьшить с помощью команды « Свободное трансформирование », перемещая пунктирную линию, или увеличить размер вашего холста на нужную величину.

Способ №2: рамка вокруг картинки как эффект фона

Предположим, что нужная нам рамка имеет толщину 2 пикселя. Если у открытой в Photoshop картинки имеется всего один слой, то он же и является фоновым.

Нажмите F7 , дважды кликните по фоновому слою, и, когда откроется окно « Стиль слоя », выберите панель « Обводка ». Селектор « Снаружи » обязательно необходимо поменять на « Внутри ». Указав все необходимые вам параметры, кликните на « ОК »:

Способ №3: использование кисти

Для того чтобы сделать произвольную рамку для рисунка или отдельной его части, можно воспользоваться кистью. Выберите с помощью горячей клавиши B кисть и укажите её толщину:

Цветом рамки будет активный в данный момент цвет. Кликните кистью в том месте, откуда вы будете начинать рисование обводки, зажмите клавишу shift и, не отпуская кнопку, нарисуйте прямую линию.

Повторите данное действие ещё трижды ко всем сторонам картинки, и получится простая обводка. Неудачные действия можно отменить с помощью комбинации ctrl+z . Конечный результат мало отличается от первого способа, однако делать такую рамку вы можете не только по краям изображения, но и в любой части рисунка:

Способ №4: прозрачная рамка

Откройте изображение и продублируйте фоновый слой дважды с помощью сочетания клавиш ctrl+j . Отключите два верхних слоя, кликая на значок глаза напротив каждого:

Находясь на первом слое, выберите « Фильтр », « Размытие » и « Размытие по Гауссу » и размойте изображение:

Затем в окне « Фильтр » кликните на « Шум » — « Добавить шум ». В параметрах наложения слоёв слоя 2 уже знакомым способом выполните одно пиксельную черную или белую обводку.

Включите видимость всех слоёв и слой 2, применив свободное трансформирование, уменьшите по контуру на необходимую величину.

Получится такая рамка:

Экспериментируя с наложением слоёв и размытием, можно создать красивую и эффектную рамку для фото. Однако, иногда необходимо, чтобы фотография имела более сложную или тематическую рамку.

Для того чтобы не изобретать велосипед, в интернете без особых усилий можно найти множество различных бесплатных .psd или .png файлов, в которые остаётся лишь вставить изображение. Как это сделать?

Как вставить фотографию в готовую рамку?

Шаг №1

Откройте загруженную рамку и фотографию в одном проекте Adobe Photoshop :

Шаг №2

С помощью инструмента « Перемещение » перетащите фотографию в окно с рамкой. Для того чтобы синхронизировать изображения, в меню « Редактирование » выберите « Свободное трансформирование » и, удерживая клавишу shift , подгоните размер изображения под размер рамки и поверните, если это необходимо:

Шаг №3

В окне « Слои » поместите слой с рамкой выше, чем слой с фотографией, как показано на рисунке:

Теперь фотография находится под рамкой.

Шаг №4


Для создания дополнительного эффекта объёмности вы можете воспользоваться « Параметрами наложения » слоя с рамкой. Для этого кликните правой кнопкой мыши и выберите соответствующий пункт:

В разделе « Тиснение » поставьте галочки, руководствуясь своим вкусом и предпочтениями:

В результате у вас получится объёмное и реалистичное изображение в рамке.

Надеемся, что данный урок стал для вас полезен!

Делаем изображения на сайте с любым отступом от рамки

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

Делается это при помощи стилей 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): сделать фон более серым, текст черным, убрать рекламу. Поэтому не удивляйтесь, кто читает Петра Александрова.

Илон Маск рекомендует:  chroot - Сменить корневой каталог

Делаем (условно) желтую рамку

Чтобы не вводить вас в заблуждение, внесу ясность: на самом деле желтый цвет это не «рамка», а лишь задний фон картинки. Чтобы такое сделать, необходимо добавить внутренний отступ изображения. Фактически — мы отодвинули картинку от края конструкции, в которой задний фон желтого цвета.

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

Теперь осталось совместить рамку и задний фон, чтобы получить эффект, как показано на первой картинке к статье:

Как сделать это у себя на сайте

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

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

Как у первого, так и второго способа есть свои плюсы и минусы. Давайте по-порядку.

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

Как уже говорилось выше, необходимо загрузить картинку на сайт как вы это обычно делаете и перейти на вкладку HTML в админке, чтобы вставить код в изображение, как я это показывал на примере.

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

Недостаток: это рутина, которая может не понравится большинству. Так же придется вручную пройтись по старым записям и добавить нужный код (чтобы весь сайт смотрелся гармонично).

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

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

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

Как сделать рамку в фотошопе вокруг фотографии?

Доброго всем времени на fast-wolker.ru! Сегодня в обзоре возможностей такого замечательного редактора, как фотошоп, мы будем учиться делать на наших картинках рамку.

Поскольку мы все так или иначе находимся в различных социальных сетях, где размещаем свои фотографии, то прежде чем выставить фото, его иногда хочется каким-либо образом украсить. А что может быть лучше рамки, когда хочется иметь портрет?

Сделать рамку вокруг картинки можно двумя способами. Первый – скачать готовые рамки и вставлять в них в программе свои фотографии. Второй вариант – нарисовать эту самую рамку средствами программы. Это посложней, но и интереснее.

Делаем рамку в Photoshop вокруг фотографии

Первый вариант самый простой. Рамок в интернете существует множество, скачиваем нужную, загружаем в программу и ставим в нее фото. Всё.

Что касается использования средств программы, то здесь имеется несколько способов. Один из них достаточно простой и позволяет сделать рамку за считанные минуты. Способ этот подразумевает использование «обводки«.

Итак, открываем программу, загружаем фото и дублируем слой. Работать будем именно с копией слоя. Дважды щелкаем по слою, откроется «окно свойств» слоя. Здесь выделяем пункт «обводка«.

Далее необходимо выбрать цвет. Он может быть как однотонным, так и с использованием градиента. По градиенту рамка получится красивее. Этот выбор делаем в пункте «тип обводки«.

Если выбрали просто цвет, то рамка будет однотонная и иметь тот оттенок, какой выберете. Что же касается градиента, то здесь можно подобрать любой интересное сочетание.

Выбрали цвет, устанавливаем сперва положение рамки «внутри«, а затем и «размер рамки» в пикселях. Когда начнем двигать ползунок размера рамки, вокруг картинки начнет появляться рамка, выбираем нужный размер.

Пробуем остальные параметры. Когда вы достигнете нужного результата жмем ОК и получаем готовую рамку вокруг нашей картинки.


Все очень просто и быстро.

Как сделать круглую рамку для фотографии в Photoshop ?

Рамки могут быть не только прямоугольные, но и иметь иную фигуру, например круглую или овальную. Начинаем с того, что открываем наше фото в программе, затем выбираем «овальное выделение» и с зажатой клавишей Shift делаем выделение вокруг нужного объекта.

Далее, необходимо инвертировать выделение. Для этого идем в меню «выделение«-«инверсия«.

На следующем шаге нажимаем клавишу Delete. В результате этот слой очиститься. На иконке слоя в палитре слоев увидим, что она стала белой, а в середине осталась картинка, которую выделяли.

Затем снова инвертируем выделение и отключаем фоновый слой. Должно получиться так:

Теперь снимаем выделение: жмем при активном инструменте «выделение» в любом месте документа и оно исчезнет. Дважды кликаем по слою с круглым фрагментом и в открывшемся окне отмечаем флагами пункты «тиснение» и «контур«.

Здесь видим много различных параметров. Начинаем с цвета, который будет обозначать цвет рамки. Затем работаем с другими параметрами, изменяя их. По ходу работы увидим, как наша картинка тоже меняется. Поэтому редактировать будет несложно. Когда все будет готово, жмем ОК и включаем нижний слой.

В результате получим следующую картинку:

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

Затем выбираем инструмент «выделение» и рисуем круг или овал.

Далее, наводим курсор в центр выделения и нажимаем правую кнопку мыши. В открывшемся окне выбираем «выполнить обводку«.

В открывшемся окне устанавливаем цвет, размер. Расположение ставим по центру.

Жмем ОК и получаем результат.

На этом можно и остановиться, но рамку такую можно сделать еще интереснее. Для этого нажимаем два раза по слою с рамкой. Откроется окно настроек. Первым делом выбираем пункт «наложение градиента». Это если нас не устраивает однотонный цвет. Здесь подбираем нужный градиент.

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

Далее экспериментируем по всем остальным пунктам, в результате получим нечто подобное:

Сохраняем рамку. Поскольку она сделана на прозрачном фоне, то в нее очень хорошо встанет любая фотография.

Вставляем прозрачную рамку в фотошопе снаружи фотографии

Этот вариант рамки и прост, и в то же время интересен тем, что представляет собой рамку сделанную из той же самой фотографии. Создаем копию слоя и отключаем его видимость. Для первого слоя в главном меню выбираем «фильтр» — «размытие по гауссу«.

Значение здесь большой роли не играет, ставим любое.

После этого добавляем еще немного шума из меню «фильтр«. Впрочем, шум можно и не ставить, но с ним рамка будет немного интереснее выглядеть.

Значение здесь так же ставим любое. Теперь включаем первый слой и из меню «редактирование«-«выполнить обводку«, создаем обводку этого слоя.

Теперь выбираем цвет белый, ставим размер в 2 пикселя, расположение по центру. В результате получим такой тонкий контур:

Далее, для нашего слоя выбираем «редактирование«-«трансформирование«-«масштабирование«, уменьшаем размер картинки и получаем такое фото с наружней рамкой:

Если поэкспериментировать с нижним слоем, можно границу создать еще интересней. Но, подобную рамку можно делать и проще. Выбираем «прямоугольное выделение» и рисуем на картинке необходимый размер.

Далее, правой кнопкой кликаем по рисунку и выбираем в открывшемся меню «выполнить обводку«:

В открывшемся окне выбираем необходимые параметры, о них говорилось выше; жмем ОК. В результате получаем рамку внутри фотографии.

Делаем в фотошопе размытую рамку вокруг фотографии

Еще один вариант создания красивой рамки. Некоторые особенности аналогичны предыдущим вариантам. Открываем фото. Выделим всё изображение, нажав Ctrl+A. Затем в меню «выделение» выбираем «модификация» — «граница» и ставим ширину в 40 пикселей.

Впрочем, ширину можно выбирать любую. Дальше применяем «размытие по гауссу» в пределах 30 пикселей. После инвертируем выделение выбрав «выделение» — «инверсия«. Сейчас давайте создадим новый слой:

Илон Маск рекомендует:  Как в Word большие буквы сделать маленькими

Затем, нажав комбинацию клавиш Alt+Delete, заливаем выделение белым цветом.

Теперь идем в «выделение» -«модификация»- «сжать» и ставим размер в 10 пикселей. Теперь рамка выделения несколько уменьшится.

После этого, нажатием клавиши Delete убираем белый цвет, а щелкнув курсором мышки в любом месте рабочего стола, снимаем и выделение. Получаем такую картинку:

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

Как в Photoshop сделать белую рамку вокруг фото без срезанных уголков

Белая рамка в программе фотошоп делается при помощи обводки. Об этом рассказывалось в предыдущих разделах. В двух словах – вы делаете обводку. Применив белый цвет. В результате получится рамка белого цвета.

Более наглядно о создании белой рамки можно посмотреть в приведенном ниже видеоуроке.

А на этом пока все, успехов в освоении фотошоп!

Как в Фотошопе сделать рамку вокруг фотографии

Рамка на фотографии позволяет отделить снимок от окружающего пространства и придать ему более законченный вид. В этой статье мы расскажем о том, как в Фотошопе сделать рамку вокруг фотографии.

Обводка фотографии

Самый простой способ того, как сделать рамку в Фотошопе, связан с использованием свойств слоя.

Открываем фотографию в Adobe Photoshop. На панели слоёв кликаем правой кнопкой мыши по слою с нашей фотографией. Если панели слоёв не видно, то открыть её можно с помощью пункта меню Window/«Окно» → Layers/«Слои».

Если в фотографии один слой, то он будет основным. Рядом с его изображением на панели слоёв появится пиктограмма в виде замочка, что означает блокировку слоя ради предотвращения случайных правок.

Для того, чтобы его разблокировать, просто дважды кликнем по этому слою мышкой. Замочек исчезнет, а сам слой станет называться Layer 0. После этого кликаем по слою правой кнопкой мыши и в контекстном меню выбираем пункт Blending Options/«Параметры наложения».

Появившееся диалоговое окно немного пугает количеством пунктов, но нам из них нужны всего два.

За добавление обводки по краю кадра отвечает пункт Stroke/«Выполнить обводку». Находим его в левой панели и отмечаем галочкой. После этого в центральной части можно задать параметры обводки:

  • Size/«Размер» — толщина обводки в пикселях. Чем больше разрешение фотографии, тем больше должно быть это значение для заметного эффекта.
  • Position/«Положение» — положение обводки. Возможны варианты расположения внутри, снаружи и по центру. У нас обводка по краю кадра, а значит все варианты, кроме расположения внутри (Ins >

В принципе, этого достаточно, чтобы по периметру кадра нарисовать линию той или иной толщины, но можно пойти ещё дальше и сделать рамку более креативной.

Так, добавить рамке объём можно с помощью настроек Bevel & Emboss/«Тиснение». Их выбор тут довольно велик, а влияние на изображение каждой наглядно отображается на превью, поэтому предлагаем просто попробовать разные варианты и подобрать нужный.

Внутренняя рамка

Открываем фотографию в Adobe Photoshop. Для того, чтобы сделать белую рамку в Фотошопе, надо выделить всю фотографию целиком. Сделать это можно либо с помощью комбинации клавиш Ctrl+A, либо с помощью команды меню Select/«Выделение» → All/«Все».

После этого весь снимок будет обведён так называемыми бегущими муравьями, представляющими собой чередование белых и чёрных штрихов.

После того как фотография выделена по периметру, нужно сделать так, чтобы выделение проходило именно там, где нужна рамка. Для этого воспользуемся командой Select/«Выделение» → Modify/«Модификация» → Contract…/«Сжать…».


В появившемся диалоговом окне нужно будет ввести отступ в пикселях от края кадра, на котором должна находится рамка. Отступ будет сделан внутрь. Значение отступа зависит как от того, насколько далеко от края вы хотите сделать рамку на фотографии, так и от разрешения исходного снимка. Не забудьте поставить галочку Apply effect at canvas bounds/«Применить эффект на границах холста», которая указывает на то, что отступ нужно делать от границы.

Нажимаем Ok и видим, что выделение сместилось к центру кадра. Если положение будущей рамки нас устраивает, то двигаемся дальше, если нет — отменяем выделение с помощью комбинации клавиш Ctrl+D и повторяем всё сначала, пока не найдём идеальное положение.

Когда нужное положение выделения подобрано, надо просто выполнить обводку по этому контуру. Для этого воспользуемся командой Edit/«Редактирование» → Stroke…/«Выполнить обводку…».

В появившемся диалоговом окне задаём параметры обводки: толщину и цвет линии, её положение относительно выделения и параметры наложения.

В этом примере мы указали, что обводка должна быть толщиной в 3 пикселя и белого цвета. А располагаться должна по центру выделения. Это значит, что линия выделения в виде «бегущих муравьёв» будет проходить по центру будущей обводки.

А вот и результат.

Рамка с неровными краями

Как сделать красивую рамку в Фотошопе? Для этого можно добавить к фотографии рамку с неровными и рваными краями.

Как и в предыдущих случаях, делаем выделение с отступом от края кадра.

После этого переходим в режим быстрой маски либо с помощью клавиши Q, либо кликая по пиктограмме быстрой маски на левой панели инструментов.

Область для рамки теперь выделена красным. Осталось добавить к ней неровные края. Для этого воспользуемся фильтрами, которых в Adobe Photoshop имеется в изобилии. Это пункт меню Filter/«Фильтр» → Filter Gallery…/«Галерея фильтров…».

Чтобы получить нужный эффект, нам потребуются фильтры из блока Brush Strokes/«Штрихи». Выбираем подходящий на свой вкус и задаём ему параметры. Чем больше разрешение фотографии, тем больше должны быть значения параметров, иначе эффект не будет заметен.

После применения фильтра рваные края добавляются к красной быстрой маске. Выходим из режима быстрой маски, преобразовывая маску в выделение, кликнув по пиктограмме быстрой маски.

Теперь инвертируем выделение с помощью команды Select/«Выделение» → Inverse/«Инверсия».

После этого нажимаем на клавишу Delete на клавиатуре для того, чтобы удалить выделенную область. При удалении Photoshop предложит сразу сделать заливку вместо удаляемой части фотографии. Указываем, какой цвет использовать для заливки.

Паспарту

Все описанные раньше в этой статье способы так или иначе способствовали обрезке части фотографии и сдвигу границ внутрь кадра. То есть часть рамки перекрывала часть фотографии. Теперь рассмотрим способ, который позволяет добавить к фотографии белую рамку — аналог паспарту.

Как и раньше, открываем фотографию в Adobe Photoshop и снимаем блокировку с основного слоя.

После этого нам надо увеличить размер холста, для чего воспользуемся командой Image/«Изображение» → Canvas Size…/«Размер холста…».

В появившемся диалоговом окне указываем новые размеры холста. При этом не обязательно увеличивать холст равномерно по горизонтали и вертикали. Тут вы можете экспериментировать.

После применения команды размер холста увеличится и новые области будут прозрачными. Осталось только заполнить их нужным цветом.

Для этого на панели слоёв создаём новый пустой слой. Он автоматически окажется над основным слоем, нам надо будет перетащить его вниз мышкой.

После этого просто заливаем новый слой нужным цветом.

Вставка фотографии в рамку

В качестве последнего способа рассмотрим, как сделать красивую рамку в Фотошопе. На стоках и бесплатных ресурсах можно найти довольно много разных рамок для фотографий. Они могут быть в формате PNG или PSD. Но при обращении к подобным ресурсам обязательно проверяйте лицензию на конкретный файл с рамкой. Она может подразумевать просто бесплатное использование или же непременное указание автора.

Итак, допустим вы нашли подходящую рамку и открыли ее в Adobe Photoshop. Вторым документом откройте фотографию, которую надо вставить в рамку.

После этого перемещаемся в документ с рамкой, выделяем её целиком с помощью комбинации клавиш Ctrl+A, после этого копируем выделение Ctrl+C, переключаемся на файл с фотографией и вставляем скопированную рамку туда Ctrl+V.

Из-за того, что размеры и формат рамки и фотографии отличались, аккуратно вставить не получилось. Поэтому надо изменить размер рамки и подогнать под неё фотографию. Делаем активным слой с рамкой, кликнув по нему мышкой, и с помощью инструмента трансформации изменяем размер рамки Edit/«Редактирование» → Free Transform/«Свободное трансформирование».

В зависимости от размера и пропорций рамки и фотографии иногда удобнее бывает изменять размер именно фотографии. Это делается аналогично.

КАК СДЕЛАТЬ РАМКУ в html вокруг текста?

Как сделать рамку в html вокруг текста

В процессе оформления сайта многие начинающие сайтостроители задаются вопросом, как изменить шрифт, размер и цвет заголовков. Да, это действительно отличный вариант, с помощью которого можно внести некоторую свежесть оформления сайта. Но существует еще один не менее интригующий вопрос, как сделать рамку html.

Для чего нужна рамка html

На самом деле, никакой особенной функции данный элемент не несет. Но все же текст, заключенный в привлекательно оформленную рамку вызывает определенный интерес у читателей. Поэтому рамку вокруг текста смело можно назвать одним из способов подчеркивания важности обрамленного текста.

Особенности создания рамки вокруг текста

Конечно же, вариаций оформления рамки средствами CSS значительно больше, но это совсем другая история. К тому же данный способ подойдет более продвинутым сайтостроителям. Я думаю, у нас с вами и с помощью правки html кода получится не менее красивая рамка html.

На первом этапе необходимо уяснить то, что рамку можно сделать для каждого html элемента в независимости, что это за тег

В свою очередь существует разница между рамками встраиваемых и блочных элементов.

Рамка встроенного типа находится внутри тегов, правильнее сказать, отвечающий за ее отображение html код заключенный между определенных тегов. На выходе у нас получается html рамка вокруг текста, для которой необходимо прописать определенные команды с целью задания внутренних отступов.

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

Конечно же для того чтобы сделать текст в рамке html нам придется обратиться к встроенным стилям. Данный способ станет наиболее приемлемым для выделения некоторых отдельно взятых фраз, абзацев в тексте и картинок. Если же вам необходимо выделить какую-то определенную часть шаблона, отображающуюся на всех страницах сайта, разумно обратиться к правке файла style.css шаблона.

Как вокруг текста сделать рамку в html

Думаю теории предостаточно. Пришло время попрактиковаться. В качестве примера я заключу в яркую салатовую рамку с серым фоном одно из важных предложений этой статьи.

Важно! Встроенные стили отменно работают и не вредят HTML валидности сайта.

Для реализации такой же рамки необходимо обратиться к тегу

и заключить между ним ниже опубликованный код.

Так как в данном примере использовались встроенные css стили, считаю не менее важным ознакомить вас с каждым из них.

1. border – свойство, отвечающее за отображение рамки. Для упрощения поставленной задачи я не стал по отдельности прописывать каждое свойство — border-width (толщина границ рамки), border-color (цвет рамки html). А вместо этого немного сократил html код, прописав все свойства после двоеточия.

Для изменения внешнего вида рамки достаточно изменить значение solid. Существуют следующие границы рамок:

2. padding – свойство, отвечающее за расстояние между рамкой и объектом, заключенным в нее.

При желании можно еще немного побаловаться со стилями добавив к числу команд заключенных между открывающимся и закрывающимся тегом

свойство margin. Таким способом можно осуществить отступы элементов, которые находятся снаружи рамки.

Чтобы изменить задний фон достаточно прописать свойство background-color, указав после двоеточия код желанного цвета.

Рамка вокруг картинки html делается тем же самым способом, поэтому у вас с этим не должно возникнуть проблем. Единственное что нужно знать новичку, это то, что для ее отображения свойства необходимо прописать в одиночном теге .

Подытожив можно сказать, что для того чтобы сделать рамку вокруг картинки или текста достаточно открыть отображение html кода статьи и прописать в нем между определенными тегами специальные свойства.

Про CSS


Border-image

Border-image — свойство, которое позволяет задавать фоновое изображение для рамки элемента. Свойство заполняет рамку заданной картинкой, распределяя части изображения таким образом, чтобы угловые части находились в углах рамки, а пространства между ними заполнялись остальными частями изображения.

Это свойство позволяет легко делать невероятные штуки, для которых раньше требовалось от 3-х до 8-ми картинок и манипуляции с разметкой.

Поддержка браузерами Не поддерживается в IE10 и ниже. В старой опере работает с префиксом. Пользователи старых браузеров (или с отключенными картинками) увидят стандартную рамку, заданную в border , поэтому имеет смысл задавать ей подходящие стиль и цвет.

Можно использовать не только квадратные картинки, но и овальные:

Картинки из примера:

При этом border-radius не влияет на border-image , так что круглые картинки для рамки — единственный способ сделать округлую рамку.

Главное требование — симметричность изображений.

Рамка с изображением полность резиновая, и может быть добавлена объекту любого размера.

Поизменяйте размер браузера, чтобы увидеть как рамка адаптируется вместе с элементом:

Или откройте этот пример в отдельном окне.

В качестве рамки могут использоваться достаточно сложные изображения:

Самый короткий способ задать изображение для рамки выглядит вот так:

Для border обязательно нужно задать толщину и стиль рамки. Цвет — опционально, но рамку именно такого цвета увидят пользователи, браузеры которых не поддерживают border-image . По умолчанию это будет цвет текста. Можно задавать transparent — прозрачный.

Для border-image обязательно задавать изображение ( border-image-source ), размер угловой части ( border-image-slice ) и повторение картинки ( border-image-repeat ).

Заданная картинка режется вот по такой схеме:

Желтым выделены угловые части, размер которых задается свойством border-image-slice , зеленым — заполняющие.

Рассмотрим отдельные свойства border-image .

Border-image-source

Возможные значения: none или .

Теоретически, можно задавать и градиенты, но они работают в Хроме/Сафари и не работают в FF. С их помощью можно было бы делать резиновые тени неправильной формы, вот такие, например (смотреть в Хроме). С градиентами можно делать и более странные варианты, причем узоры сами заботятся о своей пропорциональности. Примеры ниже на момент написания статьи работают только в Хроме и Сафари. Пример 1 Пример 2 Пример 3

Upd: В Firefox работают начиная с 29-й версии.

Размер картинки равен толщине рамки. Цвет и стиль рамки игнорируются.

Если задать только border-image-source , картинка заполнит собой уголки, не зная что ей делать дальше:

Border-image-slice

Важное свойство, которое определяет размер куска изображения, которое заполнит углы рамки. Остальные части будут использованы для заполнения пространства между углами по алгоритму, заданному в border-image-repeat .

— рассчитываются относительно размера изображения. Горизонтальные относительно ширины, вертикальные — относительно высоты. — пиксели (для растрового изображения) или координаты (для векторного). Единицы измерения не указываются. fill — ключевое слово, дополняющее предыдущие значения. Если оно задано, изображение не обрезается внутренним краем рамки, а заполняет также область внутри рамки. Очень полезно для округлых рамок.

Чтобы определить значения для каждой стороны, несколько значений можно задать через пробел.

Сумма значений противоположных сторон должна быть меньше размера картинки, иначе будет нечем заполнять пространство между углами.

Border-image-repeat

Свойство определяет как будут заполняться промежутки между углами.

Возможные значения: stretch — растягивает заполняющий участок картинки. Значение по умолчанию; repeat — повторяет заполняющий участок, при этом видны места стыков с угловой картинкой; round — заполняет промежуток между углами. Может быть заметен стык в середине стороны. Самое аккуратное действие. space — действует похоже на repeat . Разницы не обнаружила.

Можно задать два значения сразу, первое будет отвечать за поведение картинки в верхней и нижней рамке, второе — за левую и правую.

Слева repeat , справа round .

Если рамка сложная и стороны плохо стыкуются между собой, stretch сработает корректнее, вот пример.

Border-image-width

Свойство управляет шириной видимой части рамки, масштабирует её. Если это значение больше ширины border-width , картинка рамки заползет под содержимое, даже если не заданно свойство fill .

Возможные значения: — значения в px или em; — значения в процентах относительно размера изображения; — числовое значение, на которое умножается border-width auto — ключевое слово. Если оно задано, значение равно соответственному border-image-slice . Если подходящего размера нет, используется значение border-width , при этом картинка заполняет весь угол рамки, заползая под контент. Немного странно работает.

Справа рамка с border-image-width . На примере слева видно, как картинка обрезалась внутренними краями рамки. Правая рамка засчет увеличенной ширины заползла под контент.

Border-image-outset

Интересное свойство, позволяющие отодвинуть рамку за пределы элемента. Отрицательные значения не поддерживаются.

Возможные значения: — значения в px или em; — числовое значение, на которое умножается border-width .

Справа пример с border-image-outset . Это свойство не влияет на размеры элемента, а рамка может перекрывать соседние элементы:

border-image — довольно сложное, но очень интересное свойство. Мне очень нравится идея использовать его вместо традиционного способа сделать графическую рамку для резиновых элементов. Примеры в посте несколько диковаты, но я уверена, что свойство можно применять более изящно, а от его возможностей просто захватывает дух : )

Например, Вадим Макеев предложил с помощью border-image делать тень сложной формы для блока, размеры которого могут быть заранее неизвестны.

Приготовьте подходящую картинку и посмотрите как border-image легко справится с задачей с помощью всего лишь пары строчек кода:

Можно менять размеры блока и добавлять в него сколько угодно текста — тень будет растянется вслед за ним.

Прекрасная простота. Будет здорово, когда это свойство можно будет полноценно использовать без оглядки на старые браузеры.

Изображения рамок нагуглены по запросу “рамки”. Картинка с джедаями — фотожаба.

Рамка вокруг картинки

27.02.2013, 22:01

Почему рамка создаётся вокруг картинки, а не вокруг блока?
Не подскажите ещё кое-что? Не хочу засорять тему HTML/CSS своими простецкими вопросами. Почему у.

Рамка вокруг картинки, снизу двухцветная
Всем привет! Есть прямоугольная картинка. Нужно вокруг нее сделать рамку шириной 6px белого цвета и.

Рамка вокруг текста
как сделат рамку толко вокруг текста?? а то она у меня растягиваетса на всу страницу! у меня.

Рамка вокруг таблицы
у меня есть таблица, такая же как в примере, только не могу сделать рамку такую, чтоб только она.

Рамка вокруг изображени
Доброго времени суток! Добавил изображение на сайт, сдвигаю его — остаётся рамка, как только не.

Илон Маск рекомендует:  Что такое код cpdf_fill_stroke
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL