xandeadx.ru Блог музицирующего веб-девелопера

CSSКроссбраузерный @font-face

Опубликовано в

Без нудного вступления про бардак в реализации стандартов, хочу поделиться ссылкой на сервис @font-face Kit Generator. Сервис позволяет закачать свой шрифт и с помощью одного клика получить архив, в котором содержится всё для кроссбраузерного подключения закачанного шрифта:

1. шрифт в формате eot для работы в IE 6/7/8
2. шрифт в формате woff для работы в IE9+, FF3.6+, Chrome 5+
3. шрифт в формате ttf
4. шрифт в формате svg для работы в iOS младше 4.2
5. css файл с кроссбраузерной записью @font-face

CSSПрижать футер к низу страницы

Опубликовано в

Наверное самый распространённый способ прижатия футера к низу страницы:

Необходимая разметка:

<body>
    <div class="wrapper">
        Шапка
        Контент
        Колонки
        <div class="footer-push"></div>
    </div>
    <div class="footer">
        Подвал
    </div>
</body>

CSSКак отцентрировать абсолютно спозиционированный элемент с известными размерами

Опубликовано в

Пример центрирования элемента .centered как по вертикали, так и по горизонтали:

<style>
.parent {
    position: relative;
}
.centered {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 60px;
    height: 20px;
}
</style>
 
<div class="parent">
    <div class="centered">Отцентрированный элемент</div>
</div>

Демо.

Полезные статьи: