На грани возможного

3D, 2D, анимация и эмоции в веб c помощью CSS

CSS умеет 3D,
анимацию
и вообще…

Но зачем?

Функциональность

Надежность

Удобство

Офигенность

Индивидуальность

Физика

FUN

Баннеры

Сайты

Промо-игры

Баннеры

гомогенность

Скорость загрузки

Стоимость

WEB API

Теперь — банановый

FLASH

Изображение

FLASH

HTML5

Изображение

Ключевые моменты

<a href="http://moo.com/" class="moo-activity"> <section class="outer-wrapper"> <section class="inner-wrapper"> <section class="slogan-1"> <p>One year ago,<br> moo decided to create<br> the finest business cards<br> on the web.</p> <p>they're here.</p> </section> <section class="slogan-2"> <p><strong>LUXE</strong> by moo</p> </section> <p class="bg"></p> </section> </section></a>

Эффект размытия текста

размыто

color:transparent; text-shadow:0 0 30px rgba(255,255,255,0);

четко

color:transparent; text-shadow:0 0 0 rgba(255,255,255,1);

Перспектива

perspective-origin: 50%; perspective: 900px; backface-visibility: visible; http://www.w3.org/TR/css3-3d-transforms/

Трансформации

transform: translate, scale, rotate, skew, perspective, matrix; transform-origin: 50%; transform-style: preserve-3d; http://www.w3.org/TR/css3-2d-transforms/ http://www.w3.org/TR/css3-3d-transforms/

Анимация поворота

@keyframes 'turnaround-part-1'{ from{ transform: translateZ(-600px) rotateX(50deg) rotate(90deg); } to{ transform: translateZ(-600px) rotateX(50deg) rotate(0deg); } }

Анимация появления текста

@keyframes 'see-me'{ 0%{ text-shadow:0 0 30px rgba(255,255,255,0); } 100%{ text-shadow:0 0 0 rgba(255,255,255,1); } }

Применение анимации к элементу

animation-name:'see-me'; animation-duration: 1s; animation-timing-function: ease; animation-delay: 8s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: forwards; http://dev.w3.org/csswg/css3-animations/

Плавная смена состояний

transition-property: all; transition-duration: .3s; transition-timing-function: ease-in; transition-delay: .1s; http://www.w3.org/TR/css3-transitions/

Вопросы

Сайты

Сайт
Сайт
Сайт
Сайт
Сайт
Сайт
Сайт
Сайт
Сайт

edge

Сайт
Сайт
Сайт
Сайт

Ключевые моменты

<a href="#"> <div class="window"> <img src="spoiler/good-2.jpg" alt="Товар" class="illustration"> <p class="price">69 TL</p> </div> <h2 class="title">…</h2> </a>

Поворот по наведению

.catalog-widget .line article .price{ transform:translateZ(-1px) rotateY(180deg); } .catalog-widget .line article:hover .window{ transform: rotateY(180deg); transition: all .4s ease-out; }

Вопросы

Промо-игры

Сайт
Сайт
Сайт
Сайт

Ключевые моменты

<section class="screen navigation-screen"> <div class="turn-wrapper"> <nav class="navigation element"> <a href="#" class="new-game">Game</a> <a href="#" class="rules">Rules</a> <a href="#" class="scores">Scores</a> </nav> <img src="img/star-1.png" class="artifact-1" alt="Звездочка"> <img src="img/star-1.png" class="artifact-2" alt="Звездочка"> <img src="img/pepper-1.png" class="artifact-3" alt="Звездочка"> </div></section>

Позиционируем артефакты

transform: translateZ(150px) scale(.5);

Вызываем кинетоз

gameController.prototype.changeOrigin = function(event){
    var x = event.pageX;
    var y = event.pageY;
    var size = this.viewport();
    var origin = {
        x:Math.round((x/size.width)*60),
        y:Math.round((y/size.height)*60)}
    var currentScreen = $(".navigation-screen");
    $(".turn-wrapper",currentScreen)[0]
    .style[Modernizr.prefixed('transform')] = 
    'rotateY('+(origin.x-30)+'deg) '+
    'rotateX('+(-(origin.y-30))+'deg)';
};

Мягкая деградация

3D и анимация

Транзишены

Скриптинг

Статика

Фильтры

Экспериментируйте

Это того стоит

vcard

Антон Немцев

anton@websaints.net

@silentimp

skype: ravencry

Cкачать

http://goo.gl/XE26h

Посмотреть

http://goo.gl/MycNz