Чай со спецэффектами

HTML

			<div class="cup">
			    <div class="vessel">
			        <div class="tea">→</div>
			    </div>
			    <div class="handle"></div>
			</div>
			<div class="saucer"></div>

HTML

			<div class="tea">
			    <div class="sugar"></div>
			    <div class="sugar"></div>
			    <div class="bottom"></div>
			</div>

Пример №1

CSS: border-radius

			.vessel {
			    width: 300px;
			    height: 300px;
			    border-radius: 150px;
			    }

Пример №2

CSS: box-shadow

			.vessel {
			    box-shadow:
			        20px 20px 100px
			        rgba( 0, 0, 0, 0.8 );
			    }

Пример №3

CSS: transform и transition

			.sugar {
			    transform:
			        rotate(70deg) translate(-20px, 20px);
			    transition:
			        transform 10s ease-out;

Пример №4

Браузерные префиксы

			.sugar {
			    -webkit-transform: rotate(70deg);
			    -moz-transform: rotate(70deg);
			    -ms-transform: rotate(70deg);
			    -o-transform: rotate(70deg);
			    }

Национальные особенности

			<html lang="en-US">

			BODY:lang(en-US) {
			    background: #519AB8 url(en.png);
			    }

Пример №5

Чай со спецэффектами

Вадим Макеев, Opera Software

Презентация: pepelsbey.net/pres/special-effects-tea