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

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>

Демо.

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

CSSborder-radius, box-shadow и linear-gradient в Internet Explorer 6+

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

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

CSS3 PIE в действии

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

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

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

box-shadow

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

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

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

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

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>