Как веб-сообщества, мы сделали много интересных прогресс в отношении CSS3.
Мы поместили свойства, такие как text-shadow & border-radius хорошее применение в то время как вступаем в background-clip и визуальных эффектов, таких как переходов и анимации.Кроме того, мы потратили много времени обсуждали, как и когда для реализации этих свойств.Просто потому, что собственность не является широко поддерживаются браузеры или полностью документированы в данный момент, то это не значит, что мы не должны работать с ним.На самом деле, я бы утверждать, opposite.
Советы и рекомендации по использованию CSS3 должны быть хэшированного в блогах, в свободное время, так и вне клиентских проектов.Далее с творческими и разумный способ получить максимальную отдачу от CSS3 потребует рода экспериментам котором разработчики с удовольствием обменял десять отказов для одного успеха.Сейчас существует огромное количество комбинаций свойств и используется там, ждет своего открытия.Все, что нам нужно сделать, это соединить точки.Это время, чтобы получить ваши руки грязные и инновациям
? С чего начать
Один из моих любимых вещей, чтобы сделать, это просмотреть список свойств CSS и рассмотреть, какие из них могут хорошо работать вместе.Что было бы возможно, если бы я должна была соединить @ шрифт лицу до text-shadow и bg-clip:text собственность?Как я мог натянуть webkit-transition и opacity вместе в творческом пути?Вот несколько результатов экспериментов я сделал в последнее время.В то время как некоторые из них могут быть более практичным, чем другие, цель здесь, чтобы искра творчества и рекомендуем вам подключить несколько точек вашего own.
Примечание: При оперы и Firefox вскоре может осуществлять функции для многих свойств CSS3 найти здесь, некоторые из этих экспериментов в настоящее время работают только в Webkit-браузеры, такие как Google Chrome или Safari.
Пример № 1: CSS3 Transitions
Безопасное место, чтобы начать с CSS3 визуальных эффектов переходит основное свойство CSS, как color background-color, или border наведении курсора мыши.Чтобы пнуть вещи, давайте ссылку цветов CSS собственности и подключить его к 0,4 второй transition.
Начать с вашей ссылкой CSS, в том числе при наведении состоянии:
a { color: #e83119; }
a:hover { color:#0a99ae; }
Сейчас, привести в CSS3, чтобы установить и определить, какие свойства вы переход, длительность перехода и как этот переход будет происходить с течением времени.В этом случае мы устанавливаем цвет свойство исчезать с течением 0,4 секунд ease-out сроки эффект, когда темпы перехода начинается быстро и замедляется с течением времени иссякнут.Чтобы узнать больше о сроках, проверить Safari Surfin ‘Блог сообщению CSS animations.Я предпочитаю ease-out большую часть времени просто потому, что она дает более непосредственный переход, предоставляя пользователям более непосредственный намек, что что-то changing.
a {
-webkit-transition-property: color;
-webkit-transition-duration:.4s;
-webkit-transition-timing:ease-out;
}
Вы также можете объединить их в одно свойство CSS, объявив собственности, продолжительности и сроках функции в таком порядке:
a { -webkit-transition: color .4s ease-out; }
Конечный продукт должен быть красным текстом ссылки, которые тонко переходит в синий, когда пользователи наведении с указателем мыши.Это основной метод перехода может быть подключен к бесконечным количеством свойств.Далее, давайте создадим меню при наведении эффект, когда границы толщиной в сочетании с 0,3 втором transition.
Для начала мы установим ряд ссылок навигации с 3 нижней границы пикселей, и 50 пикселов границы при наведении:
border-nav a { border-bottom: 3px solid #e83119 }
border-nav a:hover { border-bottom: 50px solid #e83119 }
Для приведения перехода в смесь, давайте установим переход постепенно расширить границы толщиной более 0,3 секунды в одну строку CSS:
border-nav a { -webkit-transition: border .3s ease-out; }
Examples
Это лишь один пример того, как использовать эти переходы укрепления связей и элементов навигации.Вот несколько других мест с похожими творческие методы:
Команда ExcellenceПереход на WebKit все элементы навигации, в том числе основной навигации установлена на уровне 0,2 с обеспечивает хороший эффект без посетителей ждать слишком долго для наведения state.
AckernautAckernaut имеет тонкие переходы на все ссылки парит, а также расширяет свойство исчезать заголовка сайта in/out.
SimpleBitsSimpleBits основных переходов навигации по 0,2 секунды с линейной timing.
DesignSwapНа DesignSwap, все текстовые ссылки имеют 0,2 переходах второго при наведении курсора мыши и подкачки профилей исчезать из реального подробности о последних designs.
Jack OsborneДжек Осборн переходы все синие ссылки, а также ссылки на название должности своего дома page.
Eric E. AndersonEric E. Andersion принял CSS3 реализации, даже путем внедрения перехода на его главной навигации для цвета фона и цвета наряду border-radius и box-shadow.
Пример № 2: Фон Clip
При подключении к свойствам, как text-shadow и @ шрифт лицу, background-clip свойство делает все возможное типа.Для простоты, мы начнем с принятия штриховки изображения и маскируя его над текстом.Код здесь довольно проста.Начнем с упаковки некоторых HTML в DIV класс BG-clip:
<div class="bg-clip"> <h3>kablamo!</h3> </div>
Сейчас на CSS.Во-первых, установить изображение, которое будет маскировка текста в качестве фонового изображения.Затем установите -webkit-text-fill-color прозрачным и определить -webkit-background-clip имущество для text.
.bg-clip {
background: url(../img/clipped_image.png) repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Это открывает двери для вас, чтобы начать добавлять текстуру или других графических штрихи к типу, не прибегая к использованию фактических файлов изображений.Для еще большего CSS3 эксперименты текст, мы можем добавить свойство преобразования для поворота текста (или любого элемента на то пошло) на любое количество градусов.Все это занимает одну строку кода CSS:
-webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate (-5deg);
Примечание: При background-clip не доступен в Firefox или Opera, свойство преобразования является, таким образом, мы установим это для каждого browser.
Examples
Это довольно простой реализацией, но есть довольно много действительно интересных и инновационных примеров этой техники:
Trent WaltonОпыт моей собственной, сочетая bg-clip и @ шрифт лицу, чтобы воссоздать последние design.
NeographyПрекрасным примером того, что возможно, когда вы бросаете rotate bg-clip и @ шрифт лицу свойств together.
Нижняя WorksОдним из первых инновационных внедрений вращения текста CSS У меня seen.
Panic BlogПаника блог случайно вращается div с / сообщений.Будьте уверены, чтобы обновить видеть тонкие изменения в степени rotation.
Сэм BrownSam̵ …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров