X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Помогите сверстать "рамку" для картинки
basilio
basilio
Topic Starter сообщение 19.7.2012, 17:05; Ответить: basilio
Сообщение #1


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

[img]http://www.blazrobar.com/wp/wp-content/uploads/Image-Border.jpg[/img]
Смысл такой, что при наведении появляется рамка и затемнение, как на рисунке справа, а до этого просто серая рамка. Как я понял, чтобы такой эффект работал на все картинки сайта, нужно использовать JS.
Если кто-то сможет объяснить, как это можно сделать, буду премного благодарен! PSD файл есть, если согласитесь помочь - скину.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
c0ns0l3
c0ns0l3
сообщение 20.7.2012, 9:50; Ответить: c0ns0l3
Сообщение #2


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

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

А оформить вставку IMG в DIV тот же - http://api.jquery.com/wrap/
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
basilio
basilio
Topic Starter сообщение 20.7.2012, 14:59; Ответить: basilio
Сообщение #3


Спасибо, но если честно, не очень понял)
Как я думал сделать в CSS3:
рамки это само собой, а вот для затемнения поставить чёрный фон (и ему прозрачность 0,8)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
c0ns0l3
c0ns0l3
сообщение 20.7.2012, 17:34; Ответить: c0ns0l3
Сообщение #4


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

Но опять же таки.... CSS3 и тот же RGBA - проблема кроссбраузерности -_-
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
basilio
basilio
Topic Starter сообщение 20.7.2012, 18:36; Ответить: basilio
Сообщение #5


Я даже не могу сделать так, чтобы при наведении ставилась темная подложка. Она ставится, но за картинку, а не поверх. Как сделать поверх - понятия не имею, уже всё облазил! -_-
c0ns0l3, а если сделать это в JS, как это настроить? Если в CSS3 я ещё хоть что-то знаю, то в JS вообще ни черта :(
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sc2r2bey
sc2r2bey
сообщение 20.7.2012, 18:57; Ответить: sc2r2bey
Сообщение #6


а в чем проблема в сети как грязи таких примеров, например
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.dynamicdrive.com/style/csslibra..._image_gallery/


--------------------
Заметки о разработке и не только
программирую web и для we
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Symphony
Symphony
сообщение 20.7.2012, 22:36; Ответить: Symphony
Сообщение #7


surfer, разжевал и в рот положил, осталось только глотнуть.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
basilio
basilio
Topic Starter сообщение 20.7.2012, 22:36; Ответить: basilio
Сообщение #8


а в чем проблема в сети как грязи таких примеров, например
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/

В нете их хватает, а того чего я хочу - нету. Да и лучше один раз мне объяснят как это сделать, чем я где-то это просто скачаю. -_-
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Symphony
Symphony
сообщение 20.7.2012, 22:40; Ответить: Symphony
Сообщение #9


Господа, мне это напоминает http://www.masterweb...?showuser=13575
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sc2r2bey
sc2r2bey
сообщение 20.7.2012, 22:51; Ответить: sc2r2bey
Сообщение #10


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


--------------------
Заметки о разработке и не только
программирую web и для we
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Партнерская программа для Эзотерики, Магии, Таро
партнерка для эзотерики
0 LiveExpert 325 Сегодня, 15:13
автор: LiveExpert
Открытая тема (нет новых ответов) Партнерская программа для Эзотерики, Магии, Таро
партнерка для эзотерики
0 LiveExpert 301 Сегодня, 15:13
автор: LiveExpert
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыAzinomoney.com - гемблинг-партнерка с 65%RS для каждого
Гарантированный заработок на гемблинг-трафике
65 AzinoMoney 29172 Вчера, 19:10
автор: AzinoMoney
Горячая тема (нет новых ответов) Делаю полностью уникальный дизайн для сайтов!
46 AlexDIZ 93462 26.3.2024, 20:03
автор: AlexDIZ
Открытая тема (нет новых ответов) Большие ставки для кликов в Я.Директ. Как удешевить?
2 rownong27 1119 26.3.2024, 14:13
автор: knezevolk


 



RSS Текстовая версия Сейчас: 28.3.2024, 22:59
Дизайн