Перейти к содержимому


Конкурс "Лучший отзовик"
× Быстрый вопрос
Пользователь месяца
Vmir Vmir 1-й за Апрель
Очков активности: 1 512 8 тем, 60 сообщений, 12 баллов репутации
ТОП самых активных за этот месяц
  • Фотография Андрей WPMasterKZ
    #1

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 300 3 темы, 31 сообщение, 5 баллов репутации

  • Фотография dos1k
    #2

    dos1k (dos1k.ru)
    Очков активности: 234 4 темы, 40 сообщений, 3 балла репутации

  • Фотография Vmir
    #3

    Vmir
    Очков активности: 135 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #4

    BLIK
    Очков активности: 105 Вне конкурса за определение пользователя месяца

  • Фотография Роман Зеленков
    #5

    Роман Зеленков
    Очков активности: 105 9 тем, 43 сообщения, 1 балл репутации

  • Фотография agrx
    #6

    agrx (key-assort.ru)
    Очков активности: 60 0 тем, 20 сообщений, 2 балла репутации

  • Фотография Megoydagi
    #7

    Megoydagi (24ho.ru)
    Очков активности: 57 2 темы, 13 сообщений, 2 балла репутации

  • Фотография r0mZet
    #8

    r0mZet (rz-style.ru)
    Очков активности: 54 1 тема, 9 сообщений, 3 балла репутации

  • Фотография kolver
    #9

    kolver
    Очков активности: 39 4 темы, 14 сообщений, 1 балл репутации

  • Фотография OlgaGetman
    #10

    OlgaGetman
    Очков активности: 33 Вне конкурса за определение пользователя месяца

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 24.05.2019
  • Яндекс выдача: 20.05.2019
Топ 5 участников по репутации


Картинка в рамке

#1 Matt

Matt
  • Неактивные
  • 774 сообщений
  • Репутация: 2
0

Отправлено 17 Июнь 2010 - 10:11

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

 

 

  • 0

#2 matroskin8

matroskin8
  • Пользователь PRO
  • 767 сообщений
  • Репутация: 143

Отправлено 17 Июнь 2010 - 13:44

Больше всего для этого подойдет использование значения outset стиля border:
.border {border: 5px outset #fff;}
Ну, а с толщиной и цветом рамки можно поиграться, чтобы добиться желаемого.
  • 0


#3 Matt

Matt
    Topic Starter
  • Неактивные
  • 774 сообщений
  • Репутация: 2

Отправлено 17 Июнь 2010 - 14:40

Спасибо, попробую.
  • 0

#4 Grumm

Grumm
  • Неактивные
  • 16 сообщений
  • Репутация: 0

Отправлено 20 Июнь 2010 - 12:21

можно картинку сделать с тенью (png) и z-index-ом повесить ее где надо.
  • 0

#5 Matt

Matt
    Topic Starter
  • Неактивные
  • 774 сообщений
  • Репутация: 2

Отправлено 22 Июнь 2010 - 03:06

Пробовал, не вышло. Расскажите поподробнее, пожалуйста. Проблема: вставляю картинку в страницу и хочу, чтобы она как бы чуть выступала над страницей, чтобы создавался эффект объёма.
  • 0

#6 surfer

surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 22 Июнь 2010 - 07:07

img {
	float: left;
	margin: 0 18px 0 0;
	padding: 0 4px 4px 0;
	background: url(../media/photo-frame.gif) no-repeat bottom right;

образец здесь http://rosinteragro.ru/ думаю нетрудно будет под себя переделатьphoto_frame.gif
  • 0

#7 gaaarfild

gaaarfild
  • Неактивные
  • 596 сообщений
  • Репутация: 0

Отправлено 22 Июнь 2010 - 08:26

Да ладно вам.

Обычный CSS.

img {border: 5px outset #999999;}

И будет у тебя выступающее изображение. =)
  • 0

#8 bestolloch

bestolloch
  • Неактивные
  • 224 сообщений
  • Репутация: 1

Отправлено 26 Июнь 2010 - 18:28

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

Все получилось? Или что то не понятно?
  • 0

#9 Matt

Matt
    Topic Starter
  • Неактивные
  • 774 сообщений
  • Репутация: 2

Отправлено 26 Июнь 2010 - 19:29

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

#10 Grumm

Grumm
  • Неактивные
  • 16 сообщений
  • Репутация: 0

Отправлено 26 Июнь 2010 - 20:18

Ну а если подготовить в шопе (просто тень добавить)
и включить простым <img src... ?
Вообще без стилей.
  • 0

#11 admin

admin
  • Пользователь PRO
  • 5 275 сообщений
  • Репутация: 56

Отправлено 26 Июнь 2010 - 20:28

Ну а если подготовить в шопе (просто тень добавить)
и включить простым <img src... ?
Вообще без стилей.

Так неудобно, каждый раз прийдётся тратить лишнее время на обработку в фотошопе
  • 0

#12 bestolloch

bestolloch
  • Неактивные
  • 224 сообщений
  • Репутация: 1

Отправлено 27 Июнь 2010 - 00:02

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

чтобы вообще без элементов css я знаю только если создать для каждой катринки талблицу - допустим

<table border="0">
<tbody>
<tr height="16">
<td width="16" background="img/levo-verh.png"/></td> /*сохранял как png но чтото не заметил сразу и белый фон оставил, вообще результат получше должен быть*/
<td width="160" background="img/verh-tabl.png"></td>
<td width="16" background="img/pravo-verh.png"></td> /*сохранял как png но чтото не заметил сразу и белый фон оставил, вообще результат получше должен быть*/
</tr>
<tr height="100">
<td width="16" background="img/levo-tabl.png"></td> /*сохранял как png но чтото не заметил сразу и белый фон оставил, вообще результат получше должен быть*/
<td width="160"><img src="img/img.jpg" width="242" height="132" /> </td>
<td width="16" background="img/pravo-tabl.png"></td> /*сохранял как png но чтото не заметил сразу и белый фон оставил, вообще результат получше должен быть*/
</tr>
<tr height="16">
<td width="16" background="img/levo-niz.png"></td> /*сохранял как png но чтото не заметил сразу и белый фон оставил, вообще результат получше должен быть*/
<td width="160" background="img/niz-tabl.png"></td>
<td width="16" background="img/pravo-niz.png"></td> /*сохранял как png но чтото не заметил сразу и белый фон оставил, вообще результат получше должен быть*/
</tr>
</tbody>
</table>


http://lord-suvenir.ru/index.php

тут можешь результат глянуть... только почемуто у меня получилось расстояние между элемантами. разобрался бы - но сейчас отойти надо. может кто и мне подскажет кто)))

Надеюсь помог
  • 0

#13 bestolloch

bestolloch
  • Неактивные
  • 224 сообщений
  • Репутация: 1

Отправлено 27 Июнь 2010 - 00:56

<table border="0" >
<tr height="16">
<td width="16"/><img src="img/levo-verh.png" width="16" height="16" /></td> <!--сохранял как png но чтото не заметил сразу и белый фон оставил, вообще результат получше должен быть-->
<td width="242"><img src="img/verh-tabl.png" width="100%" height="16" /></td>
<td width="16"><img src="img/pravo-verh.png" width="16" height="16" /></td>
</tr>
<tr>
<td width="16"><img src="img/levo-tabl.png" width="16" height="132" /></td>
<td width="242"><img src="img/img.jpg" width="242" height="132" /> </td>
<td width="16"><img src="img/pravo-tabl.png" width="16" height="132" /></td>
</tr>
<tr height="16">
<td width="16"><img src="img/levo-niz.png" width="16" height="16" /></td>
<td width="242"><img src="img/niz-tabl.png" width="100%" height="16"/></td>
<td width="16"><img src="img/pravo-niz.png" width="16" height="16" /></td>
</tr>
</table>


предыдущий только более мение отображался в опере почему-то, но проблема с отступами осталась.
  • 0

#14 gaaarfild

gaaarfild
  • Неактивные
  • 596 сообщений
  • Репутация: 0

Отправлено 27 Июнь 2010 - 01:32

Да бред же уж! Используй CSS. У тебя по-любому в структуре DOM есть контейнер Контента. Например тег <div> в котором находится все содержание статьи.
Пусть его класс будет content
Итого
<div class='content'>
Все содержимое статьи!
</div>


И в css пишем

div.content img {
	border: 5px outset #999999;
}

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

Примерно так:
div.content img {
	padding: 5px;
		background: #cccccc url('images/shadow.png') bottom right no-repeat;
}


Или можешь картинкам в статье задавать определенный класс, и, соответственно только картинки с этим классом будут такие красивые выступающие.
Надеюсь понятно?
Если нет, переспросите. =)
  • 0

#15 Matt

Matt
    Topic Starter
  • Неактивные
  • 774 сообщений
  • Репутация: 2

Отправлено 27 Июнь 2010 - 02:33

Понятно, сделаю, отпишусь. Спасибо!
  • 0

#16 ZiTosS

ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 27 Июнь 2010 - 11:56

bestolloch, вам надо почитать про таблицы HTML, а в особенности про параметры таблице cellspacing и cellpadding, они задают отступы между ячейками и внутри ячеек.
Matt, пример gaaarfild самый оптимальный :blink: Не понимаю, в чем проблема реализации...
  • 0

#17 surfer

surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 27 Июнь 2010 - 12:19

ну да без css здесь не обойтись либо делать картинки с рамкой
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru