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
6. демо страница с примером подключения шрифта и инструкцией

Комментарии (4)

CSS → Как отцентрировать элемент с фиксированными размерами

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

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

<style>
.parent {
    position: relative;
}
 
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 20px;
    margin-left: -30px; /* width/2 */
    margin-top: -10px; /* height/2 */
}
</style>
 
<div class="parent">
    <div class="centered">Отцентрированный элемент</div>
</div>

Демо.

Комментарии (9)

CSS → border-radius, box-shadow и linear-gradient в Internet Explorer 6+

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

Нашёл костыль под IE 6-8, который позволяет использовать CSS3 правила border-radius, box-shadow и linear-gradient без написания лишней разметки и магии с javascript-ом. Называется чудо CSS3 PIE.

CSS3 PIE в действии

Читать дальше → | Комментарии (9)

CSS → Эмуляция box-shadow в IE6+ с помощью фильтра

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

IE вплоть до 8-ой версии не поддерживает свойство box-shadow, которое предназначено для создания тени. Но есть способ получить нечто похожее на тень, с помощью фильтра DXImageTransform.Microsoft.Shadow:

box-shadow

Читать дальше → | Комментарии (2)

CSS → Стилизуем поля под Mac с помощью CSS3 свойства border-image

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

Пример того, как с помощью пары строчек CSS кода можно сделать вот такие Mac-оподобные поля ввода, которые так часто мелькают в видеокастах западных девелоперов :)

Скриншот поля ввода
Увеличенный скриншот

Читать дальше → | Комментарии (3)

CSS → Селекторы по атрибутам

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

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

E[foo]

Элемент E с существующим атрибутом foo.

a[title] { color:red; }

<a>Link 1</a>
<a title="Title">Link 2</a>
<a>Link 3</a>

Читать дальше → | Комментарии (0)