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


Пользователь месяца
WGN WGN 1-й за Июль
Очков активности: 850 2 темы, 75 сообщений, 7 баллов репутации
Сайт: worldgamenews.com
ТОП самых активных за этот месяц
  • Фотография TimurR
    #1

    TimurR
    Очков активности: 273 3 темы, 17 сообщений, 7 баллов репутации

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

    WGN (worldgamenews.com)
    Очков активности: 64.5 Вне конкурса за определение пользователя месяца

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

    ShowPrint (ShowPrint.ru)
    Очков активности: 52.5 0 тем, 7 сообщений, 5 баллов репутации

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

    BlackLion
    Очков активности: 36 0 тем, 24 сообщения, 1 балл репутации

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

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

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

    Ixman (o5cat.ru)
    Очков активности: 21 0 тем, 7 сообщений, 2 балла репутации

  • Фотография Napoleon-007
    #7

    Napoleon-007
    Очков активности: 21 0 тем, 14 сообщений, 1 балл репутации

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

    alekswebart
    Очков активности: 19.5 1 тема, 10 сообщений, 1 балл репутации

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

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

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

    profi (1informer.com)
    Очков активности: 12 0 тем, 8 сообщений, 1 балл репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 15.08.2018
Топ 5 участников по репутации


Рамка картинки как на Яндексе

#1 shtil

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

Отправлено 15 June 2009 - 13:43

как сделать вот такую вот рамочку?
Изображение

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Как сделать картинку уникальной
  2. Помогите сверстать "рамку" для картинки
  3. Как добавить картинку в Яндекс?
  4. Купленные изображения на фотостоках и водяные знаки
  5. Как настроить индексирование картинок в яндексе на https

#2 v1ex

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

Отправлено 15 June 2009 - 15:13

Берем картинку в качестве background'а (рамки):
Изображение
У всех наших картинок такого стиля должен быть одинаковый размер, т.е. под каждый размер картинки свой background. Т.к. background я украл у яши, у нас картинки должны быть размером 108x73.
HTML:
<img src="img.jpg" alt="..." class="imgBorder" />
CSS:
.imgBorder {
  background-image: url(imgBg.png);
  background-position: left top;
  backgroun-repeat: no-repeat;
  height: 73px; /*высота картинки*/
  width: 108px;/*ширина картинки*/
  padding: 8px 10px 11px 10px; /*Отступы от рамки*/
}
Вам остается только сделать свой такой background (под свои картинки), и настроить в CSS отступы и размеры картинок.

P.S.
Есть еще много более гибких (и одновременно более сложных) способов сделать такой эффект, но думаю это подойдет...
P.S.S
пример
  • 0

#3 shtil

shtil
    Topic Starter
  • Неактивные
  • 50 сообщений
  • Репутация: 0

Отправлено 15 June 2009 - 15:18

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

#4 v1ex

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

Отправлено 15 June 2009 - 15:30

А тут уже тогда нужно картинку в блоки ложить примерно так:
<div width="ширина"><div><div><div><img src="img.jpg" alt="..." /></div></div></div></div>
И на каждый блок вешается рамка с отступами (верхняя, боковые, нижняя), одну из боковых можно впринципе на картинку повесить. В общем геморно это :) И при этом, у нас еще появляется блочный элемент, в то время как в предыдущем inline. Аа, и для каждого первого блока, нужно будет указывать ширину.
  • 0

#5 shtil

shtil
    Topic Starter
  • Неактивные
  • 50 сообщений
  • Репутация: 0

Отправлено 15 June 2009 - 15:33

хм, а вот такую рамочку можно сделать без графики?
Изображение
  • 0

#6 v1ex

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

Отправлено 15 June 2009 - 15:41

Да, без проблем вообще :)
HTML:
<img src="img.jpg" alt="..." class="imgBorder" />
CSS:
.imgBorder {
  background-color: #ffffff;
  border: 2px solid #cdcdcd;
  padding: 5px;
}

  • 0

#7 ZiTosS

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

Отправлено 15 June 2009 - 18:30

v1ex, мастер на все руки :)
  • 0



Похожие темы

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

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