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

Denis.m · 11-12-2013, 21:22:27

В общем хотел изменить изображения к постам, и к записям на главной странице, правил css.
Где то получилось, но к изображению к теме дня в блоге, подсветка отражается коряво, то есть отражается только с двух сторон. Так же и в слайдере. Получилось только добавить код к последним записям.
К ним добавил стиль [spoiler]
.post a:hover img {
background:#FDFDFB;
width: 170px;
height: 135px;
box-shadow:0 0 10px 4px #F198BC;}
[/spoiler]

Подскажите как добавить похожее в слайдер и к остальным изображениям на странице.
сайт [spoiler]http://moyaumnichka.ru/[/spoiler]

bibika · 12-12-2013, 12:52:45

Подсветки, или точнее тени в картинок не увидел, только светло розовая рамочка. Кроме того, имейте ввиду что большинство картинок отресайзенны без соблюдения пропорций и некоторые с них еще не в фокусе.

Denis.m · 12-12-2013, 14:17:35

Цитата: bibika от 12-12-2013, 12:52:45
Подсветки, или точнее тени в картинок не увидел, только светло розовая рамочка. Кроме того, имейте ввиду что большинство картинок отресайзенны без соблюдения пропорций и некоторые с них еще не в фокусе.

Ага, точно рамочка. Я в этом пока профан, только учусь. Не подскажете куда копать и парочка советов то же не помешает. К сожалению шаблон не идеален, придется многое править, особенно это касается расплывшихся фoто

RockYou · 12-12-2013, 14:22:38

Чтобы добавить подсветку к изображениям в слайдере и к остальным изображениям на странице, вы можете использовать следующий код:

Для слайдера:
```css
.slider a:hover img {
background:#FDFDFB;
width: 170px;
height: 135px;
box-shadow:0 0 10px 4px #F198BC;
}
```

Для остальных изображений на странице:
```css
img:hover {
background:#FDFDFB;
width: 170px;
height: 135px;
box-shadow:0 0 10px 4px #F198BC;
}
```

Этот CSS-код добавит подсветку при наведении на изображения в слайдере и на остальных изображениях на странице. Помните, что для каждого CSS-стиля может потребоваться дополнительное тестирование, чтобы убедиться, что он работает так, как вы ожидаете.

Для того чтобы добавить подсветку к изображениям в слайдере и к остальным изображениям на странице, вы можете использовать следующий CSS-код:

```css
/* Для слайдера */
.slider a:hover img {
background:#FDFDFB;
width: 170px;
height: 135px;
box-shadow:0 0 10px 4px #F198BC;
}

/* Для остальных изображений на странице */
.post img:hover {
background:#FDFDFB;
width: 170px;
height: 135px;
box-shadow:0 0 10px 4px #F198BC;
}
```

Для добавления подсветки к изображениям в слайдере и ко всем остальным изображениям на странице, вы можете использовать следующий CSS-код:

```css
/* Для слайдера */
.slider a:hover img {
background:#FDFDFB;
width: 170px;
height: 135px;
box-shadow:0 0 10px 4px #F198BC;
}

/* Для остальных изображений на странице */
img:hover {
background:#FDFDFB;
width: 170px;
height: 135px;
box-shadow:0 0 10px 4px #F198BC;
}
```

Этот код добавит подсветку при наведении на изображения в слайдере и на все остальные изображения на странице. Обратите внимание на то, что стили применятся к каждому изображению, на которое пользователь наведет курсор мыши.

bibika · 12-12-2013, 14:23:40

Начните читать отсюда http://htmlbook.ru/css/box-shadow ну и дальше по гуглу. Кроме того на сайте еще нужно сменить цвет текста который размещен на розовом фоне и цвет букв в меню они вообще нечитаемые. Насчет картинок я уже писал,

Denis.m · 12-12-2013, 14:32:47

Цитата: bibika от 12-12-2013, 14:23:40
Начните читать отсюда http://htmlbook.ru/css/box-shadow ну и дальше по гуглу. Кроме того на сайте еще нужно сменить цвет текста который размещен на розовом фоне и цвет букв в меню они вообще нечитаемые. Насчет картинок я уже писал,

Читал, вчера целый день потратил. Но видимо что то упустил, добавляю рамку но она отражается только с двух сторон как ни правь значения. Так же в слайдере картинки, добавляю отражается только с трех сторон, сверху не отражается. Вчера путем подставления кода в браузере пробовал, не получилось.
Подарили замечательную книгу css, осенью, вечером дома читать начну.

bibika · 12-12-2013, 21:36:40

Вы объясните толком, что Вы хотите сделать. Рамки нормально отображаются с четырех сторон, цвет светло-розовый.

Вот взял пример с http://htmlbook.ru/css/box-shadow и вставил через редактор стиля браузера, тень нормально работает.

Denis.m · 12-12-2013, 22:21:10

Ну вот за тень я и говорю, рамка нормально отражается, а тень отбрасывается серая на Вашем скриншоте только в две стороны.
Хочу сделать что бы было так , при наведении курсор на картинку была такая тень

с рамкой самой проблем нет. Посмотрите на странице блок- последние записи

dcversus · 15-12-2013, 11:04:13

Всё очень просто) Задайте такие правила: (border уберите! Он сюда будет не к месту

)
#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 · 15-12-2013, 17:14:19

Цитата: dcversus от 15-12-2013, 11:04:13
Всё очень просто) Задайте такие правила: (border уберите! Он сюда будет не к месту )
#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 нужно отделять от стилей! А у вас огромное количество заплаток итд... в самом шаблоне, даже веб-чёрт ногу там сломит...

Это то понятно, но стили то к шаблону шли.
С нуля верстать совсем не хочется, тем более за шаблон заплачена денежка