Вызов принят
История одного проекта

Анна Селезнёва

Вызов принят

История одного проекта

rdcm.com
Web Standards Days

Зачем?

Для разработчика

Для заказчика

приобретённого сайта

Известность

Legendary

Авторы

RD Construction

CreativePeople

Постановка задачи

Вызов принят!

3D 

.scene { perspective: px; }
.scene { perspective: px; }
.scene { perspective: 200px; }
.cube { position:relative; width: 50px; height: 50px;
		transform-style: preserve-3d; }
.side { position: absolute; ... }
HTML: 
<div class="scene">
	<div class="cube">
		<div class="side back"></div><div class="side left"></div>
		<div class="side right"></div><div class="side top"></div>
		<div class="side bottom"></div><div class="side front"></div>
	</div>
</div>

.back { transform: translateZ(-25px); }
.left { transform: translateX(-25px)
		rotateY(90deg); }
.right { transform: translateX(25px)
		rotateY(90deg); }
.top { transform: translateY(-25px)
		rotateX(90deg); }
.bottom { transform: translateY(25px)
		rotateX(90deg); }
.front { transform: translateZ(25px); }
.cube { transform: rotateX(42deg); }
BACK
TOP
BOTTOM
FRONT
.back { transform: translateZ(-25px) rotateX(180deg); }
.bottom { transform: translateY(25px) rotateX(270deg); }
FRONT
FRONT
FRONT
FRONT
.cube { transform:translateZ(-25px); }
BACK
TOP
BOTTOM
FRONT
Internet Explorer

Почему?

Почему?

http://caniuse.com/#feat=transforms3d http://caniuse.com/#feat=transforms3d

transform-origin

FRONT
.scene {}
.cube {
	position:relative; width: 50px; height: 50px;
	transform: perspective(200px) translateZ(-25px);
}
.side {
	position: absolute; ... 
	transform-origin:50% 50% -25px;
	backface-visibility:hidden;
}

Волшебство

FRONT
 


.back   { transform: perspective(200px) rotateY(180deg); }


.top    { transform: perspective(200px) rotateX(90deg);}


.bottom { transform: perspective(200px) rotateX(-90deg); }


.front  { transform: perspective(200px); }
BACK
TOP
BOTTOM
FRONT
Google Chrome

Дайте два!

BACK
TOP
BOTTOM
FRONT
BACK
TOP
BOTTOM
FRONT

Modernizr

var element = document.createElement('p');document.body.insertBefore(element, null);var propName = 'transform-style';if ('webkitTransformStyle' in document.documentElement.style) 
	propName = '-webkit-'+propName;element.style[propName] = 'preserve-3d';var propValue = window.getComputedStyle(element, null)
	.getPropertyValue(propName);document.body.removeChild(element);return (propValue === 'preserve-3d');

if (?)

Ротатор

BACK
TOP
BOTTOM
FRONT
Mozilla Firefox
Mozilla Firefox 
transform:translateZ(125px) scale(.5);
BACK
TOP
BOTTOM
FRONT

Параллакс

Решение

sin cos

Размытие

ios blur ios blur ios blur

filter: blur(10px)

Graceful degradation

SVG filter

y2u.be/RJnYkbm66ZI

<filter id="blur">
	<feGaussianBlur stddeviation="10" />
</filter>
<svg>
	<filter id="blur">
		<feGaussianBlur stddeviation="10" />
	</filter>
	<image filter="url(#blur)" 
		xlink:href="image.jpg" 
		width="200" height="200">
	</image>
</svg>
background-size: cover
svg > image
			<svg width="100%" height="125%">
	<g filter="url(#blur)">
		<rect x="0" y="0" width="100%" height="100%" 
			fill="#F2F3F5"></rect>
		<image width="100%" height="80%" 
			xlink:href="image.jpg"></image>
	</g>
</svg>

Леген ... дарно

Загрузка картинок

Способы:

Действия сервера

В 404 раза меньше!

Анонс

backdrop-filter: blur(10px)

Итоги

rdcm.com

rdcm.com/404

Спасибо!

Презентация создана с помощью shwr.me Shower