Как сделать рамку для фото в html
Для того, чтобы сделать рамку картинки нам потребуется:
Нам нужна картинка, вернее код картинки вместе с адресом :
Это будет выглядеть так:
Далее добавляем вовнутрь атрибут border со значением 1.
Получаем рамку вокруг картинки :
Пример рамки картинки через атрибут border
Рамка картинки через style css
Следующим пунктом сделаем рамку картинки через css
Как вы знаете, что свойства для элемента можно прописать тремя способами, они используются в зависимости от локальности свойств(1 элемент, страница, весь сайт):
Не будем рассматривать все пункты- вы сможете сами потренироваться!
Выберем требуемый инструмент в данной ситуации — это style.
Создаем какой-то селектор — пусть это будет class,
толщина рамки : «1px»
.ramka_kartinki_css
Во внутрь картинки помещаем наш класс:
Соберем весь код рамки картинки вместе:
Пример рамки картинки через css:
Если требуется сделать отступ между рамкой и картинкой, добавляем padding
Результат:
Тень для рамки картинки
Для того, чтобы создать тень для рамки картинки нам понадобится пройти весь dwit описанный путь,
или просто взять скопировать код рамки из выше описанного пункта:
.ramka_kartinki_css_2
И добавим в стили, тень для рамки, вы можете поиграться с цифровыми значениями тени рамки картинки:
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 3px 6px rgba(0,0,0,0.22)
.ramka_kartinki_css_2
Html :
В коде html меняем название класса :
Соберем весь код вместе:
Пример тени рамки картинки
При наведении на картинку рамка исчезает css
Как сделать так. чтобы при наведении на картинку, рамка исчезала!?
Для этого нам понадобится hover.
img.ramka_kartinki_css_3:hover < border: unset; >
И получаем результат, что наша картинка будет дергаться при исчезновении рамки. Поэтому, когда вам требуется убрать рамку, то всегда делайте рамку прозрачной а не убивайте её! Если вы примените вместо «unset» — «none» результат будет аналогичный!
Пример исчезновения рамки через unset:
Плавное исчезновение и появление рамки на картинке:
Добавим в hover :
border: 1px solid transparent;
transition: all 0.5s linear 0.5s;
transition: all 0.5s linear 0.5s;
border: 1px solid black; padding: 4px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 3px 6px rgba(0,0,0,0.22);
border: 1px solid transparent;
transition: all 0.5s linear 0.5s;
как сделать рамку вокруг блока с фото и текстом?
подскажите плагин или как подробно опишите сделать чтобы в рамке, цветной, размещались фото + текст+ кнопка.
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Как сделать такую рамку вокруг фигуры?
Сделал фигуру с заливкой и красную рамку. А как на красной рамке сделать эти штрихи?
Как сделать рамку вокруг текста и изображения?
Подскажите пожалуйста, у меня есть изображение и ниже несколько слов, как вокруг всего этого.
Подскажите как сделать рамку черную в один пиксель вокруг картинки
Сабж. Вот такая задача стоит. Есть картинка. Надо чтобы скрипт делал вокруг нее черную каемку.
Регистрация: 06.04.2013
Сообщений: 181
Если я правильно поняла, то надо просто заключить все это в один контейнер и задать контейнеру border
Регистрация: 19.12.2013
Сообщений: 98
да, именно так. сейчас как раз оформляю страницу http://www.anilatur.ru/ekskursii-bari-apulia
там блоки без рамки. было бы хорошо обвести их в рамку или выделить как — то фоном, а то сливается все, экскурсий много будет на странице
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Сделать не фиксированную рамку вокруг сайта
Поместил рамку вокруг сайта, но она фиксированная, пробовал изменить значение в css position.
сделать рамку вокруг отсновного текста
Вот такой у меня шаблон есть, мне бы хотелось, сделать рамку вокруг отсновного текста, как я.
Как сделать рамку, вокруг страницы (по размеру этой страницы)?
заранее спасибо :scratch:
Сделать рамку вокруг окна из символов псевдографики
Нужно в окне Windows(X, Y); по краям без отступом от краев сделать рамку из символов псевдографики.
Как сделать рамку для фото в html
В последнее время огромную популярность в народе получили рамки для цифровых фотографий. Не те, что из пластика и дерева, а те, что накладываются на изображение в процессе обработки. Сделать такую рамку можно в любом графическом редакторе, при этом ограничений практически никаких. Широчайшее поле для самовыражения. По виду цифровая рамка может имитировать настоящую – фото в центре, обрамление по краям. Есть и другие варианты, например, фигурные рамки или шаблоны, в которые можно вставить несколько фотографий одновременно. Вы спросите, зачем все это нужно? А для чего вообще нужна оформительская работа? Чтобы привлечь внимание зрителя, усилить акценты снимка, сделать его более оригинальным и привлекательным… А результаты можно распечатать и вклеить в альбом, или заказать большой постер на стену, или сделать календарь… В конце концов, фотографии в рамке не обязательно распечатывать – можно сделать на их основе обои для рабочего стола или красивый сетевой фотоальбом.
Для создания рамок не потребуется особых дизайнерских изысков и умения работать со сложными графическими приложениями. Кстати, не все знают, что кроме рамок на фотографии можно наложить маску – подробнее об этом мы расскажем в главе «Работа с маской». Конечно, если вы не понаслышке знаете, что такое Adobe Photoshop, Illustrator или Corel Draw, то вам и карты в руки. Но если особых навыков нет, а есть огромное желание сделать что-нибудь красивое, то на помощь вам придет превеликое множество программ декоративно-оформительского характера. Большинство из них платные, однако цены не выходят за пределы разумного.
Если вы не знаете, какую программу предпочесть, то, для начала выясните, сколько в каждой из них предусмотрено шаблонов рамок и масок. Второй фактор, и тоже весьма немаловажный – какие стили и форматы изображений поддерживает приложение. Мы вам расскажем про несколько программ, позволяющих сделать вполне приличную рамку для фото.
FRAMING STUDIO PRO
Разработчик: AMS Software
Цена: 650 руб.
Тут есть классические и современные рамки, различные маски и текстуры. Можно скачать Shareware-вариант – весит утилита не много, интерфейс русский, так что никаких проблем возникнуть не должно. В условно бесплатной версии вы получите всего 80 вариантов рамок и масок, а если зарегистрироваться, то их число возрастет до 200.
Ознакомиться с возможностями Framing Studio Pro в плане эффектов можно при помощи Каталога эффектов, в котором наглядно представлены результаты обработки изображения девятью различными фильтрами. Есть также функция «пакетная обработка» которая пригодится, если вам потребуется наложить одинаковые рамки на несколько изображений сразу. Работать с этой программой очень просто – в верхней панели выбираете «Файл» → «Открыть». Находите нужное фото, после чего обращаетесь к правой панели – выбираете из «Каталога» маску или рамку и нажимаете кнопку «ОК». Если есть желание, можно сделать нечто вроде паспарту – для этого нужно воспользоваться функцией «Отдалить изображение». Выставляете «дальность» в пикселях, подбираете цвет или текстуру для паспарту. После того, как вы внесли все возможные изменения – жмите на кнопку «Применить». Вот, собственно, и все. Дело за малым – сохранить результат и распечатать готовый файл на цветном фотопринтере.
PICTURE COMBINE
Разработчик: AMS Software
Цена: 295 руб.
Picture Combine специализируется на пакетной обработке фотографий. Программа обладает широкими возможностями по коррекции изображений – кроме рамок и масок можно добавить спецэффекты, границы и надписи и т. п.
Предположим, вы хотите взять и обрамить в едином стиле группу отпускных фотографий. Для этого нужно в верхней панели войти в закладку «Файл» и выбрать пункт «Новый проект». В правой панели, в закладке «Изображения», нажмите на кнопку «Добавить файл». Можно просто выделить все фото в папке, а потом удалить те, которые не пригодятся в этом проекте.
После этого приступаем к самой ответственной части – создаем общий скрипт, по которому будут обрабатываться все изображения. При желании можно подкорректировать яркость, контрастность и цветовой баланс фотографии, однако стоит помнить, что действия, примеренные к одному снимку, будут проделаны и со всеми остальными. Чтобы сделать рамку или наложить маску, нужно в верхней панели выбрать закладку «Оформление». Рабочая площадка делится на две части – сверху у нас располагается исходный кадр – в нижней части он же, но видоизмененный. Примерить различные варианты масок можно «не отходя от кассы» — достаточно нажать кнопку «Просмотр». Нашли то, что нужно? Жмите «ОК». Теперь снова в правую панель, выбираете закладку «Действия» → «Сохранить как скрипт». Обязательно введите название скрипта, после чего нажимайте на кнопку «Загрузить скрипт», выбирайте нужный из списка и отдаете команду «Загрузить». Это еще не все, после всех подготовительных процедур, мы, наконец, переходим к следующей стадии – пакетная обработка. В той же правой панели выбираете следующую закладку – «Действия». Указывайте папку, в которую будут сохранены обработанные фотографии, затем жмите на «Начать обработку». Процесс успешно завершен, распечатываем и вставляем в фотоальбом. Или загружаем на сервер и демонстрируем всем своим сетевым знакомым.
РАМКИ ДЛЯ ФОТОГРАФИЙ
Разработчик: Artistic Software
Цена: 0 руб.
Есть три варианта этой программы – «Детская коллекция», «Цветочная коллекция» и «Лиственные узоры». Надо сказать, что все рамки и бордюры здесь очень красивые – яркие, красочные – такие можно увидеть в западных каталогах обоев.
Программа очень проста, с ней справится даже маленький ребенок. Выбираете файл, открываете его, после чего — нажимаете на кнопку рамки. Выбираете подходящий вариант из каталога и через несколько секунд вы увидите готовый результат. При желании можно изменить толщину рамки, создать зазор между рамкой и изображением (паспарту) или выбрать общий тон изображения.
К сожалению, в демонстрационной версии никакие изменения не сохраняются – просто на фотографии появляется страшная надпись – красным по черному – «Рамка создана в пробной версии программы…». Правда, это ограничение можно обойти – наводите курсор на фотографию в рамке, нажимаете на правую кнопку мыши и выбираете первый пункт – «Просмотреть в полноэкранном режиме». После чего вам нужно воспользоваться стандартной функцией Print Screen – такая «горячая» клавиша есть практически на всех современных клавиатурах. Результат такого мухлежа можно сохранить в любом графическом редакторе – достаточно создать новый файл и вставить изображение из буфера. Конечно, размеры финального изображения будут уже не те – все зависит от разрешения вашего экрана. Однако для составления веб-альбома такие фотографии вполне сгодятся.
ART FRAMES
Разработчик: AMS Software
Цена: 295 и 395 руб.
Существует две версии этой программы – базовая и полная. Отличаются они только тем, что за дополнительные 100 руб. вы получите 200 новых рамок и масок. По большому счету, эта утилита мало чем отличается от Framing Studio Pro – тот же интерфейс, тот же принцип работы. Можно обрезать фотографию прежде чем заняться выбором рамки, можно выбрать паспарту, наложить на снимок различные спецэффекты и т.д. и т.п.
Что особенно приятно, все условно бесплатные версии приложений AMS Software позволяют сохранять результаты без каких бы то ни было надписей и искажений. Урезается только количество шаблонов, но не качество изображения.
PHOTOSHOP
Что делать, если есть Photoshop, фотографии и желание сделать рамку, а вот особого стремления покупать какие-то отдельные приложения не наблюдается? В Сети есть масса готовых рамок и календарных сеток. Нужно только скачать и подставить свое фото, а сделать это можно в любом графическом редакторе, поддерживающем работу со слоями.
Предположим, вы нашли подходящую рамку. Обратите внимание на ее формат – если это JPG или BMP, то это значит, что отверстие для фотографии вам придется проделывать вручную. Оптимальный вариант – файл в формате PNG с «прозрачным» фоном. Не придется ничего вырезать – открываете и начинаете творить.
Помните, что ваша фотография должна быть такого размера, чтобы вписаться в рамку. То есть, если у вас снимок размером 3008х2000, а рамка – всего 510х750, придется уменьшать фото. Конечно, в результате распечатывать фотографию в такой рамке особого смысла нет, но если вы хотите продемонстрировать свое творение в Интернете, то этого вполне достаточно. Бывают и другие случаи, когда фото приходится значительно уменьшать – некоторые готовые рамки предполагают вставление не одного, а нескольких снимков. Если помните, лет 20 назад в моде у фотографов были такие шаблоны – когда в одном окошечке оказывалась фотография ребенка, в другом – первой учительницы, а по центру шел снимок всего класса. Вот тут все точно так же, только фото не черно-белое, а цветное, да и шаблоны куда как более оптимистичные.
Изменить размер фотографии можно через Image → Image Size или с помощью функции Transform (Edit → Free Transform или Ctrl + T). Затем копируете фото и вставляете его в файл с рамкой. Обратите внимание – если у вас шаблон с прозрачными окошками, то слой с рамкой должен быть над слоем с фотографией. Изменить порядок расположения слоев довольно просто – можно перетащить их мышкой в панели «Слои» (Layer). И все с точностью до наоборот, если у вас сплошная рамка без специальных окошек. В этом случае имеет смысл применить к слою с фотографией пару фильтров – чтобы она не выглядела «приклеенной». Придадим немного формы, объема и самобытности – Layer → Layer Stile → Drop Shadow и Inner Shadow. Это самый простой способ, поэкспериментируйте самостоятельно со свойствами слоев и фильтрами, могут получиться интересные эффекты.
РАБОТА С МАСКОЙ
Если вы обратили внимание, все приложения от AMS Software, описанные в этой статье, позволяют наложить на фотографии маску. В большинстве случаев рамка – это готовый графический файл, а понятие маски пришло из программы Photoshop, есть там такая функция. Считается, что маска — это область выделения, представленная в полутоновом виде. Черные пиксели соответствуют невыделенным областям, белые — выделенным, а серые — частично выделенным. Традиционно различают маски слоя и маски выделения. В случае с рамками обычно используется второй тип масок.
На этом позвольте завершить теоретическую часть и перейти к практической.
Понятное дело, что в случае с программами от AMS Software вам не придется задумываться о специфических особенностях наложения масок. Там они идут как альтернативный вариант оформления.
Но при желании маску можно наложить самому, в программе Adobe Photoshop. Процесс, конечно, замысловатый, но если вы его освоите, ваши оформительские возможности возрастут стократ. Итак, предположим, вы решили сделать рамку и хотите оформить вырез для фотографии. Классический прямой контур – это, конечно, хорошо и просто, но не слишком интересно. Душа просит изысков. Приступаем.
Первым делом, откройте файл с заготовкой для рамки и файл с маской. Если нужно – измените размеры маски так, чтобы она удачно вписалась в вашу рамку. После этого скопируйте файл с маской так, чтобы получилась картинка с двумя слоями: нижний – с рамкой, верхний – с маской. Потом сделайте невидимыми все слои, кроме слоя с маской – нажмите на пиктограмму с изображением глаза в панели «Слои» (Layers).
В закладке «Выделение» (Select) выберите пункт «Цветовой диапазон» (Color Range). Появится окошко, в котором вам нужно указать пипеткой на участок с белым фоном. Можете поэкспериментировать с параметром Fuzziness – в нашем случае он был выставлен на максимум. После этого перейдите на слой с основным фоном (для удобства слой с маской можно сделать невидимым) и нажмите клавишу Del.
В результате получаем вырез в рамке, при этом форма вырезанной области целиком и полностью зависит от формы маски и вашей работы с «Цветовым диапазоном». После этого вставляете в окошко фотографию – измените ее размер, как было описано в предыдущей главе, и помните, что слой с фотографией должен располагаться под слоем с рамкой. Существуют и другие способы работы с масками, но этот вариант – один из самых простых.
Материал подготовлен для журнала «Мобильный портал», 2006
Как делается в CSS рамка-картинка?
От автора: Всех приветствую. Наверняка вы знаете о том, что в css можно делать рамку любому элементу. Но знали ли вы, что в качестве рамки может быть не просто сплошной цвет, но и изображение? Сегодня я вам покажу, как делается в css рамка-картинка.
Стандартные возможности рамок в css ограничены. По сути, вы всего лишь можете задать тип линии, цвет и толщину. В большинстве случаев этого достаточно, но также часто требуется что-то поинтереснее. Например, двойная или множественная рамка, либо вообще изображение вместо сплошного цвета. В последнем случае нас спасает свойство border-image, которое является достаточно новым и позволяет использовать изображение в качестве рамки.
На данный момент свойство поддерживается достаточно слабо, поэтому рекомендую вам использовать его со всеми вендорными префиксами для более менее нормального отображения. Итак, в качестве картинки для нашей будущей рамки я выбрал следующую:
Неплохо выглядит, да? И хоть пишу я эту статью в августе, впереди осень, а значит рамка вполне себе к месту в нашем случае. Что ж, чтобы попробовать применить нашу рамку к какому-то элементу, нужно его создать, разумеется. Пусть это будет просто несколько абзацев текста.
Сентябрь был очень теплым , даже черезчур теплым . Такое положение вещей не должно
нас удивлять , потому что вот уже несколько лет подряд температура на нашей планете
стремительно повышается .
< p >Еще несколько десятилетий назад такой ситуации не наблюдалось . Например , раньше
летние вечера приносили с собой прохладу , а нынче даже вечером порой никуда не денешься
от невероятной жары . Такая ситуация происходит по всему миру . Дело в парниковом эффекте ,
количество углекислого газа на нашей планете увеличивается . < / p >
Вот так, пусть это будет блок с двумя абзацами. Рамку мы применим как раз к этому блоку.
margin : 30px auto ;
width : 500 ;
border : 50px solid red ;
border — image : url ( leaves . jpg ) 50 ;
Тут нас с вами должны интересовать третья и четвертая строки. Ширину я задал только для того, чтобы блок не растягивался на всю ширину окна и мы могли более наглядно видеть нашу рамку. Итак, сначала покажу результат:
Получилось достаточно симпатично. Ну а теперь я вам объясню, что же нужно для такого отображения:
Указать обычную рамку. То есть ширину, тип и цвет, как будто вы задаете обыкновенную рамку. Это очень важно сделать, без этого наша декоративная рамка показываться не будет!
Прописать непосредственно свойство border-image, где указать путь к картинку с рамкой, а также ширину всех сторон рамки. Я указал одинаково со всех сторон – 50. Очень важно записывать просто число, без пикселей. То есть если вы в border-image напишете 50px, то отобразится просто красная рамка, если не укажете размер вообще, то тоже будет некорректное отображение. Очень важно сделать так, как написано в коде.
Собственно, это все обязательные параметры, которые вы должны прописать для того, чтобы граница отобразилась. В качестве третьего параметра для border-image можно указать тип повторения. По умолчанию, если вы его не укажете, то браузер будет использовать значение stretch, то есть растягивать рисунок границы до размеров элемента, к которому применяется рамка.
Также есть значение repeat, оно заставляет рисунок границ border-а повторяться. Но из-за этого на концах элемента рисунок в очередной раз может поместиться не полностью. Если же вы хотите вместить целое кол-во повторений, используйте значение round, которое тоже повторяет изображение, но при этом делает так, чтобы в рамке использовались только целые повторения.
Дело в том, что размер моей рамки и так большой, поэтому особой разницы между значениями свойств вы не увидите.
Вместо примеров я лучше дам вам ссылку на отличный ресурс, где вы можете потренироваться и понять, как же вам использовать декоративные рамки. Вот он — //border-image.com/.
Сначала загрузите в генератор изображение рамки, а потом практикуйтесь на нем. Сервис сразу генерирует вам код, поэтому это позволяет вам еще лучше понять, как все это функционирует.
Также хочу отметить, что к декоративной рамке невозможно применить закругление углов. Проще говоря, свойство border-radius никак не влияет на такую рамку. Единственный вариант получить закругленную рамку – найти в интернете такую изначально и уже ее применять к нужным элементам.
Что ж, я надеюсь, сегодняшняя статья вам помогла и теперь вы имеете в своем арсенале еще одну крайней интересную возможность css3 – декоративные рамки. Область их применения достаточно широка. Например, можно обрамлять ими виджеты и использовать для разного рода декоративных элементов. На этом у меня все, до встречи! Кстати, остальные фишки css3 вы можете изучить в нашей серии уроков по этой технологии. Там и градиенты, и закругление углов, и тени. В общем, полный фарш.