Тени Google в HTML - как это работает?

Question

Недавно в Gmail были добавлены пользовательские кнопки и виджеты меню в формате html. Они уже подсказали , как работает эффект градиента внутри кнопки без изображений.

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

У кого-нибудь есть мысли о том, как это работает?

Answer 1

Не уверен насчет точной реализации Google, но при этом используется похожая / идентичная техника: http://www.sixapart.com/pronet/articles/ydsf_-_robust_c.html

Answer 2

Раскрывающееся меню на самом деле представляет собой таблицу (ужас!), А тени - это их собственные ячейки (нижняя тень - это <tr> с тремя ячейками, по одной на каждый угол и одна на нижний край). Эти ячейки оформлены в CSS, чтобы иметь фон PNG. Углы и нижний край - это спрайты на этом изображении: icons_ns5.png , а справа - спрайт с этого изображения: vimages7.png

Так, например, правый край выглядит примерно так в CSS:

.rightShadowCell {
    background-color: transparent;
    background-image: url(http://mail.google.com/mail/images/2/5/chrome/vimages7.png);
    background-position-x: -12px;
    background-position-y: 0px;
    background-repeat: repeat-y;
}

Safari сообщает мне, что вычисляемый стиль для этой правой теневой ячейки на самом деле:

-webkit-background-clip: border;
-webkit-background-origin: padding;
-webkit-user-select: none;
background-attachment: scroll;
background-color: transparent;
background-image: url(http://mail.google.com/mail/images/2/5/chrome/vimages7.png);
background-repeat: repeat-y;
display: table-cell;
font-family: arial;
height: 18px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
vertical-align: middle;
width: 3px;

Что касается IE 6, я не проверял, но либо они не отображают тени, либо они используют известное исправление для прозрачных PNG в IE 6 от Дрю МакЛеллана .

Answer 3

Вы можете создавать тени с CSS , полупрозрачными изображениями PNG или, что еще лучше, с помощью каркасов, которые выполняют всю тяжелую работу за вас (например, jQuery с соответствующим плагином - модули).