Подсветка изображений

Автор Тема: Подсветка изображений  (Прочитано 1919 раз)

Оффлайн Denis.mАвтор темы

  • Бизнес оценка: (1, 100%)
  • КМС
  • *****
  • СПАСИБО: 1108
  • Сообщений: 1861
  • Карма: 195
  • Пол: Мужской
  • Награды Более одной тысячи спасибо
    • stone-groups

Оффлайн Denis.mАвтор темы

  • КМС
  • *****
Подсветка изображений
« : 11-12-2013, 21:22:27 »
В общем хотел изменить изображения к постам, и к записям на главной странице, правил css.
Где то получилось, но к изображению к теме дня в блоге, подсветка отражается коряво, то есть отражается только с двух сторон. Так же и в слайдере. Получилось только добавить код к последним записям.
К ним добавил стиль
(нажмите чтобы показать/скрыть)

Подскажите как добавить похожее в слайдер и к остальным изображениям на странице.
сайт
(нажмите чтобы показать/скрыть)


Оффлайн bibika

  • Бизнес оценка: (0)
  • Ветеран
  • *****
  • СПАСИБО: 218
  • Сообщений: 772
  • Карма: 19
  • Пол: Мужской
    • Просветительская интернет-программа “Моллюски”

Оффлайн bibika

  • Ветеран
  • *****
Re: Подсветка изображений
« Ответ #1 : 12-12-2013, 12:52:45 »
Подсветки, или точнее тени в картинок не увидел, только светло розовая рамочка. Кроме того, имейте ввиду что большинство картинок отресайзенны без соблюдения пропорций и некоторые с них еще не в фокусе.

Оффлайн Denis.mАвтор темы

  • Бизнес оценка: (1, 100%)
  • КМС
  • *****
  • СПАСИБО: 1108
  • Сообщений: 1861
  • Карма: 195
  • Пол: Мужской
  • Награды Более одной тысячи спасибо
    • stone-groups

Оффлайн Denis.mАвтор темы

  • КМС
  • *****
Re: Подсветка изображений
« Ответ #2 : 12-12-2013, 14:17:35 »
Подсветки, или точнее тени в картинок не увидел, только светло розовая рамочка. Кроме того, имейте ввиду что большинство картинок отресайзенны без соблюдения пропорций и некоторые с них еще не в фокусе.
Ага, точно рамочка. Я в этом пока профан, только учусь. Не подскажете куда копать и парочка советов то же не помешает. К сожалению шаблон не идеален, придется многое править, особенно это касается расплывшихся фото
« Последнее редактирование: 12-12-2013, 14:20:53 от Denis.m »

Оффлайн RockYou

  • Бизнес оценка: (0)
  • КМС
  • *****
  • СПАСИБО: 1233
  • Сообщений: 3469
  • Карма: 119
  • Пол: Мужской
  • Я криворукий гитарист:)
  • Награды Более одной тысячи спасибо КМС поисковой оптимизации

Оффлайн RockYou

  • КМС
  • *****
  • Доп. информация
    • Бизнес оценка: (0)
    • СПАСИБО: 1233
    • Сообщений: 3469
    • Карма: 119
    • Пол: Мужской
    • Я криворукий гитарист:)
    • Награды Более одной тысячи спасибо КМС поисковой оптимизации
Re: Подсветка изображений
« Ответ #3 : 12-12-2013, 14:22:38 »
То же самое, только к #carousel img {

Оффлайн bibika

  • Бизнес оценка: (0)
  • Ветеран
  • *****
  • СПАСИБО: 218
  • Сообщений: 772
  • Карма: 19
  • Пол: Мужской
    • Просветительская интернет-программа “Моллюски”

Оффлайн bibika

  • Ветеран
  • *****
Re: Подсветка изображений
« Ответ #4 : 12-12-2013, 14:23:40 »
Начните читать отсюда http://htmlbook.ru/css/box-shadow ну и дальше по гуглу. Кроме того на сайте еще нужно сменить цвет текста который размещен на розовом фоне и цвет букв в меню они вообще нечитаемые. Насчет картинок я уже писал,


Оффлайн Denis.mАвтор темы

  • Бизнес оценка: (1, 100%)
  • КМС
  • *****
  • СПАСИБО: 1108
  • Сообщений: 1861
  • Карма: 195
  • Пол: Мужской
  • Награды Более одной тысячи спасибо
    • stone-groups

Оффлайн Denis.mАвтор темы

  • КМС
  • *****
Re: Подсветка изображений
« Ответ #5 : 12-12-2013, 14:32:47 »
Начните читать отсюда http://htmlbook.ru/css/box-shadow ну и дальше по гуглу. Кроме того на сайте еще нужно сменить цвет текста который размещен на розовом фоне и цвет букв в меню они вообще нечитаемые. Насчет картинок я уже писал,
Читал, вчера целый день потратил. Но видимо что то упустил, добавляю рамку но она отражается  только с двух сторон как ни правь значения. Так же в слайдере картинки, добавляю отражается только с трех сторон, сверху не отражается. Вчера путем подставления кода в браузере пробовал, не получилось.
Подарили замечательную книгу css, осенью, вечером дома читать начну.
 

Оффлайн bibika

  • Бизнес оценка: (0)
  • Ветеран
  • *****
  • СПАСИБО: 218
  • Сообщений: 772
  • Карма: 19
  • Пол: Мужской
    • Просветительская интернет-программа “Моллюски”

Оффлайн bibika

  • Ветеран
  • *****
Re: Подсветка изображений
« Ответ #6 : 12-12-2013, 21:36:40 »
Вы объясните толком, что Вы хотите сделать. Рамки нормально отображаются с четырех сторон, цвет светло-розовый.

Вот взял пример с http://htmlbook.ru/css/box-shadow и вставил через редактор стиля браузера, тень нормально работает.
« Последнее редактирование: 12-12-2013, 21:39:25 от bibika »

Оффлайн Denis.mАвтор темы

  • Бизнес оценка: (1, 100%)
  • КМС
  • *****
  • СПАСИБО: 1108
  • Сообщений: 1861
  • Карма: 195
  • Пол: Мужской
  • Награды Более одной тысячи спасибо
    • stone-groups

Оффлайн Denis.mАвтор темы

  • КМС
  • *****
Re: Подсветка изображений
« Ответ #7 : 12-12-2013, 22:21:10 »
Ну вот за тень я и говорю, рамка нормально отражается, а тень отбрасывается серая на Вашем скриншоте только в две стороны.
Хочу сделать что бы было так , при наведении курсор на картинку была такая тень  :)
с рамкой самой проблем нет.  Посмотрите на странице блок- последние записи
« Последнее редактирование: 12-12-2013, 22:27:39 от Denis.m »

Оффлайн dcversus

  • Бизнес оценка: (1, 100%)
  • Рекрут
  • *
  • СПАСИБО: 11
  • Сообщений: 22
  • Карма: 7

Оффлайн dcversus

  • Рекрут
  • *
Re: Подсветка изображений
« Ответ #8 : 15-12-2013, 11:04:13 »
Всё очень просто) Задайте такие правила: (border уберите! Он сюда будет не к месту >:D)
#carousel img {
width: 189px;
height: 149px;
margin: 5px 3px 5px 3px;
padding: 0;
box-shadow: 0 0 5px 1px #F198BC;
}

#carousel img:hover {
box-shadow: 0 0 10px 4px #F198BC;
}

а для (если хотите убрать смещение титла)

.carousel-title {
bottom: 0px;
left: 0px;
}

А вообще, если судить по коду... то считаю, лучше начинать верстать с нуля, чем заниматься вот этим, извините меня, ужасом. HTML нужно отделять от стилей! А у вас огромное количество заплаток итд... в самом шаблоне, даже веб-чёрт ногу там сломит...


Оффлайн Denis.mАвтор темы

  • Бизнес оценка: (1, 100%)
  • КМС
  • *****
  • СПАСИБО: 1108
  • Сообщений: 1861
  • Карма: 195
  • Пол: Мужской
  • Награды Более одной тысячи спасибо
    • stone-groups

Оффлайн Denis.mАвтор темы

  • КМС
  • *****
Re: Подсветка изображений
« Ответ #9 : 15-12-2013, 17:14:19 »
Всё очень просто) Задайте такие правила: (border уберите! Он сюда будет не к месту >:D)
#carousel img {
width: 189px;
height: 149px;
margin: 5px 3px 5px 3px;
padding: 0;
box-shadow: 0 0 5px 1px #F198BC;
}

#carousel img:hover {
box-shadow: 0 0 10px 4px #F198BC;
}

а для (если хотите убрать смещение титла)

.carousel-title {
bottom: 0px;
left: 0px;
}

А вообще, если судить по коду... то считаю, лучше начинать верстать с нуля, чем заниматься вот этим, извините меня, ужасом. HTML нужно отделять от стилей! А у вас огромное количество заплаток итд... в самом шаблоне, даже веб-чёрт ногу там сломит...
Это то понятно, но стили то к шаблону шли.
С нуля верстать совсем не хочется, тем более за шаблон заплачена денежка


 

Похожие темы

  Тема / Автор Ответов Последний ответ
0 Ответов
1950 Просмотров
Последний ответ 01-05-2011, 14:18:52
от abcdseo
4 Ответов
1916 Просмотров
Последний ответ 12-08-2011, 01:00:17
от Holsten
0 Ответов
1227 Просмотров
Последний ответ 17-02-2012, 12:44:12
от maksDJab
5 Ответов
3431 Просмотров
Последний ответ 01-04-2013, 10:00:27
от denmin
3 Ответов
1007 Просмотров
Последний ответ 28-02-2015, 14:50:18
от geekwolf