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

Реферальная программа Мегаплана

Партнерская программа Kredov

Помогите сверстать "рамку" для картинки

#1 basilio

basilio
  • Пользователь
  • 79 сообщений
  • Репутация: 0
0

Отправлено 19 Июль 2012 - 16:05

Помогите, пожалуйста, сверстать вот такую вещь.

Изображение
Смысл такой, что при наведении появляется рамка и затемнение, как на рисунке справа, а до этого просто серая рамка. Как я понял, чтобы такой эффект работал на все картинки сайта, нужно использовать JS.
Если кто-то сможет объяснить, как это можно сделать, буду премного благодарен! PSD файл есть, если согласитесь помочь - скину.

 

 

  • 0

#2 c0ns0l3

c0ns0l3
  • Пользователь
  • 264 сообщений
  • Репутация: 49

Отправлено 20 Июль 2012 - 08:50

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

Варианты по верстке, если без использования CSS3 я б сделал большой фон с градиентом под углом. остальное оформить бордерами.
Если с CSS3 то там вообще все просто. Линейный градиент и накинуть тени внешние еще.

А оформить вставку IMG в DIV тот же - http://api.jquery.com/wrap/
  • 1

#3 basilio

basilio
    Topic Starter
  • Пользователь
  • 79 сообщений
  • Репутация: 0

Отправлено 20 Июль 2012 - 13:59

Спасибо, но если честно, не очень понял)
Как я думал сделать в CSS3:
рамки это само собой, а вот для затемнения поставить чёрный фон (и ему прозрачность 0,8)
  • 0

#4 c0ns0l3

c0ns0l3
  • Пользователь
  • 264 сообщений
  • Репутация: 49

Отправлено 20 Июль 2012 - 16:34

Можно, но по рисунку, там еще есть стрелка, если поставишь блоку opacity она применится и на все, что находится в нем соответственно, тогда уже лучше будет использовать RGBA
background: rgba(0,0,0,0.8) url(img/strelka.png) 50% 50% no-repeat;

Но опять же таки.... CSS3 и тот же RGBA - проблема кроссбраузерности -_-
  • 1

#5 basilio

basilio
    Topic Starter
  • Пользователь
  • 79 сообщений
  • Репутация: 0

Отправлено 20 Июль 2012 - 17:36

Я даже не могу сделать так, чтобы при наведении ставилась темная подложка. Она ставится, но за картинку, а не поверх. Как сделать поверх - понятия не имею, уже всё облазил! -_-
c0ns0l3, а если сделать это в JS, как это настроить? Если в CSS3 я ещё хоть что-то знаю, то в JS вообще ни черта :(
  • 0

#6 surfer

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

Отправлено 20 Июль 2012 - 17:57

а в чем проблема в сети как грязи таких примеров, например
http://web.izjum.com/jquery-icon-hover
левый нижний угол - иконки
http://sing-my-song.com/
продолжать или сами найдете?

http://www.inwebson....-hover-effects/
исследование этот мануала дало
http://demo.fearless.../pretty-hovers/
http://fearlessflyer...css-and-jquery/

дальше
http://net-css.my1.r...ery/76-1-0-1830

на русском
http://followdesign....ii-chast-1.html

ну и т.д. Google не противоречит не одной из мировых религий -_-

http://www.dynamicdr..._image_gallery/
  • 3

#7 Symphony

Symphony
  • Пользователь
  • 636 сообщений
  • Репутация: 54

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

surfer, разжевал и в рот положил, осталось только глотнуть.
  • 0


#8 basilio

basilio
    Topic Starter
  • Пользователь
  • 79 сообщений
  • Репутация: 0

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

а в чем проблема в сети как грязи таких примеров, например
http://web.izjum.com/jquery-icon-hover
левый нижний угол - иконки
http://sing-my-song.com/
продолжать или сами найдете?

http://www.inwebson....-hover-effects/
исследование этот мануала дало
http://demo.fearless.../pretty-hovers/
http://fearlessflyer...css-and-jquery/

дальше
http://net-css.my1.r...ery/76-1-0-1830

на русском
http://followdesign....ii-chast-1.html

ну и т.д. Google не противоречит не одной из мировых религий :(

http://www.dynamicdr..._image_gallery/

В нете их хватает, а того чего я хочу - нету. Да и лучше один раз мне объяснят как это сделать, чем я где-то это просто скачаю. -_-
  • 0

#9 Symphony

Symphony
  • Пользователь
  • 636 сообщений
  • Репутация: 54

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

Господа, мне это напоминает http://www.masterweb...?showuser=13575
  • 0


#10 surfer

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

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

В нете их хватает, а того чего я хочу - нету. Да и лучше один раз мне объяснят как это сделать, чем я где-то это просто скачаю. -_-

того, чего нет, это прямых рук, 100% готовых решений нет, они делаются прямыми руками :(
  • 0

robot

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


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