Показать содержимое по тегу: CSS

CCS3: Border-radius

Для одного проекта пришлось наконец плотно заняться CSS3. Предлагаю ряд заметок для начинающих по самым употребимым новшествам.

Первая — про скругление углов блоков. Работает во всех нормальных браузерах, в IE — с версии 9 (на 31.05.2012)

CSS3: Градиенты

Градиент элемента, к счастью, можно даже отобразить в IE, начиная с 7 версии.Задаётся через стандартное свойство background:

CSS3: Text-shadow

Добавляем тени к буквам текста. Пользователи IE до версии 10 читают текст из плоских букв.В сети лежат способы, как добавить тени к тексту через фильтры, но выглядит это ужасно.

Баг overflow:hidden + border-radius в Safari

В Safari, если в дочерний элемент поместить картинку, а родительскому задать border-radius, то картинка будет выезжать за пределы скруглений, даже несмотря на свойство родительского элемента overflow:hidden.
Решение такое. Задать родительскому элементу свойства:

-webkit-transform:translateZ(0);
-webkit-mask-image:-webkit-radial-gradient(circle, white, black);