CSS3 действительно начинает набирать обороты со многими командами, изложенные в CSS3 рабочего проекта поддерживаются Firefox, Safari и Google Chrome. Мы думали, что мы собрали некоторые из наших фаворитов. Прежде чем начать CSS3 браузер команды требуют определенный синтаксис, чтобы они работали.

Для Mozilla Firefox мы должны использовать-МОЗ-префикс, например:

-МОЗ границы радиуса:

А для Safari WebKit-префиксом, например:

-WebKit-границы радиуса:

1. Пограничная радиусом

Радиус CSS3 границы команда создает закругленные углы на элементе. Вместо того чтобы использовать 4 или более изображений, чтобы создать закругленные углы с помощью следующих команд:

/ * Для Mozilla Firefox * /
-МОЗ границы радиуса: 20px;

/ * Для Safari и Google Chrome * /
-WebKit-границы радиус: 20px;
}

2. Коробка тени

Тень может быть применена к элементов, используя CSS3 окно тень команды. Окно тень принимает три числовых значений плюс цвет применить этот эффект. Эти цифры являются:

1. Расстояние горизонтальное смещение тени - положительное значение означает, тень будет приведен к правой и отрицательное значение влево
2. Расстояние вертикальное смещение тени - положительное значение означает тень бросит ниже, а отрицательное значение выше
3. Как размыто вы хотели бы тень

С добавлением значение цвета теней является полным:

/ * Для Mozilla Firefox * /
-МОЗ-поле-тень: 5px 5px 5px # b6ebf7;

/ * Для Safari и Google Chrome * /
-WebKit-поле-тень: 5x 5px 5px # b6ebf7;

3. Прозрачность или RGBA

Прозрачность всегда было сложно. Различные браузеры исторически применяется прозрачность использования различных команд. Продолжая это кросс-браузерный непоследовательность мы добавление новых CSS3 свойство фона RGBA, однако в принципе эта команда более логичным. Команда состоит из 4 значений - первая, вторая и третья красного, зеленого и синего цветов (0-255) соответственно следуют альфа-канал или прозрачности (0-1).

Для команды RGBA браузер конкретных префиксы (-МОЗ-,-WebKit-) не требуется:

# {Box3
фонового цвета: RGBA (110, 142, 185, 0,5);
}

Команда цвет фона добавляет приятный серо-голубой фон на 0,5 или 50% непрозрачности в браузерах, которые понимают свойство CSS3 RGBA.

К сожалению, Internet Explorer, также попытается сделать команду цвет фона, но не понимаю RGBA. Чтобы убедиться, что цвет фона также установить в IE IE только для взлома не требуется. В следующем примере: в прошлом ребенку псевдо селектор, который Internet Explorer не понимает, используется, чтобы исключить его.

тело: последний ребенок # {box3
/ * Исключить все IE браузеров, используя: последний ребенок * /
фонового цвета:! RGBA (110, 142, 185, 0,5) важна;
}

4. Колонны

Возможность добавления столбцов была добавлена ​​в CSS3. Вместо того, чтобы плавающие элементы внутри контейнера мы можем установить номер столбца, ширину и правила:

/ * Для Mozilla Firefox * /
-МОЗ-столбцов фото: 2;
-МОЗ-столбцов пробел: 20px;
-МОЗ-столбцов правило: 1px твердых # 6e8eb9;

/ * Для Safari и Google Chrome * /
-WebKit-столбцов фото: 2;
-WebKit-столбцов пробел: 20px;
-WebKit-столбцов правило: 1px твердых # 6e8eb9;
}

5. Несколько фоновых изображений

Фон изображения всегда была ограничительной, когда речь заходит о CSS связано с тем, Вы можете применить только один фоновое изображение для каждого элемента. Это не случай с CSS3, которая позволяет несколько изображений для каждого элемента просто запятой между ними.

Чтобы поместить изображение на обеих слева и справа от элемента, который вы можете использовать следующие команды, с небольшим стиль:

обивка: 0 20px;
}

Эта команда будет неправильно предоставляемых Internet Explorer, поскольку оно не принимать 2 фоновых изображений для одного элемента. Исключить все хак IE не требуется.

# {Box5 цитаты
/ * Для всех браузерах, просто открытые цитаты * /
Справочная информация: URL (/ я / quotel.gif) 0 0 не повторять;
обивка: 0 20px;
}

тело: последний ребенок # box5 BLOCKQUOTE {
/ * Исключить все IE браузеров, используя: последний ребенок * /
/ * Теперь два изображения * /
Справочная информация: URL (/ я / quotel.gif) не повторять 0 0, ссылка (/ я / quoter.gif) нет-повторяю 100% 0;
}

6. Фон градиенты

Градиенты CSS3 фоне чрезвычайно гибки и могут быть использованы для создания сложных узоров. В самом простом случае градиент CSS позволяет линейного градиента, применяемых к элементу сверху вниз и слева направо.

Этот пример CSS3 градиент в Mozilla Firefox относится голубой градиент в нижней части окна всего 20% от ящики "высота

Safari использует менее интуитивное, но более гибкий подход с использованием цветовых значений остановиться. Примером Safari специальный код следующим образом (отметим линейные входит в скобках, а не снаружи):

# {Box8
Справочная информация:-WebKit-градиент (линейный, левый нижний, левый верхний, цвет-стоп (0, # b6ebf7), цвет-стоп (0,20, # FFF));
}

7. Вращение

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

<code> # {box9
-МОЗ-преобразования: поворот (2DEG);
-WebKit-преобразования: поворот (2DEG);
} </ Код>

8. Контуры

Outilines включены в спецификации CSS3 и позволяют не только границы и схему, чтобы быть применена к одному элементу.

Контур свойства идентична границе команды. Дополнительное смещение собственности однако позволяет границу перенести дальнейшее внутри или вне элемента.

Рубрики: Css по администратора