Как отобразить тени на LI в макете на основе сетки 960? - PullRequest
Новая
       22

Как отобразить тени на LI в макете на основе сетки 960?

3 голосов
/ 25 октября 2011

Я пытаюсь создать страницу со списком продуктов в формате сетки (960.gs). Чтобы соответствовать COMP, мне нужно показать тень на LI, когда пользователь наводит курсор над ним.

Отображение тени при наведении мыши очень просто, но показать, как это происходит в COMP, оказалось трудной задачей, и мне нужна помощь.

Ниже приведен снимок экрана с COMP, который я должен соответствовать.

enter image description here

Цифры от 1 до 10 являются сетками. Я использую UL для создания строк и LI для отображения элементов продукта в строке. 

<!-- loops n times for n rows -->
<UL class="container_10 clearfix">
    <!-- loops 5 times for 5 list items in a row -->
    <LI class="grid_2 product">
        <UL>
            <LI class="prodImg clearfix">...</LI>
            <LI class="prodTitle clearfix">...</LI>
            <LI class="prodPrice clearfix">...</LI>
            <LI class="prodPromo clearfix">...</LI>
            <LI class="prodReviews clearfix">...</LI>
        </UL>
    </LI>
</UL>

Как видно на скриншоте, тень вытекает из макета сетки ... Теперь я понимаю, как включить это здесь.

edit: в соответствии с требованиями проекта мы поддерживаем только современные браузеры, поэтому не беспокойтесь о IE6 или других нежелательных браузерах, мне разрешено использовать CSS3:)

Ответы [ 3 ]

2 голосов
/ 26 октября 2011

Если вы добавите position:relative к своим тегам LI, вы можете добавить в него HTML-элемент, который будет располагаться абсолютно снаружи и помещаться под изображением продукта и информацией.

Если вы хотите избежать добавления другого HTML-элемента, вы можете даже использовать li:after для его добавления. Я не знаю, достаточно ли это ясно, если нет, просто спросите, я постараюсь привести рабочий пример.

1 голос
/ 26 октября 2011

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

CSS:
.product {
  position: relative;
}
.product:after {
  content: '';
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
}
.product:hover:after {
  box-shadow: 0 0 5px #CCC;
}

Объявление .product:after создает элемент вне потокадокумент расположен относительно элемента .product.Объявление .product:hover:after создает тень.Отрегулируйте измерения и т. Д. В соответствии с вашим макетом.

Вот пример: http://jsfiddle.net/blineberry/SMqDx/

0 голосов
/ 26 октября 2011

Не могли бы вы просто использовать box-shadow, чтобы дать вашим коробкам с продуктом тени при наведении курсора? 

.product li:hover{
    box-shadow: 0 0 5px black; /* Whatever size shadow you need */
}

Пример аналогичного кода: http://jsfiddle.net/6zcqZ/

РЕДАКТИРОВАТЬ

Похоже, что вы, возможно, захотите использовать свойство <spread> теней от ящиков, как определено ниже: 

box-shadow: [x-offset] [y-offset] [blur value] [spread value] [color];

Таким образом, вместо вышеприведенного вы можете просто добавить значение спреда , например: 

box-shadow: 0 0 5px 5px black;
...