CSS3 непрозрачный элемент на прозрачном

CSS3 предлагает нам свойство opacity, которое позволяет задать элементу прозрачность. Всё бы хорошо, но все потомки элемента наследуют значение opacity родителя, и переопределить его никак нельзя.

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

Простенький пример

<div id="elementWrap">
<div class="transparent"></div>
<div class="notTransparent">
<span>Lorem ipsum dolor</span>
</div>
</div>

CSS

.transparent{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1000;
background-color: #777777;
opacity: 0.7;
filter: alpha(opacity=70);
}

.notTransparent{
width: 400px;
height: auto;
top: 50%;
position: absolute;
z-index: 1001;
left: 50%;
background-color: #B5B5B5;
border-radius: 15px;
border: solid 3px #4F4F4F;
padding: 10px;
margin: 0 auto;
margin-top: -50px;
margin-left: -200px;
text-align: center;
}

В этом примере прозрачный блок при помощи z-index перекрывает собой всю страницу и таким образом блокирует доступ к всем элементам. Непрозрачный блок выводится поверх прозрачного (у него значение z-index больше).

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

Выравниваем меню по центру

Часто возникает необходимость выровнять меню, представляющее собой список ul li, горизонтально по центру страницы. Ширина меню нам неизвестна, она может изменяться в зависимости от страницы, поэтому задать жесткие отступы - не вариант.

Я поступаю следующим образом.
Заворачиваем наше меню в два div'а.

<div id="menu-wrap">
      <div id="menu">
            <ul>
                  <li></li>
                  <li></li>
                  ...
            </ul>
      </div>
</div>

Верхнему div'у задаем фиксированную ширину. Это максимально возможная ширина нашего меню.

Второму div'у задаем margin-left:50%, а самому списку ul margin-left:-50%.

Для кроссбраузерности обязательно всем трем блокам задаем position:relative, а второму div'у и списку ul float:left