этот тупой пустой слайд чтобы хром не глючил

CSS3 и HTML5

iforum, Киев, 2010

Зачем HTML5 и CSS3?

Yahoo
Yahoo2

HTML5

Html5support
633496019192752590 Web Standards
Deathstar
Lolbuilder.Aspx

Новое в HTML5

<!DOCTYPE html>

Htmlco
Old
New

App cache

HTML:

<html manifest="manifest.cache"<

manifest.cache

CACHE MANIFEST:
index.html 
stylesheet.css 
images/masthead.png

<CANVAS>

HTML: 
<canvas id="example" width=".." height="..">
CSS: 
canvas{background:url(green.png)}
JS: 
var ctx = document.getElementById('example').getContext('2d');
ctx.fillStyle = "rgb(170,0,0)";
ctx.fillRect(25, 25, 100, 100);

<video> & <audio>

Вот прямо так: 
<video src="video.mov" controls></video>

Сложности с <video>

Ceilingcatcrop

HTML5
vs Flashicon

CSS3

Круглые уголки Firefox Opera Safari Ie

.rounded{
    border:5px solid green;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    border-radius:30px;					
    }

Тени для текста Firefox Opera Safari Ie

 

Простая

Тролололо

CSS:

.block{
  text-shadow:3px 3px 0 #ccc;
  }

.trololo{
  text-shadow:1px 1px 0 #ccc, 
              2px 2px 0 #ccc,
              3px 3px 0 #ccc,
              4px 4px 0 #ccc;
  }

Тень для блока Firefox Opera Safari Ie

Foto

Закат в Санта-Монике

.fotoblock{
    box-shadow:0 0 10px #ccc;
    -webkit-box-shadow: 0 0 10px #ccc;
    -moz-box-shadow: 0 0 10px #ccc;
    filter: ...; /*для IE*/
    }

OBEY!

Любые шрифты Firefox Opera Safari Ie

CSS3 and HTML5


Four makes two, unless you are dead.

@font-face

/*В теории*/
@font-face{
    font-family: 'FontName';
    src: url('FontName.ttf') format('truetype');
    }

/*Живой пример на http://www.fontsquirrel.com/fontface */
@font-face {
    font-family: 'ZendaRegular';
    src: url('zenda.eot');
    src: local('Zenda'), local('Zenda'), 
    url('zenda.woff') format('woff'), 
    url('zenda.ttf') format('truetype'), 
    url('zenda.svg#Zenda') format('svg');
    }

RGBa и opacity Firefox Opera Safari Ie

RGBa

background:rgba(180,0,0, 1)
Amazing
background:rgba(180,0,0, 0.5)
Amazing
background:rgba(180,0,0, 0.1)
Amazing

Opacity

opacity:1
Amazing
opacity:0.5
Amazing
opacity:0.1
Amazing

Колонки текста Firefox Safari 

p{
    column-width: 13em; -webkit-column-width: 13em;
    column-gap: 1em; -webkit-column-gap: 1em;
    }

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Transform Firefox Opera Safari

transform:scale(1.5) rotate(-5deg);
-webkit-transform:scale(1.5) rotate(-5deg);
Foto

Закат в Санта-Монике

Foto

Закат в Санта-Монике

Transition Firefox Opera Safari

div{
    transition:all 1s linear;
    left:0;
    background:#fff;
    }
div:hover{
    left:700px;
    background:#ccc;
    transform:scale(1.5) rotate(10deg);
    }
Foto

Закат в Санта-Монике

Новый способ делать колонки! Firefox Safari

.wrapper{
    display: box;
    box-orient: horizontal;
    box-align: stretch;
    }
			
		
box-flex:0
box-flex:1
box-flex:1
box-flex:2
box-flex:1
box-flex:1

Когда ждать CSS3?

Css3work

Украинские пользователи

IE6-7Ie — 30%
Opera — 26%
Firefox — 24%
IE8Ie — 14%
SafariChrome — 5%

CSS3 - 55%

Progressive enhancement

Tv
Funny Pictures Soon Kitten Will Be A Butterfly

Спасибо!

Юрий Артюх,
twitter.com/akella,
CSSing.org.ua

Wc