Подключаем нестандартные шрифты. @Font-face для IE 9.

CSS3 позволяет легко и просто подключить нестандартный шрифт с помощью правила @font-face.
Вот так:

@font-face 

{
font-family: "MyFont"; /* Имя шрифта */
src: url(fonts/MyFont.ttf); /* Путь к файлу со шрифтом */
}
 P { font-family: MyFont; }

Для WebKit и Mozilla достаточно этого синтаксиса, но для совместимости с IE придётся повозиться.
Во-первых, IE не поддерживает шрифты в формате .ttf.
Для IE 6-8 версий нужен шрифт в формате .eot, для IE 9 нужен формат .woff.
Поэтому придется переконвертировать наш шрифт в два дополнительных формата, и наш код @font-face будет выглядеть вот так:

@font-face 

{
font-family: "MyFont";
src: url(fonts/MyFont.eot); /* for IE6-8 */
src: local("☺"), url(fonts/MyFont.ttf) format("truetype"), /* for Firefox 3, Safari */
url(fonts/MyFont.woff) format("woff"); /* for IE9 */ 

}

Обратите внимание на смайлик после local.
У меня в IE 9 не работал шрифт с любыми другими символами, кроме этого смайлика.
Подробно об этом чудо-смайлике можно прочесть здесь http://paulirish.com/2010/font-face-gotchas/#smiley

Есть еще одна проблема с woff шрифтом.
IIS 7 не знает такого типа файлов, для него нужно прописать вручную MIME-TYPE, причем тип я указала application/octet-stream , как и для файла .ttf.

IE 6 еще живой?

Обалдеть, неужели кто-то еще серьезно поддерживает IE 6?.. В комментариях к статье по css3 :nth-child селектору возмущаются, что это не работает в IE6. Удивлена. Как они вообще попали на эту статью, да и зачем?.. :)

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 больше).

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

скругляем углы кроссбраузерно

Вопрос, волнующий, наверно, всех начинающих верстальщиков. Как скруглить углы любому элементу веб-страницы кроссбраузерно?

К всеобщему счастью, на данный момент почти все браузеры понимают свойство css3 border-radius. К всеобщему сожалению, нам до сих пор приходится поддерживать IE 7 и 8 версии, которые, понятное дело, таких вещей не понимают. Выход - использовать плагин, который нам поможет.

Я использую PIE. Из всех плагинов, которые я нашла, PIE единственный, который у меня корректно работает. Он, кстати, умеет не только углы скруглять, но и добавлять в IE свойства box-shadow и linear-gradient.

Итак, качаем файл PIE.htc с css3pie.com. В css пишем:

.element {
-moz-border-radius:8px; //для старых версий FF
border-radius:8px; //css3 для всех современных браузеров
behavior:url('PIE.htc'); //путь к файлу PIE.htc для IE 7-8
}

всё :)