Что лучше

[Zverushka]

Что лучше создать 2 псевдокласса, чтобы сгенерировать одному из них тень, плюс p h3 тегам блока присвоить z-index или просто добавить одну картинку тени каждому блоку?

Браузер тормозить не станет от лишних псевдоэлементов и такого количества контекстов наложения?

Просто я верстаю лэндинг - тут итак дофига элементов...

Edited September 30, 2013 by Zverushka

[npofopr]

Как то не понятно. Пример может?

Откройте Веб-инспектор да посмотрите, как страница будет грузиться по каждому из вариантов.

[SelenIT]

Псевдоэлемента, наверное? А зачем два? А обычная box-shadow:inset проблему не решит?

Если элементов и так куча, думаю, плюс-минус два бокса, пусть и позиционированных, фатально погоды не сделают, преждевременная оптимизация необязательна. Но, да, можно проверить.

[Zverushka]

Почему два - псевдоэлемент круглый и тень надо спрятать за элементом, а это невозможно и получается мою фигуру видно, поэтому вторым псевдоэлементом я создаю слой, который выглядит как основной элемент - оранжевый квадратик - чтобы он перекрывал круглую фигуру. но тогда надписи пропадают, поэтому надпсиям я ставлю z-index выше )...

[Vlad]

По мне псевдоэлементы лучше.

[Zverushka]

На словах я конечно вам только мозг ломаю.

Вот собственно сам код и сами эти элементы. Правда немного стилями перегружены.

http://jsfiddle.net/JH2jF/

Кстати тут z-index: -1 работает. а в коде нет... Элемент исчезает...

Edited October 1, 2013 by Zverushka

[npofopr]

А зачем .list-garants li:before ?

У :after z-index: -1; не срабатывает?

[Viper]

На словах я конечно вам только мозг ломаю.

Вот собственно сам код и сами эти элементы. Правда немного стилями перегружены.

http://jsfiddle.net/JH2jF/

По данному примеру дать совет сложно. И уж точно не определить какой вариант будет более производителен и оправдан на конкретном проекте/сайте. Для каждого случая бывает по разному, исходя из сложности дизайна/UI, требований/желаний заказчика/руководителя и ожидаемой нагрузки.

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

СSS3 тени в данном случае увеличивают количество ДОМ элементов на 1, обьем таблицы стилей и что, как по мне, единственно важное - требуют больше рессурсов при рендеринге(больше тень/размытие - дольше отрысовка), что может сказаться при анимациях на сайте или скроллинге.

В итоге: изображения улучшают быстродействие, но замедляют загрузку страницы и часто усложняют поддержку(зависит от проекта). CSS3 ускоряют загрузку страницы и отлично отображаються на всех видах экранов(например, retina), но при этом плохо(иногда, очень) сказываються на быстродейтсвии.

Что выбирать в итоге, решать исключительно Вам. Разница между этими техниками в производительности, в большинстве случаев, относительно мала. И обе эти техники имеют право на жизни в зависимости от условий, ИМХО.

Edited October 1, 2013 by Viper

[SelenIT]

Кстати тут z-index: -1 работает. а в коде нет...

Opacity или transform там не вмешиваются? Эти вещи тоже создают stacking context-ы.

А так-то пример, имхо, вполне можно упростить до http://jsfiddle.net/JH2jF/1/ (IE8 всё равно неактуален — он тени и скругления не умеет, а в IE9+ норм).

[Zverushka]

На самом деле там ничего такого я не вижу...

Вот посмотрите http://vtest.uphero.com/9%20landing/

Можно через какой-нибудь дебаггер, вроде firebug изменить для этого блока (3 оранжевых квадратика) z-index на -1 - и тень исчезает. Боди - белый фон, блок6 - белый фон.

Мне то уже это не важно, сайт сдан, но непонимание не сходит с моего лица ).

Edited October 1, 2013 by Zverushka

[SelenIT]

Если создать stacking context в блоке6 (position: relative; z-index: 1), то -1 у псевдиков заработает. Без этого stacking context создается где-то выше и у непозиционированного контента (в т.ч. блок6 с белым фоном) z-index «как бы 0».