После запуска Geek Out мы подумали, что было бы интересно показать, как мы создали некоторые из более красивых эффектов, которые составляли страницу.
Использовались два CSS-эффекта: @font-facetransform: rotate С помощью этих двух стилей CSS вы можете создавать изящные формы.
@font-face Поддержка этого была введена в Internet Explorer 5, Firefox 3.5, Safari 3.1, Opera 10, Chrome 4, и это является частью спецификации CSS2. Сложность, однако, заключается в поддержке формата шрифта. Internet Explorer будет поддерживать только файлы EOT (Embedded OpenType), в то время как Mozilla, Safari, Opera и Chrome с радостью примут шрифт TTF (TypeType).
| браузер | СРВ | TTF | OTF | SVG | Уофф |
|---|---|---|---|---|---|
| Internet Explorer | Икс | X (IE9) | |||
| Браузеры Mozilla | Икс | Икс | Икс | ||
| Сафари | Икс | Икс | Икс | ||
| опера | Икс | Икс | Икс | ||
| Хром | Икс | Икс | Икс |
Как видно из таблицы, поддержка распространяется на четыре формата, но вы можете безопасно обращаться практически ко всем браузерам, просматривающим ваш сайт, используя EOT и TTF. Самый простой способ удовлетворить всех ваших пользователей — использовать синтаксис Bulletproof @ font-face Пола Айриша. Он полагается на то, что вы включаете различные форматы файлов в определенном порядке, так что все браузеры будут использовать только первый формат, который они могут.
@font-face Объявление font-family Все объявления src: url() Не обязательно иметь все форматы файлов, но если они у вас есть, вы можете использовать их. Таким образом, они охватывают максимально возможную долю браузеров и предоставляют лучшие параметры (например, WOFF представляет собой сжатый формат без потерь, поэтому размеры файлов меньше, но сохраняют тот же уровень качества, что и файлы формата TTF / OTF). , У Пола Айриша есть хорошая хитрость: присвоение имени основному набору файлов означает, что вы никогда не будете случайно использовать локальную копию файла (то есть хранящуюся на компьютере пользователя), поэтому вы знаете, что на вашей странице будет использоваться нужный шрифт ,
@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('☺'),
url("GraublauWeb.woff") format("woff"),
url("GraublauWeb.otf") format("opentype"),
url("GraublauWeb.svg#grablau") format("svg");
}
/* Now you can use the font on any element you like. */
h1 {
font-family: 'Graublau Web';
}
Наконец, есть несколько отличных способов получить бесплатные шрифты для использования. Каталог шрифтов Google предлагает небольшой список бесплатных шрифтов (здесь мы использовали шрифт Lobster), а также наборы шрифтов FontSquirrel .
Второй эффект CSS — это стиль transform: rotate Поддержка transform: rotate Как и большинство новых стилей CSS3, они используют соглашение об именах, специфичное для браузера.
-webkit-transform: rotate(-13deg);
-moz-transform: rotate(-13deg);
-o-transform: rotate(-13deg)
Internet Explorer имеет элементарную реализацию с использованием filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); где 0, 1, 2 и 3 повернут применяемый элемент на 0 градусов, 90 градусов, 180 градусов или 270 градусов соответственно.
Итак, если вы вращаете что-то в этих четырех направлениях, вы можете использовать все четыре стиля CSS, чтобы охватить все браузеры, и код будет выглядеть так:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg)
Если, как мы сделали со страницей Geek Out, мы хотим повернуть форму в произвольном направлении (в нашем случае, -13 градусов), Internet Explorer просто должен будет оставить это. IE будет отображать его нормально (без поворота), в то время как другие браузеры будут играть и вращаться хорошо. Чтобы узнать больше об этом, взгляните на статью Джонатона Снука « Поворот текста с помощью CSS» .
Я надеюсь, что это было полезно! Немного забавно поиграть с тем, чтобы снова сделать формы интересными, не так ли?