Как сделать картинку в красивой рамке

Westergraf · 2011-02-23 00:24:00

А как сделать рамку вокруг изображения вот в таком стиле! (тоесть зеленую)

Ведь можно тень на картинку наложить.

Отредактировано Westergraf (2011-02-23 00:24:22)

Trashcka · 2011-02-23 01:44:34

Бэкграундом

HTML
<div class="bg-img">
<img src="http://АДРЕС К КАРТИНКЕ" alt="">
</div>

CSS
.bg-img { padding: 5px; background: url(images/bg-img.gif); }

Westergraf · 2011-02-23 10:09:43

Trashcka

Я правильно понимаю что картинка bg-img.gif здесь играет роль подложки т.е Сначело подложка а потом идет основная картинка.

Иными словами если рассмотреть мой скриншот то зеленая рамка это фон, а картинка с елочками налаживается на этот фон!!!

mittus · 2011-02-23 10:19:35

Westergraf, да, всё правильно.

Westergraf · 2011-02-23 10:23:56

mittus пишет:

Westergraf, да, всё правильно.

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

mittus · 2011-02-23 10:46:20

Westergraf, если используете картинки различных размеров, то лучше сделайте таким образом:
.bg-img { padding: 5px; background:#390; border:1px solid #060 }
т.е. задаем цвет фона и бордер. Также задав 2-3-5px вы можете контролировать ширину бордера. меняя padding ширину отступа со всех сторон.

Knopik · 2011-02-23 10:52:36

Westergraf, или max-width: 100px; и max-height: 100px; добавить

Westergraf · 2011-02-23 11:01:38

Knopik пишет:

или max-width: 100px; и max-height: 100px; добавить

Чесное слово голова что-то не успевает - можно пример в HTML и в CSS

Пока пытаюсь с вариантом

Trashcka

разобратся чтобы понять хотя бы принцип

P.S Мужики с днем защитника!

Westergraf · 2011-02-23 11:05:34

Westergraf пишет:

Knopik пишет:
или max-width: 100px; и max-height: 100px; добавить
Чесное слово голова что-то не успевает - можно пример в HTML и в CSS
Пока пытаюсь с вариантом
Trashcka
разобратся чтобы понять хотя бы принцип
А подложка обязательно должна быть gif
P.S Мужики с днем защитника!

Knopik · 2011-02-23 11:06:17

CSS
.bg-img { padding: 5px; background: url(images/bg-img.gif); width: 120px; height: 120px; }
.bg-img img {max-width: 100px; max-height: 100px;}

картинка подложка 120x120px, внутри картинка произвольного размера, css всё равно уменьшит до 100x100

Отредактировано Knopik (2011-02-23 11:06:40)

Westergraf · 2011-02-23 11:33:02

Вот что у меня на данный момент получается !

Варианет от

Trashcka

Варианет от

mittus

Варианет от

Knopik

P.S размер подложки 208х208

Эксперемент продолжаю!!!

Отредактировано Westergraf (2011-02-23 11:33:59)

coreldraw · 2011-02-23 12:46:03

смотри тут с примерами

Westergraf · 2011-02-23 18:08:13

Понял я одно что если хочеш в красивой рамке картинку то необходимо под каждую, картинку делать соответствующую рамку!!!

А если все картинки разные по размеру то оптимальный способ это использовать просто тег border !

Благодарю всех за позновательную информацию

Next Generation CMS :: Форум поддержки

Объявление

#1 2011-02-23 00:24:00

Как сделать картинку в красивой рамке

#2 2011-02-23 01:44:34

Re: Как сделать картинку в красивой рамке

#3 2011-02-23 10:09:43

Re: Как сделать картинку в красивой рамке

#4 2011-02-23 10:19:35

Re: Как сделать картинку в красивой рамке

#5 2011-02-23 10:23:56

Re: Как сделать картинку в красивой рамке

#6 2011-02-23 10:46:20

Re: Как сделать картинку в красивой рамке

#7 2011-02-23 10:52:36

Re: Как сделать картинку в красивой рамке

#8 2011-02-23 11:01:38

Re: Как сделать картинку в красивой рамке

#9 2011-02-23 11:05:34

Re: Как сделать картинку в красивой рамке

#10 2011-02-23 11:06:17

Re: Как сделать картинку в красивой рамке

#11 2011-02-23 11:33:02

Re: Как сделать картинку в красивой рамке

#12 2011-02-23 12:46:03

Re: Как сделать картинку в красивой рамке

#13 2011-02-23 18:08:13

Re: Как сделать картинку в красивой рамке

Подвал форума